White-Label Design System v1.0

A style guide built to be yours

Every brand token is swappable. Change 10 CSS variables and the entire system rebrands - colors, fonts, shadows, everything downstream cascades automatically.

Display Font: Georgia (system)
Body Font: system-ui stack
Mono Font: ui-monospace stack
Primary: BrightBean Orange
CSS Framework: Tailwind CSS

🏷️

White-label ready. Every brand-dependent value flows from the --brand-* CSS variable block. To rebrand, swap only those tokens - all semantic and component tokens inherit automatically. Fonts are also brand tokens.

00 - Architecture

Token Layering

Three-layer token architecture. White-label clients only touch Layer 1. Everything else cascades.

Brand Tokens

--brand-500, --brand-font-body
Swap these to rebrand

→

Semantic Tokens

--primary, --text-primary
Reference brand tokens

→

Component Tokens

btn-primary, card hover
Reference semantic tokens

Example: Rebranding to a blue theme

/* Only change this block to rebrand the entire app */
--brand-50:  #EFF6FF;    /* tw: blue-50  */
--brand-100: #DBEAFE;    /* tw: blue-100 */
--brand-200: #BFDBFE;    /* tw: blue-200 */
--brand-500: #3B82F6;    /* tw: blue-500 - new PRIMARY */
--brand-600: #2563EB;    /* tw: blue-600 */
--brand-700: #1D4ED8;    /* tw: blue-700 */
--brand-font-display: 'Palatino Linotype', Palatino, serif;

01 - Color

Palette

Warm stone neutrals paired with BrightBean orange. Accent colors are fixed across white-label instances - they serve status and data viz, not brand identity.

Brand Scale (white-label swappable)

orange-50

100

orange-100

200

orange-200

300

orange-300

400

orange-400

500 ★

orange-500

600

orange-600

700

orange-700

800

orange-800

900

orange-900

Neutrals (stone - warm-tinted grays)

950

stone-950

900

stone-900

700

stone-700

500

stone-500

300

stone-300

200

stone-200

100

stone-100

stone-50

Status & Accents (fixed across white-label)

Success

green-500

Warning

yellow-500

Error

red-500

Info

blue-500

Teal

teal-500

Indigo

indigo-500

Rose

rose-500

02 - Typography

Type System

Zero external downloads. Georgia provides serif warmth for display text. The system-ui stack handles all UI and body text. ui-monospace covers data and code. All are white-label swappable via brand tokens.

Georgia

Georgia, 'Times New Roman', serif

Page titles, hero headings, metric callouts. Swappable via --brand-font-display.

Schedule your story, beautifully.

system-ui

system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

Body text, buttons, labels, nav, forms. Renders as SF Pro on macOS, Segoe UI on Windows, Roboto on Android.

Create, schedule, and publish content across all your platforms from a single dashboard. Track engagement in real-time and let AI suggest the perfect posting window for your audience.

ui-monospace

ui-monospace, SFMono-Regular, Consolas, monospace

Data tables, timestamps, metrics, tokens, code. Renders as SF Mono on macOS, Cascadia/Consolas on Windows.

engagement_rate: 4.8% impressions: 12,847 scheduled: 2026-03-25T14:00Z

TokenSizeTailwindUsage

xs12pxtext-xsOverlines, hints, fine print

sm14pxtext-smLabels, secondary text, compact UI

base15pxtext-baseDefault body, paragraphs

lg18pxtext-lgLead text, card titles

xl20pxtext-xlSub-headings, drawer titles

2xl24pxtext-2xlSection headings

3xl30pxtext-3xlPage titles

4xl+36–48pxtext-4xlHero display

03 - Foundations

Spacing, Radius & Elevation

4px base grid. Tailwind's native spacing scale. Pill radii for actions, softer rounding for containers. Shadows use warm-tinted blacks.

Spacing Scale

4pxp-1

8pxp-2

12pxp-3

16pxp-4

24pxp-6

32pxp-8

48pxp-12

64pxp-16

Border Radius

4px
rounded

6px
rounded-md

8px
rounded-lg

12px
rounded-xl

16px
rounded-2xl

pill
rounded-full

Elevation

xs
shadow-xs

sm
shadow-sm

md
shadow-md

lg
shadow-lg

04 - Components

Buttons

Pill-shaped with generous horizontal padding. Primary gets a brand-colored glow shadow. All transitions use the ease-out curve.

Variants

bg-orange-500 text-white rounded-full px-6 py-2.5 font-semibold shadow-[0_4px_14px_rgba(249,115,22,0.28)]

Sizes

With Icons

05 - Components

Forms, Badges & Avatars

Inputs use the brand color for focus rings - this automatically rebrands. Error states always use the fixed red-500 regardless of brand.

