Style guide

The single source of truth for Letrix UI: color tokens, typography, spacing, radius, shadows, control sizing, and state recipes. Everything is driven by the CSS variables the customizer edits; copy the recipes verbatim to stay consistent.

Live tokens. Every value on this page is a CSS variable: open the customizer and watch it re-theme. The Conventions panel at the bottom holds these rules as a paste-ready reference for AI models and contributors; flip it to Tokens for the stylesheet.

Color scales

Five scales, steps 25–950. Use 600 for primary fills, 700 for hover, 50–200 for tints. Hover a swatch for its step.

Brand
Gray
Error
Warning
Success
25200400600800950

Semantic tokens

Use these for all chrome. They flip automatically in dark mode with zero per-component overrides.

Backgrounds

bg-primaryCards, controls, app surface
bg-secondaryPage background, hover fills
bg-tertiaryWells, pressed fills
bg-disabledDisabled control fills

Text

Aa
text-primaryHeadings, primary content
Aa
text-secondaryLabels, body copy
Aa
text-tertiarySupporting text, captions
Aa
text-placeholderPlaceholder text
Aa
text-disabledDisabled text

Borders

border-primaryInputs, strong outlines
border-secondaryCard borders, dividers (default)
border-disabledDisabled outlines

Typography

One family, var(--font-sans), six roles. Weights: 400 body · 500 labels · 600 headings and buttons.

The quick brown foxDisplaytext-3xl font-semibold tracking-tight
The quick brown foxTitletext-2xl font-semibold tracking-tight
The quick brown foxHeadingtext-lg font-semibold
The quick brown foxBodytext-base
The quick brown foxBody small (default UI)text-sm
The quick brown foxCaptiontext-xs font-medium

Spacing: 8px grid

Everything sits on an 8px grid with a 4px half-step. These are the only gaps and paddings in the kit.

4pxgap-1: icon to label
8pxgap-2: control clusters, chip rows
12pxgap-3: buttons in a row, form gaps
16pxgap-4 / p-4: card grids, compact cards
24pxp-6: default card padding
32pxpy-8: page gutters
40pxmb-10: between page sections

Border radius

Six tokens that scale together. The customizer's radius setting remaps all of them at once.

rounded-smCheckboxes, small chips
rounded-mdButtons, inputs, menu items (default)
rounded-lgToolbars, small cards
rounded-xlCards, alerts, panels
rounded-2xlModals
rounded-fullPills, avatars, switches

Shadows

Five elevations, warm gray-tinted. Higher elevation means closer to the user.

shadow-xsButtons, inputs
shadow-smRaised cards
shadow-mdDropdown menus
shadow-lgToasts, popovers
shadow-xlModals

Control sizing

The complete size recipes. Do not invent new paddings; pick a size.

Button · smpx-3 py-2 text-sm font-semibold rounded-md
Button · md (default)px-4 py-2.5 text-sm font-semibold rounded-md
Button · lgpx-[18px] py-2.5 text-base font-semibold rounded-md
Button · xlpx-5 py-3 text-base font-semibold rounded-md
Icon-only buttonp-2.5 rounded-md · icon h-5 w-5
Input / selectpx-3.5 py-2.5 text-sm rounded-md shadow-xs
Badgepx-2.5 py-0.5 text-sm font-medium rounded-full ring-1 ring-inset
Icon sizesh-5 w-5 in md controls · h-4 w-4 in sm and utility

Interaction states

Every interactive component ships all four. The recipes are mechanical; apply them exactly.

HoverDarken one step: bg-brand-600 → hover:bg-brand-700 · bg-primary → hover:bg-secondary
Focusfocus:outline-none focus-visible:ring-4 · brand controls: ring-brand-500/24 · neutral: ring-gray-400/20 · inputs add focus:border-brand-300
Errorborder-error-300 + ring-4 ring-error-500/24 + text-error-600 hint text
Disabledbg-disabled text-disabled border-disabled cursor-not-allowed · drop the shadow
Dark tintsbg-{c}-50 → dark:bg-{c}-500/15 · ring-{c}-200 → dark:ring-{c}-500/30 · text-{c}-700 → dark:text-{c}-300

