Agent guide

# Foundry style guide.

The single reference for how Foundry tooling looks, reads, and behaves. It's
written for people and for coding agents. Every line wraps at 80 characters
so agents can quote it cleanly.

If you're an agent: read this whole file before you build UI for Foundry.
Follow the rules marked MUST. Treat SHOULD as the default unless the user
asks for something else.

## Contents.

1. Files and URLs
2. Quick start
3. Principles
4. Logo
5. Color
6. Typography
7. Layout, spacing, radius, and shadow
8. Components
9. Dark mode
10. Voice and copy
11. Accessibility
12. Agent checklist
13. Token reference

## 1. Files and URLs.

Everything lives in the `brand/` directory of the foundry-branding repo. The
app serves the same files at `/brand/...` when it runs.

| File                          | What it is                                 |
| ----------------------------- | ------------------------------------------ |
| `brand/STYLE_GUIDE.md`        | This guide                                 |
| `brand/tokens.json`           | Source of truth for every token            |
| `brand/foundry-theme.css`     | shadcn/ui theme for Tailwind CSS v4        |
| `brand/foundry-tokens.css`    | Plain CSS variables, no framework needed   |
| `public/r/foundry.json`       | shadcn registry item (tweakcn format)      |
| `brand/logo/`                 | Logo, glyph, app mark, and favicon         |
| `brand/llms.txt`              | Short index for agents                     |

The CSS files and the registry item are generated. Don't edit them by hand.
Change `brand/tokens.json`, then run `pnpm tokens`.

Examples use the production site:
`https://foundry-branding.vercel.app`.

## 2. Quick start.

### shadcn/ui projects.

Install the theme from the registry item:

```sh
pnpm dlx shadcn@latest add https://foundry-branding.vercel.app/r/foundry.json
```

Or copy `brand/foundry-theme.css` into your project and import it after
Tailwind in your global stylesheet:

```css
@import "tailwindcss";
@import "tw-animate-css";
@import "./foundry-theme.css";
```

Then load the fonts. In a bundled app, self-host them with Fontsource:

```sh
pnpm add @fontsource-variable/inter @fontsource-variable/lora \
  @fontsource-variable/jetbrains-mono
```

```css
@import "@fontsource-variable/inter";
@import "@fontsource-variable/lora";
@import "@fontsource-variable/jetbrains-mono";
```

Use the `radix-vega` style in `components.json`. That's what this theme was
tuned against.

### Projects without shadcn/ui.

Link `brand/foundry-tokens.css` and use the `--fd-` variables:

```css
.button-primary {
  background: var(--fd-primary);
  color: var(--fd-primary-foreground);
  border-radius: var(--fd-radius);
  font-family: var(--fd-font-sans);
}
```

Load the fonts from Google Fonts if you can't bundle them:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"
/>
```

That font URL is the one line in this guide that runs past 80 characters.
Don't break it.

## 3. Principles.

- **Bold, then clean.** One strong orange signal on a calm, navy-tinted
  base. Don't add a second loud color.
- **Orange means "act here."** Use it for the primary action, the current
  item, focus rings, and the brand. Don't use it for decoration.
- **Ink does the heavy lifting.** Text, structure, and the sidebar use the
  navy ink scale, not pure black or neutral gray.
- **Sharp, not soft.** Small radius, thin borders, light shadows. The mark
  is a square, and the UI should feel like it.
- **Dense but breathable.** This is tooling. Favor compact, scannable
  layouts with clear hierarchy over big marketing whitespace.

## 4. Logo.

| Asset              | File                                      | Use on   |
| ------------------ | ----------------------------------------- | -------- |
| Lockup             | `brand/logo/foundry-logo.svg`             | Light    |
| Lockup, reversed   | `brand/logo/foundry-logo-reversed.svg`    | Dark     |
| Lockup (PNG)       | `brand/logo/foundry-logo.png`             | Light    |
| Lockup, rev. (PNG) | `brand/logo/foundry-logo-reversed.png`    | Dark     |
| Glyph              | `brand/logo/foundry-glyph.svg`            | Either   |
| App mark (square)  | `brand/logo/foundry-mark.svg`             | Either   |
| App mark (raster)  | `brand/logo/foundry-mark.png`             | Either   |
| Favicon            | `brand/logo/favicon.ico`                  | Browsers |
| Email signature    | `brand/logo/email/foundry-logo-email.png` | Email    |

Use SVG wherever you can. The PNG lockups are 1200px wide with transparent
backgrounds, for slides, docs, and tools that don't take SVG. The style
guide page in the app links to every file.

### Email signatures.

Use `foundry-logo-email.png` for email signatures, not the full-size
lockup. It's 400×100 on a solid white background, so it stays sharp at
200×50 and still reads when a mail app switches to dark mode. Link to it by
URL so everyone's signature picks up the same file:

```text
https://foundry-branding.vercel.app/brand/logo/email/foundry-logo-email.png
```

```html
<img
  src="https://foundry-branding.vercel.app/brand/logo/email/foundry-logo-email.png"
  width="200"
  height="50"
  alt="Foundry"
  style="display:block;border:0;"
