React UI Design System Foundations

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

The components use the Geist font. The theme file names it but does not load it, so load Geist in your app and point --font-sans at it. If you skip this, the components fall back to the system font and still work. To use your own font instead, put it in --font-sans the same way.

// app/layout.tsx
import { Geist } from "next/font/google";
const geist = Geist({ subsets: ["latin"], variable: "--font-geist" });
// <html lang="en" className={geist.variable}>

/* app/globals.css, after the liro.css import */
@theme {
  --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
}

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; Liro 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.

The Liro look

Panels and lists come in two looks. Modern rests white cards on a gray tray; flat is one card alone. Loose controls (buttons, fields, chat bubbles) take no tray in either look. The tray is its own token, --tray, so a brand can tint it. Corners are continuous (iOS-style squircles) and step down with depth: 26px for the tray, 20px for the card in it.

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.