---
title: "Colours and tokens"
description: "Every --newt-* token with its dark and light value and the Tailwind utility it generates."
---

Click any row to copy its `var(--newt-*)` reference. Override a token in your
own stylesheet and every component that reads it follows — see
[Theming](/docs/theming). The list is read from the registry rather than
restated here, so a token added to `tokens.css` appears on this page as soon as
the registry is regenerated.

| Token | Dark | Light |
| --- | --- | --- |
| `--newt-bg-base` | `#1e1f22` | `#e3e5e8` |
| `--newt-bg-surface` | `#2b2d31` | `#f2f3f5` |
| `--newt-bg-elevated` | `#313338` | `#ffffff` |
| `--newt-bg-floating` | `#1e1f22` | `#ffffff` |
| `--newt-bg-input` | `#1e1f22` | `#ebedef` |
| `--newt-bg-input-elevated` | `#383a40` | `#ffffff` |
| `--newt-bg-hover` | `rgba(78, 80, 88, 0.4)` | `rgba(6, 6, 7, 0.08)` |
| `--newt-bg-active` | `rgba(78, 80, 88, 0.6)` | `rgba(6, 6, 7, 0.12)` |
| `--newt-border` | `#3f4147` | `#d3d5d9` |
| `--newt-text-primary` | `#f2f3f5` | `#060607` |
| `--newt-text-secondary` | `#b5bac1` | `#4e5058` |
| `--newt-text-muted` | `#949ba4` | `#5c5e66` |
| `--newt-text-link` | `#00a8fc` | `#006ce7` |
| `--newt-brand` | `#5865f2` | `#5865f2` |
| `--newt-brand-hover` | `#4752c4` | `#4752c4` |
| `--newt-brand-active` | `#3c45a5` | `#3c45a5` |
| `--newt-online` | `#23a55a` | `#248046` |
| `--newt-idle` | `#f0b232` | `#b58500` |
| `--newt-dnd` | `#f23f42` | `#d83a3e` |
| `--newt-offline` | `#80848e` | `#80848e` |
| `--newt-danger` | `#da373c` | `#d83a3e` |
| `--newt-danger-hover` | `#a12828` | `#a12828` |
| `--newt-mention-text` | `#b3baff` | `#505cdc` |
| `--newt-mention-role` | `#f3b95f` | `#a06a00` |
| `--newt-font-sans` | `"Inter", "gg sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` | `"Inter", "gg sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--newt-font-mono` | `"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace` | `"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace` |
| `--newt-font-display` | `"Inter", sans-serif` | `"Inter", sans-serif` |
| `--newt-radius-sm` | `4px` | `4px` |
| `--newt-radius-md` | `8px` | `8px` |
| `--newt-radius-lg` | `12px` | `12px` |
| `--newt-radius-full` | `9999px` | `9999px` |
| `--newt-embed-max-width` | `520px` | `520px` |
| `--newt-shadow-elevation-low` | `0 1px 0 rgba(0,0,0,0.2), 0 1.5px 0 rgba(0,0,0,0.05), 0 2px 0 rgba(0,0,0,0.05)` | `0 1px 0 rgba(6,6,7,0.1), 0 1.5px 0 rgba(6,6,7,0.025), 0 2px 0 rgba(6,6,7,0.025)` |
| `--newt-shadow-elevation-high` | `0 8px 16px rgba(0,0,0,0.24)` | `0 8px 16px rgba(6,6,7,0.16)` |
| `--newt-ease` | `cubic-bezier(0.3, 0.7, 0.4, 1)` | `cubic-bezier(0.3, 0.7, 0.4, 1)` |
| `--newt-dir` | `1` | `1` |
| `--newt-duration-fast` | `100ms` | `100ms` |
| `--newt-duration-base` | `150ms` | `150ms` |