/>
```

In Gmail, go to Settings, then See all settings, then Signature. Click the
image button, choose Web address (URL), and paste the link. If it shows too
large, click the image and pick a smaller size. For HTML signatures, use the
`<img>` tag above. It sets the size to 200×50.

The app mark in `assets/logo_mark/` is the final version of the mark and the
final orange (`#E8871E`). Every other logo file uses that same orange.

Rules:

- MUST use the provided files. Don't redraw, retype, or re-space the logo.
- MUST keep the glyph Foundry Orange `#E8871E`. Never tint it, shade it, or
  swap it for the slide orange `#F06924`.
- MUST color the wordmark ink `#0B1723` on light surfaces and white on dark
  ones. In React, `FoundryLogo` uses `currentColor` for the wordmark.
- SHOULD keep clear space around the lockup equal to the height of the
  glyph's dot on every side.
- SHOULD keep the lockup at least 96px wide and the glyph at least 16px.
- Use the square app mark for favicons, avatars, and app tiles. Use the
  lockup in headers and sidebars.
- Don't place the logo on orange, on photos, or on busy backgrounds. Use
  white, ink-950, or ink-975.
- Don't stretch, rotate, outline, add effects to, or animate the logo.

## 5. Color.

### Brand colors.

| Name            | Hex       | Role                                       |
| --------------- | --------- | ------------------------------------------ |
| Foundry Orange  | `#E8871E` | Brand, primary actions, focus, highlights  |
| Ink             | `#0B1723` | Text, sidebar, dark backgrounds            |
| Teal            | `#5B9EA6` | Supporting accent, charts                  |
| Ember           | `#E52F09` | Destructive actions, errors, charts        |
| White           | `#FFFFFF` | Light backgrounds, text on dark            |

Where they came from:

- Foundry Orange comes from the final logo mark.
- Ink is the navy band in the slide templates.
- Teal is from the Round 3 logo explorations.
- Ember is the red-orange in the slide template bands.
- Status green, blue, and amber come from the InstUI palette in
  `assets/source_files/Mapping.svg`.

### Scales.

Each brand family has 11 steps, from 50 to 950. Ink also has a 450 step for
light-mode input borders and a 975 step for the darkest surfaces. The status
families only carry the steps the theme uses. 500 is the anchor:

- orange-500 is the exact mark color.
- ink-950 is the exact slide navy.
- teal-500 and ember-500 are the exact source colors.

The full hex and OKLCH values are in `brand/tokens.json` and in section 13.

In Tailwind projects with the theme loaded, use the primitives as
`bg-foundry-orange-500`, `text-foundry-ink-700`, and so on. Prefer the
semantic tokens below. Reach for a primitive only when no token fits.

### The two orange rules.

1. **Orange buttons use ink text, never white.** White on `#E8871E` is
   2.65:1 and fails WCAG. Ink on orange is 6.82:1. The theme already sets
   `primary-foreground` to ink.
