Suzy CSS

Suzy is a tiny, token-first CSS starter that works like Pico CSS but keeps configuration down to two inputs: a single neutral/background color and a single accent color (plus an optional base spacing unit). Everything else—text, borders, surfaces, focus rings, button states, and spacing scale—is derived in plain CSS, no Sass required.

Quick start

1. Add the stylesheet.

   <link rel="stylesheet" href="suzy.css" />

2. Override the three root tokens anywhere in your cascade to theme the entire library.

   :root {
     --suzy-surface: #f7f8fb; /* neutral + backgrounds */
     --suzy-color-accent: #d94a27; /* primary/accent */
     --suzy-space: 0.9rem; /* spacing base */
   }

   Every other color and spacing value is derived from these.

Design goals

• Two tokens, full theme: Only --suzy-surface and --suzy-color-accent are required. Use optional --suzy-space to scale the rhythm.
• Pure CSS derivations: Derived shades use color-mix() and calc() to avoid preprocessors.
• Readable defaults: Typography, buttons, forms, tables, and cards come pre-styled with sensible defaults.
• Dark-friendly: Switch to dark by redefining --suzy-surface to a darker value; the rest adapts automatically. A helper selector :root[data-theme="dark"] is included.

Tokens

Token	Purpose	Default
--suzy-surface	Neutral/background seed	hsl(210, 16%, 96%)
--suzy-color-accent	Accent/primary seed	hsl(221, 83%, 53%)
--suzy-space	Base spacing step	0.75rem

Derived tokens (no need to set manually): --suzy-surface-1, --suzy-surface-2, --suzy-color-ink, --suzy-color-ink-soft, --suzy-color-muted, --suzy-border, --suzy-focus, --suzy-color-accent-strong, --suzy-color-accent-soft, --suzy-color-accent-ghost, --suzy-shadow, plus spacing scale --suzy-space-*.

Components and patterns

• Typography: Base font, headings, and links with consistent rhythm.
• Buttons: Primary, ghost, and subtle states derived from the accent color.
• Forms: Inputs, selects, textareas, checkboxes, radios, and toggle styles use surface derivatives.
• Cards and panels: .card and .panel with soft elevation derived from the surface seed.
• Tables: Striped rows use surface shading; focus and hover states use accent blends.
• Utilities: .stack and .span for vertical rhythm; .pill and .badge for inline labels.

Dark theme helper

If you prefer an opt-in selector instead of redefining --suzy-surface globally:

:root[data-theme='dark'] {
  --suzy-surface: hsl(220, 15%, 12%);
  --suzy-color-accent: hsl(211, 88%, 68%);
}

Attach data-theme="dark" to html or body.

Demo

See demo/basic.html for a quick preview of the defaults and how to override tokens inline.