Introduction
Laurel is a quiet, compact interface in light and dark — a theme for shadcn/ui (Mira).
Laurel is a quiet, compact interface in light and dark: neutrals do the work, sage marks the moments. Text, surfaces and borders are neutral — white in light, charcoal in dark — Fira Sans, crisp 4px radii, and a single sage accent reserved for primary fills, selected/active states and focus rings, never a flood. Contrast comes from lightness, not from saturation.
It ships as one package, @ralekocode/design-system, and it is built on shadcn/ui (the Mira style, on Base UI). The package holds one file, theme.css, made of the standard shadcn variables. You keep using stock shadcn components; they come out looking like Laurel.
This whole site is an example. Every colour, font and radius you see on it — the sidebar, the search, the code blocks, the live previews — is read from the shadcn variables in theme.css. There is no other palette in the stylesheet.
What you get
- A shadcn theme —
theme.csssets--background,--foreground,--primary,--border,--radius, the chart and sidebar variables and Tailwind's@theme inline, for light and dark. - Fira Sans — as
--font-sansand--font-heading. - A registry item —
laurel, installable with the shadcn CLI, pluslaurel-font. - Stock components — the Mira components, exactly as
npx shadcn@latest addwrites them.
Light and dark
Both themes ship in the same file. Light is a pure white ground; dark is a neutral charcoal where surfaces step lighter and the primary sits at the sage ramp's mid-tone — the same hue as light, never a lifted pastel. Dark is class-based (<html class="dark">), the shadcn convention. Use the toggle in the header to see this site in either. See Dark mode.
How this site is organised
- Philosophy — use it with shadcn, then the foundations: colour, dark mode, typography, spacing and elevation, iconography, and do and don't.
- Components — stock shadcn/ui components on Base UI, each with a live preview, its source, install steps and usage. They are the same components you get from
npx shadcn@latest add; only the variables underneath differ.
Direction
Left-aligned, asymmetric layouts. Flush-left headings; content hugs the left edge with whitespace on the right. Primary buttons are solid-filled with the accent (light ink in light, dark ink in dark). Everything else stays desaturated.
Interaction states
Interactive states come from the components, not from global CSS: hover and pressed tints, a ring for keyboard focus, and disabled controls at reduced opacity. Don't restyle states per page.
Attribution
Components and documentation structure are adapted from shadcn/ui (MIT). See THIRD_PARTY_NOTICES.md in the repository.