EASTEAM Brand Bible — UI Components
The button
system.
system.
Every button EASTEAM uses — from hero CTAs to text links. Sizes, states, colors, copy rules, and usage context for dark and light backgrounds.
01 — Button Types
Four types.
Clear hierarchy.
Each button type serves a specific role in the visual hierarchy. Primary draws the eye, Secondary offers alternatives, Accent highlights campaigns, and Ghost is for quiet navigation.
Primary — The main action
On dark background
On light background
Secondary — The alternative action
On dark background
On light background
Accent — Campaign & highlight
On dark background
Ghost — Quiet navigation
On dark background
02 — Button Sizes
Four sizes.
One system.
Sizes are tied to context, not preference. Each size has a defined use case.
Hero CTAs
Product pages
Cards · Inline
Tags · Filters
| Size | Font | Padding | Context |
|---|---|---|---|
| Large | Jost 500 · 11px · 0.12em | 16px 32px | Homepage hero, campaign landing pages, checkout |
| Medium | Jost 500 · 10px · 0.12em | 13px 26px | Product pages, email CTAs, collection pages |
| Small | Jost 500 · 9px · 0.12em | 10px 20px | Product cards, inline actions, mobile CTAs |
| X-Small | Jost 500 · 8px · 0.1em | 8px 16px | Filter tags, size selectors, quick actions |
03 — Full Matrix
Every combination
at a glance.
The complete button matrix — type × size × context. Use this as a quick reference when building any EASTEAM page.
Dark context · All types × sizes
Large
Medium
Small
X-Small
Primary
Secondary
Accent
Light context · Primary & Secondary
04 — Button Copy Rules
What the button
says matters.
Button copy follows strict rules. Every word on a button is a micro-commitment — it must be clear, confident, and never desperate.
Always uppercase
All button text is uppercase with letter-spacing 0.12em. This is non-negotiable — it creates the visual authority the button needs to feel like an action, not a suggestion.
Maximum 3 words
Ideal: 2 words. Maximum: 3 words. "Shop Now" · "Add to Cart" · "View Collection" · "Watch the Film." If it needs more than 3 words, it's a link, not a button.
Action verb first
Every button starts with a verb: Shop, View, Add, Explore, Watch, Read, Discover. Never start with a noun or adjective. The button tells her what she will do, not what she will get.
Never use urgency
"Buy Now" implies pressure. "Shop Now" implies invitation. "Get Yours Before They're Gone" is banned entirely. EASTEAM buttons are confident, not desperate. She'll click when she's ready.
Approved button copy
Banned button copy
Never use these
"BUY NOW" · "GET YOURS" · "GRAB IT" · "DON'T MISS OUT" · "LIMITED TIME" · "ACT NOW" · "CLAIM YOUR" · "ORDER TODAY" · "YES, I WANT THIS!" · "SIGN ME UP!" · Any copy with exclamation marks
Use these instead
"SHOP NOW" · "ADD TO CART" · "VIEW COLLECTION" · "EXPLORE" · "DISCOVER" · "CONTINUE" · "LEARN MORE" · "READ MORE" · "SHOP THE COLLECTION" · "WATCH THE FILM" · Calm, confident invitation
05 — Design Tokens
For developers
and designers.
Complete token reference for implementing the button system consistently across web, email, and any future platform.
| Token | Value | Use |
|---|---|---|
--btn-font | Jost, sans-serif | All button text |
--btn-weight | 500 | Medium weight only |
--btn-spacing | 0.12em | Letter spacing (0.1em for XS) |
--btn-transform | uppercase | Always uppercase |
--btn-radius | 3px | Subtle rounding — not pill, not sharp |
--btn-transition | all 0.2s ease | Smooth state transitions |
--btn-primary-bg | #F2D8DB | Primary fill on dark |
--btn-primary-text | #0A0A0A | Primary text on dark |
--btn-primary-hover | #D89AA4 | Primary hover fill |
--btn-primary-active | #864048 | Primary pressed fill |
--btn-secondary-border | #404040 | Secondary default border |
--btn-secondary-hover | #D89AA4 | Secondary hover border + text |
--btn-accent-bg | #D89AA4 | Accent fill |
--btn-disabled-bg | #2E2E2E | Disabled fill |
--btn-disabled-text | #5A504B | Disabled text |
06 — Usage Rules
When and where
each button lives.
One Primary per view
Never place two Primary buttons in the same visible area. If there are two actions, one must be Secondary. The hierarchy tells her where to go first — competing Primaries create paralysis.
Accent is for campaigns only
The Dusty Rose Accent button is reserved for campaign hero CTAs, homepage features, and promotional moments. Never use it on product pages or in navigation. Its power comes from rarity.
Full-width on mobile only
Buttons go full-width (100%) on mobile screens under 480px — but only for Primary and Accent. Secondary buttons remain auto-width on mobile. This prevents the page from looking like a wall of buttons.
Minimum touch target: 44px
Even XS buttons must have at least 44px of touch height on mobile. Add padding if needed. Accessibility is not optional — a frustrated tap is a lost customer.
No icons in buttons
EASTEAM buttons are text-only. No cart icons, no arrows, no sparkles. The text does the work. The only exception: a subtle arrow (→) appended to Ghost links for directional clarity.
Spacing between button pairs
Primary + Secondary pairs: 12px gap. Stack vertically on mobile with Primary on top. Never place more than two buttons side by side — if there are three actions, one becomes a Ghost link below.