How it works

Snow CSS is a single-file design system. One accent color generates a complete light + dark palette using OKLCH color science.

Hybrid styling

Typography elements like headings, paragraphs, links, code, and blockquotes are styled automatically — no classes needed. Everything else uses explicit snow-* classes:

• Buttons: snow-btn, snow-btn-primary, snow-btn-outline
• Forms: snow-input, snow-select, snow-textarea
• Components: snow-card, snow-accordion, snow-dialog
• Labels: snow-label, snow-fieldset, snow-legend

Light & dark mode

Both themes are generated automatically from your accent color. The active theme follows the user's system preference, or can be set manually with data-theme="dark" on the root element.

Tailwind compatible

All styles are wrapped in @layer declarations (snow-base, snow-components, snow-flair) so Tailwind utility classes always take precedence.

Customization

Use the wizard to pick your accent color, typography, spacing, and flair — then generate an AI-ready prompt or raw CSS.

Using the wizard

Click the Customize tab on the right to open the wizard. Changes preview live on the page as you adjust:

• Palette — Pick an accent color. A full set of semantic colors (primary, secondary, success, warning, error) plus backgrounds, text, and borders are generated for both light and dark mode.
• Typography — Choose a font family and base font size.
• Spacing & Shape — Adjust spacing scale, border radius, and shadow intensity.

Generate AI prompt

Click Generate Prompt in the wizard footer. The modal gives you two outputs:

• AI Prompt — A complete prompt containing your theme CSS, full class reference, and Tailwind config. Paste it straight into Claude or your AI coder to build with your exact design system.
• CSS Only — The raw CSS custom properties to drop into your stylesheet.

Typography

Beautiful typography out of the box with fluid scaling.

Headings

Paragraph text

Blockquotes

Links

Clean link styling with accessible focus states.

Lists

Default classless lists plus styled variations with the snow-list class.

Default (classless)

Bare <ul> and <ol> elements get sensible styling automatically.

snow-list

Adds primary-colored markers. Apply to <ul> or <ol>.

snow-list-none

Strips all markers and indentation.

snow-list-inline

Horizontal list, great for tags or breadcrumbs.

snow-list-divided

Items separated by subtle border lines.

snow-list-check

Checkmark bullets in your primary color.

snow-list-timeline

Vertical timeline with connected dots.

Definition lists

Use snow-dl for vertical or snow-dl-horizontal for side-by-side layout.

Tables

Clean, readable tables with proper spacing.

Code

Inline and block code styling.

Inline code

Use const x = 42; for inline code snippets.

Code blocks

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Keyboard input

Press Ctrl + S to save.

Text inputs

All input types styled beautifully with snow-input classes.

Basic usage

Form groups (snow-form-group)

Validation states

Selects

Native select elements with custom styling.

Checkboxes & Radios

Custom styled checkboxes and radio buttons.

Buttons

Buttons with variants for different contexts.

Default button

Variants

All styles

Sizes

Button states

Icon buttons

<!-- Small icon button -->
<button class="snow-btn snow-btn-primary snow-btn-icon snow-btn-sm" aria-label="Settings">
  <svg ...></svg>
</button>

<!-- Default icon button -->
<button class="snow-btn snow-btn-primary snow-btn-icon" aria-label="Edit">
  <svg ...></svg>
</button>

<!-- Large icon button -->
<button class="snow-btn snow-btn-danger snow-btn-icon snow-btn-lg" aria-label="Delete">
  <svg ...></svg>
</button>

Accordion

Native HTML <details> element styled as an accordion.

Cards

Card components using the snow-card class.

Basic card

Structured card (snow-card)

<div class="snow-card">
  <div class="snow-card-header"><h2>Title</h2></div>
  <div class="snow-card-body"><p>Content</p></div>
  <div class="snow-card-footer"><button class="snow-btn">Action</button></div>
</div>

Dialog

Native HTML <dialog> element for modals.

<dialog id="my-dialog" class="snow-dialog">
  <div class="snow-dialog-header">
    <h3>Title</h3>
    <button class="close" onclick="this.closest('dialog').close()">&times;</button>
  </div>
  <div class="snow-dialog-body">
    <p>Dialog content...</p>
  </div>
  <div class="snow-dialog-footer">
    <button class="snow-btn snow-btn-secondary">Cancel</button>
    <button class="snow-btn snow-btn-primary">Confirm</button>
  </div>
</dialog>

Pagination

Navigation for paged content.

<nav>
  <ul class="snow-pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><span class="ellipsis">&hellip;</span></li>
    <li><a href="#">12</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>

Search

Search input with icon and optional clear button.

<div class="snow-search">
  <span class="snow-search-icon">
    <svg ...></svg>
  </span>
  <input class="snow-input" type="search" placeholder="Search...">
</div>

Filters

Filter chips for toggling categories or tags.

<div class="snow-filter-bar">
  <button class="snow-filter-chip active">All</button>
  <button class="snow-filter-chip">Design <span class="snow-filter-count">12</span></button>
  <button class="snow-filter-chip">Development <span class="snow-filter-count">8</span></button>
  <button class="snow-filter-chip">Marketing <span class="snow-filter-count">5</span></button>
</div>

Toggle Group

Segmented control for switching between options.

<div class="snow-toggle-group">
  <button class="active">Day</button>
  <button>Week</button>
  <button>Month</button>
</div>

Progress

Native progress and meter elements.

Progress bar

Meter

Tooltips

Simple tooltips using the data-tooltip attribute.

<button class="snow-btn" data-tooltip="This is a tooltip!">
  Hover me
</button>