01. Foundation: tokens.css
Tokens are the values the UI system is allowed to use. For a new client, change token values first. That may be all you need. Do not rewrite component CSS just to change a brand.
Rule
Components should use variables like var(--la-surface), var(--la-ink), and var(--la-brand-action). Hard-coded colors should be extremely rare.
Dark mode
Dark mode is handled through tokens and is optional. If the app does not need it, ignore it. Switch token values, not component CSS.
Color tokens
Token names stay the same across apps. Only the values change for a client theme. Use the toggle to preview dark mode values.
Client brand colors
The primary brand set. Swap these first for a new client.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-brand |
var(--la-brand) | Primary brand color. Use for identity marks, selected accents, and recognizable brand moments. | |
--la-brand-hover |
var(--la-brand-hover) | Hover state for brand-colored controls, links, and small interactive accents. | |
--la-brand-active |
var(--la-brand-active) | Pressed or active brand state. Use when the brand color needs stronger contrast. | |
--la-brand-soft |
var(--la-brand-soft) | Soft brand tint for badges, subtle highlights, quiet panels, and low-emphasis backgrounds. | |
--la-brand-border |
var(--la-brand-border) | Brand-tinted border for outlines, dividers, pills, and quiet emphasis. | |
--la-brand-ink |
var(--la-brand-ink) | Readable text color for content placed on soft brand backgrounds. |
Action colors
Used by primary buttons, active links, selected states, and important interactive controls. These can match the brand colors when the palette is limited.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-brand-action |
var(--la-brand-action) | Default action color for primary buttons, important links, and main interactive controls. | |
--la-brand-action-hover |
var(--la-brand-action-hover) | Hover state for primary action controls. | |
--la-brand-action-active |
var(--la-brand-action-active) | Pressed or active state for primary action controls. |
Text colors
Use these for readable hierarchy. Do not add random gray values inside component files.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-ink |
var(--la-ink) | Primary text color. Use for headings and highest-emphasis body text. | |
--la-ink-soft |
var(--la-ink-soft) | Secondary text color. Use when text should be clear but less dominant. | |
--la-muted |
var(--la-muted) | Supporting text for descriptions, helper text, metadata, and less important labels. | |
--la-disabled |
var(--la-disabled) | Disabled text and non-interactive UI states. | |
--la-ink-inverse |
var(--la-ink-inverse) | Inverse text color for dark backgrounds. |
Page and surface colors
Use this group for most app backgrounds, cards, panels, table rows, and selected states.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-page |
var(--la-page) | Default app page background. | |
--la-surface |
var(--la-surface) | Default surface for cards, panels, modals, and clean content areas. | |
--la-surface-subtle |
var(--la-surface-subtle) | Very light surface for table headers, nested blocks, and quiet background separation. | |
--la-surface-selected |
var(--la-surface-selected) | Selected-row or selected-item background. | |
--la-surface-hover |
var(--la-surface-hover) | Hover background for table rows and list rows. |
Borders and dividers
Use these for cards, tables, inputs, section dividers, quiet separators, and panel borders.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-border |
var(--la-border) | Default border for cards, tables, inputs, and main separators. | |
--la-border-strong |
var(--la-border-strong) | Stronger border for hover states or clearer separation. |
Status colors
Use these only when the UI communicates a real state: info, success, warning, danger, or disabled.
| Token | Swatch | Value | Usage |
|---|---|---|---|
--la-info |
var(--la-info) | Info state. Use for informational messages and neutral system notices. | |
--la-success |
var(--la-success) | Success state. Use for completed, approved, valid, or positive states. | |
--la-warning |
var(--la-warning) | Warning state. Use for caution, pending, attention, or risk states. | |
--la-danger |
var(--la-danger) | Danger state. Use for errors, destructive actions, failed states, or urgent problems. | |
--la-danger-soft |
var(--la-danger-soft) | Soft danger background. |
Type scale
Keep text sizing predictable. Add new font sizes here only when there is a repeated need.
| Token | Value | Preview | Usage |
|---|---|---|---|
--la-font |
IBM Plex Sans, system UI stack | IBM Plex Sans | Primary UI font for app text, labels, headings, and body copy. |
--la-mono |
IBM Plex Mono, monospace stack | IBM Plex Mono |
Use for code, tokens, numeric values, and implementation references. |
--la-text-xs |
0.75rem / 12px | Tiny metadata sample | Tiny labels, metadata, helper notes. |
--la-text-sm |
0.875rem / 14px | Small UI text sample | Small UI text and table details. |
--la-text-md |
0.95rem / 15px | Default component text sample | Default component text. |
--la-text-base |
1rem / 16px | Normal page body text sample | Normal page body text. |
--la-text-lg |
1.125rem / 18px | Small section heading sample | Small section headings. |
--la-text-xl |
1.375rem / 22px | Section heading sample | Page section headings. |
--la-text-2xl |
1.75rem / 28px | Main page title sample | Main page titles. |
--la-weight-light |
500 | Light weight sample | Labels, small headings, and UI emphasis. |
--la-weight-bold |
600 | Bold weight sample | Section headings and stronger emphasis. |
--la-weight-strong |
700 | Strong weight sample | Table headers, sort labels, and important emphasis. |
Spacing scale
Use this scale for all gaps, padding, and section rhythm. Do not introduce one-off pixel values outside this scale.
| Token | Value | Preview |
|---|---|---|
--la-1 |
0.25rem / 4px |
|
--la-2 |
0.5rem / 8px |
|
--la-3 |
0.75rem / 12px |
|
--la-4 |
1rem / 16px |
|
--la-5 |
1.25rem / 20px |
|
--la-6 |
1.5rem / 24px |
|
--la-7 |
1.75rem / 28px |
|
--la-8 |
2rem / 32px |
|
--la-10 |
2.5rem / 40px |
|
--la-12 |
3rem / 48px |
|
Shape and shadows
These keep controls, panels, popovers, and the app shell consistent. Do not use arbitrary border-radius or box-shadow values in component CSS.
--la-radius-xs
--la-radius-sm
--la-radius-md
--la-radius-lg
--la-radius-pill
--la-shadow-shellShell shadow
Use for app shells, floating cards, or larger containers that need subtle lift.
--la-shadow-popoverPopover shadow
Use for menus, popovers, floating panels, and overlays that need clear separation.