2. **Orange text uses the `link` token.** That's orange-700 `#AC5101`
   (5.34:1 on white) in light mode and orange-400 `#F6A14F` (8.72:1 on ink)
   in dark mode. Don't set text in orange-500 on white.

Orange fills that show state, like a switch track, are an accepted
exception in light mode. See section 11.

### Semantic tokens.

Build with these, not with raw hex. They swap for dark mode on their own.

| Token                   | Use it for                                    |
| ----------------------- | --------------------------------------------- |
| `background`            | Page background                               |
| `foreground`            | Default text                                  |
| `card`, `popover`       | Raised surfaces and menus                     |
| `primary`               | The one main action per view, current state   |
| `secondary`             | Secondary buttons, quiet fills                |
| `muted`                 | Subtle fills, skeletons, table headers        |
| `muted-foreground`      | Helper text, captions, metadata               |
| `accent`                | Hover and selected fills in menus and lists   |
| `destructive`           | Delete, revoke, errors                        |
| `success`               | Passed, healthy, complete                     |
| `warning`               | Degraded, needs attention, pending review     |
| `info`                  | Neutral notices, in progress                  |
| `link`                  | Inline links and orange text                  |
| `border`, `input`       | Dividers and form control borders             |
| `ring`                  | Focus rings (orange-600 light, 500 dark)      |
| `chart-1` to `chart-5`  | Data series, in that order                    |
| `sidebar-*`             | The app sidebar, which is ink in both modes   |

`success`, `warning`, `info`, and `link` are Foundry additions. They aren't
part of stock shadcn/ui. Each one except `link` has a `-foreground` pair.

### Status colors.

Map states the same way everywhere:

| State                        | Token         | Icon (lucide)        |
| ---------------------------- | ------------- | -------------------- |
| Succeeded, healthy, live     | `success`     | `CircleCheck`        |
| Failed, error, blocked       | `destructive` | `CircleX`            |
| Running, in progress         | `info`        | `LoaderCircle`       |
| Warning, degraded, pending   | `warning`     | `TriangleAlert`      |
| Queued, draft, inactive      | `muted`       | `CircleDashed`       |

MUST pair status color with an icon or a label. Never rely on color alone.

For soft status badges, use a 12% tint of the token with the token as text,
like `bg-success/12 text-success`. Those pairs pass 4.5:1 in both modes. For
warning, use `bg-warning/15` with `text-foreground`, since amber text is too
light to read on its own tint. Use the solid token with its foreground pair
when you need more emphasis.

### Charts.

Use `chart-1` through `chart-5` in order: orange, teal, ink, ember, then a
deep orange (light mode) or peach (dark mode).
With two series, use `chart-1` and `chart-2`. Keep orange for the series
that matters most. Don't use `destructive` for a series unless the series
means failure.

## 6. Typography.

| Role   | Family         | Use it for                                      |
| ------ | -------------- | ----------------------------------------------- |
| Sans   | Inter          | All UI and headings. The default.               |
| Serif  | Lora           | Long-form reading, pull quotes, intros          |
| Mono   | JetBrains Mono | Code, IDs, hashes, keys, logs, tabular numbers  |

In Tailwind, use `font-sans`, `font-serif`, and `font-mono`. In plain CSS,
use `--fd-font-sans`, `--fd-font-serif`, and `--fd-font-mono`.

### Type scale.

| Style    | Size / line height | Weight | Tracking | Tailwind              |
| -------- | ------------------ | ------ | -------- | --------------------- |
| Display  | 48 / 52            | 700    | -0.03em  | `text-5xl font-bold`  |
| H1       | 36 / 40            | 700    | -0.025em | `text-4xl font-bold`  |
| H2       | 30 / 36            | 600    | -0.02em  | `text-3xl`            |
| H3       | 24 / 32            | 600    | -0.015em | `text-2xl`            |
| H4       | 20 / 28            | 600    | -0.01em  | `text-xl`             |
| Body     | 16 / 24            | 400    | normal   | `text-base`           |
| UI       | 14 / 20            | 400    | normal   | `text-sm`             |
| Caption  | 12 / 16            | 500    | normal   | `text-xs font-medium` |
| Overline | 12 / 16            | 600    | 0.06em   | `text-xs uppercase`   |
| Code     | 13 / 20            | 400    | normal   | `font-mono`           |