Rules for AI models & contributors

Follow these six rules and anything you build will match the rest of the kit.

  1. Use only Tailwind utilities that map to the tokens: never raw hex, rgb(), or arbitrary colors.
  2. Never build class names dynamically; variants select from complete literal class strings.
  3. Reuse the exact recipes on this page; do not invent new paddings, sizes, radii, or shadows.
  4. Semantic tokens (bg-primary, text-secondary, border-secondary) for chrome; color scales only for emphasis and status.
  5. Every interactive element ships hover, focus-visible, and disabled styles per the state recipes.
  6. Dark mode must come free via semantic tokens; add dark: overrides only for colored tint surfaces.

Conventions

Paste-ready rules for AI models and contributors, plus the token stylesheet.

/* =====================================================
   LETRIX UI STYLE CONVENTIONS (single source of truth)
   =====================================================
   All values are CSS variables on :root, flipped by .dark.
   Tailwind utilities map to them. NEVER hardcode colors.

   COLOR
   • Scales: brand | gray | error | warning | success, steps 25–950
     e.g. bg-brand-600, text-error-700, ring-brand-500/24
   • Semantic tokens (preferred for chrome):
     bg-primary bg-secondary bg-tertiary bg-disabled
     text-primary text-secondary text-tertiary text-placeholder text-disabled
     border-primary (strong) border-secondary (subtle) border-disabled
   • Dark mode: semantic tokens flip automatically. Colored tints use:
     bg-{c}-50 + dark:bg-{c}-500/15, ring-{c}-200 + dark:ring-{c}-500/30.

   TYPOGRAPHY (var(--font-sans), Inter default)
   • Display 30px: text-3xl font-semibold tracking-tight
   • Title 24px:   text-2xl font-semibold tracking-tight
   • Heading 18px: text-lg font-semibold
   • Body 16px:    text-base · Body-sm 14px: text-sm (default UI)
   • Caption 12px: text-xs font-medium
   • Weights: 400 body · 500 labels · 600 headings & buttons

   SPACING: 8px grid (4px half-step)
   • gap-1(4) icon↔label · gap-2(8) clusters · gap-3(12) button rows
   • gap-4(16) card grids · p-4(16) compact · p-6(24) default card padding
   • py-8(32) page gutters · mb-10(40) between sections

   RADIUS (all tokens rescale together via the customizer)
   • rounded-sm checkboxes · rounded-md buttons/inputs (default)
   • rounded-lg toolbars · rounded-xl cards/alerts · rounded-2xl modals
   • rounded-full pills, avatars, switches

   SHADOWS
   • xs controls · sm raised cards · md dropdowns · lg toasts · xl modals

   CONTROL SIZING
   • Button sm: px-3 py-2 text-sm · md: px-4 py-2.5 text-sm (default)
   • Button lg: px-[18px] py-2.5 text-base · xl: px-5 py-3 text-base
   • Icon-only: p-2.5 · icons h-5 w-5 (md) / h-4 w-4 (sm)
   • Inputs: px-3.5 py-2.5 text-sm + shadow-xs

   STATES (required on every interactive component)
   • hover: darken one step (brand-600→700; bg-primary→bg-secondary)
   • focus: focus:outline-none focus-visible:ring-4
     brand: ring-brand-500/24 · neutral: ring-gray-400/20
     inputs also: focus:border-brand-300
   • error: border-error-300 + ring-error-500/24 + text-error-600 hint
   • disabled: bg-disabled text-disabled border-disabled cursor-not-allowed

   RULES FOR AI MODELS & CONTRIBUTORS
   1. Only token-mapped utilities; never raw hex/rgb.
   2. Never construct class names dynamically.
   3. Copy recipes verbatim; invent nothing.
   4. Semantic tokens first; scales for emphasis only.
   5. hover + focus-visible + disabled on everything interactive.
   6. dark: overrides only for colored tint surfaces.
*/