Colors
Woodstock's small, role-based color system.
Colors
Woodstock uses color names for what an element is doing, not for the hue it happens to use.
The CSS variables are Woodstock-owned; @theme inline maps them to Tailwind utilities. The hex
values below are the values that utility resolves to in each appearance.
Appearance preference
Settings → Appearance offers Light, Dark, and System. System is the default and follows the
device. Explicit choices override the device and are remembered locally. The resolved appearance
sets data-theme on the document root; semantic tokens, Tailwind dark: treatments, embedded
displays, emoji pickers, and native form controls all follow that value.
Core interface colors
| CSS variable | Tailwind utility | Light | Dark | Used for |
|---|---|---|---|---|
--bg | bg-bg | #ffffff | #15161c | The page canvas and input backgrounds. |
--surface | bg-surface | #f6f6f8 | #1e1f27 | Message bubbles, cards, panels, chips, and quiet hover fills. |
--border-c | border-border | #e5e4e7 | #2e303a | Dividers, input outlines, and card borders. |
--text-c | text-content | #4b4753 | #b3b0bb | All ordinary and high-emphasis text. Weight, not a second text color, distinguishes headings. |
--muted | text-muted | #8a8593 | #807d8a | Metadata, placeholders, and secondary copy. |
Primary and activity colors
| CSS variable | Tailwind utility | Light | Dark | Used for |
|---|---|---|---|---|
--primary | bg-primary, border-primary, ring-primary | #7c22ce | #8b3df0 | Primary button backgrounds, focus and placement. Primary text uses the readable foreground role below. |
--primary-text | text-primary | #7c22ce | #c084fc | Purple text and icons: original purple on light canvases, lighter lavender in dark mode and inside permanently dark sidebar/details surfaces. Primary button fills stay unchanged. |
--on-dark-link | text-on-dark-link, bg-on-dark-link | #c084fc | #c084fc | Readable links, selected sidebar icons, unread dots and drag markers on permanently dark surfaces. |
--primary-soft | bg-primary-soft, ring-primary-soft | #7c22ce at 10% | #8b3df0 at 16% | Focus rings and quiet selected or labelled states. |
--activity | bg-activity | #7c22ce at 6% | #8b3df0 at 10% | An in-progress agent turn and its live tool trace—not a finished agent message. |
--activity-border | border-activity-border, bg-activity-border | #7c22ce at 22% | #8b3df0 at 28% | Activity bubble border and Agent badge fill. |
Purple text on dark backgrounds
Use text-primary for purple links and icons on ordinary app surfaces. Its foreground rule
is separate from Tailwind’s primary fill mapping, so text follows the theme without changing buttons. It resolves to
#7c22ce on a light canvas and #c084fc in dark mode. Sidebar and dark details surfaces
also use the lighter shade, even when the app is in light mode. For an explicitly dark
surface, use text-on-dark-link.
Keep bg-primary for primary button fills; do not use the lighter text shade as a button
background with white labels. Links on a sender’s colored message bubble retain their
existing white, underlined treatment.
The lighter shade has a contrast ratio of 6.44:1 against the light-mode dark sidebar
(#1b1c20) and 4.78:1 against its expanded history background. In dark mode these
ratios are 7.03:1 and 5.36:1, respectively. These combinations exceed the 4.5:1
normal-text target. Check contrast again when introducing another background.
Finished agent replies use the same bg-surface message bubble as every other message. The small
Agent badge identifies the sender; the activity tint only communicates that work is still underway.
Sidebar colors
“Sidebar” names the visible region directly. sidebar-text is its default text color; active rows
use on-dark, while quieter labels use the muted on-dark treatment.
| CSS variable | Tailwind utility | Light | Dark | Used for |
|---|---|---|---|---|
--sidebar | bg-sidebar | #1b1c20 | #121317 | Channel sidebar background. |
--sidebar-active | bg-sidebar-active | #34353c | #2b2c33 | Selected channel, tab, entity view, or settings row. |
--sidebar-text | text-sidebar-text | #c9ccd2 | #c9ccd2 | Default sidebar labels and controls. |
On-dark treatments
These four roles replace one-off white opacity values. They are for elements placed on a dark, colored, or activity surface—not for regular app content.
Inside the light sidebar, primary fills retain white on-dark labels, including mention badges.
| CSS variable | Tailwind utility | Preview | Used for |
|---|---|---|---|
--on-dark | text-on-dark, bg-on-dark | #ffffff | Active sidebar labels, colored-button labels, and switches. |
--on-dark-muted | text-on-dark-muted | #ffffff at 70% | Secondary text inside dark message treatments. |
--on-dark-subtle | bg-on-dark-subtle | #ffffff at 10% | Sidebar hover and selected-row fill, selected detail-panel tabs, and quiet dark-surface fill. |
--on-dark-emphasis | bg-on-dark-emphasis, border-on-dark-emphasis, ring-on-dark-emphasis | #ffffff at 20% | Mention/entity chips, dark-surface borders, and quoted detail. |
Status colors
Status is a role, not a Tailwind palette choice. Components use a foreground token for text or icons and a soft token for a tinted background. The light and dark values below are implementation details behind those roles; components never choose a red-*, amber-*, emerald-*, or slate-* shade directly.
These status tokens are implemented in the app. The raw palette values stay behind the token boundary.
| Meaning | CSS variables | Tailwind utilities | Light | Dark | Used for |
|---|---|---|---|---|---|
| Error or destructive | --danger, --danger-soft | text-danger, bg-danger, bg-danger-soft | #dc2626 and 10% soft tint | #f87171 and 14% soft tint | Errors, destructive actions, and unread markers. |
| Warning or partial | --warning, --warning-soft | text-warning, bg-warning, bg-warning-soft | #a16207 and 10% soft tint | #facc15 and 14% soft tint | Offline, partial extraction, and needs-help status. |
| Ready | --success, --success-soft | text-success, bg-success, bg-success-soft | #15803d and 10% soft tint | #16a34a and 14% soft tint | Ready-source status. |
| Unsupported | --neutral, --neutral-soft | text-neutral, bg-neutral, bg-neutral-soft | #334155 and 10% soft tint | #cbd5e1 and 14% soft tint | Unsupported-source status. |
Avatar palette
Avatars are the intentional exception: their colors differentiate people and agents rather than communicate status. A deterministic tint derived from the ID chooses from rose-500, amber-600, emerald-600, sky-600, violet-600, and fuchsia-600.
Overlays and elevation
These effects are fixed in both themes because they sit above the interface rather than belong to a light or dark surface.
| CSS variable or recipe | Tailwind utility | Preview | Used for |
|---|---|---|---|
--overlay: rgba(0, 0, 0, 0.4) | bg-overlay | #000000 at 40% | Mobile sidebar backdrop. |
--viewer-scrim: rgba(0, 0, 0, 0.65) | from-viewer-scrim / to-viewer-scrim | #000000 at 65% | Focused image viewer control gradients. |
2px 0 16px rgba(0, 0, 0, 0.35) | Sidebar elevation recipe | #000000 at 35% | Mobile sidebar edge shadow. |
App metadata
| Value | Used for |
|---|---|
#ffffff | PWA manifest background_color. |
#7c5cff | PWA manifest theme_color, used by installed-app browser chrome. |
A page shows its history
One line per change under the page — who made it, what kind of change, when — and a tap to see the text before and after and the source it came from. Built 9 September (documents v1.11).
Typography
The type families, scale, weight, and text treatments currently used in Woodstock.