/* ============================================================ Saffron · Daily Content System · Media Kit — shared tokens ------------------------------------------------------------ Brand canon: /root/saffron-beta-content/_unpacked/design-system/ Tokens here are the subset needed for the 9 fillable card formats described in the Daily Content System deck slide 14. ============================================================ */ /* Pull display + body + mono families via Google Fonts CDN so the kit stays self-contained without bundling 13+ TTFs. Exact same families as the brand bundle's colors_and_type.css. */ @import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700&family=Host+Grotesk:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap'); :root { /* Brand surfaces */ --black: #000000; --creme: #ECE7E0; --black-brown: #47140B; --wash-deep: #150604; --wash-warm: #1E0805; --stroke-faint: #242120; /* Brand primaries */ --saffron-brown: #962817; --saffron-red: #FA3F06; /* Brand secondaries */ --purple: #CA56ED; --gold: #FFBC09; --gold-20: rgba(255, 188, 9, 0.2); --gold-40: rgba(255, 188, 9, 0.4); /* Neutrals */ --white: #FFFFFF; --txt-muted: #8C8C8C; /* Type families */ --font-display: "Funnel Display", serif; --font-body: "Host Grotesk", system-ui, sans-serif; --font-mono: "Roboto Mono", ui-monospace, monospace; } /* ============================================================ Card-host conventions ------------------------------------------------------------ Every card file uses as its root. The dimensions below match native X image sizes so a browser screenshot at 100% zoom produces a tweet-ready asset. ============================================================ */ html, body { margin: 0; padding: 0; } body { background: var(--black); color: var(--creme); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow: hidden; } /* Card dimensions — native X */ .card { position: relative; overflow: hidden; } .card-1x1 { width: 1080px; height: 1080px; } /* Wed Data Drop */ .card-4x5 { width: 1080px; height: 1350px; } /* Fri Rate Card, Thu Pulled Quote */ .card-16x9 { width: 1920px; height: 1080px; } /* Tue Pick Your Yield, Mon Diagram */ .card-3x1 { width: 1500px; height: 500px; } /* Profile banner */ /* Signature container: hairline ledger grid + corner arrows */ .frame { position: absolute; inset: 32px; border: 1px solid var(--black-brown); pointer-events: none; } .frame::before, .frame::after, .frame > i::before, .frame > i::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--saffron-brown); } .frame::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; } .frame::after { top: -8px; right: -8px; border-left: 0; border-bottom: 0; } .frame > i::before { bottom: -8px; left: -8px; border-right: 0; border-top: 0; content: ""; position: absolute; } .frame > i::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; content: ""; position: absolute; } /* Eyebrow labels — mono caps with +2% letter tracking per brand */ .eyebrow { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--saffron-brown); font-size: 18px; } .eyebrow-creme { color: var(--creme); } .eyebrow-gold { color: var(--gold); } .eyebrow-purple { color: var(--purple); } /* Display headlines — Funnel Display Light, the brand's signature */ .display-xl { font-family: var(--font-display); font-weight: 300; line-height: 0.92; letter-spacing: -0.005em; } .display-lg { font-family: var(--font-display); font-weight: 300; line-height: 0.95; } .display-md { font-family: var(--font-display); font-weight: 300; line-height: 1.02; } /* Body — Host Grotesk */ .body-lg { font-family: var(--font-body); font-weight: 400; font-size: 26px; line-height: 1.39; } .body-md { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 1.45; } .body-sm { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; } /* Mono — data, stats, labels */ .mono-md { font-family: var(--font-mono); font-weight: 400; font-size: 16px; letter-spacing: 0.02em; } .mono-sm { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; } /* Hard rule: NO greyed body text. Brand canon forbids opacity-dimmed body. Use --creme for solid body, --txt-muted ONLY on mono metadata. */ /* Primary gold pill — the protocol's CTA shape */ .pill { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 100px; background: var(--gold); color: #000; font-family: var(--font-body); font-weight: 600; font-size: 16px; text-decoration: none; } /* Wordmark / icon placement */ .brand-mark { position: absolute; bottom: 56px; left: 56px; width: 32px; height: 32px; } .beta-url { position: absolute; bottom: 56px; right: 56px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--purple); text-transform: lowercase; } /* Bracketed placeholders — `.ph` so writers can tab-search and replace. Default gold for the writer's eye, but cards can scope `.ph` to inherit the parent color via `.host .ph { color: inherit }` when the design intent is a non-gold color (e.g. the Data Drop's red). */ .ph { color: var(--gold); font-style: normal; } .ph-red { color: var(--saffron-red); } .ph-purple { color: var(--purple); } .ph-creme { color: var(--creme); }