/** * AYCM Manuscript — Design Tokens v1.0.0 * Approved 2026-05-20 * Source: design-system/tokens.json * Import in web projects: @import url("design-system/tokens.css"); */ :root { /* Brand core — logo truth */ --aycm-brand-cyan: #33ccff; --aycm-brand-teal: #00f5d4; --aycm-brand-gradient: linear-gradient(135deg, #33ccff 0%, #00f5d4 100%); /* Brand extended — green & blue family */ --aycm-brand-green: #2ecc71; --aycm-brand-blue: #29abe2; --aycm-brand-extended-gradient: linear-gradient(135deg, #2ecc71 0%, #29abe2 100%); /* Feature — Images (iOS vividBrown) */ --aycm-feature-images: #99582a; --aycm-feature-images-light: #c4894a; --aycm-feature-images-tan: #e8c9a8; --aycm-feature-images-gradient: linear-gradient(135deg, #99582a 0%, #c4894a 100%); /* Scene domain — iOS Color+Custom (slate / copper) */ --aycm-scene-slate: #59668c; --aycm-scene-copper: #d98c59; --aycm-scene-cream: #faf5ed; --aycm-scene-deep-slate: #1c1f29; --aycm-scene-titlebar: #172430; --aycm-scene-gradient: linear-gradient(135deg, #59668c 0%, #d98c59 100%); --aycm-scene-gradient-horizontal: linear-gradient(90deg, #59668c, #d98c59); --aycm-feature-scene-slate: var(--aycm-scene-slate); --aycm-feature-scene-copper: var(--aycm-scene-copper); /* Manuscript / chapter domain — iOS Color+Custom chapter palette */ --aycm-chapter-forest: #387361; --aycm-chapter-sage: #8cb894; --aycm-chapter-cream: #f5faf2; --aycm-chapter-deep-forest: #17241f; --aycm-chapter-gradient: linear-gradient(135deg, #387361 0%, #8cb894 100%); /* Author's Lounge domain — FLORA (D33). Peony / wisteria / olive on blush press stock. Foliage was unavailable: Workbook owns chapter-forest #387361 and the Chapter domain owns sage #8cb894, so the palette leads with the bloom and keeps olive as a supporting note. Checked against all nine sidebar section colours — no collision. Before D33 the Author's Lounge shared Dashboard's exact #007AFF and had no identity of its own. */ --aycm-lounge-peony: #a8455f; --aycm-lounge-peony-deep: #8a3550; --aycm-lounge-peony-wash: #fbeff3; --aycm-lounge-wisteria: #6e63a0; --aycm-lounge-wisteria-wash: #f1eff8; --aycm-lounge-olive: #5f7238; --aycm-lounge-olive-wash: #f0f3e9; --aycm-lounge-brass: #b08d57; --aycm-lounge-brass-deep: #9a7838; --aycm-lounge-brass-wash: #f9f4ea; --aycm-lounge-paper: #fbf8f8; --aycm-lounge-paper-2: #f5eef0; --aycm-lounge-ink: #241f26; --aycm-lounge-ink-2: #6e6472; --aycm-lounge-ink-3: #a198a6; --aycm-lounge-ink-4: #c7c0ca; --aycm-lounge-edge: #efe6e8; --aycm-lounge-edge-soft: #f6f0f1; --aycm-lounge-gradient: linear-gradient(140deg, #c76b83 0%, #8a3550 100%); /* ══ Editorial Studio domain — FLORA ARRANGEMENT. Approved 2026-08-02, superseding the two-hue aubergine/gold draft of the same day. Why an arrangement rather than an accent. The first attempt put a purple accent on a purple substrate: purple was both the room and the furniture, so nothing lifted. A florist's arrangement reads because several blooms sit against a neutral table. FIVE hues, and each carries a JOB — that is what keeps it information rather than decoration: VIOLET the feature itself · your own notes · primary action BLUSH suggested rewrites — warm, "change this" EUCALYPT comments — calm, observational HONEY questions and deadlines — attention, not alarm FERN praise — what is working, and must be protected in revision A surface must never pick a bloom for looks. If it is not carrying one of those five meanings, it is neutral. FERN was added 2026-08-03. Praise had been sharing the comment hue, which made "this is the best line in the chapter" look like every other observation — and praise is the note authors most need to see, because feedback that is all corrections gets the good material cut in revision. A truer leaf green crowds both eucalypt and chapter sage, so fern sits in the spring-green range: 116 from eucalypt, 111 from sage. Substrates: dark (Twilight) is the default; light (Pressed Flowers) is a first-class mode. The blooms DEEPEN on light stock rather than swapping roles — unlike the superseded draft, no accent inversion is needed, because the hues give contrast in both modes. Every hue is distance-checked against all claimed identity colours, and every text pair is contrast-checked against the surface it actually composites onto. REVISED 2026-08-03 after a full contrast audit. The originally approved LIGHT blooms could not carry small text on cream or white avatar ink — blush #C4667E was 3.60:1, honey #A8763A 3.75:1, eucalypt #357F90 4.35:1, all below AA. Deepening them along their own hues pushed them into other features' territory (blush landed 31 from Lounge peony, honey 30 from feature-images), so each light bloom is now the CLOSEST value to the approved one that clears both 4.5:1 and the 74-point separation rule. Blush and honey moved furthest, because the legible region beside each was already claimed. Two proximities are recorded rather than hidden, both in the DARK blooms, both pre-existing and both approved: blush #E69AAE sits 55 from feature-images tan, and eucalypt #7CC3B4 sits 59 from chapter sage #8CB894. Neither pair ever shares a surface; eucalypt is bluer where sage is yellower. An earlier version of this comment claimed every value cleared 74 — that was true of the light blooms only, and is corrected here. Caution is NOT a bloom and NOT a new brand red: per D34 it reuses --aycm-lounge-alert. Only a dark-substrate variant is added, because #C4302B reads 3.12:1 on twilight. */ /* Blooms — dark substrate */ --aycm-editorial-violet: #bd93e8; --aycm-editorial-blush: #e69aae; --aycm-editorial-eucalypt: #7cc3b4; --aycm-editorial-honey: #ecbf68; --aycm-editorial-fern: #79d959; /* FIFTH BLOOM — praise. 116 from eucalypt, 111 from sage */ /* Blooms — light substrate. Deepened for legibility on press stock, then moved the minimum needed to clear every claimed identity colour. Each carries small text AND white avatar ink at ≥4.5:1; see the audit note above for why blush and honey moved furthest. */ --aycm-editorial-violet-deep: #6b35bb; /* 7.00:1 on cream · 76 from lounge wisteria */ --aycm-editorial-blush-deep: #c11d68; /* 5.48:1 on cream · 74 from lounge peony */ --aycm-editorial-eucalypt-deep: #1c6d92; /* 5.47:1 on cream · 74 from scene slate */ --aycm-editorial-honey-deep: #a84205; /* 5.79:1 on cream · 74 from feature-images */ --aycm-editorial-fern-deep: #2d6619; /* 6.60:1 on cream · 93 from lounge olive */ --aycm-editorial-gradient: linear-gradient(140deg, #bd93e8 0%, #e69aae 100%); /* Dark substrate — the default. Cool, deep, near-neutral: the table, not a flower. */ --aycm-editorial-dark-bg: #111119; --aycm-editorial-dark-surface: #1a1a25; --aycm-editorial-dark-surface-2: #232331; --aycm-editorial-dark-line: #4e4e64; /* divider — decorative */ --aycm-editorial-dark-line-soft: #2b2b38; --aycm-editorial-dark-line-interactive: #6c6c8b; /* control border — 3.41:1 on surface */ --aycm-editorial-dark-ink: #f0eff5; --aycm-editorial-dark-ink-2: #b6b4c4; /* was #a5a3b3 — 8.47:1 on surface */ --aycm-editorial-dark-ink-3: #9e9bb5; /* was #757386 (3.36:1 on chips) */ --aycm-editorial-dark-rail: #0c0c12; --aycm-editorial-dark-field: #13131a; /* inputs recess; defined by border */ --aycm-editorial-dark-on-bloom: #1a1a25; /* ink ON a bloom fill — flips by mode */ --aycm-editorial-dark-caution: #fa4d47; /* D34's red, lifted for twilight — 5.10:1 */ /* Light substrate — warm paper, not lavender-grey. */ --aycm-editorial-light-bg: #f3f0e9; --aycm-editorial-light-surface: #fbf9f4; --aycm-editorial-light-surface-2: #e8e4da; --aycm-editorial-light-line: #c9c1b1; /* was #dbd5c9 — 1.39:1, invisible */ --aycm-editorial-light-line-soft: #eae6dc; --aycm-editorial-light-line-interactive: #908776; /* control border — 3.38:1 on surface */ --aycm-editorial-light-ink: #2a2530; --aycm-editorial-light-ink-2: #57505f; --aycm-editorial-light-ink-3: #655e6d; /* was #8a8391 (2.88:1 on chips) */ --aycm-editorial-light-rail: #2a2530; --aycm-editorial-light-field: #ffffff; --aycm-editorial-light-on-bloom: #ffffff; /* light blooms are deep — white ink */ --aycm-editorial-light-caution: var(--aycm-lounge-alert); /* D34: reuse, never re-invent */ /* Semantic — dark defaults. Light overrides live below :root. */ --aycm-editorial-bg: var(--aycm-editorial-dark-bg); --aycm-editorial-surface: var(--aycm-editorial-dark-surface); --aycm-editorial-surface-2: var(--aycm-editorial-dark-surface-2); --aycm-editorial-line: var(--aycm-editorial-dark-line); --aycm-editorial-line-soft: var(--aycm-editorial-dark-line-soft); --aycm-editorial-line-interactive: var(--aycm-editorial-dark-line-interactive); --aycm-editorial-ink: var(--aycm-editorial-dark-ink); --aycm-editorial-ink-2: var(--aycm-editorial-dark-ink-2); --aycm-editorial-ink-3: var(--aycm-editorial-dark-ink-3); --aycm-editorial-rail: var(--aycm-editorial-dark-rail); --aycm-editorial-field: var(--aycm-editorial-dark-field); --aycm-editorial-on-bloom: var(--aycm-editorial-dark-on-bloom); /* Semantic bloom names — ALWAYS read these, never a raw hue. */ --aycm-editorial-identity: var(--aycm-editorial-violet); --aycm-editorial-rewrite: var(--aycm-editorial-blush); --aycm-editorial-comment: var(--aycm-editorial-eucalypt); --aycm-editorial-question: var(--aycm-editorial-honey); /* Praise earned its own bloom: 'what is working' is the note authors most need to see, and sharing the comment hue made it look like every other observation. */ --aycm-editorial-praise: var(--aycm-editorial-fern); /* Caution is deliberately NOT a bloom: it sits outside the arrangement so it can never read as decoration. Reserved for the trust advisory (D29) and nothing else. */ --aycm-editorial-caution: var(--aycm-editorial-dark-caution); /* D34 — overdue / blocked / rejected reuse AGENDA'S existing red rather than adding a new brand red. Deepened here for legibility on the light press stock. */ --aycm-lounge-alert: #c4302b; --aycm-lounge-alert-wash: #fdf0ef; /* Semantic — structure */ --aycm-bg-dark: #080d1a; --aycm-bg-card: #0f1629; --aycm-bg-nav: rgba(8, 13, 26, 0.92); --aycm-text-primary: #ffffff; --aycm-text-secondary: #8b9bb4; --aycm-border: rgba(51, 204, 255, 0.15); /* Legacy aliases (website styles.css) */ --green: var(--aycm-brand-green); --blue: var(--aycm-brand-blue); --cyan: var(--aycm-brand-cyan); --bg-dark: var(--aycm-bg-dark); --bg-card: var(--aycm-bg-card); --bg-nav: var(--aycm-bg-nav); --text-primary: var(--aycm-text-primary); --text-secondary: var(--aycm-text-secondary); --border: var(--aycm-border); /* Typography — web */ --aycm-font-web: "Libre Baskerville", Georgia, "Times New Roman", serif; --aycm-font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", sans-serif; /* Spacing */ --aycm-space-xs: 8px; --aycm-space-sm: 16px; --aycm-space-md: 24px; --aycm-space-lg: 48px; --aycm-space-xl: 80px; /* Radius */ --aycm-radius-pill: 100px; --aycm-radius-card: 16px; --aycm-radius-small: 12px; --aycm-radius-button: var(--aycm-radius-small); --aycm-radius-device: 40px; /* Layout — full width with modest edge gutters (not a narrow centered column) */ --aycm-page-gutter: clamp(16px, 2vw, 32px); --aycm-content-width: calc(100vw - 2 * var(--aycm-page-gutter)); --aycm-content-max: 1760px; /* legacy alias; prefer --aycm-content-width */ --aycm-header-height: 72px; } /* ══ Editorial Studio — light substrate. Applied by scoping a container with `.editorial-light`, or by whatever theme attribute the host app sets. Blooms deepen; their MEANINGS do not change. */ .editorial-light, [data-theme="light"] .editorial-scope { --aycm-editorial-bg: var(--aycm-editorial-light-bg); --aycm-editorial-surface: var(--aycm-editorial-light-surface); --aycm-editorial-surface-2: var(--aycm-editorial-light-surface-2); --aycm-editorial-line: var(--aycm-editorial-light-line); --aycm-editorial-line-soft: var(--aycm-editorial-light-line-soft); --aycm-editorial-line-interactive: var(--aycm-editorial-light-line-interactive); --aycm-editorial-ink: var(--aycm-editorial-light-ink); --aycm-editorial-ink-2: var(--aycm-editorial-light-ink-2); --aycm-editorial-ink-3: var(--aycm-editorial-light-ink-3); --aycm-editorial-rail: var(--aycm-editorial-light-rail); --aycm-editorial-field: var(--aycm-editorial-light-field); --aycm-editorial-on-bloom: var(--aycm-editorial-light-on-bloom); --aycm-editorial-identity: var(--aycm-editorial-violet-deep); --aycm-editorial-rewrite: var(--aycm-editorial-blush-deep); --aycm-editorial-comment: var(--aycm-editorial-eucalypt-deep); --aycm-editorial-question: var(--aycm-editorial-honey-deep); --aycm-editorial-praise: var(--aycm-editorial-fern-deep); --aycm-editorial-caution: var(--aycm-editorial-light-caution); } /* Optional utility — body already uses --aycm-font-web in styles.css */ .aycm-web-typography { font-family: var(--aycm-font-web); }