Rules:

- `text-sm` (14px) is the default size inside the app. Use `text-base` for
  reading content and forms on marketing or docs pages.
- Headings are bold and tight, which echoes the wordmark. Use
  `tracking-tight` on H1 to H3.
- Use sentence case for headings, buttons, and labels.
- Use `tabular-nums` for numbers that line up in tables and stats.
- Never use Lora for buttons, labels, inputs, or navigation.
- Keep reading text between 60 and 80 characters per line (`max-w-prose`).

## 7. Layout, spacing, radius, and shadow.

- **Spacing:** a 4px base (`--spacing: 0.25rem`). Use Tailwind steps of 1, 2,
  3, 4, 6, 8, 12, and 16. Use `gap-*` over margins.
- **Radius:** base `--radius` is `0.375rem` (6px). Buttons and inputs land at
  about 5px, cards at about 8px. Don't use fully rounded shapes except for
  avatars, status dots, and pills.
- **Borders:** 1px `border`. Cards use a 1px ring of `foreground` at 10%.
- **Shadows:** light, with a navy tint in light mode and black in dark mode.
  Use `shadow-xs` on cards and `shadow-lg` only on floating layers.
- **App shell:** an ink sidebar on the left (16rem, collapses to icons), a
  56px header with a sidebar toggle, breadcrumbs, search (Cmd+K), the theme
  toggle, and the user menu. The content area sits on `background` with
  24px padding (16px on mobile).
- **Content width:** dashboards can run full width. Forms and settings pages
  SHOULD cap at `max-w-3xl`. Reading pages SHOULD cap at `max-w-prose`.
- **Grids:** stat cards in a 1, 2, then 4 column grid. Two-column layouts
  collapse to one below the `lg` breakpoint.

## 8. Components.

Build with shadcn/ui and the `radix-vega` style. The components in
`src/components/ui` are generated by the shadcn CLI. Don't edit them, and
don't lint them. Wrap them in your own components when you need changes.

- **Buttons.** One `default` (orange) button per view for the main action.
  Use `outline` or `secondary` for everything else and `ghost` for toolbar
  icons. `destructive` is for delete and revoke only. Give icon-only
  buttons an `aria-label` and a tooltip.
- **Link buttons.** The stock `link` variant of `Button` and `Badge` uses
  `text-primary`, which fails contrast on light backgrounds. MUST add
  `className="text-link"` when you use it.
- **Badges.** Use them for status and counts, with the status mapping in
  section 5. Don't use them as buttons.
- **Cards.** Use them to group a stat, a chart, or a form section. Don't
  nest cards inside cards.
- **Forms.** Use `Field`, `FieldLabel`, `FieldDescription`, and
  `FieldError`. Every input needs a visible label. Put the primary submit
  button last, on the right.
- **Tables.** Left-align text, right-align numbers, and set IDs in
  `font-mono`. Put row actions in a `DropdownMenu` at the end of the row.
- **Empty states.** Use `Empty` with an icon, one sentence on what's
  missing, and one action.
- **Feedback.** Use `sonner` toasts for results of an action. Use `Alert`
  for persistent page-level messages. Confirm destructive actions with
  `AlertDialog`.
- **Navigation.** Use `Sidebar` for app navigation, `Breadcrumb` for
  location, and `Tabs` to switch views of the same object. `Tabs` MUST have
  a `TabsContent` panel for every trigger. For a segmented filter with no
  panels, like a 7d, 14d, or 30d range, use `ToggleGroup` instead.
- **Command menu.** `CommandDialog` doesn't wrap its children in `Command`
  anymore. MUST nest `<Command>` inside it, or the menu crashes on open.
- **Loading.** Use `Skeleton` for content and `Spinner` inside buttons.

Use semantic classes like `bg-primary`, `text-muted-foreground`, and
`border-border`. MUST NOT hardcode hex values or use Tailwind palette colors
like `bg-orange-500` or `text-gray-600` in app code.

