brand-tokens.md 2.9 KB
description: How brand tokens (colors, fonts) map onto Infima CSS variables in this project. Source of truth is ASSETS/brand/CLAUDE.md.
load-when: Adjusting site colors, fonts, or any visual token.
Brand tokens → Infima
This project styles itself by overriding Infima CSS variables in src/css/custom.css. Brand source of truth lives in /Users/gazperi/Developer/ASSETS/brand/CLAUDE.md. Do not invent tokens here — pull values from there.
Color tokens
| Brand token | Value | Infima var |
|---|---|---|
--gazperi-bg |
#f5f0e8 |
--ifm-background-color |
--gazperi-ink |
#1a1918 |
--ifm-color-content |
--gazperi-accent |
#b85c38 |
--ifm-color-primary (+ dark/light scales) |
--gazperi-ink-muted |
rgba(26, 25, 24, 0.55) |
--ifm-color-content-secondary |
--gazperi-rule |
rgba(26, 25, 24, 0.15) |
--ifm-toc-border-color |
Dark-mode variant lives in [data-theme='dark'] and inverts --gazperi-bg / --gazperi-ink. Accent scales lighten in dark mode for readability.
Font tokens
| Layer | Font | Files in static/fonts/ |
Infima var |
|---|---|---|---|
| Wordmark | Share Tech 400 | ShareTech-Regular.ttf |
(used in .navbar__brand) |
| Headings | Spectral 600 | Spectral-SemiBold.ttf, Spectral-SemiBoldItalic.ttf |
--ifm-heading-font-family |
| Body | Source Serif 4 | SourceSerif4-Regular.ttf, SourceSerif4-Italic.ttf |
--ifm-font-family-base |
| UI / meta | Outfit 400 / 500 | Outfit-Regular.ttf, Outfit-Medium.ttf |
--ifm-font-family-monospace (overloaded) and inline component classes |
Fonts are loaded via @font-face in custom.css from /fonts/*.ttf (served from static/fonts/). No external CDN.
Adding a new color. Update ASSETS/brand/CLAUDE.md first if the token is brand-level. Then add a --gazperi-* var in :root and [data-theme='dark'] in src/css/custom.css. Map to an Infima var only if Docusaurus components consume that var.
Adding a new font. Drop the TTF/WOFF2 in static/fonts/. Add an @font-face block at the top of src/css/custom.css. Reference via font-family in component CSS.
Changing accent color. Update both light and dark scales (--ifm-color-primary + -dark, -darker, -darkest, -light, -lighter, -lightest) for visual consistency. Use a tool like https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima to generate the scale.