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. |
Borders
| Variable | Default | Description |
|---|
--asset-border | #d2d5d4 | Default hairline border on cards, dividers, inputs. |
--asset-border-strong | #d1d5db | Stronger border for hover/emphasis states. |
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. |
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-destructive | #fecaca | Destructive background (negative deltas, errors). |
--asset-destructive-foreground | #991b1b | Text color on --asset-destructive surfaces. |
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-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. |
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. |