## 9. Dark mode.

- Dark mode is a `.dark` class on `<html>`. The app uses `next-themes` with
  `attribute="class"` and offers light, dark, and system.
- The dark background is ink-950 `#0B1723`, the slide navy. Cards sit one
  step lighter on ink-900. The sidebar sits one step darker on ink-975.
- Orange stays the same in both modes. Text on orange stays ink.
- `foundry-theme.css` swaps every semantic token under `.dark`.
  `foundry-tokens.css` follows the OS and also honors
  `data-theme="light"` or `data-theme="dark"` on `<html>`.
- Test every screen in both modes before you ship it.

## 10. Voice and copy.

- Use active voice, plain language, and contractions.
- Use sentence case. Document headlines end with a period. UI labels,
  buttons, and menu items don't.
- Spell out one through nine. Use numerals for 10 and up, and always for
  data, units, and versions.
- Write dates as Month Day, like October 7. No ordinal suffixes.
- Use the Oxford comma.
- Say what happened and what to do next. "Run failed. Check the logs." not
  "An error has occurred."
- Avoid hype words like seamless, robust, game-changing, empowering,
  unlocking, supercharging, or transforming.

## 11. Accessibility.

The target is WCAG 2.2 AA: 4.5:1 for text, and 3:1 for large text and the
parts of a control you need to see to use it.

### Color.

- `pnpm check:contrast` checks every token pair the components use, in both
  modes, including tints like `bg-success/12`. Run it after any change to
  `brand/tokens.json`. It MUST pass.
- Input borders hold 3:1: ink-450 `#8A949F` on white (3.08:1) and ink-500
  on ink-900 cards (3.12:1). Don't swap `border-input` for `border-border`
  on form controls. Use `border` only for dividers.
- The focus `ring` is orange-600 `#CF6D01` in light mode (3.60:1 on white)
  and orange-500 in dark mode. Components draw a solid 1px `border-ring`
  plus a softer halo. The solid border is the part that meets 3:1.

### Accepted exception: orange fills in light mode.

Decided October 7, 2026. Light-mode `primary` stays Foundry Orange
`#E8871E`, the logo color, even though it's 2.65:1 against white.

- **What falls short:** fills that show state, where WCAG 1.4.11 asks for
  3:1. That's the switch "on" track (2.65:1), the slider range, and the
  progress bar (2.40:1 against the `muted` track). Dark mode passes.
- **Why we accept it:** the alternative was orange-600 `#CF6D01`, which
  passes but turns every primary button a darker, burnt orange that no
  longer matches the logo. Brand recognition won.
- **What still passes:** text on orange (ink, 6.82:1), the focus ring
  (orange-600 in light mode), and the checkbox check mark.
- **What keeps it usable:** each of these controls has a second cue that
  doesn't depend on the orange.
  - Switch: the thumb position and the visible label.
  - Checkbox: the ink check mark.
  - Slider: the thumb position, plus the value shown as text.
  - Progress: the value shown as text.
- **Rules that come with it:**
  - MUST show the value as text next to every slider and progress bar.
  - MUST give every switch a visible label.
  - MUST NOT use orange alone to show state anywhere else. Pair it with
    an icon, a label, a position change, or a border.
  - MUST NOT rely on orange-500 lines or borders to separate things on
    white. Use orange-600 or `ring` for that.
- **How it's tracked:** `pnpm check:contrast` lists these pairs as
  "accepted exception" lines. They don't fail the check. If you change
  light `primary`, update this section.

### Structure and keyboard.

- MUST keep visible focus. Don't remove `outline` or `ring` styles.
- MUST give every input a visible label and every icon-only button an
  `aria-label`. If a button shows a dot or count, put it in the label too,
  like "Notifications, 2 unread".
- MUST NOT signal status by color alone.
- MUST have one `<main>`. `SidebarInset` already renders it, so don't nest
  another one inside it.
- MUST start each app shell with a "Skip to content" link, give each route
  its own `document.title`, and move focus to the content on navigation.
