---
description: How brand tokens (colors, fonts) map onto Infima CSS variables in this project. Source of truth is ATIVOS/brand/CLAUDE.md.
load-when: Adjusting site colors, fonts, or any visual token.
---

# Brand tokens → Infima

<scope>
This project styles itself by overriding Infima CSS variables in `src/css/custom.css`. Brand source of truth lives in `/Users/gazperi/Developer/ATIVOS/brand/CLAUDE.md`. Do not invent tokens here — pull values from there.
</scope>

<conventions>
## 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.
</conventions>

<instructions>
<step n="1">
**Adding a new color.** Update `ATIVOS/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.
</step>

<step n="2">
**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.
</step>

<step n="3">
**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.
</step>
</instructions>