/* FDF theme — draft 1, 2026-09-24, designer. --------------------------------------------------------------------------- The whole design language in one file, in Tailwind v4's theme names (--color-*, --text-*, --font-*, --spacing-*, --radius-*, --shadow-*, --ease-*), written as plain CSS variables so it works in a browser today; the component library's build wraps it in @theme to generate the utilities. Three layers, and a rule for each: 1. PALETTE raw values. Nothing outside this file names them. 2. SEMANTIC what components and designs use: surfaces, text, lines, actions, the eight meanings of Laura's guide, the four sections, Keep's item kinds, attention, status. 3. MODES dark ([data-scheme="dark"]) and largest text ([data-text-size="largest"]) re-point the semantic layer; the names never change. Designed from intent (Laura's guides, the rulings of record in fdf-delivery's design/system/README.md), not from the apps: the apps are aligned to this. Why each value is what it is: README.md beside this file. The rules it cites are in fdf-delivery's design/system/README.md. */ :root{ /* ====================================================================== 1. PALETTE ====================================================================== */ /* navy — trust, structure; the ground of the dark scheme */ --color-navy-1000:#03122E; --color-navy-950:#071F4B; --color-navy-900:#0B2D6B; --color-navy-875:#14315F; --color-navy-850:#113473; --color-navy-825:#16386F; --color-navy-800:#1C3F78; --color-navy-600:#44689F; --color-navy-100:#E2E7F1; /* blue — boundaries, decisions, clarity */ --color-blue-900:#15316F; --color-blue-700:#2A5FC7; --color-blue-600:#2364F5; --color-blue-500:#2F6DF6; --color-blue-300:#7FA6FF; --color-blue-100:#DDE6FE; /* purple — talk, reflection, conversation */ --color-purple-900:#2B1B52; --color-purple-500:#8A4BE8; --color-purple-300:#B98CFF; --color-purple-100:#E8DBFC; /* green — values, tradition, legacy */ --color-green-900:#12351C; --color-green-700:#2C9543; --color-green-600:#2E9B45; --color-green-400:#5FC97A; --color-green-100:#D2EBD8; /* gold — guidance, importance (rule 17); 700 is the icon shade, 500 never small type */ --color-gold-900:#4A3412; --color-gold-700:#B9790B; --color-gold-500:#F2A31B; --color-gold-100:#FCE9C8; /* orange — memory, media; moved to the guide plate's redder orange so it reads apart from gold */ --color-orange-900:#452611; --color-orange-700:#DE5B04; --color-orange-500:#FB6D0E; --color-orange-100:#FEE1CD; /* peach — bonds, connection, warmth; 600 is the icon shade */ --color-peach-900:#451C11; --color-peach-600:#D65D3D; --color-peach-300:#FFB6A3; --color-peach-100:#FFE0D6; /* red — destructive and error only (studio addition, 2026-09-09) */ --color-red-600:#CB3C3C; --color-red-400:#D66464; --color-red-300:#ED7F7F; --color-red-200:#E79A9A; /* warm neutrals — calm, secondary surfaces, inactive states */ --color-paper:#F7F5F1; --color-paper-pressed:#E2DFDA; --color-sand:#E7E4DE; --color-slate:#5C6480; --color-slate-light:#AAB2C8; --color-white:#FFFFFF; --color-black:#000000; /* ---- data palettes: many colors on purpose, used only by the components that draw them ---- */ /* avatars — people, not chrome (rule 10) */ --color-avatar-1:#FFC9A8; --color-avatar-2:#BDD4FA; --color-avatar-3:#D7C0F7; --color-avatar-4:#F7C0C9; --color-avatar-5:#C0E8C9; --color-avatar-6:#FCD98C; /* chat colors a family picks for a conversation (rule 11); stored by value, never re-pointed */ --color-chat-rose:#E8607A; --color-chat-amber:#F2A31B; --color-chat-green:#2E9B45; --color-chat-blue:#2F6DF6; --color-chat-purple:#8A4BE8; --color-chat-coral:#FF8A5B; --color-chat-teal:#0FB5BA; --color-chat-rust:#C2410C; /* the check-in gauge's four bands */ --color-gauge-good:#6FBF73; --color-gauge-fair:#F1C84B; --color-gauge-watch:#EE9A4B; --color-gauge-alert:#D66464; /* the check-in crest artwork */ --color-crest-gold:#D6A23A; --color-crest-light-gold:#F3C766; --color-crest-ivory:#FFFDF8; --color-crest-cream:#FAF4EA; /* ====================================================================== TYPE — twelve roles, and one for words inside a picture. Size, line height and weight travel together; the display serif for display and the two titles, Inter for the rest. ====================================================================== */ --font-display:"DM Serif Display",ui-serif,Georgia,"Times New Roman",serif; --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; --tracking-label:.06em; --tracking-eyebrow:.14em; --text-display:38px; --text-display--line-height:44px; --text-display--font-weight:400; --text-screen-title:28px; --text-screen-title--line-height:34px; --text-screen-title--font-weight:400; --text-section-title:24px; --text-section-title--line-height:30px; --text-section-title--font-weight:400; --text-title-lg:18px; --text-title-lg--line-height:24px; --text-title-lg--font-weight:600; --text-title-md:16px; --text-title-md--line-height:22px; --text-title-md--font-weight:600; --text-title-sm:14px; --text-title-sm--line-height:20px; --text-title-sm--font-weight:600; --text-body-lg:16px; --text-body-lg--line-height:22px; --text-body-lg--font-weight:400; --text-body-md:14px; --text-body-md--line-height:20px; --text-body-md--font-weight:400; --text-body-sm:12px; --text-body-sm--line-height:16px; --text-body-sm--font-weight:400; --text-label-lg:14px; --text-label-lg--line-height:18px; --text-label-lg--font-weight:600; --text-label-sm:11px; --text-label-sm--line-height:14px; --text-label-sm--font-weight:500; --text-eyebrow:11px; --text-eyebrow--line-height:14px; --text-eyebrow--font-weight:600; --text-eyebrow--letter-spacing:.14em; /* words drawn inside a picture (the Welcome cluster): the picture keeps its size at every text size, and so do they */ --text-picture-label:14px; --text-picture-label--line-height:20px; --text-picture-label--font-weight:600; /* ====================================================================== SPACING — a 4px base, and the seven distances layouts actually use ====================================================================== */ --spacing:4px; --spacing-gutter:16px; /* screen edge */ --spacing-card:16px; /* inside a card */ --spacing-card-lg:24px; /* inside a hero or sheet */ --spacing-stack:12px; /* between items in a column */ --spacing-inline:8px; /* between items in a row */ --spacing-section:24px; /* between groups on a screen */ --spacing-row:12px; /* a list row's vertical padding */ --spacing-foot:40px; /* a screen's foot: its last thing to the device's bottom edge, clear of the home indicator */ --spacing-dock:30px; /* the floating composer's lift off the device's bottom edge */ --spacing-composer-clearance:112px; /* the room under a screen's content, so its last line clears the floating composer */ /* sizes — on the spacing scale so size-*, w-* and h-* reach them */ --spacing-icon-sm:16px; --spacing-icon-md:20px; --spacing-icon-lg:24px; --spacing-avatar-xs:22px; --spacing-avatar-sm:24px; --spacing-avatar-md:40px; --spacing-avatar-lg:56px; --spacing-avatar-xl:72px; /* a profile's header */ --spacing-chip-sm:40px; --spacing-chip-lg:56px; /* icon chips: list rows, section cards */ --spacing-drawer:84%; /* the drawer's width, of the screen it opens over */ --spacing-tap:44px; /* the smallest thing a finger may be asked to hit */ --spacing-control:50px; /* buttons and fields */ /* ====================================================================== SHAPE, ELEVATION, MOTION ====================================================================== */ --radius-xs:6px; --radius-sm:8px; --radius-md:14px; --radius-lg:18px; --radius-full:9999px; --radius-button:var(--radius-full); /* every button: a pill (Chris, 2026-09-24) */ --radius-control:var(--radius-md); /* fields and rows: text fields, the date row, menu rows */ --radius-chip:var(--radius-md); /* icon chips of 48px and up; small chips take --radius-sm */ --radius-card:var(--radius-lg); /* cards, request cards */ --radius-sheet:var(--radius-lg); /* a sheet's top corners */ --radius-tag:var(--radius-full); /* labels like UNDER 13 */ --radius-bubble:var(--radius-lg); /* a chat message */ --radius-bubble-tail:var(--radius-xs); /* its corner on the sender's side */ --ease-standard:cubic-bezier(.2,.7,.3,1); --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms; } /* ---- light, the default. Also declared on [data-scheme="light"] so a light container can sit inside a dark one (boards put light and dark phones side by side). */ :root,[data-scheme="light"]{ /* ====================================================================== 2. SEMANTIC — light ====================================================================== */ /* surfaces */ --color-surface-app:var(--color-paper); --color-surface-card:var(--color-white); --color-surface-muted:var(--color-sand); --color-surface-raised:var(--color-white); /* floating: dialogs, menus (rule 9) */ --color-surface-sheet:var(--color-paper); /* a sheet's plate: paper in light; raised, with its border, in dark */ --color-surface-inverse:var(--color-navy-950); /* text */ --color-text-primary:var(--color-navy-900); --color-text-secondary:var(--color-slate); --color-text-inverse:var(--color-paper); --color-text-link:var(--color-blue-600); /* brand blue is 4.16:1 on paper; 600 is the lightest that reads */ --color-text-on-primary:var(--color-white); --color-text-destructive:var(--color-red-600); --color-text-on-destructive:var(--color-white); /* the label on a destructive fill, in both schemes */ /* lines */ --color-border:var(--color-sand); --color-border-raised:transparent; /* light separates floating surfaces with a shadow */ --color-border-control:var(--color-slate); /* the edge that says a control is here: box, radio, switch */ --color-divider:var(--color-sand); --color-focus:var(--color-blue-500); /* actions */ --color-action-primary:var(--color-navy-900); --color-action-primary-pressed:var(--color-navy-950); --color-action-primary-container:var(--color-navy-100); --color-action-secondary:var(--color-white); /* with --color-border and --color-text-primary */ --color-action-disabled:var(--color-sand); /* rule 7: drained fill, */ --color-action-disabled-label:var(--color-slate); /* readable label, */ --color-action-disabled-border:var(--color-slate); /* and a border that keeps the shape */ --color-action-destructive:var(--color-red-600); /* fill, with --color-white on it */ /* the eight meanings (Laura's semantic color map). Each has three roles: -fill the soft ground: tints, chips, cards -accent the brand hue: large shapes, illustration, rules -mark icons and lines: clears 3:1 on white, paper and its own fill */ --color-meaning-trust-fill:var(--color-navy-100); --color-meaning-trust-accent:var(--color-navy-900); --color-meaning-trust-mark:var(--color-navy-900); --color-meaning-guidance-fill:var(--color-gold-100); --color-meaning-guidance-accent:var(--color-gold-500); --color-meaning-guidance-mark:var(--color-gold-700); --color-meaning-bonds-fill:var(--color-peach-100); --color-meaning-bonds-accent:var(--color-peach-300); --color-meaning-bonds-mark:var(--color-peach-600); --color-meaning-boundaries-fill:var(--color-blue-100); --color-meaning-boundaries-accent:var(--color-blue-500); --color-meaning-boundaries-mark:var(--color-blue-500); --color-meaning-legacy-fill:var(--color-green-100); --color-meaning-legacy-accent:var(--color-green-600); --color-meaning-legacy-mark:var(--color-green-700); --color-meaning-conversation-fill:var(--color-purple-100); --color-meaning-conversation-accent:var(--color-purple-500); --color-meaning-conversation-mark:var(--color-purple-500); --color-meaning-memory-fill:var(--color-orange-100); --color-meaning-memory-accent:var(--color-orange-500); --color-meaning-memory-mark:var(--color-orange-700); --color-meaning-calm:var(--color-sand); /* status — the gauge's bands, for anything that reports a level */ --color-status-good:var(--color-gauge-good); --color-status-fair:var(--color-gauge-fair); --color-status-watch:var(--color-gauge-watch); --color-status-alert:var(--color-gauge-alert); /* "this is me" — your own chat bubble */ --color-chat-mine:var(--color-navy-900); --color-chat-mine-text:var(--color-white); --color-avatar-ink:var(--color-navy-900); /* the scrim behind a modal (rule 15) */ --color-scrim:var(--color-navy-950); --opacity-scrim:0.38; /* someone who left, or whose account closed: their avatar steps back; their name stays at full strength */ --opacity-departed:0.5; /* scheme-specific artwork: the full-color logo shows in light, the reverse in dark (utilities only-light, only-dark) */ --show-in-light:block; --show-in-dark:none; /* elevation: light separates with a shadow */ --shadow-raised:0 2px 6px rgb(11 45 107 / .12); --shadow-sheet:0 -6px 24px rgb(7 31 75 / .10); } /* ---- aliases: sections, Keep's items, the check-in and attention are each a meaning. Declared on every scheme container, because a CSS variable that points at another is resolved where it is declared and inherited resolved: declared on :root alone, a dark container would inherit light aliases. */ :root,[data-scheme]{ /* the four sections — each IS a meaning; change a section's color here and only here */ --color-section-chat-fill:var(--color-meaning-conversation-fill); --color-section-chat-accent:var(--color-meaning-conversation-accent); --color-section-chat-mark:var(--color-meaning-conversation-mark); --color-section-decide-fill:var(--color-meaning-boundaries-fill); --color-section-decide-accent:var(--color-meaning-boundaries-accent); --color-section-decide-mark:var(--color-meaning-boundaries-mark); --color-section-keep-fill:var(--color-meaning-legacy-fill); --color-section-keep-accent:var(--color-meaning-legacy-accent); --color-section-keep-mark:var(--color-meaning-legacy-mark); --color-section-understand-fill:var(--color-meaning-trust-fill); --color-section-understand-accent:var(--color-meaning-trust-accent); --color-section-understand-mark:var(--color-meaning-trust-mark); /* Keep's item kinds — object vs. action: color the thing by what it is */ --color-kind-note-fill:var(--color-meaning-guidance-fill); --color-kind-note-mark:var(--color-meaning-guidance-mark); --color-kind-decision-fill:var(--color-meaning-boundaries-fill); --color-kind-decision-mark:var(--color-meaning-boundaries-mark); --color-kind-value-fill:var(--color-meaning-legacy-fill); --color-kind-value-mark:var(--color-meaning-legacy-mark); --color-kind-tradition-fill:var(--color-meaning-legacy-fill); /* "Tradition = green" (the guide) */ --color-kind-tradition-mark:var(--color-meaning-legacy-mark); --color-kind-photo-fill:var(--color-meaning-memory-fill); --color-kind-photo-mark:var(--color-meaning-memory-mark); /* the check-in's three dimensions — the guide's meanings, no separate palette */ --color-checkin-bonds-fill:var(--color-meaning-bonds-fill); --color-checkin-bonds-mark:var(--color-meaning-bonds-mark); --color-checkin-boundaries-fill:var(--color-meaning-boundaries-fill); --color-checkin-boundaries-mark:var(--color-meaning-boundaries-mark); --color-checkin-legacy-fill:var(--color-meaning-legacy-fill); --color-checkin-legacy-mark:var(--color-meaning-legacy-mark); /* attention — the card that wants an answer (rule 17): gold is importance, never a warning */ --color-attention-fill:var(--color-meaning-guidance-fill); --color-attention-mark:var(--color-meaning-guidance-mark); --color-rosie:var(--color-meaning-conversation-mark); /* Rosie's own purple: her switch and her on/off line */ --color-done-mark:var(--color-meaning-legacy-mark); /* the check on a notice that reports something now true (A4) */ --color-surface-selected:var(--color-action-primary-container); /* where you are: the drawer's current row (#197) */ --color-rosie-fill:var(--color-meaning-conversation-fill); /* Rosie's bubble: her words are always marked as hers */ } /* ========================================================================== 3. MODES ========================================================================== */ /* ---- dark: the approved scheme of 2026-09-13 (DEC-193), with its addenda for floating containers (rule 9), the disabled primary (rule 7) and the scrim (rule 15). Navy ground, paper ink: the same two colors swapped. */ [data-scheme="dark"]{ --color-surface-app:var(--color-navy-950); --color-surface-card:var(--color-navy-900); --color-surface-muted:var(--color-navy-875); --color-surface-raised:var(--color-navy-850); --color-surface-sheet:var(--color-navy-850); --color-surface-inverse:var(--color-navy-1000); --color-text-primary:var(--color-paper); --color-text-secondary:var(--color-slate-light); --color-text-inverse:var(--color-paper); --color-text-link:var(--color-blue-300); --color-text-on-primary:var(--color-navy-950); --color-text-destructive:var(--color-red-300); --color-border:var(--color-navy-800); --color-border-raised:var(--color-navy-600); /* required in dark: a dark ground cannot show a shadow */ --color-border-control:var(--color-slate-light); --color-divider:var(--color-navy-800); --color-focus:var(--color-blue-300); --color-action-primary:var(--color-paper); /* navy cannot be both the ground and the strongest button */ --color-action-primary-pressed:var(--color-paper-pressed); --color-action-primary-container:var(--color-navy-825); --color-action-secondary:var(--color-navy-900); --color-action-disabled:var(--color-navy-875); --color-action-disabled-label:var(--color-slate-light); --color-action-disabled-border:var(--color-slate-light); --color-action-destructive:var(--color-red-600); /* meanings: the fill becomes a dark tone of the hue, the mark lifts */ --color-meaning-trust-fill:var(--color-navy-825); --color-meaning-trust-accent:var(--color-paper); --color-meaning-trust-mark:var(--color-paper); --color-meaning-guidance-fill:var(--color-gold-900); --color-meaning-guidance-accent:var(--color-gold-500); --color-meaning-guidance-mark:var(--color-gold-500); --color-meaning-bonds-fill:var(--color-peach-900); --color-meaning-bonds-accent:var(--color-peach-300); --color-meaning-bonds-mark:var(--color-peach-300); --color-meaning-boundaries-fill:var(--color-blue-900); --color-meaning-boundaries-accent:var(--color-blue-300); --color-meaning-boundaries-mark:var(--color-blue-300); --color-meaning-legacy-fill:var(--color-green-900); --color-meaning-legacy-accent:var(--color-green-400); --color-meaning-legacy-mark:var(--color-green-400); --color-meaning-conversation-fill:var(--color-purple-900); --color-meaning-conversation-accent:var(--color-purple-300); --color-meaning-conversation-mark:var(--color-purple-300); --color-meaning-memory-fill:var(--color-orange-900); --color-meaning-memory-accent:var(--color-orange-500); --color-meaning-memory-mark:var(--color-orange-500); --color-meaning-calm:var(--color-navy-875); --color-status-alert:var(--color-red-200); --color-chat-mine:var(--color-blue-700); /* your own messages keep the brand hue, lifted */ --color-chat-mine-text:var(--color-paper); --color-avatar-ink:var(--color-navy-950); --color-scrim:var(--color-black); /* a scrim removes light; navy over navy removes none */ --opacity-scrim:0.50; --show-in-light:none; --show-in-dark:block; --shadow-raised:none; /* dark separates with --color-border-raised */ --shadow-sheet:none; } /* ---- largest text: iOS accessibility size 5. Small text grows far more than large text, as the platform's own type table does (each role takes the ratio of the iOS style nearest it). Chrome does not scale. */ [data-text-size="largest"]{ --text-display:60px; --text-display--line-height:72px; --text-screen-title:60px; --text-screen-title--line-height:72px; --text-section-title:60px; --text-section-title--line-height:72px; --text-title-lg:53px; --text-title-lg--line-height:64px; --text-title-md:51px; --text-title-md--line-height:62px; --text-title-sm:46px; --text-title-sm--line-height:56px; --text-body-lg:51px; --text-body-lg--line-height:62px; --text-body-md:46px; --text-body-md--line-height:56px; --text-body-sm:44px; --text-body-sm--line-height:52px; --text-label-lg:46px; --text-label-lg--line-height:54px; --text-label-sm:42px; --text-label-sm--line-height:50px; --text-eyebrow:42px; --text-eyebrow--line-height:50px; --spacing-stack:16px; }