- MUST name slider thumbs. The shadcn `Slider` puts `aria-label` on the
  root, which screen readers don't read. Use a wrapper that copies the label
  to each `role="slider"` thumb, like `LabeledSlider` in this repo.
- MUST pass `labels` to `Calendar` so each day's name contains the number
  shown, like "Monday, October 5, 2026". The default label uses ordinals
  ("5th"), which fails WCAG 2.5.3 and the date rule in section 10.
- MUST make scrollable regions reachable by keyboard: a `<section>` with
  `tabIndex={0}` and an `aria-label`, around a plain `<pre>` or list.
- SHOULD support keyboard paths for everything: menus, dialogs, Cmd+K, and
  table actions.
- The theme turns off animation and transitions under
  `prefers-reduced-motion: reduce`. Don't override that.
- Run axe (for example, the axe DevTools extension) on each page in both
  modes before you ship.

## 12. Agent checklist.

Before you hand back UI work, confirm each item:

- [ ] The theme is loaded from `foundry-theme.css` or the registry item.
- [ ] No hex values or stock Tailwind palette colors in app code.
- [ ] One orange primary action per view, with ink text.
- [ ] Orange text uses `text-link`, not `text-primary`.
- [ ] Status uses `success`, `warning`, `info`, `destructive`, or `muted`,
      with an icon or label.
- [ ] Inter for UI, JetBrains Mono for code and IDs, Lora only for
      long-form reading.
- [ ] The logo comes from `brand/logo/` with the glyph in `#E8871E`.
- [ ] Light and dark modes both look right.
- [ ] `pnpm check:contrast` passes, and axe shows no violations in either
      mode.
- [ ] Copy is in sentence case and active voice.
- [ ] `src/components/ui` is untouched.

## 13. Token reference.

Generated from `brand/tokens.json`. Values are hex. The CSS theme uses the
OKLCH equivalents.

<!-- tokens:start -->

### Semantic tokens.

| Token                        | Light                | Dark                 |
| ---------------------------- | -------------------- | -------------------- |
| `background`                 | `#FFFFFF` white      | `#0B1723` ink.950    |
| `foreground`                 | `#0B1723` ink.950    | `#F9FAFC` ink.50     |
| `card`                       | `#FFFFFF` white      | `#131F2C` ink.900    |
| `card-foreground`            | `#0B1723` ink.950    | `#F9FAFC` ink.50     |
| `popover`                    | `#FFFFFF` white      | `#131F2C` ink.900    |
| `popover-foreground`         | `#0B1723` ink.950    | `#F9FAFC` ink.50     |
| `primary`                    | `#E8871E` orange.500 | `#E8871E` orange.500 |
| `primary-foreground`         | `#0B1723` ink.950    | `#0B1723` ink.950    |
| `secondary`                  | `#F0F4F7` ink.100    | `#202D3A` ink.800    |
| `secondary-foreground`       | `#131F2C` ink.900    | `#F9FAFC` ink.50     |
| `muted`                      | `#F0F4F7` ink.100    | `#202D3A` ink.800    |
| `muted-foreground`           | `#616C79` ink.500    | `#98A3AE` ink.400    |
| `accent`                     | `#FFEBD8` orange.100 | `#202D3A` ink.800    |
| `accent-foreground`          | `#723213` orange.900 | `#F9FAFC` ink.50     |
| `destructive`                | `#B91700` ember.600  | `#FF927A` ember.400  |
| `destructive-foreground`     | `#FFFFFF` white      | `#0B1723` ink.950    |
| `success`                    | `#027634` green.600  | `#42A76E` green.400  |
| `success-foreground`         | `#FFFFFF` white      | `#0B1723` ink.950    |
| `warning`                    | `#C08A00` amber.500  | `#D1A944` amber.400  |
| `warning-foreground`         | `#0B1723` ink.950    | `#0B1723` ink.950    |
| `info`                       | `#0E68B3` blue.600   | `#5C99CB` blue.400   |
| `info-foreground`            | `#FFFFFF` white      | `#0B1723` ink.950    |
| `link`                       | `#AC5101` orange.700 | `#F6A14F` orange.400 |
| `border`                     | `#E1E7ED` ink.200    | `#202D3A` ink.800    |
| `input`                      | `#8A949F` ink.450    | `#616C79` ink.500    |
| `ring`                       | `#CF6D01` orange.600 | `#E8871E` orange.500 |
| `chart-1`                    | `#CF6D01` orange.600 | `#E8871E` orange.500 |
| `chart-2`                    | `#44868D` teal.600   | `#7AB9C0` teal.400   |
| `chart-3`                    | `#34414F` ink.700    | `#CBD4DC` ink.300    |
| `chart-4`                    | `#E52F09` ember.500  | `#FF927A` ember.400  |
| `chart-5`                    | `#914213` orange.800 | `#FFBC80` orange.300 |
| `sidebar`                    | `#0B1723` ink.950    | `#060F19` ink.975    |
| `sidebar-foreground`         | `#CBD4DC` ink.300    | `#CBD4DC` ink.300    |
| `sidebar-primary`            | `#E8871E` orange.500 | `#E8871E` orange.500 |
| `sidebar-primary-foreground` | `#0B1723` ink.950    | `#0B1723` ink.950    |
| `sidebar-accent`             | `#202D3A` ink.800    | `#131F2C` ink.900    |
| `sidebar-accent-foreground`  | `#FFFFFF` white      | `#FFFFFF` white      |
| `sidebar-border`             | `#202D3A` ink.800    | `#131F2C` ink.900    |
| `sidebar-ring`               | `#E8871E` orange.500 | `#E8871E` orange.500 |

