color

Surfaces step up from --bg. Text has three strengths. The accent marks what is interactive or current; warn and danger are for the few things that need attention. Use the variables, never the hex values.

type

One monospace family at four sizes, 1.5 line height. Bold (700) for headings and the one primary action; everything else is regular.

space

A 4px base. Controls are --control (26px) tall.

icons

Square caps and straight lines on a 24px grid, drawn in currentColor. They come from one sprite, so it must be served from the same origin as the page (open this guide over HTTP, not file://).

<svg class="icon" aria-hidden="true"><use href="/icons.svg#check" /></svg>
<svg class="icon icon--sm" aria-hidden="true"><use href="/icons.svg#cross" /></svg>

headings

<h1 class="title">stormtask</h1>
<h2 class="band">lists</h2>
<h2 class="band band--lg">groceries</h2>

buttons

Quiet until hovered, then the accent (or danger) outlines them. Ghost buttons drop the border for toolbars, rows and toasts.

<button class="btn">clear</button>
<button class="btn btn--primary">save</button>
<button class="btn btn--icon" aria-label="Move up"><svg class="icon">…</svg></button>
<button class="btn btn--ghost btn--primary">Undo</button>
<button class="btn btn--icon btn--ghost btn--danger" aria-label="Delete">…</button>

inputs

One .input class for text, dates, selects and textareas. .input--line edits text in place; .input--bare reads as plain text until typed in. Wrap a label and its control in .field.

<input class="input" type="text" placeholder="search" />
<label class="field"><span class="field__label">due</span><input class="input" type="date" /></label>
<select class="input">…</select>
<input class="input input--line" type="text" />
<input class="input input--bare" type="text" placeholder="add a task" />
<textarea class="input" rows="3"></textarea>
<label class="field field--stack"><span class="field__label">server</span><input class="input" type="url" /></label>

checks

A square check. As a button it toggles something (the tick shows on hover); as a checkbox, hide the native input with .check-input and draw the box after it.

<button class="check" aria-label="Mark complete"><svg class="icon">…#check</svg></button>
<button class="check check--on" …>…</button>
<label class="field">
  <input class="check-input" type="checkbox" />
  <span class="check"><svg class="icon">…#check</svg></span>
  <span>visible</span>
</label>

badges

<span class="badge">due Mon 2 Nov</span>
<span class="badge badge--warn">overdue</span>   <!-- also --accent, --danger -->

thumbs

A framed square for a small image, sized like a control. --lg for a preview, --empty for a dashed placeholder. As a button it lights up on hover, for picking a new image.

<span class="thumb"><img src="…" alt="" /></span>
<span class="thumb thumb--lg"><img src="…" alt="" /></span>
<button class="thumb thumb--empty" aria-label="Choose icon"><svg class="icon icon--sm">…#plus</svg></button>

dropzone

Drop a file here or click to pick one. Make it a <label> around a hidden file input, and toggle --over on dragenter/dragleave.

<label class="dropzone">
  <input type="file" hidden />
  <svg class="icon">…#upload</svg>drop an image, or click to choose
</label>

nav

<ul class="nav">
  <li><a class="nav__item nav__item--current" href="…">
    <span class="nav__label">groceries</span><span class="nav__count">4</span>
  </a></li>
</ul>

rows

A list line: lights up under the pointer, or when the keyboard is on it (--focused), or when picked (--selected).

<div class="row row--focused">…</div>

panel

<div class="panel">
  <h2 class="band band--lg">groceries</h2>
  …
</div>

disclosure

The chevron turns with aria-expanded; toggle that attribute and show or hide what follows.

<button class="disclosure" aria-expanded="false"><svg class="icon">…#chevron</svg>completed (3)</button>

toast

One at a time in .toast-slot (fixed, bottom left; give it role="status"). Newest replaces oldest.

<div class="toast-slot" role="status" aria-live="polite">
  <div class="toast">
    <span class="toast__message">Task deleted</span>
    <button class="btn btn--ghost btn--primary">Undo</button>
  </div>
</div>

shell

The app frame: title across the top, nav on the left, main on the right. The nav hides under 720px. Here it is boxed; in an app it fills the viewport.

<div class="shell">
  <header class="shell__header"><h1 class="title">app</h1></header>
  <nav class="shell__nav">…</nav>
  <main class="shell__main">…</main>
</div>