Post caption Supports hashtags and @mentions

Schedule time

Campaign tag ⚠ Tags cannot contain special characters

focus:ring-2 focus:ring-orange-200 focus:border-orange-500

Badges

Scheduled Published Draft Failed In Review Trending

Avatars

Avatar Stack

06 - Patterns

Cards & Post Preview

Cards lift on hover with a shadow bloom and transparent border - the same "reveal" interaction used by Sprout Social and Linear. Metric callouts use the display serif for editorial weight.

📊

+12%

Total Reach

148.2K

↑ 12.4% from last week

🔥

Hot

Engagement Rate

4.82%

↑ 0.7% from last week

📅

Pending

Scheduled Posts

Next up in 2 hours

Post Preview Card

Social Suite

@socialsuite · Scheduled for 2:00 PM

𝕏

Just shipped our new AI-powered scheduling engine - it learns your audience's habits and finds the perfect window. 🚀

Early results: 23% more engagement on average.

📸 Image preview

♡ 0 ↻ 0 💬 0 ✏️ Edit

07 - Feedback

Toasts

Status-colored tinted backgrounds with matching borders. These use the fixed semantic palette - they never change with white-label branding.

✓ Post published to 3 platforms

⚠ Image exceeds Twitter's recommended size

✕ Failed to connect Instagram - re-auth required

ℹ Best posting time today: 2:00 PM

08 - Navigation

Sidebar Pattern

Vertical nav with icon + label. Active state uses the brand-soft background with brand-700 text - this auto-rebrands. Notification badges always use error red.

Social Suite

🏠 Dashboard

✏️ Compose

📅 Calendar

📥 Inbox 5

Analytics

📊 Performance

👥 Audience

Settings

🔗 Connections

⚙️ Preferences

09 - Motion

Transitions & Curves

Two curves: ease-out for standard interactions, spring for playful moments. Hover these boxes.

↑
ease-out

⊕
spring

↻
rotate

Timing Tokens

--dur-fast : 150ms - focus rings, color swaps

--dur-base : 200ms - card hovers, buttons tw: duration-200

--dur-slow : 350ms - page transitions, modals

--ease-out : cubic-bezier(0.16, 1, 0.3, 1)

--ease-spring : cubic-bezier(0.34, 1.56, 0.64, 1)

10 - Reference

Tailwind Class Mapping

How CSS variable tokens map to Tailwind utility classes. Extend your tailwind.config.js to expose the brand tokens as custom colors.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--brand-50)',
          100: 'var(--brand-100)',
          200: 'var(--brand-200)',
          500: 'var(--brand-500)',
          600: 'var(--brand-600)',
          700: 'var(--brand-700)',
        },
      },
      fontFamily: {
        display: 'var(--font-display)',
        body:    'var(--font-body)',
        mono:    'var(--font-mono)',
      },
    },
  },
}

Purpose	CSS Variable	Tailwind Class
Primary button bg	var(--primary)	bg-brand-500
Primary hover	var(--primary-hover)	hover:bg-brand-600
Soft background	var(--primary-soft)	bg-brand-50
Focus ring	var(--primary-ring)	ring-brand-200
Text on brand bg	var(--text-inverse)	text-white
Body text	var(--text-primary)	text-stone-900
Secondary text	var(--text-secondary)	text-stone-600
Muted text	var(--text-tertiary)	text-stone-500
Page background	var(--surface-1)	bg-stone-50
Card background	var(--surface-0)	bg-white
Border	var(--border)	border-stone-200

11 - Principles

Design Guidelines

Rules that keep the system coherent across white-label instances.

✓ Brand tokens only for identity

Only use --brand-* for elements that represent the client's identity: primary buttons, active nav states, logo marks, focus rings. Status colors (red/green/yellow/blue) are fixed.

✕ Don't brand status indicators

Error states, success messages, and warnings must always use the fixed semantic palette. A red brand should never produce red success badges - confusion over interaction matters more than consistency.

✓ Test every rebrand at extremes

Every white-label theme must be tested with very dark brands (navy, black) and very light brands (yellow, lime). Check contrast ratios: text-on-brand must pass WCAG AA (4.5:1 for body, 3:1 for large text).

✕ Don't use pure gray neutrals

All neutrals use the stone scale (warm undertone). Pure grays feel cold and clinical. Stone keeps the interface approachable regardless of brand color.

✓ Keep serif in display only

The display font (Georgia by default) is for heroes, page titles, and metric callouts only. Never use it in buttons, labels, nav, or form fields - those always use the body font.

✕ Don't assume font availability

White-label clients can set custom display fonts via --brand-font-display, but body and mono stacks should remain system fonts for reliability. If a client needs a custom body font, use @font-face with fallbacks.