Design Tokens
The lambchop Tailwind preset defines a comprehensive token system for analytics dashboards. All colors respond to the dark/light theme toggle via CSS custom properties. Import it as a preset to use these values in your Tailwind classes.
Surface
Neutral background and border colors for cards, panels, and page elements.
surface
var(--surface)
bg-surface
surface-secondary
var(--surface-secondary)
bg-surface-secondary
surface-tertiary
var(--surface-tertiary)
bg-surface-tertiary
surface-border
var(--surface-border)
border-surface-border
surface-hover
var(--surface-hover)
bg-surface-hover
surface-inverse
var(--surface-inverse)
bg-surface-inverse
Text
Text color hierarchy from primary to muted.
text
var(--text)
text-text
text-secondary
var(--text-secondary)
text-text-secondary
text-tertiary
var(--text-tertiary)
text-text-tertiary
text-muted
var(--text-muted)
text-text-muted
text-inverse
var(--text-inverse)
text-text-inverse
Accent
Warm gold accent palette used for interactive elements and highlights.
accent-light
var(--accent-light)
bg-accent-light
accent
var(--accent)
bg-accent
accent-dark
var(--accent-dark)
bg-accent-dark
Semantic
Semantic colors for revenue (positive), loss (negative), and warning states.
revenue
var(--revenue)
text-revenue
revenue-bg
var(--revenue-bg)
bg-revenue-bg
loss
var(--loss)
text-loss
loss-bg
var(--loss-bg)
bg-loss-bg
warning
var(--warning)
text-warning
warning-bg
var(--warning-bg)
bg-warning-bg
Chart Series
Nine distinct series colors for multi-line charts and data visualization.
chart-1
var(--chart-1)
chart series 1
chart-2
var(--chart-2)
chart series 2
chart-3
var(--chart-3)
chart series 3
chart-4
var(--chart-4)
chart series 4
chart-5
var(--chart-5)
chart series 5
chart-6
var(--chart-6)
chart series 6
chart-7
var(--chart-7)
chart series 7
chart-8
var(--chart-8)
chart series 8
chart-9
var(--chart-9)
chart series 9
Typography
Three font families: DM Sans for body, Bebas Neue for display, Permanent Marker for accent, and JetBrains Mono for code.
Body — DM Sans
Display — Bebas Neue
REVENUE DASHBOARD
Accent — Permanent Marker
lambchop
Monospace — JetBrains Mono
JetBrains Mono, Fira Code, monospace
0123456789 $18,230.45
Spacing
Custom spacing tokens for consistent dashboard layouts.
| Token | Value | Usage |
|---|---|---|
sidebar-w | 16rem (256px) | Expanded sidebar width |
sidebar-collapsed | 4rem (64px) | Collapsed sidebar width |
page-x | 1.5rem (24px) | Page horizontal padding |
page-y | 1.25rem (20px) | Page vertical padding |
card-p | 1.25rem (20px) | Card internal padding |
Borders & Shadows
Consistent corner radius and elevation tokens.
Border Radius
rounded-card
0.125rem
rounded-button
0.125rem
Shadows
shadow-card
none
shadow-card-hover
none