Colours
Colours are roles, not hues. Every value is oklch(), every text pairing is tested for contrast, and price direction is kept apart from status.
Roles
- Neutrals:
background,surface,surface-raised, three borders and three text emphases.border-strongmarks control boundaries and reaches 3:1;borderandborder-softare decorative hairlines. - Intents:
primary,success,warning,error,info,upanddown, each with an--sv-on-*colour for text on a filled background.
Price direction
up and down are separate from success and error, with the same defaults. Some markets show rising prices in red; swap only up and down and status colours keep their meaning. Sveltier never shows
direction by colour alone: deltas always carry a sign or an arrow.
Tonal fills
Selected chips, badges and alerts use a light wash of an intent (--sv-tonal-wash)
with text mixed slightly toward the theme's text colour (--sv-tonal-text-mix),
which keeps it at 4.5:1 on the wash in every theme.
.badge {
--c: var(--sv-color-success);
background: color-mix(in oklch, var(--c) var(--sv-tonal-wash), transparent);
color: color-mix(in oklch, var(--c) var(--sv-tonal-text-mix), var(--sv-color-text));
}Live values
monolith-light(following your system). Contrast is measured against --sv-color-background.
| Token | Value | Contrast |
|---|---|---|
--sv-color-background | oklch(0.985 0.002 260) | – |
--sv-color-surface | oklch(1 0 0) | – |
--sv-color-surface-raised | oklch(0.965 0.003 260) | – |
--sv-color-border | oklch(0.91 0.004 260) | 1.25:1 |
--sv-color-border-soft | oklch(0.94 0.003 260) | 1.14:1 |
--sv-color-border-strong | oklch(0.62 0.006 260) | 3.49:1 |
--sv-color-text | oklch(0.21 0.006 260) | 16.97:1 |
--sv-color-text-muted | oklch(0.42 0.006 260) | 8.10:1 |
--sv-color-text-subtle | oklch(0.52 0.006 260) | 5.28:1 |
--sv-color-primary | oklch(0.21 0.006 260) | 16.97:1 |
--sv-color-success | oklch(0.50 0.13 155) | 5.36:1 |
--sv-color-warning | oklch(0.53 0.13 60) | 5.26:1 |
--sv-color-error | oklch(0.52 0.19 27) | 5.82:1 |
--sv-color-info | oklch(0.50 0.15 255) | 5.81:1 |
--sv-color-up | oklch(0.50 0.13 155) | 5.36:1 |
--sv-color-down | oklch(0.52 0.19 27) | 5.82:1 |