Marketing tools that turn audience signals into revenue.

A brand preview for a warm editorial system: big serif confidence, compact product utility, flat comparison surfaces, and unmistakable Cavendish Yellow actions.

28Colors
12Type Levels
18Components
65Tokens
01 / Colors

Cavendish, Peppercorn, and produce surfaces

primary#FFE01B

CTA fill and highlight punctuation.

ink#231E15

Main text, strokes, dark bands.

accent#007C89

Secondary teal utility accent.

jasmine#F5F5F5

Quiet alternate surface.

cornflower#D2EBFF

Soft info/product surface.

cucumber#EDFFCC

Gentle growth surface.

radish#FFCCD8

Campaign variation surface.

squash#EBE1CD

Warm support background.

plum#B42855

Rich campaign field.

error#A73205

Validation and error borders.

02 / Typography

Editorial serif, practical UI sans

Grow with your audience
Display — 64px / 400 / 1.13 / -0.0625rem / Fraunces
Email and SMS without the busywork
Hero — 64px / 400 / 1.20 / -0.075rem / Fraunces
Recommended for your business
Headline-lg — 48px / 400 / 1.00 / -0.0625rem / Fraunces
Connect every customer touchpoint
Title-lg — 40px / 400 / 1.20 / -0.03125rem / Fraunces
Up to four times more orders
Title-md — 32px / 400 / 1.25 / 0 / Fraunces
Automation builder row
Title-sm — 24px / 400 / 1.33 / -0.02rem / Inter
Use audience insights, segmentation, and automations to send the right message at the right moment.
Body — 16px / 400 / 1.75 / 0 / Inter
NAVIGATION LABEL
Label/Button — 13px / 500 / 1.25 / 0 / Inter
$20
Pricing-display — 52px / 400 / 1.00 / -0.0625rem / Fraunces
03 / Buttons

Pill actions with tactile depth

button-primary
button-primary-raised
button-secondary
link-highlight/ghost
secondary-on-dark
button-arrow
icon round
04 / Cards & Surfaces

Flat cards, warm bands, rounded media

Flat plan card

Border-led utility card with no decorative elevation.

Editorial story

Rounded media-style container for campaign storytelling.

Dark feature

High contrast Peppercorn surface with white text.

Yellow emphasis

Use sparingly for action-heavy panels.

Squash support

Warm beige support surface for calmer modules.

Plum campaign

Rich seasonal palette with cream contrast.

05 / Brand-Specific Product Patterns

Marketing platform modules

Automation journey

✉SMS✓

Trigger, message, and conversion path.

Audience segment grid

NameStatusScore
AdaVIP92
NoahNew61

Campaign metric

127%

Lift in orders from automated emails.

Email template

Sale starts now

Plan selector

0-500 contactsStandardMonthly

Assistant toolbar

Ask about this campaign

Rounded product assistant surface.

06 / Forms

Squared controls with focus rings

Enter a valid email address.

07 / Spacing

Compact controls, generous bands

xs 4px
sm 8px
md 16px
lg 24px
xl 40px
xxl 64px
section 80px
08 / Radius

Tiny UI radius, generous media radius

4px

nav/items

8px

flat cards

16px

assistant expanded

26px

media/editorial

pill

CTAs/badges

09 / Elevation

Flat by default, tactile on action

This brand uses flat surfaces. Depth comes from color contrast, borders, and CTA bottom-depth, not soft shadows.

Flat surface
shadow: none
CTA outline
0 0 0 1px
Raised CTA
0 6px 0
Badge exception
subtle
10 / Extracted Component Tokens

CSS custom properties

:root {
  --brand-primary: #FFE01B;
  --brand-ink: #231E15;
  --brand-accent: #007C89;
  --brand-surface-alt: #F5F5F5;
  --brand-border-strong: #BCBAB8;
  --font-display: Fraunces, Georgia, serif;
  --font-ui: Inter, Helvetica Neue, Arial, sans-serif;
  --radius-image: 26px;
  --radius-pill: 9999px;
  --space-section: 80px;
  --shadow-button: 0 0 0 1px #231E15;
  --shadow-button-raised: 0 0 0 1px #231E15, 0 6px 0 0 #231E15;
}