An optimistic campaign language for helping a small team connect audience, content, automation, and reporting into the next send.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
An optimistic campaign language for helping a small team connect audience, content, automation, and reporting into the next send.
Friendly yellow-led growth, warm editorial typography, and clear defaults that m themeTypography
Graphik Web
Primary navigation, controls, product UI, and explanatory body copy.
Graphik Web, Helvetica Neue, Helvetica, Arial, sans-serifFallback: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif
Means Web
Editorial display headlines and human campaign storytelling.
Means Web, Georgia, Times New Roman, serifFallback: Georgia, Times New Roman, serif
Source Code Pro
Developer, integration, and technical metadata cues.
Source Code Pro, Consolas, Lucida Console, Courier, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Canvas light
#fffdf6Primary light page or work field
Canvas dark
#1a1913Primary dark page or work field
Surface light
#ffffffRaised content surface in light mode
Surface dark
#242218Raised content surface in dark mode
Border
#e9e0c3Low-contrast separation and control edges
Ink
#211c16Primary text and interface content
Muted ink
#746b5cSupporting copy and metadata
Accent
#f4bd1bPrimary action, selection, or brand signal
Accent strong
#b18100Pressed and high-contrast action state
Accent soft
#fff2b8Tinted selection or supporting surface
Secondary signal
#4f9e7bCollaboration, health, or growth cue
Tertiary signal
#e77d64Human, warm, or threat cue
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 76px / 44px mobile | 300–400 | 0.96 / 1.05 | -0.055em |
| Section | 52px / 36px mobile | 300–400 | 1 / 1.08 | -0.045em |
| Card | 24px / 21px mobile | 500 | 1.15 | -0.025em |
| Body large | 20px / 18px mobile | 400 | 1.45 | -0.01em |
| Body | 16px / 15px mobile | 400 | 1.5 | 0 |
| Label | 12px | 600 | 1.2 | 0.06em |
Spacing & shape
Iconography
Keep icons warm and legible, use currentColor where possible, and never use an icon without a text label for campaign status or send actions. Pack marks are original CSS geometry.
System metrics
Radius
Spacing
Motion
Elevation
Campaign card
0 12px 30px rgba(77,62,20,.10)Lift one recommended campaign action
Action group
0 5px 14px rgba(77,62,20,.12)Give the send CTA a little optimism without gloss
Surfaces & shape
Warm page
#fffdf6Approachable marketing field
Yellow panel
#f7f0d9Campaign grouping and recommendation
Ink
#211c16Primary copy
Marmalade
#f4bd1bOptimistic action and progress
Guidelines
Imagery
Use CSS-built email thumbnails, audience chips, small charts, campaign status, and abstract illustration fields. Avoid Mailchimp logos, copied templates, real customer imagery, proprietary illustrations, or downloaded assets. Make visuals explain campaign setup, content, audience, automation, or measurement.
Layout
Use friendly editorial navigation and a yellow-led hero, then sequence email/SMS, AI tools, automations, content, audiences, reporting, integrations, personalization, and plans. Keep campaign specimens focused on one setup decision or one result. At 760px and below, stack cards, keep CTA labels explicit, and allow tables/charts to scroll inside their own labelled region rather than creating page overflow.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
17 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.