/* ========================================================================== IntentLab design tokens -------------------------------------------------------------------------- Every colour, typeface, size and spacing value used anywhere in IntentLab is defined here and ONLY here. Nothing else in the project should contain a raw hex value, a font name, or a hardcoded pixel measurement. Why: across versions 3 through 11 of the Quick Start Guide, every colour was typed directly into the markup. Nothing was individually wrong, but nothing held them together either, so the palette drifted off brand with nobody able to see it happening. This file makes being on brand structural rather than something a human has to check. Source of truth: intentlab/inputs/brand/intentlab-brand-guide.md Cross-checked against: intentlab/inputs/brand/intentlab-brand-kit_2.html Names describe the JOB a value does, not what it looks like. --color-accent survives a rebrand. --teal would become a file that lies. ========================================================================== */ :root { /* ---- Brand accent ------------------------------------------------------ Teal is reserved for things the reader can act on or should notice: links, interactive elements, emphasis. The brand guide is explicit that it is not decorative fill. */ --color-accent: #2A9D8A; /* Deep Teal. Primary accent. */ --color-accent-deep: #1F7A6B; /* Dark Teal. Depth, hover, pressed. */ /* ---- Grounds ----------------------------------------------------------- Cream is the default background almost everywhere. Near-black is a STATEMENT BEAT, used sparingly for a single section that needs weight. The guide warns specifically against alternating them evenly, which reads as stripes rather than emphasis. */ --color-surface: #FBF9F5; /* Cream. Default page ground. */ --color-surface-alt: #F0EEE9; /* Off-White. Cards, subtle contrast. */ --color-surface-dark: #1C1C1A; /* Near-Black. Sparing, for weight. */ --color-surface-warm: #D9C4A3; /* Tan. Warm accent fill. */ --color-surface-warm-lt: #EFE6D6; /* Light Tan. Borders, dividers. */ --color-surface-mint: #EAF6F2; /* Pale Mint. Light accent fills. */ --color-surface-mint-2: #E8F5F1; --color-surface-mint-3: #DDEEEA; /* ---- Text -------------------------------------------------------------- Never pure black on light, never pure white on dark. The guide calls this out twice. Pure black on cream reads as harsh and slightly dirty; warm charcoal sits correctly against a warm ground. */ --color-text: #2A2A27; /* Warm Charcoal. Body on light. */ --color-text-strong: #1C1C1A; /* Near-Black. Headings on light. */ --color-text-muted: #6E6E68; /* Warm Gray. Secondary, captions. */ --color-text-on-dark: #FBF9F5; /* Cream, not white, on dark grounds. */ --color-text-on-dark-2: #EAF6F2; /* Pale Mint, the guide's alternative. */ /* ---- A-F calendar categories ------------------------------------------- SEMANTIC ONLY. These belong to the calendar system. The brand guide is explicit that they are not for general decoration, which is the rule the old freebie broke when it used A-red as a decorative closing bar. This is the TAUGHT version of the system: a clean A through F with no gap, used in the deck, the guide, and anything public-facing. Stasia's own calendar uses the LIVED version, where F is blue and an unlettered purple carries Notes & Awareness. Do not use these tokens for anything describing her personal calendar. See memory/context/brand.md. */ --color-cat-a: #D64C4C; /* Appointments. Red. */ --color-cat-b: #E08A3C; /* Bottleneck. Orange. */ --color-cat-c: #E4BE45; /* Critical to Success. Yellow. */ --color-cat-d: #5FA463; /* Daily Routine. Green. */ --color-cat-e: #4A7FB5; /* Extras. Blue. */ --color-cat-f: #8A6BB0; /* Flexible Ideal. Purple. */ /* ---- Statement block --------------------------------------------------- The one high-contrast block on a page, used once, to land a closing line. Named for its ROLE, not its colour, so the decision lives in one place. Changed from near-black to Dark Teal on 2026-09-12 by Stasia's call. Dark Teal, not Deep Teal. Measured against Cream text: Deep Teal #2A9D8A -> 3.18:1 fails WCAG AA for normal text Dark Teal #1F7A6B -> 4.93:1 passes The heading would have survived either, but the supporting paragraph beside it is normal-sized and would not have. */ --color-statement: var(--color-accent-deep); --color-statement-text: var(--color-surface); --color-statement-text-2: var(--color-surface-mint); /* ---- Illustration ------------------------------------------------------ The sample week grid is a picture OF a calendar app, not an IntentLab surface. It is deliberately outside the brand palette: a generic white ground with neutral gridlines reads as "your calendar", which is the point. Warm cream would make it look like part of the brand instead of a depiction of somebody's actual week. This is the only place pure white is permitted. */ --color-illustration-ground: #FFFFFF; --color-illustration-line: #E4E2DE; /* ---- Typefaces --------------------------------------------------------- Two faces, two jobs, no overlap. The guide's own rule of thumb: if it is meant to be FELT it is Josefin Sans; if it is meant to be READ it is Outfit. Fallbacks matter. If the webfont fails, the page should still be readable rather than dropping to Times. */ --font-display: 'Josefin Sans', 'Avenir Next', 'Segoe UI', sans-serif; --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif; --weight-display: 700; /* Josefin Sans is bold only, per the guide. */ --weight-body: 400; --weight-body-strong: 600; /* ---- Type scale -------------------------------------------------------- Set in rem so the reader's own browser text-size setting is respected. 1rem = 16px by default. These are deliberately NOT the sizes the old guide ended up with. v11 had body copy near 7.3pt and category labels near 5.7pt, the result of scaling the whole design by 0.85 to force a one-page fit. That is below any reasonable minimum, in a reference document, for an audience with processing differences. Readability wins over page count. */ --text-quote: 4rem; /* 64px. Pull quotes only. Larger than the page title on purpose. A pull quote earns its name by breaking to several lines and holding its own block; at title size it just reads as a big sentence. 4rem is the measured threshold at which "Rest is not a luxury." breaks to three lines in a column of this width. Dark Teal on cream carries less contrast than the near-black title, so it reads as large rather than loud. */ --text-hero: 2.75rem; /* 44px. Page title. */ --text-xl: 1.75rem; /* 28px. Section heads. */ --text-lg: 1.25rem; /* 20px. Card titles. */ --text-md: 1rem; /* 16px. Body. The floor for running text. */ --text-sm: 0.875rem; /* 14px. Supporting copy. */ --text-xs: 0.75rem; /* 12px. Kickers and labels. Absolute floor. */ --leading-tight: 1.1; /* Display only. */ --leading-normal: 1.5; /* Body. */ --tracking-kicker: 0.12em; /* All-caps labels need air to stay legible. */ /* ---- Spacing ----------------------------------------------------------- One scale, used everywhere. Arbitrary one-off margins are what make a layout feel slightly wrong without anyone being able to say why. */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* ---- Lines and corners ------------------------------------------------- */ --border-hairline: 1px solid var(--color-surface-warm-lt); --border-card: 1px solid var(--color-surface-warm-lt); --radius-sm: 4px; --radius-md: 8px; /* ---- Measure ----------------------------------------------------------- Line length. Somewhere around 60 to 75 characters is where running text stays comfortable to track across. */ --measure-prose: 38rem; --measure-narrow: 28rem; /* ---- Breakpoints ------------------------------------------------------- READ THIS BEFORE WRITING A MEDIA QUERY. These are declared here for reference and for use in calc() and other property values. They CANNOT be used inside a media query condition: @media (min-width: var(--bp-md)) { } <-- does not work, ever That is a limitation of CSS itself, not a mistake. Custom properties are resolved per-element, and a media query is evaluated before any element exists. No plain-CSS workaround exists. A preprocessor would solve it, at the cost of a build step and a dependency, which the PRD forbids without a justifying entry. So: write the literal value in the media query, and put the token name beside it in a comment, like this: @media (min-width: 48rem) { } <- 48rem is --bp-md Three breakpoints only. Every extra one is another layout to test. */ --bp-sm: 30rem; /* 480px. Large phone. */ --bp-md: 48rem; /* 768px. Tablet, and where two columns become viable. */ --bp-lg: 64rem; /* 1024px. Desktop. */ /* ---- Print ------------------------------------------------------------- The Quick Start Guide is meant to be printable as a desk reference. Optional, never required, and never at the cost of screen readability. */ --print-page: letter; --print-margin: 0.5in; }