# Codex Insider — Brand Kit (Developer Handover) Independent media brand covering OpenAI's Codex. Website + weekly newsletter. **Not affiliated with OpenAI** — every page footer and email must carry: *"Codex Insider is an independent publication and is not affiliated with OpenAI."* Open `brand-kit-reference.html` for the visual spec of everything below. ## Files ``` styles.css # entry point — link this one file tokens/colors.css # full palette + light/dark semantic tokens tokens/typography.css # font stacks, sizes, weights, tracking (+ Google Fonts import) tokens/spacing.css # 4px spacing scale, radii assets/ logo-mark-gradient.svg # primary mark (squircle, brand gradient) logo-mark-black.svg # mono, on light backgrounds logo-mark-white.svg # mono, on dark backgrounds app-icon-gradient.svg # rounded-square app icon, light app-icon-dark.svg # rounded-square app icon, dark (ink) png/ # transparent PNG exports logo-gradient-{512,256,128,64,32,16}.png logo-black-{512,128}.png logo-white-{512,128}.png app-icon-gradient-{512,128}.png app-icon-dark-{512,128}.png brand-kit-reference.html # self-contained visual brand kit (open in any browser) ``` ## Fonts - **Geist** (400/500/600/700) — everything readable. Headings 600 with tight tracking (display −3%, headings −1.5%). - **Geist Mono** (400/500/600) — kickers (uppercase, +6% tracking), metadata, code. Never for body copy. - Loaded via Google Fonts `@import` in `tokens/typography.css`. Self-host for production email (plus `Arial, sans-serif` fallbacks inline — email clients won't load webfonts reliably). - Stacks: `var(--font-sans)`, `var(--font-mono)`. ## Color & modes - **Light is default.** Follow `prefers-color-scheme`, offer a manual toggle. - Dark mode = set `data-theme="dark"` on `` (or any subtree). All semantic tokens (`--bg`, `--surface`, `--text-1/2/3`, `--border`, `--accent`, `--accent-soft`, `--link`, shadows) flip automatically — style components with semantic tokens only, never raw ramp values. - Accent: indigo 600 `#5152E8` (light) / indigo 400 `#8B93F8` (dark). Gradient moments: max one per view (`--gradient-brand`, `--gradient-mist`, `--gradient-ink`). - Terminal/code blocks always use `--gradient-ink` (dark), in both modes. ```html ``` ## Logo rules - Primary = gradient mark; mono black/white where gradient can't print or contrast fails. - Min size 16px; clear space = ½ mark width on all sides; don't recolor, rotate, or put the squircle inside another container. - Favicon: `png/logo-gradient-32.png` + `-16.png`. App/touch icons: `app-icon-*` at 512/128. - Wordmark: "Codex Insider" in Geist Semibold, sentence case, tight tracking, set next to the mark at ~70% of mark height. ## Component patterns (see reference page) - Buttons: pill radius (999px), Geist Medium 500; primary = `--accent` bg / `--on-accent` text; secondary = `--surface` + 1px `--border`; hover darkens to `--accent-strong`, press scales 0.98. - Badges/kickers: mono uppercase pill, `--accent-soft` bg + `--accent-strong` text. - Cards: `--surface` bg, 1px `--border`, 16px radius, `--shadow-card`; hover lifts to `--shadow-pop`. No colored left-border cards. - Inputs: 10px radius, border → `--accent` on focus. - Motion: 150–200ms ease-out only; blinking cursor is the one playful motif. ## Voice Sharp, not snarky — reads like a great changelog. Sentence case everywhere. "You" voice. No emoji in editorial; terminal glyphs (`➜ ✓ #`) only inside code blocks.