Color
53 color tokens across 8 themes. Use them as var(--name) (click a name to copy it) or, with the Tailwind preset, as bg-{name}, text-{name}, border-{name} — e.g. bg-surface text-ink border-line. Never hard-code a value. See the brand book for which family does which job.
| Token | Light | Dark | Focus · Light | Focus · Dark | Color-safe · Light | Color-safe · Dark | High contrast · Light | High contrast · Dark | Usage |
|---|---|---|---|---|---|---|---|---|---|
canvas | #f6f3ee | #0f1220 | #f4f2ee | #12141c | #f6f3ee | #0f1220 | #ffffff | #000000 | The infinite canvas and the page ground. Everything else floats on it. |
surface | #ffffff | #171b2b | #ffffff | #171b2b | #ffffff | #171b2b | #ffffff | #000000 | Floating chrome: the Vault panel, the Composer, cards. Ink text at 4.5:1+. |
surface-sunken | #f0ece5 | #0f1220 | #f0ece5 | #0f1220 | #f0ece5 | #0f1220 | #f2f2f2 | #0d0d0d | Wells inside a surface: the search field, a selected Vault row, code. |
surface-overlay | #ffffff | #212639 | #ffffff | #212639 | #ffffff | #212639 | #ffffff | #0d0d0d | Menus, dialogs, fact cards and toasts — anything that pops above chrome. |
scrim | rgba(15, 18, 32, 0.40) | rgba(0, 0, 0, 0.60) | rgba(15, 18, 32, 0.40) | rgba(0, 0, 0, 0.60) | rgba(15, 18, 32, 0.40) | rgba(0, 0, 0, 0.60) | rgba(0, 0, 0, 0.60) | rgba(0, 0, 0, 0.75) | Dims the canvas behind a dialog. |
line | #e4dfd6 | #2b3148 | #e4dfd6 | #2b3148 | #e4dfd6 | #2b3148 | #5c6178 | #9aa0b8 | Hairline dividers and card outlines that only separate (decorative, no contrast floor). |
line-strong | #7a7f94 | #6c7392 | #7a7f94 | #6c7392 | #7a7f94 | #6c7392 | #000000 | #ffffff | Borders that identify a control — inputs, switches, checkboxes. 3:1 on surface and canvas. |
ink | #182140 | #eef0f7 | #182140 | #eef0f7 | #182140 | #eef0f7 | #000000 | #ffffff | Primary text and icons on canvas, surface, surface-sunken and surface-overlay. |
ink-muted | #4f5671 | #b3b8cc | #4f5671 | #b3b8cc | #4f5671 | #b3b8cc | #1f2433 | #e6e8f0 | Secondary text: metadata, helper text, inactive tabs. 4.5:1 on every surface. |
ink-subtle | #5f647c | #8f95ae | #5f647c | #8f95ae | #5f647c | #8f95ae | #3a3f52 | #c8ccda | Placeholders and timestamps — the quietest text that still passes 4.5:1 on surface and canvas. |
ink-inverse | #ffffff | #182140 | #ffffff | #182140 | #ffffff | #182140 | #ffffff | #182140 | Text on an ink-filled shape (tooltips). |
action | #182140 | #f6f3ee | #182140 | #f6f3ee | #182140 | #f6f3ee | #000000 | #ffffff | The one primary action per view: Send, Create, Join. Root-ink in light, paper in dark — never a gradient. |
action-hover | #2a3560 | #ffffff | #2a3560 | #ffffff | #2a3560 | #ffffff | #1f2433 | #e6e8f0 | Hover/pressed fill for action. |
on-action | #ffffff | #182140 | #ffffff | #182140 | #ffffff | #182140 | #ffffff | #000000 | Text and icons on action. |
focus | #325e8c | #12c7d3 | #325e8c | #12c7d3 | #325e8c | #12c7d3 | #0b4a8f | #5fe8f0 | The 2px focus ring, offset 2px, on every focusable element. 3:1 on canvas and surface. |
link | #2f5a87 | #5fd8e1 | #2f5a87 | #5fd8e1 | #2f5a87 | #5fd8e1 | #0b4a8f | #7ff0f5 | Inline links in text and fact cards. Underlined, 4.5:1 on surface and surface-overlay. |
selection | rgba(18, 199, 211, 0.28) | rgba(18, 199, 211, 0.32) | rgba(18, 199, 211, 0.28) | rgba(18, 199, 211, 0.32) | rgba(18, 199, 211, 0.28) | rgba(18, 199, 211, 0.32) | rgba(18, 199, 211, 0.28) | rgba(18, 199, 211, 0.32) | Text selection and the marquee on the canvas. |
node-ink | #182140 | #182140 | #182140 | #182140 | #182140 | #182140 | #000000 | #000000 | Node labels, set on topic fills. Always dark: topic fills stay pastel in every theme. |
edge | #2a3048 | #c9cddc | #5a6079 | #a9aec0 | #2a3048 | #c9cddc | #000000 | #ffffff | Connector strokes and arrowheads on the canvas. |
edge-label | #4f5671 | #b3b8cc | #5a6079 | #b3b8cc | #4f5671 | #b3b8cc | #1f2433 | #e6e8f0 | Labels riding along connectors (note face). 4.5:1 on canvas. |
success | #1d7a4e | #5ed39e | #1d7a4e | #5ed39e | #005f99 | #62b7f0 | #004f80 | #8fd0ff | Success text and icons on surface and success-soft. Always paired with an icon and a word. |
success-soft | #e2f3ea | #14301f | #e2f3ea | #14301f | #e0eef8 | #10283a | #ffffff | #000000 | Background of success toasts and banners. |
warning | #8a5600 | #ffc85c | #8a5600 | #ffc85c | #7a6000 | #f0e442 | #5c4500 | #f5eb6e | Warning text and icons on surface and warning-soft. Always paired with an icon and a word. |
warning-soft | #fbefd6 | #33270f | #fbefd6 | #33270f | #f7f0cc | #2f2c0c | #ffffff | #000000 | Background of warning toasts and banners. |
danger | #c22f3c | #ff8a93 | #c22f3c | #ff8a93 | #a63d00 | #ff9a5c | #8a2c00 | #ffb08a | Danger text and icons on surface and danger-soft. Always paired with an icon and a word. |
danger-soft | #fbe3e5 | #3a1a1f | #fbe3e5 | #3a1a1f | #fbe8dc | #3a2010 | #ffffff | #000000 | Background of danger toasts and banners. |
info | #2f5a87 | #7cc8f2 | #2f5a87 | #7cc8f2 | #6b3a8c | #d7a3f0 | #4b2266 | #e7b8ff | Info text and icons on surface and info-soft. Always paired with an icon and a word. |
info-soft | #e2edf8 | #13283a | #e2edf8 | #13283a | #efe6f6 | #2a1c33 | #ffffff | #000000 | Background of info toasts and banners. |
topic-teal | #87f2f8 | #87f2f8 | #bce8ea | #bce8ea | #b0ecbc | #b0ecbc | #87f2f8 | #87f2f8 | Node fill, "teal" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-teal-ring | #00cdd5 | #0fc5cd | #67c6cb | #71bdc1 | #6cc982 | #69c27e | #006b70 | #64eff7 | Outline and depth rings of a teal node; the parent glow behind its child layer. |
topic-harbor | #bcdbff | #bcdbff | #c9d9ec | #c9d9ec | #abdbfe | #abdbfe | #bcdbff | #bcdbff | Node fill, "harbor" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-harbor-ring | #76b2f5 | #73aceb | #8bb2de | #8cabce | #60b4ec | #5eade2 | #0e599d | #b0d5fe | Outline and depth rings of a harbor node; the parent glow behind its child layer. |
topic-iris | #e0c8fe | #e0c8fe | #d9cfe8 | #d9cfe8 | #f6bde2 | #f6bde2 | #e0c8fe | #e0c8fe | Node fill, "iris" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-iris-ring | #bd96ea | #b691e1 | #b79ed4 | #ae9bc6 | #dc87c0 | #d383b9 | #683b92 | #dcbfff | Outline and depth rings of a iris node; the parent glow behind its child layer. |
topic-berry | #ffbdc4 | #ffbdc4 | #edc6c9 | #edc6c9 | #feb79e | #feb79e | #ffbdc4 | #ffbdc4 | Node fill, "berry" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-berry-ring | #f47e8f | #eb798a | #da9099 | #cc8e95 | #ec7f58 | #e37a55 | #96173a | #feb3bb | Outline and depth rings of a berry node; the parent glow behind its child layer. |
topic-coral | #ffc7b2 | #ffc7b2 | #eecec1 | #eecec1 | #fece96 | #fece96 | #ffc7b2 | #ffc7b2 | Node fill, "coral" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-coral-ring | #f38e65 | #ea8962 | #db9b82 | #cd9884 | #e49d41 | #db9840 | #923400 | #ffbea5 | Outline and depth rings of a coral node; the parent glow behind its child layer. |
topic-amber | #ffcf9d | #ffcf9d | #eed4ba | #eed4ba | #b2e8fa | #b2e8fa | #ffcf9d | #ffcf9d | Node fill, "amber" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-amber-ring | #eb9c38 | #e29737 | #d6a570 | #c9a176 | #5cc4e2 | #5bbdda | #7e4d00 | #ffc78a | Outline and depth rings of a amber node; the parent glow behind its child layer. |
topic-sun | #ffea94 | #ffea94 | #f4eac1 | #f4eac1 | #f6f097 | #f6f097 | #ffea94 | #ffea94 | Node fill, "sun" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-sun-ring | #dfbd04 | #d8b70a | #d2bf73 | #c9b97a | #d0c637 | #c9bf37 | #7a6600 | #ffe26d | Outline and depth rings of a sun node; the parent glow behind its child layer. |
topic-stone | #e0dacf | #e0dacf | #dddad5 | #dddad5 | #dbdbdb | #dbdbdb | #e0dacf | #e0dacf | Node fill, "stone" topic. Topic colors separate siblings; they never encode meaning. node-ink on it is 10:1+. |
topic-stone-ring | #bab09f | #b4a999 | #bab09f | #b4a999 | #b7afb1 | #b1a8aa | #63594b | #ddd3c2 | Outline and depth rings of a stone node; the parent glow behind its child layer. |
spectrum-teal | #12c7d3 | #12c7d3 | #12c7d3 | #12c7d3 | #12c7d3 | #12c7d3 | #12c7d3 | #12c7d3 | Logo letters V, I, I. Brand spectrum — wordmark, SpectrumBar, marketing blocks. |
spectrum-harbor | #325e8c | #325e8c | #325e8c | #325e8c | #325e8c | #325e8c | #325e8c | #325e8c | Logo letter I. Brand spectrum. |
spectrum-iris | #8a70a6 | #8a70a6 | #8a70a6 | #8a70a6 | #8a70a6 | #8a70a6 | #8a70a6 | #8a70a6 | Logo letter S. Brand spectrum. |
spectrum-berry | #f54a57 | #f54a57 | #f54a57 | #f54a57 | #f54a57 | #f54a57 | #f54a57 | #f54a57 | Logo letter U. Brand spectrum. |
spectrum-coral | #ff6c4d | #ff6c4d | #ff6c4d | #ff6c4d | #ff6c4d | #ff6c4d | #ff6c4d | #ff6c4d | Logo letter A. Brand spectrum. |
spectrum-amber | #f28c16 | #f28c16 | #f28c16 | #f28c16 | #f28c16 | #f28c16 | #f28c16 | #f28c16 | Logo letter L. Brand spectrum. |
spectrum-sun | #ffd347 | #ffd347 | #ffd347 | #ffd347 | #ffd347 | #ffd347 | #ffd347 | #ffd347 | Logo letter L. Brand spectrum. |
spectrum-stone | #7f7f7f | #7f7f7f | #7f7f7f | #7f7f7f | #7f7f7f | #7f7f7f | #7f7f7f | #7f7f7f | Logo ".AI". Brand spectrum neutral. |
root-ink | #182140 | #182140 | #182140 | #182140 | #182140 | #182140 | #182140 | #182140 | The tree trunk in the mark. The deepest brand color: marketing grounds, dark blocks. |