/* ============================================================ Page & Parley — Color · "Dusk & Paper" ------------------------------------------------------------ A deep purple/dusk-violet identity with a warm terracotta accent, grounded on light, paper-toned neutrals. Brief mandate: the deep color lives in NAVIGATION and MARKETING surfaces; READING views stay light, warm, and high-contrast so they're comfortable for long sessions and legible for older readers. Never anchor reading surfaces to the moody, low-contrast placeholder palette. Official palette (Amendments v1.1 supersedes concept board): Dark Slate #2C2A44 Dusk Violet #5A3F5B Warm Russet #B46A4A Warm Sand #D9C4A8 Earthy Stone#8C7C6B Soft Paper #F3EFE6 ============================================================ */ :root { /* ---- Brand: Dark Slate (deep ground — nav, marketing, footer) ---- */ --slate-900: #211F38; --slate-800: #2C2A44; /* Dark Slate — canonical */ --slate-700: #3A3756; --slate-600: #4A4668; --slate-400: #8A86A4; /* muted slate on light */ --slate-200: #C9C6D8; --slate-100: #E5E3EC; /* ---- Brand: Dusk Violet (secondary deep / plum) ---- */ --violet-800: #432E44; --violet-700: #5A3F5B; /* Dusk Violet — canonical */ --violet-600: #6E4F6F; --violet-300: #B79BB7; --violet-100: #ECE0EC; /* ---- Accent: Warm Russet (terracotta — primary CTA) ---- */ --russet-800: #7A4329; --russet-700: #8F4F33; /* press */ --russet-600: #9E5639; /* hover */ --russet-500: #B46A4A; /* Warm Russet — canonical */ --russet-300: #D6A488; --russet-200: #E8D3C4; /* soft tint fill */ --russet-100: #F4E6DC; /* faint wash */ /* ---- Warm paper neutrals (surfaces, low → high) ---- */ --paper-0: #FCFAF5; /* lifted card / reading surface */ --paper-50: #F3EFE6; /* Soft Paper — app background */ --paper-100: #ECE6D9; /* sunken / subtle fill */ --paper-200: #E1D9C8; /* hairline dividers, quiet borders */ --paper-300: #D9C4A8; /* Warm Sand — secondary fills */ --paper-400: #C8B79C; /* sand, pressed */ /* ---- Earthy Stone (muted warm neutral) ---- */ --stone-600: #6E6052; --stone-500: #8C7C6B; /* Earthy Stone — canonical */ --stone-300: #B6A892; /* ---- Warm ink (text on paper — tuned for AA contrast) ---- */ --ink-900: #211F38; --ink-800: #2A2840; /* primary text */ --ink-600: #524E68; /* secondary text (AA on Soft Paper) */ --ink-500: #6E6A82; /* muted / meta (large + UI only) */ /* ---- Semantic status (warm-compatible) ---- */ --success-700: #2C6043; --success-500: #3E7D5A; --success-100: #E2EDE5; --warning-700: #9A6A1E; --warning-500: #C08A3E; --warning-100: #F5E9D6; --danger-700: #8F3A32; --danger-500: #B5453B; --danger-100: #F4E0DD; --info-700: #3C4E7A; --info-500: #5468A0; --info-100: #E3E7F1; /* ======================================================== SEMANTIC ALIASES — reference these in components & kits ======================================================== */ /* Surfaces */ --surface-page: var(--paper-50); /* app canvas */ --surface-card: var(--paper-0); /* cards, panels */ --surface-sunken: var(--paper-100); /* wells, insets */ --surface-sand: var(--paper-300); /* warm fill / secondary btn */ --surface-deep: var(--slate-800); /* nav, marketing, footer */ --surface-deep-2: var(--slate-700); /* raised on deep */ --surface-violet: var(--violet-700); /* plum marketing panels */ --surface-overlay: rgba(33, 31, 56, .55); /* modal scrim */ /* Reading surfaces (manuscript view — kept light & warm) */ --reading-bg: #FBF8F1; --reading-ink: #2A2840; --reading-muted:#6E6A82; --reading-rule: #E4DCCC; --reading-accent: var(--russet-500); /* Text */ --text-primary: var(--ink-800); --text-secondary: var(--ink-600); --text-muted: var(--ink-500); --text-accent: var(--russet-600); --text-on-deep: rgba(243, 239, 230, .96); --text-on-deep-muted: rgba(243, 239, 230, .66); --text-on-deep-faint: rgba(243, 239, 230, .40); /* Accent / interaction */ --accent: var(--russet-500); --accent-hover: var(--russet-600); --accent-press: var(--russet-700); --accent-soft: var(--russet-200); --accent-wash: var(--russet-100); --on-accent: #FCFAF5; /* Borders & lines */ --border: var(--paper-200); --border-strong: #D2C7B2; --border-input: #CBBDA4; --border-on-deep: rgba(243, 239, 230, .16); /* Focus */ --focus-ring: var(--russet-500); /* Link */ --link: var(--russet-600); --link-hover: var(--russet-700); } /* ============================================================ EXTENDED PALETTE — "Dusk & Paper" 6 → 12 (Julie, June 2026) ------------------------------------------------------------ The six colours below were delivered to extend the core six and give the system more range. They exist to be DEPLOYED — the brief's "light by default" was over-rotated into a single russet accent on beige; these add a second & third accent and richer deep grounds so sections gain rhythm and contrast. Client name Hex Role here · Inkwell Black #1F1D2A deepest ground / footer base · Midnight Violet #3C324A soft deep section ground · Dried Rose #9C6B72 SECONDARY accent (reader-facing) · Antique Brass #A78A6C TERTIARY accent (featured / premium) · Hearth Brown #6B5246 warm earthy ink / editorial ground · Fog Grey #CFCAC2 cool quiet neutral (on-deep borders, disabled) ============================================================ */ :root { /* ---- Inkwell Black (deepest ground) ---- */ --inkwell-900: #1F1D2A; /* Inkwell Black — canonical */ /* ---- Midnight Violet (soft deep section ground) ---- */ --midnight-700: #3C324A; /* Midnight Violet — canonical */ --midnight-600: #4A3F5A; /* ---- Dried Rose (secondary accent — mauve/rose) ---- */ --rose-700: #7E535A; /* press */ --rose-600: #8C5F66; /* hover */ --rose-500: #9C6B72; /* Dried Rose — canonical */ --rose-200: #E4CFD3; /* soft tint fill */ --rose-100: #F3E7E9; /* faint wash */ /* ---- Antique Brass (tertiary / featured accent) ---- */ --brass-700: #876C4F; /* press */ --brass-600: #96795B; /* hover */ --brass-500: #A78A6C; /* Antique Brass — canonical */ --brass-200: #E3D6C3; /* soft tint fill */ --brass-100: #F1E9DB; /* faint wash */ /* ---- Hearth Brown (warm earthy ink / ground) ---- */ --brown-700: #56412F; --brown-600: #6B5246; /* Hearth Brown — canonical */ --brown-400: #8E7464; /* ---- Fog Grey (cool quiet neutral) ---- */ --fog-400: #CFCAC2; /* Fog Grey — canonical */ --fog-300: #DBD7D0; --fog-200: #E7E4DE; /* ======================================================== SEMANTIC ALIASES for the extended palette ======================================================== */ /* Secondary & tertiary accents — give content a second/third pop */ --accent-2: var(--rose-500); /* Dried Rose — reader-facing highlights, soft CTAs, tags */ --accent-2-hover: var(--rose-600); --accent-2-soft: var(--rose-200); --accent-2-wash: var(--rose-100); --accent-3: var(--brass-500); /* Antique Brass — featured / premium / awards / rules */ --accent-3-hover: var(--brass-600); --accent-3-soft: var(--brass-200); --accent-3-wash: var(--brass-100); /* Deep section grounds — for rhythm & contrast breaks (NOT reading surfaces) */ --surface-midnight: var(--midnight-700); /* softer-than-slate deep panel */ --surface-inkwell: var(--inkwell-900); /* deepest ground / footer base */ /* Warm earthy text & cool quiet neutral */ --text-brown: var(--brown-600); --neutral-fog: var(--fog-400); --border-on-deep-soft: rgba(207, 202, 194, .22); /* Fog-grey hairline on deep grounds */ }