Pencil Design Template

Use this template with Pencil to design on-brand Frequency interfaces with AI assistance.

Quick Start

Copy the context below and paste it when starting a new Pencil design session.

frequency-pencil-template.md

# Frequency Design System for Pencil

## Brand Identity
Company: Frequency - Audio advertising technology platform
Style: Modern, professional, approachable
Primary feel: Clean, innovative, trustworthy

## Color Tokens (10-shade palette, main at index 5)
--primary: #169BDE (blue[5])
--primary-light: #45B2E1 (blue[3])
--primary-dark: #0B5A8C (blue[7])
--secondary: #7E57C2 (violet[5])
--secondary-light: #B89DDA (violet[2])
--secondary-dark: #442E6F (violet[7])
--error: #E63459 (red[5])
--warning: #E79E26 (yellow[5])
--success: #5AB267 (green[5])
--text-primary: #383838
--text-secondary: #808080
--text-disabled: #CCCCCC
--background-light: #FFFFFF
--background-dark: #1A1A1A

## Full Palette Colors
Blue, Violet, Red, Green, Yellow, Orange, Cyan, Pink, Indigo, Gray
Each with 10 shades (0=lightest, 9=darkest, 5=main)

## Typography
Headings: Montserrat, weight 600-700, letter-spacing -1px
Body: Source Sans 3, weight 400-600
Display: 60px, H1: 48px, H2: 36px, H3: 24px, H4: 20px
Body: 16px, Small: 14px, Caption: 12px

## Spacing (8px grid)
xs: 8px, sm: 12px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px

## Border Radius
xs: 4px, sm: 6px, md: 8px, lg: 12px, xl: 16px

## Shadows
sm: 0 1px 3px rgba(0,0,0,0.1)
md: 0 4px 6px rgba(0,0,0,0.1)
lg: 0 10px 15px rgba(0,0,0,0.1)

## Component Patterns
- Buttons: Rounded (md radius), bold text, primary color for CTAs
- Cards: lg radius, sm shadow, 16-24px padding
- Inputs: md radius, 1px border, clear focus ring
- Gradients: linear-gradient(135deg, #169BDE, #7E57C2)

## Design Principles
1. Clarity over complexity - generous whitespace
2. Consistency - reuse patterns and components
3. Accessibility - 4.5:1 contrast minimum
4. Purpose-driven motion - subtle, functional animations

## Voice for UI Copy
- Clear and direct, avoid jargon
- Sentence case for buttons ("Get started")
- Human and helpful error messages

How to Use

1. Start a New Design

Open Pencil and create a new design file. When Claude asks what you’re building, include the template above in your prompt.

2. Example Prompts

Dashboard design:

[Paste the Frequency template above]

Design a dashboard for audio campaign analytics with:
- Sidebar navigation
- KPI cards showing impressions, clicks, conversions
- Line chart for performance over time
- Recent campaigns table

Marketing page:

[Paste the Frequency template above]

Design a landing page hero section for Frequency with:
- Headline: "Audio advertising, simplified"
- Subheadline about the platform benefits
- Primary CTA button
- Secondary link
- Abstract audio wave illustration

Form design:

[Paste the Frequency template above]

Design a campaign creation form with:
- Campaign name input
- Date range picker
- Budget input with currency
- Target audience multi-select
- Submit and cancel buttons

Design File Location

Store your Pencil design files in the /designs directory of this repository for version control and team collaboration.

frequency-brand-guidelines/
└── designs/
    ├── frequency-brand.pen    (colors, typography, spacing reference)
    ├── dashboard.pen
    ├── marketing-pages.pen
    └── components.pen

Tips for Pencil

Be specific - Include exact dimensions, colors, and copy when you have them
Reference the template - Pencil will use the tokens consistently
Iterate - Ask for variations and refinements
Export - Use Pencil’s code export for implementation

Mantine Theme AI Context