Introduction

Standard Design System

A framework-agnostic design system built on OKLCH colors, a 4px spacing scale, and zero dependencies. Static HTML — host anywhere.

Tokens

The foundation: colors, type, and spacing that every component inherits.

  • Colors — OKLCH palette, grayscale, accent, status, semantic mapping
  • Typography — Font stacks, scale, weights, line heights
  • Spacing — 4px base grid, spacing tokens

Components

Interactive building blocks. Each page includes live previews, code snippets, and an API reference.

Actions

  • Buttons — Primary, secondary, ghost, outline, danger, icon, groups
  • Links — Inline, standalone, with icons
  • Dropdowns — Trigger + menu, dividers, danger items
  • Menus — Context menus, icon items, sections

Data Entry

  • Forms — Inputs, selects, checkboxes, radios, field layout
  • Switches — Toggle switches, sizes, labels
  • Textarea — Multi-line input, states, sizes
  • Sliders — Range inputs, custom styling
  • File Upload — Drag-and-drop zone, file input

Data Display

  • Tables — Striped, hoverable, bordered, sortable, responsive
  • Cards — Standard, elevated, interactive, grid layout
  • Badges — Status, primary, success, warning, error
  • Avatars — Sizes, rounded, fallback
  • Icons — Phosphor icon set, grid display
  • Lists — Bordered, active states, with icons
  • Timeline — Vertical timeline with dots and content
  • Rating — Star rating, readonly

Feedback

  • Alerts — Info, success, warning, error with icons
  • Toasts — Notifications, actions, auto-dismiss
  • Progress — Bars, indeterminate, spinners
  • Skeletons — Loading placeholders, shimmer
  • Tooltips — Hover hints, positions

Layout

  • Modals — Dialog overlays, sizes, fullscreen
  • Drawer — Slide-in panels, left/right
  • Toolbar — Icon button bars, groups, dividers
  • Accordions — Collapsible sections, bordered
  • Chips — Tags, selectable, removable
  • Dividers — Horizontal rules, dashed, labeled

Patterns

Composable layout primitives and common UI patterns.

  • Layouts — Container, Grid, Stack, Cluster, Split, Sidebar, Center
  • Empty States — No-content messaging with icons and CTAs