Standard Design System

A framework-agnostic design system built on OKLCH colors, a 4px spacing scale, and zero dependencies. Ship anywhere — no build tools required.

v1.0 Zero dependencies · OKLCH colors · WCAG AA
Get Started Components
index.html 
<!-- One file. That's it. -->
<link rel="stylesheet"
      href="standard-core.css">

<button class="Button Button--primary">
  Ship it
</button>

<div class="Card Card--elevated">
  <h3 class="Card-title">Ready</h3>
  <p>No build step needed.</p>
</div>

Standard Design System

47 Pages
32 Components
0 Dependencies
AA WCAG
Dark Mode
Print Ready

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
  • Elevation — Shadow system, multi-layer composites
  • Export — Copy all tokens as CSS, JSON, or SCSS
  • Playground — Interactive OKLCH explorer, contrast checker, scale generator

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

Resources

  • Getting Started — Installation, quick start, and first components
  • Contributing — Development workflow, CSS conventions, and how to add components
  • Changelog — Release history and what’s new in v1.0