# Redbud Screen Tokens
> Online copy of the guide, tokens and palette pages: https://brand.redbudadvisorsatx.com
**The whole brand for a screen page** — an artifact, an internal HTML page, anything not print-shaped. Layout, structure, and how much design a page earns are yours; this file fixes the palette and the type.
Add `brand guidelines.md` only if the page carries real tables, stat groups, or callouts (it has the component specs), or a client will see it (logo, document layout, disclosure). For a print-shaped report, start from `report-template.html` instead.
Values are copied from `brand guidelines.md` — if they disagree, that file wins. A brand change updates both.
## Fonts
```html
```
- **Headings** — Lora 500, −0.015em (−0.02em at display size). Fallback: Georgia, serif.
- **Body** — Inter 400, 16px; 18px on a web page. Fallback: system-ui, sans-serif.
- **Eyebrow** — Inter 500, 12px, uppercase, 0.18em; 10–11px / 0.1em when dense.
- **Figures** — Inter, `font-variant-numeric: tabular-nums`.
- **Mono is allowed** where the brand has no equivalent: code, file paths, field and attribute names, IDs. System stack only, never a fourth webfont — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`. Not for prose, headings, or table figures.
## Tokens
```css
:root {
color-scheme: light dark;
/* brand */
--navy: #0d1936;
--charcoal: #191b1f; /* light-mode body ink */
--slate: #505561;
--navy-light: #b5b9c8;
--red: #d04724; /* accents, links, small text */
--red-muted: #c45236; /* full-bleed grounds + large panels ONLY */
--red-light: #e27e6b;
--green: #3e8343;
--green-dark: #29572c; /* the gain FIGURE on light; mid green fails AA as text */
--red-dark: #8b2f18; /* the loss FIGURE on light */
--green-light: #b4dac5;
/* data + semantics - charts, figures and status only, never a UI accent */
--gold: #d5a829;
--slate-blue: #6a7a99; /* chart series only */
--clay: #e8877e;
--greige: #b9b4a4;
--plum: #6f5a8c;
/* surfaces + ink — light */
--bg: #fbfaf7; /* paper */
--bg-alt: #f2ece2; /* cream — section fills, total rows */
--bg-panel: #ffffff;
--ink: #191b1f; /* charcoal - light-mode body ink */
--ink-muted: #505561; /* slate */
--rule: rgba(13,25,54,0.06); /* table rows; flat #edeceb where alpha is unavailable */
--rule-card: rgba(13,25,54,0.15); /* between cards in a grid; flat #d7d8da */
--fill-group: rgba(13,25,54,0.03); /* a second grouping level in a table; flat #f4f3f1 */
--accent: var(--red); /* → var(--navy) in the numbers context */
--pos: var(--green-dark);
--neg: var(--red-dark);
/* status: tint + text, both AAA */
--tint-gain: #d9f2da;
--tint-loss: #f5e9e6;
--tint-caution: #f1e9d5;
--gold-dark: #5e4a12;
}
/* surfaces + ink — dark. Same overrides in both selectors. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #141210; /* night — warm, so Navy still reads as a section on it */
--bg-alt: #0d1936; /* navy — section fills */
--bg-panel: #312b26; /* raised panel; #3f3831 is the hover/pressed state */
--ink: #f8f1e3;
--ink-muted: #bdb7a9;
--rule: #25211d;
--rule-card: #363330;
--fill-group: #1b1916;
--accent: var(--red); /* the brand red works on dark; only small TEXT changes */
--pos: #5eba64; /* small gain figures */
--neg: #e43f25; /* small loss figures */
}
}
:root[data-theme="dark"] {
--bg: #141210; /* night — warm, so Navy still reads as a section on it */
--bg-alt: #0d1936; /* navy — section fills */
--bg-panel: #312b26; /* raised panel; #3f3831 is the hover/pressed state */
--ink: #f8f1e3;
--ink-muted: #bdb7a9;
--rule: #25211d;
--rule-card: #363330;
--fill-group: #1b1916;
--accent: var(--red); /* the brand red works on dark; only small TEXT changes */
--pos: #5eba64; /* small gain figures */
--neg: #e43f25; /* small loss figures */
}
```
Give `body` an explicit `background: var(--bg)` — a transparent body borrows the host's theme.
**The dark ground is Night (`#141210`), and it is deliberately warm.** Navy is itself dark, so against any near-black its luminance ratio caps near 1.1 — hue is the only thing that can separate it. Night sits 168° away, so Navy still reads as a real section on top of it: `#141210` ground → `#0d1936` fills → `#312b26` panels, with `#3f3831` for hover and pressed states. On a navy-family ground Navy dissolves into the page, which is why one is not used.
**The brand red and green work on dark; only small text changes.** `#d04724` and `#3e8343` clear the 3:1 bar that applies to buttons, rules and large figures on Night. Small text needs 4.5:1, which is what `--neg` (`#e43f25`) and `--pos` (`#5eba64`) are for. `#e43f25` is the brand red pulled toward true red and lifted — lifting alone turns it salmon, and raising saturation alone turns it orange. White is reserved for the logo; body text on dark is cream (`#f8f1e3`).
## House Rules
- Title Case headings, h1–h3.
- Radius 0. No `box-shadow`.
- Rules, not fills: `--rule` between rows inside a component, `--rule-card` between cards in a grid.
- Two reds by area: `--red` for accents, links and small text; `--red-muted` for a full-bleed ground, with `--ink` cream on top.
Color, components and layout are specified in `brand guidelines.md` — Color Usage, Components, Document Layout.
## Logo and Disclosure
Internal pages carry **no logo**. A page wearing the logotype reads as a client deliverable, and one forward makes it one.
**On pages and documents, the logotype and the disclosure travel together.** A client-facing page takes both: the logotype as inline SVG (never a file path) and `context/reporting/report-disclosure.md`. Adding one without the other is the signal to stop and ask.
**HTML email is the exception to inline SVG.** Gmail strips inline `