### Other tokens.

| Token             | Value          |
| ----------------- | -------------- |
| `radius`          | `0.375rem`     |
| `spacing`         | `0.25rem`      |
| `tracking-normal` | `-0.005em`     |
| `font-sans`       | Inter          |
| `font-serif`      | Lora           |
| `font-mono`       | JetBrains Mono |

### Orange.

Foundry Orange. The brand color, taken from the final logo mark. 500 is the
exact mark color.

| Step | Hex       | OKLCH                          |
| ---- | --------- | ------------------------------ |
| 50   | `#FFF5EC` | `oklch(0.9755 0.0161 64.6764)` |
| 100  | `#FFEBD8` | `oklch(0.9511 0.0333 65.9631)` |
| 200  | `#FFD7B4` | `oklch(0.9045 0.0643 63.0622)` |
| 300  | `#FFBC80` | `oklch(0.8442 0.1087 62.3629)` |
| 400  | `#F6A14F` | `oklch(0.7790 0.1398 62.0832)` |
| 500  | `#E8871E` | `oklch(0.7131 0.1581 60.3964)` |
| 600  | `#CF6D01` | `oklch(0.6356 0.1548 56.2598)` |
| 700  | `#AC5101` | `oklch(0.5398 0.1403 50.9826)` |
| 800  | `#914213` | `oklch(0.4751 0.1208 46.6297)` |
| 900  | `#723213` | `oklch(0.3993 0.0999 43.8155)` |
| 950  | `#481D0A` | `oklch(0.2907 0.0720 42.5498)` |

### Ink.

Ink. Navy-tinted neutrals. 950 is the navy from the slide templates.

| Step | Hex       | OKLCH                           |
| ---- | --------- | ------------------------------- |
| 50   | `#F9FAFC` | `oklch(0.9849 0.0029 264.5421)` |
| 100  | `#F0F4F7` | `oklch(0.9650 0.0059 239.8198)` |
| 200  | `#E1E7ED` | `oklch(0.9251 0.0104 247.9387)` |
| 300  | `#CBD4DC` | `oklch(0.8654 0.0148 244.7415)` |
| 400  | `#98A3AE` | `oklch(0.7102 0.0204 248.1147)` |
| 450  | `#8A949F` | `oklch(0.6620 0.0200 250.6793)` |
| 500  | `#616C79` | `oklch(0.5266 0.0245 252.6462)` |
| 600  | `#4A5764` | `oklch(0.4505 0.0269 248.4234)` |
| 700  | `#34414F` | `oklch(0.3696 0.0296 250.5289)` |
| 800  | `#202D3A` | `oklch(0.2913 0.0298 248.8832)` |
| 900  | `#131F2C` | `oklch(0.2347 0.0304 251.1387)` |
| 950  | `#0B1723` | `oklch(0.2000 0.0298 249.5181)` |
| 975  | `#060F19` | `oklch(0.1648 0.0257 250.5477)` |

