One design language for every internal tool.

Colors

Neutral ramp, semantic surfaces, brand accent.

Typography

Inter + JetBrains Mono. Weight as hierarchy, not hue.

Spacing

Layout rhythm, container widths, toolbar height.

Radius

One 6px corner everywhere — by design.

Trigger for the primary action on a screen. For navigation use a `<Link>` or the `link` variant; never wrap a route push in a button.

Form-field family — the canonical wrapper for any input + label + description + error in non-auth forms. Use this instead of composing labels and errors by hand so spacing and a11y stay consistent.

Surface for grouping related content. Use for product detail tiles, settings sections, list items that need to feel like discrete objects.

Product-grade list table with sticky header, sortable columns, optional pagination and row-selection state. The default choice for any /list page.

Modal that interrupts the user. Use for confirmations, focused sub-tasks, or destructive flows. For long-form editing prefer a Sheet so the page stays visible behind it.

Universal in-app layout — TopBar with brand + breadcrumbs, collapsible Sidebar with three modes (expanded / collapsed / hover), scrollable content area. The chrome around every product page.