---
title: "Colors — Brand system"
description: "The neutral ladder, semantic roles, and every color token with its light and dark value, read live from theme.css."
url: https://www.unitpost.com/brand/colors
section: "Brand"
updated: 2026-09-10
---
# Colors — Brand system

> The neutral ladder, semantic roles, and every color token with its light and dark value, read live from theme.css.

This page is a visual specimen of the Unitpost design system. The written contract it illustrates is [design.md](https://www.unitpost.com/design.md) (§2.1 Neutral surfaces, §2.2 Borders, §2.3 Text, §2.4 Semantic roles). Load design.md to build on-brand UI; it is the authoritative source.

## Neutral

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `background` | `bg-background` | `#ffffff` | `#080808` |
| `foreground` | `bg-foreground` | `#191c1f` | `#f5f5f5` |
| `surface-subtle` | `bg-surface-subtle` | `#fafafa` | `#0b0b0b` |
| `surface` | `bg-surface` | `#f6f6f6` | `#111111` |
| `surface-hover` | `bg-surface-hover` | `#eeeeee` | `#191919` |
| `surface-active` | `bg-surface-active` | `#e5e5e5` | `#202020` |
| `surface-raised` | `bg-surface-raised` | `#ffffff` | `#141414` |
| `surface-overlay` | `bg-surface-overlay` | `#ffffff` | `#161616` |
| `muted-foreground` | `bg-muted-foreground` | `#70757b` | `#929292` |
| `placeholder` | `bg-placeholder` | `#9aa0a6` | `#656565` |

## Borders

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `border-subtle` | `bg-border-subtle` | `#ededed` | `#1d1d1d` |
| `border` | `bg-border` | `#d8d8d8` | `#292929` |
| `border-strong` | `bg-border-strong` | `#b8b8b8` | `#3a3a3a` |
| `ring` | `bg-ring` | `#191c1f` | `#b8b8b8` |
| `input` | `bg-input` | `#d8d8d8` | `#292929` |

## Sidebar

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `sidebar-ring` | `bg-sidebar-ring` | `#191c1f` | `#b8b8b8` |
| `sidebar-border` | `bg-sidebar-border` | `#d8d8d8` | `#292929` |
| `sidebar-accent-foreground` | `text-sidebar-accent-foreground` | `#191c1f` | `#f5f5f5` |
| `sidebar-accent` | `bg-sidebar-accent` | `#eeeeee` | `#191919` |
| `sidebar-primary-foreground` | `text-sidebar-primary-foreground` | `#ffffff` | `#080808` |
| `sidebar-primary` | `bg-sidebar-primary` | `#191c1f` | `#f5f5f5` |
| `sidebar-foreground` | `text-sidebar-foreground` | `#191c1f` | `#f5f5f5` |
| `sidebar` | `bg-sidebar` | `#ffffff` | `#080808` |

## Charts

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `chart-5` | `bg-chart-5` | `#d92d5b` | `#ff6681` |
| `chart-4` | `bg-chart-4` | `#7c5ce5` | `#a38aff` |
| `chart-3` | `bg-chart-3` | `#a97800` | `#e4b13a` |
| `chart-2` | `bg-chart-2` | `#276ef1` | `#70a0ff` |
| `chart-1` | `bg-chart-1` | `#008f68` | `#35c99b` |

## Semantic

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `destructive` | `bg-destructive` | `#dc3545` | `#df656b` |
| `destructive-foreground` | `text-destructive-foreground` | `#ffffff` | `#130507` |
| `destructive-surface` | `bg-destructive-surface` | `#fff1f2` | `#211113` |
| `destructive-border` | `bg-destructive-border` | `#fecdd3` | `#4b2428` |
| `success` | `bg-success` | `#008f68` | `#42b991` |
| `success-foreground` | `text-success-foreground` | `#ffffff` | `#03120d` |
| `success-surface` | `bg-success-surface` | `#edf9f5` | `#0d1b16` |
| `success-border` | `bg-success-border` | `#b9e7d8` | `#204638` |
| `warning` | `bg-warning` | `#a97800` | `#c99a3b` |
| `warning-foreground` | `text-warning-foreground` | `#ffffff` | `#181006` |
| `warning-surface` | `bg-warning-surface` | `#fff8e6` | `#1d180d` |
| `warning-border` | `bg-warning-border` | `#eed79b` | `#493a1d` |
| `info` | `bg-info` | `#276ef1` | `#6f96e8` |
| `info-foreground` | `text-info-foreground` | `#ffffff` | `#061022` |
| `info-surface` | `bg-info-surface` | `#eef4ff` | `#101725` |
| `info-border` | `bg-info-border` | `#c6d8ff` | `#283b62` |
| `brand` | `bg-brand` | `#276ef1` | `#6f96e8` |
| `brand-foreground` | `text-brand-foreground` | `#ffffff` | `#061022` |
| `brand-surface` | `bg-brand-surface` | `#eef4ff` | `#101725` |
| `brand-border` | `bg-brand-border` | `#c6d8ff` | `#283b62` |

## Other

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `sms` | `bg-sms` | `#fb923c` | `#fdac6b` |
| `sms-foreground` | `text-sms-foreground` | `#ffffff` | `#1f1206` |
| `sms-surface` | `bg-sms-surface` | `#fff1e6` | `#221507` |
| `sms-border` | `bg-sms-border` | `#f9c9a3` | `#5c3a16` |

## Categorical

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `teal` | `bg-teal` | `#008f68` | `#42b991` |
| `teal-foreground` | `text-teal-foreground` | `#ffffff` | `#03120d` |
| `violet` | `bg-violet` | `#7c5ce5` | `#9482df` |
| `violet-foreground` | `text-violet-foreground` | `#ffffff` | `#0d071d` |
| `link` | `bg-link` | `#1f63da` | `#7b9fe6` |
| `link-foreground` | `text-link-foreground` | `#ffffff` | `#061022` |
| `pink` | `bg-pink` | `#d92d5b` | `#df7184` |
| `pink-foreground` | `text-pink-foreground` | `#ffffff` | `#1d060d` |
| `brown` | `bg-brown` | `#876257` | `#ad887d` |
| `brown-foreground` | `text-brown-foreground` | `#ffffff` | `#160c09` |

## Editor canvas

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `editor-accent` | `bg-editor-accent` | `#276ef1` | `#276ef1` |
| `editor-accent-foreground` | `text-editor-accent-foreground` | `#ffffff` | `#ffffff` |
| `editor-accent-strong` | `bg-editor-accent-strong` | `#1a56d4` | `#1a56d4` |
| `editor-component` | `bg-editor-component` | `#7c3aed` | `#7c3aed` |
| `editor-component-foreground` | `text-editor-component-foreground` | `#ffffff` | `#ffffff` |
| `editor-component-strong` | `bg-editor-component-strong` | `#6d20c5` | `#6d20c5` |

## shadcn aliases

| Token | Utility | Light | Dark |
| --- | --- | --- | --- |
| `accent-foreground` | `text-accent-foreground` | `#1f2226` | `#f5f5f5` |
| `accent` | `bg-accent` | `#eeeeee` | `#191919` |
| `skeleton` | `bg-skeleton` | `#e8e8e8` | `#1d1d1d` |
| `muted` | `bg-muted` | `#f6f6f6` | `#111111` |
| `secondary-foreground` | `text-secondary-foreground` | `#1f2226` | `#f5f5f5` |
| `secondary` | `bg-secondary` | `#f1f1f1` | `#151515` |
| `primary-foreground` | `text-primary-foreground` | `#ffffff` | `#080808` |
| `primary` | `bg-primary` | `#191c1f` | `#f5f5f5` |
| `popover-foreground` | `text-popover-foreground` | `#191c1f` | `#f5f5f5` |
| `popover` | `bg-popover` | `#ffffff` | `#161616` |
| `card-foreground` | `text-card-foreground` | `#191c1f` | `#f5f5f5` |
| `card` | `bg-card` | `#ffffff` | `#141414` |

## Other brand pages

- [Brand system](https://www.unitpost.com/brand): Unitpost design foundations: colors, typography, materials, interface components, and page patterns. One set of tokens and one kit for every surface. ([Markdown](https://www.unitpost.com/brand.md))
- [Typography — Brand system](https://www.unitpost.com/brand/typography): Inter for the interface, DM Sans for headings, Source Code Pro for machine values only. One size scale and named type-* roles from theme.css. ([Markdown](https://www.unitpost.com/brand/typography.md))
- [Materials — Brand system](https://www.unitpost.com/brand/materials): Card appearances and tones, the four-step elevation ladder, and radius roles: pills for controls, soft rectangles for panels. ([Markdown](https://www.unitpost.com/brand/materials.md))
- [Components — Brand system](https://www.unitpost.com/brand/components): Every Unitpost interface primitive with its variants and states, shown in light and dark themes and checked against the components' own types. ([Markdown](https://www.unitpost.com/brand/components.md))
- [Patterns — Brand system](https://www.unitpost.com/brand/patterns): How Unitpost pages are built from the kit: one shape each for list, detail, settings, empty, and error pages. ([Markdown](https://www.unitpost.com/brand/patterns.md))