# Tokens

> Every custom property in tokens.css with its light and dark value, read from the file itself.

Override any of these after importing `tokens.css`. Values written as `light-dark()` switch with the colour scheme; the rest are the same in both. See [Theming](#/docs/theming) for how to apply a brand.

| Token | Light | Dark |
| --- | --- | --- |
| `--v-font` | `-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif` | same |
| `--v-font-mono` | `ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace` | same |
| `--v-text` | `16px` | same |
| `--v-leading` | `1.6` | same |
| `--v-bg` | `#fff` | `#191919` |
| `--v-bg-soft` | `#f7f7f5` | `#202020` |
| `--v-bg-raised` | `#fff` | `#252525` |
| `--v-hover` | `rgb(55 53 47 / .06)` | `rgb(255 255 255 / .055)` |
| `--v-press` | `rgb(55 53 47 / .1)` | `rgb(255 255 255 / .09)` |
| `--v-fg` | `#1f1f1d` | `#e8e7e4` |
| `--v-fg-muted` | `#787774` | `#9b9a97` |
| `--v-fg-faint` | `#b9b8b4` | `#5f5e5b` |
| `--v-border` | `rgb(55 53 47 / .1)` | `rgb(255 255 255 / .09)` |
| `--v-accent` | `#2383e2` | `#4a9ee8` |
| `--v-accent-fg` | `#fff` | same |
| `--v-accent-soft` | `color-mix(in srgb, var(--v-accent) 14%, transparent)` | same |
| `--v-selected` | `color-mix(in srgb, var(--v-accent) 16%, transparent)` | same |
| `--v-danger` | `#d44c47` | `#e8645f` |
| `--v-success` | `#448361` | `#58a57a` |
| `--v-code-bg` | `#f6f6f4` | `#232323` |
| `--v-inline-code` | `#eb5757` | `#ff7b72` |
| `--v-syn-keyword` | `#a626a4` | `#c678dd` |
| `--v-syn-string` | `#50a14f` | `#98c379` |
| `--v-syn-comment` | `#a0a1a7` | `#7f848e` |
| `--v-syn-number` | `#986801` | `#d19a66` |
| `--v-syn-function` | `#4078f2` | `#61afef` |
| `--v-syn-type` | `#c18401` | `#e5c07b` |
| `--v-syn-tag` | `#e45649` | `#e06c75` |
| `--v-chart-1` | `var(--v-accent)` | same |
| `--v-chart-2` | `#e07a3a` | `#f0955a` |
| `--v-chart-3` | `#4aa37a` | `#5cc08f` |
| `--v-chart-4` | `#9b6bd6` | `#b48ae8` |
| `--v-radius` | `6px` | same |
| `--v-radius-lg` | `12px` | same |
| `--v-space` | `4px` | same |
| `--v-shadow` | `0 0 0 1px var(--v-border), 0 2px 4px rgb(15 15 15 / .04), 0 8px 24px rgb(15 15 15 / .08)` | same |
| `--v-shadow-lg` | `0 0 0 1px var(--v-border), 0 4px 8px rgb(15 15 15 / .06), 0 24px 64px rgb(15 15 15 / .16)` | same |
| `--v-blur` | `saturate(180%) blur(20px)` | same |
| `--v-dur-1` | `150ms` | same |
| `--v-dur-2` | `220ms` | same |
| `--v-dur-3` | `300ms` | same |
| `--v-ease` | `cubic-bezier(.2, .8, .2, 1)` | same |
| `--v-spring` | `linear(0, .064, .209, .384, .555, .704, .823, .911, .972, 1.009, 1.03, 1.038, 1.038, 1.033, 1.027, 1.02, 1.014, 1.009, 1)` | same |

```css override.css
:root {
  --v-accent: #0f766e;
  --v-radius-lg: 14px;
}
```