Layro UI

Foundations

Every Layro component reads its colours from one theme file, written in the shadcn/ui token format. Keep your own globals.css and the components follow it; or import the Layro theme and get the look below, in light and dark.

@import "tailwindcss";
@import "./layro.css";

Surfaces

Tailwind’s neutral scale. Resting surfaces are flat with a hairline; only things that float get a shadow.

Ink and edges

Borders are translucent ink rather than a grey, so the same hairline reads correctly on a card, a muted row and a tinted status panel.

Status

Four meanings and no more. shadcn defines destructive; Layro adds success, warning and info in the same format. Warning has a brighter --warning-fill for meters and icons, because legible amber text and a visible amber bar are not the same colour.

Type

A product scale, not a reading one: small, tight, with half-pixel steps where a label and a caption need to differ. Available as text-title, text-meta and the rest.

Radius

Squircle corners where the browser supports them, the plain radius where it does not. Nested surfaces step down.

Elevation

Two shadows, for the two things that float: menus and popovers, then dialogs.