Styled
CSS variables
Every themeable value exposed by @get-asset/react/theme.css. Override any of them at any scope to retheme.
Surfaces
| Variable | Default | Description |
|---|
--asset-background | #f9fafb | Outermost page background. |
--asset-surface | #FAFBFA | Subtle surface used for grouped sections and toolbars. |
--asset-card | #ffffff | Card surface. |
--asset-chip | #e5e7eb | Inline highlight chip background (e.g. figures called out in AI insight answers). |
Borders
| Variable | Default | Description |
|---|
--asset-border | #d2d5d4 | Default hairline border on cards, dividers, inputs. |
--asset-border-strong | #d1d5db | Stronger border for hover/emphasis states. |
--asset-border-subtle | #e8e9e8 | Lighter divider used for table rows and column splits. |
Text
| Variable | Default | Description |
|---|
--asset-foreground | #111827 | Primary text color. |
--asset-muted-foreground | #6b7280 | Secondary text — labels, captions, low-emphasis metadata. |
Brand
| Variable | Default | Description |
|---|
--asset-primary | #7c3aed | Brand accent. Used on buttons, links, focus rings. |
--asset-primary-foreground | #ffffff | Text color on --asset-primary surfaces. |
Pickers
Date and period pickers use a neutral control palette independently of the primary brand accent. Override these variables together to keep triggers, calendars, and selected periods visually consistent.
| Variable | Default | Description |
|---|
--asset-picker-background | #ffffff | Date and period picker trigger, field, and popover surfaces. |
--asset-picker-foreground | #18181b | Primary picker text and icons. |
--asset-picker-muted | #707070 | Secondary picker labels and out-of-month dates. |
--asset-picker-icon | #0a211d | Calendar and navigation icons inside picker controls. |
--asset-picker-border | #d2d5d4 | Picker trigger, field, and popover borders. |
--asset-picker-hover | #f4f4f5 | Hover background for available dates and period options. |
--asset-picker-selected | #18181b | Background for selected dates and period options. |
--asset-picker-selected-foreground | #ffffff | Text and icon color on selected picker options. |
--asset-picker-focus | #18181b | Focus outline for picker controls. |
Chat
Only the customer’s own messages render as a bubble; the agent’s replies are prose on the page and take their colour from --asset-foreground. Both bubble variables are unset by default and fall back to the base tokens, so set them only when the bubble should differ from the rest of the theme — and set the pair together to keep the text readable against the new background.
| Variable | Default | Description |
|---|
--asset-chat-bubble | var(--asset-foreground) | Background of the customer's own chat message bubble. Unset by default, so it follows --asset-foreground. |
--asset-chat-bubble-foreground | var(--asset-card) | Text colour inside the customer's own chat message bubble. Unset by default, so it follows --asset-card. |
Semantic states
Semantic tokens come as a background/foreground pair. Use the pair together — e.g. set background: var(--asset-success) and color: var(--asset-success-foreground).
| Variable | Default | Description |
|---|
--asset-success | #bbf7d0 | Success background (positive deltas). |
--asset-success-foreground | #166534 | Text color on --asset-success surfaces. |
--asset-success-strong | #16a34a | Saturated success used directly on status indicators (e.g. account sync dots). |
--asset-warning | #d97706 | Saturated warning used directly on status indicators. |
--asset-destructive | #fecaca | Destructive background (negative deltas, errors). |
--asset-destructive-foreground | #991b1b | Text color on --asset-destructive surfaces. |
Status indicators
Status-dot colors shared by the document and book-health cards: pending / processed / needs-attention / failed. A “processing” state renders as a hollow ring, so it has no fill token of its own.
| Variable | Default | Description |
|---|
--asset-status-pending | #d2d5d4 | Pending status — nothing to act on yet. |
--asset-status-processed | #139562 | Processed/ready status — completed and verified. |
--asset-status-attention | #ffbe4d | Needs-attention status — waiting on the user. |
--asset-status-error | #ff4d4d | Failed status. |
Chart palette
The snapshot, profit & loss, and operating-expense charts all pull colors from these variables. --asset-chart-revenue and --asset-chart-expense are the canonical revenue/expense colors; --asset-chart-1 through --asset-chart-5 drive categorical breakdowns.
| Variable | Default | Description |
|---|
--asset-chart-revenue | #15803d | Revenue bar/line color. |
--asset-chart-revenue-outline | #164b3e | Outline stroke on revenue bars. |
--asset-chart-expense | #a78bfa | Expense bar/line color. |
--asset-chart-1 | #7c3aed | Chart palette step 1. |
--asset-chart-2 | #9061f9 | Chart palette step 2. |
--asset-chart-3 | #a78bfa | Chart palette step 3. |
--asset-chart-4 | #b794f4 | Chart palette step 4. |
--asset-chart-5 | #c4b5fd | Chart palette step 5. |
The agent’s in-chat comparison graphs assign these series colors by recency (the most recent series leads with series 1, cycling after the fourth). Bars use the fill plus its -outline stroke; lines use the saturated -line stroke, which the legend swatch follows.
| Variable | Default | Description |
|---|
--asset-chart-series-1 | #dfd4fe | Series 1 bar fill — the most recent series. |
--asset-chart-series-1-outline | #a16cf3 | Series 1 bar outline. |
--asset-chart-series-1-line | #6419c5 | Series 1 line stroke and legend swatch. |
--asset-chart-series-2 | #107257 | Series 2 bar fill. |
--asset-chart-series-2-outline | #164b3e | Series 2 bar outline. |
--asset-chart-series-2-line | #107257 | Series 2 line stroke and legend swatch. |
--asset-chart-series-3 | #cfe3ff | Series 3 bar fill. |
--asset-chart-series-3-outline | #3b82f6 | Series 3 bar outline. |
--asset-chart-series-3-line | #3b82f6 | Series 3 line stroke and legend swatch. |
--asset-chart-series-4 | #ffe4b5 | Series 4 bar fill. |
--asset-chart-series-4-outline | #d97706 | Series 4 bar outline. |
--asset-chart-series-4-line | #d97706 | Series 4 line stroke and legend swatch. |
Shape & typography
| Variable | Default | Description |
|---|
--asset-radius | 8px | Base corner radius used on cards, badges, buttons. |
--asset-font-sans | system UI stack | Sans-serif font family. |
--asset-font-mono | ui-monospace | Monospace font family, used in code and numeric values. |
