/* The Growth Gazette — design tokens * * Extracted from the design export's site-chrome.js, which generated these at * runtime from a JS string. Here they are a real stylesheet. * * All five directions are preserved. Brand identity work is not finished and * the palette and type will change, so nothing downstream may hardcode a * colour, size or face. Every value in every template reads through a var(). * * Switching direction sets one attribute on : * * Institutional is the default when the attribute is absent. * * Token groups, in the order they appear in each block: * surfaces bg, panel, panel-2 * text ink, muted * lines rule, hair * accent accent, accent-ink * semantic pos, neg, link, link-hover * tables thead-bg, thead-ink, zebra * faces f-mast, f-display, f-body, f-meta * masthead mast-size, mast-weight, mast-track, mast-transform, mast-style * type scale h1, h2, lead, body, small, tiny * rhythm leading, measure, rowpad, rw, radius * metadata meta-track, meta-transform, meta-weight * article cols, dropcap, kicker-bg, kicker-ink * * NOTE: eleven of these were absent from the build brief's token list * (panel-2, pos, neg, link, link-hover, mast-size, mast-style, leading, * measure, cols, dropcap). Porting only the documented set would have * silently dropped styling on every page. */ /* ── 1. Institutional Reference ────────────────────────────────────────── Gartner / Moody's. Near-monochrome warm grey, single oxblood accent, tight leading, dense tables. Also the default when no theme is set. */ :root, :root[data-gg-theme="institutional"] { --bg: #f6f5f2; --panel: #eceae4; --panel-2: #e3e0d8; --ink: #16181c; --muted: #565b63; --rule: #c6c3ba; --hair: #d9d6cd; --accent: #7a1420; --accent-ink: #ffffff; --pos: #1c5132; --neg: #7a1420; --link: #7a1420; --link-hover: #4d0c14; --thead-bg: #16181c; --thead-ink: #f6f5f2; --zebra: #efede8; --f-mast: 'Libre Baskerville', Georgia, serif; --f-display: 'Libre Baskerville', Georgia, serif; --f-body: 'Spectral', Georgia, serif; --f-meta: 'IBM Plex Sans', system-ui, sans-serif; --mast-size: 38px; --mast-weight: 700; --mast-track: 0.005em; --mast-transform: none; --mast-style: normal; --h1: 38px; --h2: 24px; --lead: 19px; --body: 16px; --small: 14px; --tiny: 12px; --leading: 1.45; --measure: 64ch; --rowpad: 7px; --rw: 1px; --radius: 0px; --meta-track: 0.09em; --meta-transform: uppercase; --meta-weight: 600; --cols: 1; --dropcap: none; --kicker-bg: transparent; --kicker-ink: var(--accent); } /* ── 2. Modern Trade Press ─────────────────────────────────────────────── Ad Age / Semafor. White, generous, strong hierarchy, editorial blue. */ :root[data-gg-theme="trade"] { --bg: #ffffff; --panel: #f1f4f8; --panel-2: #e4eaf2; --ink: #0f1418; --muted: #5a6470; --rule: #d6dce4; --hair: #e6eaf0; --accent: #14459c; --accent-ink: #ffffff; --pos: #0d7a45; --neg: #c0271f; --link: #14459c; --link-hover: #0c2f6e; --thead-bg: #0f1418; --thead-ink: #ffffff; --zebra: #f7f9fc; --f-mast: 'Playfair Display', Georgia, serif; --f-display: 'Archivo', system-ui, sans-serif; --f-body: 'Source Serif 4', Georgia, serif; --f-meta: 'Archivo', system-ui, sans-serif; --mast-size: 44px; --mast-weight: 700; --mast-track: -0.02em; --mast-transform: none; --mast-style: normal; --h1: 50px; --h2: 28px; --lead: 21px; --body: 18px; --small: 15px; --tiny: 12px; --leading: 1.55; --measure: 66ch; --rowpad: 12px; --rw: 1px; --radius: 2px; --meta-track: 0.06em; --meta-transform: uppercase; --meta-weight: 600; --cols: 1; --dropcap: none; --kicker-bg: transparent; --kicker-ink: var(--accent); } /* ── 3. Data Publication ───────────────────────────────────────────────── Economist / FT. Monospaced metadata so figures align in columns. Zebra tables, score bars, red flag accent. The designer's recommendation for the body system. */ :root[data-gg-theme="data"] { --bg: #ffffff; --panel: #edf2f5; --panel-2: #dde7ed; --ink: #0f1720; --muted: #51606c; --rule: #c3d0d9; --hair: #dde6ec; --accent: #b3121f; --accent-ink: #ffffff; --pos: #0d6b58; --neg: #b3121f; --link: #0f4c81; --link-hover: #0a3559; --thead-bg: #0f1720; --thead-ink: #ffffff; --zebra: #f3f8fa; --f-mast: 'Bitter', Georgia, serif; --f-display: 'Bitter', Georgia, serif; --f-body: 'IBM Plex Serif', Georgia, serif; --f-meta: 'IBM Plex Mono', ui-monospace, monospace; --mast-size: 34px; --mast-weight: 700; --mast-track: -0.01em; --mast-transform: none; --mast-style: normal; --h1: 36px; --h2: 23px; --lead: 19px; --body: 16px; --small: 14px; --tiny: 11px; --leading: 1.5; --measure: 62ch; --rowpad: 8px; --rw: 1px; --radius: 0px; --meta-track: 0.04em; --meta-transform: uppercase; --meta-weight: 500; --cols: 1; --dropcap: none; --kicker-bg: var(--accent); --kicker-ink: #ffffff; } /* ── 4. Contemporary Newsletter ────────────────────────────────────────── Morning Brew / Axios. Cream ground, warm orange and teal, rounded panels, short measure. Strongest for email, weakest for dense tables. */ :root[data-gg-theme="newsletter"] { --bg: #fffaf3; --panel: #ffefdd; --panel-2: #ffe2c4; --ink: #241c15; --muted: #6b5d4f; --rule: #e3d4c0; --hair: #eee0cf; --accent: #c9491a; --accent-ink: #ffffff; --pos: #0f6f63; --neg: #c0392b; --link: #0f6f63; --link-hover: #0a4a42; --thead-bg: #241c15; --thead-ink: #fffaf3; --zebra: #fff4e8; --f-mast: 'Newsreader', Georgia, serif; --f-display: 'Newsreader', Georgia, serif; --f-body: 'Karla', system-ui, sans-serif; --f-meta: 'Karla', system-ui, sans-serif; --mast-size: 42px; --mast-weight: 700; --mast-track: -0.015em; --mast-transform: none; --mast-style: normal; --h1: 40px; --h2: 26px; --lead: 20px; --body: 17px; --small: 15px; --tiny: 12px; --leading: 1.62; --measure: 56ch; --rowpad: 12px; --rw: 2px; --radius: 12px; --meta-track: 0.07em; --meta-transform: uppercase; --meta-weight: 700; --cols: 1; --dropcap: none; --kicker-bg: var(--panel-2); --kicker-ink: var(--accent); } /* ── 5. Broadsheet Classic ─────────────────────────────────────────────── Old newspaper. Playfair masthead at 62px uppercase, hairline rules, small-caps metadata, two-column setting and a drop cap on articles. The only direction that sets --cols to 2 and --dropcap to block. */ :root[data-gg-theme="broadsheet"] { --bg: #f4f1e8; --panel: #eae5d7; --panel-2: #ded8c6; --ink: #14120e; --muted: #544e40; --rule: #b5ad99; --hair: #cdc5b1; --accent: #7c2b18; --accent-ink: #f4f1e8; --pos: #2f5d3a; --neg: #7c2b18; --link: #7c2b18; --link-hover: #4d1a0e; --thead-bg: #14120e; --thead-ink: #f4f1e8; --zebra: #ece7da; --f-mast: 'Playfair Display', Georgia, serif; --f-display: 'Playfair Display', Georgia, serif; --f-body: 'Lora', Georgia, serif; --f-meta: 'Lora', Georgia, serif; --mast-size: 62px; --mast-weight: 900; --mast-track: 0.01em; --mast-transform: uppercase; --mast-style: normal; --h1: 44px; --h2: 25px; --lead: 18px; --body: 16px; --small: 13px; --tiny: 11px; --leading: 1.48; --measure: 62ch; --rowpad: 6px; --rw: 1px; --radius: 0px; --meta-track: 0.14em; --meta-transform: uppercase; --meta-weight: 600; --cols: 2; --dropcap: block; --kicker-bg: transparent; --kicker-ink: var(--accent); }