Design system

Style guide

The living foundation for Dash — tokens and hero components, authored once and rendered identically in the Laravel app and the static HTML build.

Inter · JetBrains Mono · zinc neutrals + one violet accent · flip the theme in the header ↗

Color

A single violet drives every interactive and selected state; zinc neutrals and paired semantic tints carry everything else. Each swatch pairs a solid with the soft tint used as its badge surface — both re-resolve in place when the theme flips.

Accent

--ac · --ac-tint

Positive

--pos · --pos-t

Critical

--crit · --crit-t

Info

--info · --info-t

Warning

--warn · --warn-t

Neutral ramp · --z50 → --z900 (constant across themes)

Type

Display · 36 / 600

Dashboards, done right.

Heading · 20 / 600

Clarity at a glance

Body · 16 / 400

The quick brown fox jumps over the lazy dog — legible, calm, and unhurried.

Label · 13 / 500

Section label — sentence case, quiet weight

Mono · JetBrains

const uptime = 99.98; // tabular figures

Elevation & radius

Card

Lift

Drag

Shadow scale · --sh-card / --sh-lift / --sh-drag

--r-sm

--r-md

--r-lg

--r-xl

Radius scale · assigned by element class

Buttons

Cards & overlays

Surface

A card is a layered surface — soft elevation over a hairline border, both tuned per theme so edges stay crisp on light and legible on dark. Header, body, and footer seams are single-pixel inset rules, never doubled on the card edge.

Header · body · footer

Interactive

Alpine-driven overlays — a dropdown that closes on outside-click or Escape, and a focus-trapped modal that teleports to the body.