Colors
The dominant surface. Every page, modal, card, and content panel defaults to white. Establishes the clean, breathable base that makes the warm accent colors land with intention.
Subtle visual rhythm. Applied to alternating sections, table headers, sidebar panels, and hover states to create depth without color — a near-invisible warmth that organizes layout.
Warm spotlight. Reserved for callout sections, featured content, notification banners, and selected/active states. Use sparingly — maximum one instance per viewport to preserve its attention value.
The system's voice. Used for borders, dividers, icon fills, secondary text, tags, and large-type accents. On white (4.82:1 AA) it reads clearly; on peach/sand use only at 18pt+ or for UI components.
The primary reading color for all text content. Achieves AAA (21:1) on white, AAA (17.95:1) on sand, and AAA (17.88:1) on peach — making it universally safe for body copy, headings, labels, and captions on any surface in this palette. Never substitute another color for primary readable content.
| Foreground ↓ / BG → |
#FFFFFFWhite
|
#EEEDEBSand
|
#FFE9D6Peach
|
#757263Taupe
|
#000000Black
|
|---|---|---|---|---|---|
|
Black #000000 |
21.00:1 AAA |
17.95:1 AAA |
17.88:1 AAA |
4.36:1 AA Large |
— |
|
Taupe #757263 |
4.82:1 AA |
4.12:1 AA Large |
4.10:1 AA Large |
— | 4.36:1 AA Large |
|
White #FFFFFF |
— | 1.17:1 Decorative |
1.17:1 Decorative |
4.82:1 AA |
21.00:1 AAA |
|
Sand #EEEDEB |
1.17:1 Decorative |
— | 1.00:1 Decorative |
4.35:1 AA Large |
17.95:1 AAA |
|
Peach #FFE9D6 |
1.17:1 Decorative |
1.00:1 Decorative |
— | 4.35:1 AA Large |
17.88:1 AAA |
Reading the matrix: Each cell shows text color (row) placed on background color (column). WCAG 2.1 requires 4.5:1 for normal text (AA), 7:1 for enhanced (AAA), and 3:1 for large text ≥18pt, bold ≥14pt, or UI components.
native mobile products.
/* ── CORE COLOR PALETTE ─────────────────────────────────── */
:root {
--c-white: #FFFFFF; /* Main background */
--c-sand: #EEEDEB; /* Supportive background */
--c-peach: #FFE9D6; /* Supportive accent background */
--c-taupe: #757263; /* Main accent */
--c-black: #000000; /* Main font / ink */
/* ── SEMANTIC SURFACES ──────────────────────────────── */
--bg: var(--c-white);
--surface-1: var(--c-sand);
--surface-3: var(--c-peach);
--accent: var(--c-taupe);
--text-primary: var(--c-black);
/* ── DERIVED SURFACES ───────────────────────────────── */
--border: rgba(117,114,99,0.12);
--border-med: rgba(117,114,99,0.22);
--border-strong: rgba(117,114,99,0.40);
--accent-faint: rgba(117,114,99,0.08);
--accent-medium: rgba(117,114,99,0.15);
--text-secondary: rgba(0,0,0,0.50);
--text-tertiary: rgba(0,0,0,0.28);
/* ── WCAG REFERENCE ─────────────────────────────────── */
/* #000 on #FFF → 21.00:1 AAA all text */
/* #000 on #EEEDEB → 17.95:1 AAA all text */
/* #000 on #FFE9D6 → 17.88:1 AAA all text */
/* #757263 on #FFF → 4.82:1 AA normal text */
/* #FFF on #757263 → 4.82:1 AA normal text */
/* #757263 on #EEEDEB → 4.12:1 AA large/UI only */
/* #757263 on #FFE9D6 → 4.10:1 AA large/UI only */
}#000000 is the only approved color for body copy, headings, labels, and captions on any background in this palette. It achieves AAA on all three background surfaces. Never use taupe (#757263) for paragraph text — it only meets AA on white.
Use White → Sand → Peach in ascending order of emphasis. White is the default canvas. Sand sections structure the page. Peach spotlights a single high-value area per view. Stacking multiple peach sections destroys their signaling power — limit to one per screen.
Taupe text on white passes AA (4.82:1) for all text sizes. On sand (4.12:1) and peach (4.10:1), taupe only passes AA for large text (≥18pt body, ≥14pt bold) and UI components. Never use taupe for normal-size paragraphs on sand or peach.
Taupe excels as an accent color at non-text sizes: borders (1–2px), dividers, icon fills, tag/badge fills (not text), decorative marks, and interactive element outlines. At these sizes WCAG's 3:1 UI component threshold applies — all taupe UI passes on any background.
Taupe as a background with white text achieves 4.82:1 (AA). Use sparingly for high-impact CTA sections, footers, or standalone cards. Always use white text on taupe — never black (only 4.36:1 = AA Large only) or other colors.
On iOS, respect Dynamic Type — all text must remain legible at accessibility sizes. In high-contrast mode, the system may replace colors; test against UIAccessibility.isDarkerSystemColorsEnabled. Ensure interactive elements using taupe borders meet the 3:1 non-text contrast requirement.