### Teal.

Teal. The supporting accent from the Round 3 logo explorations.

| Step | Hex       | OKLCH                           |
| ---- | --------- | ------------------------------- |
| 50   | `#EEF9FB` | `oklch(0.9745 0.0119 209.8052)` |
| 100  | `#DBF2F4` | `oklch(0.9449 0.0243 203.0783)` |
| 200  | `#BFE5E9` | `oklch(0.8960 0.0400 204.2993)` |
| 300  | `#9CD1D7` | `oklch(0.8259 0.0553 204.8443)` |
| 400  | `#7AB9C0` | `oklch(0.7457 0.0652 204.7185)` |
| 500  | `#5B9EA6` | `oklch(0.6579 0.0692 205.5033)` |
| 600  | `#44868D` | `oklch(0.5795 0.0680 204.5404)` |
| 700  | `#326E74` | `oklch(0.5011 0.0626 204.1303)` |
| 800  | `#25575C` | `oklch(0.4248 0.0540 204.1653)` |
| 900  | `#1B4347` | `oklch(0.3561 0.0452 204.1613)` |
| 950  | `#0F2B2E` | `oklch(0.2690 0.0340 204.7747)` |

### Ember.

Ember. The red-orange from the slide template bands. Used for destructive
states.

| Step | Hex       | OKLCH                          |
| ---- | --------- | ------------------------------ |
| 50   | `#FFF2EE` | `oklch(0.9702 0.0151 37.8764)` |
| 100  | `#FEE3DA` | `oklch(0.9354 0.0323 39.3321)` |
| 200  | `#FFC9BA` | `oklch(0.8797 0.0653 36.0528)` |
| 300  | `#FFA28A` | `oklch(0.8001 0.1164 35.2146)` |
| 400  | `#FF927A` | `oklch(0.7707 0.1367 33.3920)` |
| 500  | `#E52F09` | `oklch(0.5977 0.2202 32.3195)` |
| 600  | `#B91700` | `oklch(0.5012 0.1952 31.0213)` |
| 700  | `#AC1C0F` | `oklch(0.4798 0.1799 30.0472)` |
| 800  | `#8B1912` | `oklch(0.4142 0.1501 29.0283)` |
| 900  | `#6D1813` | `oklch(0.3548 0.1195 28.2724)` |
| 950  | `#460F0B` | `oklch(0.2655 0.0845 28.3697)` |

### Green.

Status green, from the InstUI palette.

| Step | Hex       | OKLCH                           |
| ---- | --------- | ------------------------------- |
| 400  | `#42A76E` | `oklch(0.6541 0.1275 155.5067)` |
| 500  | `#03893D` | `oklch(0.5509 0.1516 149.7844)` |
| 600  | `#027634` | `oklch(0.4948 0.1358 149.9238)` |

### Blue.

Status blue, from the InstUI palette.

| Step | Hex       | OKLCH                           |
| ---- | --------- | ------------------------------- |
| 400  | `#5C99CB` | `oklch(0.6621 0.0981 244.7825)` |
| 500  | `#2B7ABC` | `oklch(0.5639 0.1272 247.8601)` |
| 600  | `#0E68B3` | `oklch(0.5102 0.1411 250.7117)` |

### Amber.

Status amber, from the InstUI palette.

| Step | Hex       | OKLCH                          |
| ---- | --------- | ------------------------------ |
| 400  | `#D1A944` | `oklch(0.7525 0.1262 87.0687)` |
| 500  | `#C08A00` | `oklch(0.6689 0.1382 80.7758)` |

<!-- tokens:end -->