controls

overlays, menus, navigation aids and the states in between.

more parts

tabs accordion menu dialog toast tooltip breadcrumbs, steps badges, avatars search, segmented range, drop, chips lists states code, keys dividers

the second set of parts: overlays, menus, navigation aids and states. like the first set, everything here is live and styled by the one stylesheet. the few that need a script use the small one at the foot of this page.

tabs

a row of named panels. the selected tab is yellow and the panel sits inside the same box, so the tab and its content read as one object.

three shapes

a bent tube, two stretched bands and the cube of air they describe.

<div class="ws-tabs" data-tabs>
  <div role="tablist" aria-label="object">
    <button role="tab" id="t1" aria-selected="true" aria-controls="p1" type="button">shapes</button>
    <button role="tab" id="t2" aria-selected="false" aria-controls="p2" type="button" tabindex="-1">materials</button>
  </div>
  <div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
  <div role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>
</div>

selected is yellow.aria-selected drives the style; the script only flips attributes.
keyboard.left and right arrows move between tabs; the panel takes focus with tab. up to five tabs; more than that is a menu or a page.
no icons in tabs.a word is enough, and words line up.

accordion and faq

native details and summary elements, stacked in one box. the open item turns yellow and its triangle flips.

what is an exercise?

a five minute problem in color, form or type. you answer it on screen and it is saved to your notebook.

do i need any tools?

no. everything happens in the app. a real compass and ruler help later, but they are not required.

can i skip a day?

yes. the streak counts days you did, not days you missed.

<div class="ws-acc">
  <details open>
    <summary>what is an exercise?</summary>
    <div class="body"><p>a five minute problem in color, form or type.</p></div>
  </details>
  <details>…</details>
</div>

no javascript.details works everywhere, is keyboard accessible, and remembers nothing, which is right for a faq.
one triangle.the marker is the triangle icon, pointing down when closed and up when open. never a plus sign.
short answers.if the body needs a heading, it is a page, not an answer.

dropdown menu

a details element whose summary is a button and whose body is a list. it closes when you click elsewhere or press escape.

<details class="ws-menu" data-menu>
  <summary><span class="ws-btn">options</span></summary>
  <ul>
    <li><button type="button">download svg</button></li>
    <li><a href="/lab">open in form lab</a></li>
  </ul>
</details>

four to seven items.fewer is a pair of buttons; more is a page.
destructive items last.and separated by the 2 px rule, with a red square before the label.
the open button goes ink.so the person can see which menu is open when two sit side by side.

dialog

the native dialog element with a red band. it opens modally, dims the page, and closes with escape or the cancel button.

<button class="ws-btn ws-btn--primary" type="button" data-open="confirm">delete this exercise</button>

<dialog class="ws-dialog" id="confirm">
  <div class="ws-dialog__band"></div>
  <div class="ws-dialog__body">
    <h3>delete this exercise?</h3>
    <p>it will be removed from your notebook. you can't undo this.</p>
  </div>
  <div class="ws-dialog__actions">
    <button class="ws-btn" type="button" data-close>cancel</button>
    <button class="ws-btn ws-btn--primary" type="button" data-close>delete</button>
  </div>
</dialog>

<script>
  document.querySelector('[data-open="confirm"]').onclick = () => document.getElementById('confirm').showModal();
</script>

band color is the kind.red for a destructive decision, blue for information, yellow for a warning.
two buttons, at most.the safe one first, the primary one last. the question is the heading and the stakes are the paragraph.
focus returns.the native element restores focus to the opener on close. do not build a custom modal.

toast

a short message at the bottom of the screen that confirms something happened. ink on the outside, yellow for the headline, one action at most.

<div class="ws-toast" role="status" id="toast" data-show>
  <div><b>saved to notebook</b><span>find it under color studio.</span></div>
  <button class="ws-btn ws-btn--small ws-btn--emphasis" type="button">ok</button>
</div>

four seconds, then gone.or sooner if the person presses ok. role status announces it without interrupting.
never for errors.an error is an alert in the page where it happened, not a message that disappears.
one at a time.a second toast replaces the first; they never stack.

tooltip

a label that appears on hover or focus for an icon-only control. it is a courtesy, not the only label: the control still has an aria-label.

<span class="ws-tip">
  <button class="ws-btn" type="button" aria-label="download"><svg aria-hidden="true">…</svg></button>
  <span role="tooltip">download</span>
</span>

one word, two at most.if the control needs a sentence, give it a visible label instead.
shows on focus too.keyboard users see it when the button is focused; touch users never see it, which is why the aria-label exists.

breadcrumbs and steps

a path back up the site, and a path forward through a task. both use the current item in yellow.

pick a color
find its complement
name the pair
save

<nav aria-label="you are here">
  <ol class="ws-crumbs">
    <li><a href="/library">library</a></li>
    <li><a href="/library/furniture">furniture</a></li>
    <li><span aria-current="page">club chair</span></li>
  </ol>
</nav>

<ol class="ws-steps">
  <li class="done">pick a color</li>
  <li aria-current="step">find its complement</li>
  <li>name the pair</li>
</ol>

a red triangle separates crumbs.it points forward, which is the direction you read. no slashes, no chevrons.
the current step is yellow; done steps get an ink number.three to five steps. more than that is two tasks.

badges and avatars

a counter is a red box with a number. an avatar is a circle with initials, because a circle is the shape for a person and the only round thing in the interface.

notebook 3done 12new 1 wgmbmahblm

wgmbma+4

<span class="ws-badge">3</span>
<span class="ws-avatar">mb</span>
<div class="ws-avatars">
  <span class="ws-avatar ws-avatar--sm">wg</span>
  <span class="ws-avatar ws-avatar--sm ws-avatar--yellow">mb</span>
</div>

red counters mean unread or pending.ink counters are totals. yellow means new since last time.
initials, lowercase.two letters, the first of each name. a photo may replace them; it is cropped to the circle and keeps the 3 px border.

search and segmented control

a search box with a yellow button, and a segmented control for two to four exclusive choices that should all stay visible.

gridlisttimeline

<form class="ws-search" role="search">
  <input type="search" aria-label="search the library" placeholder="search the library">
  <button type="submit" aria-label="search"><svg aria-hidden="true">…</svg></button>
</form>

<div class="ws-seg" role="group" aria-label="view">
  <label><input type="radio" name="view" checked><span>grid</span></label>
  <label><input type="radio" name="view"><span>list</span></label>
</div>

the segmented control is a radio group.native inputs, so it works with arrow keys; the checked label is yellow.
two to four segments.five or more becomes a tab set or a select.

range, drop zone and chips

a slider with a round red thumb on an ink track, a dashed box for files, and chips that can be removed.

tracking

drop an svg hereor choose a file. up to 2 mb.

furniture 1925 steel

<input class="ws-range" type="range" min="-5" max="5" value="-3" step="1" aria-valuetext="-3 percent">

<div class="ws-drop">
  <b>drop an svg here</b>
  <span>or <a href="/upload">choose a file</a>. up to 2 mb.</span>
</div>

<span class="ws-chip">furniture <button type="button" aria-label="remove furniture">×</button></span>

the thumb is red because it moves.same rule as the icons: red marks the active part.
a chip with a button is a filter; a tag without one is a label.do not mix them in one row.
the drop zone is the only dashed border in the system.it means not yet here.

lists

a bordered list of rows with an avatar or icon, a title, a detail line and an optional action. and a definition list for label and value pairs.

find two colors that vibratecolor studio · 5 min
start
build a chair from four shapesform lab · 10 min
new
set a headline in lowercasetype room · done yesterday

designer: marcel breuer
year: 1925
materials: steel tube, eisengarn
collection: bauhaus dessau

<ul class="ws-list">
  <li>
    <span class="ws-avatar ws-avatar--yellow" aria-hidden="true">…</span>
    <div class="grow"><b>find two colors that vibrate</b><small>color studio · 5 min</small></div>
    <a class="ws-btn ws-btn--small ws-btn--dark" href="/studio">start</a>
  </li>
</ul>

<dl class="ws-dl"><dt>designer</dt><dd>marcel breuer</dd></dl>

60 px rows, 2 px rules between.the outer border is 3 px, the inner rules 2 px, so the list reads as one object.
one action per row, at the right.or none, and the whole row is a link.

empty, loading and done

what the screen shows when there is nothing yet, when something is coming, and when something finished.

nothing here yet

start an exercise and it will show up in your notebook.

start today's exercise

loading the library

all caught up

no exercises left today. tomorrow's arrives at 7.

<div class="ws-empty">
  <b>nothing here yet</b>
  <p>start an exercise and it will show up in your notebook.</p>
  <a class="ws-btn ws-btn--primary" href="/today">start today's exercise</a>
</div>

<span class="ws-loading" role="status" aria-label="loading"><i></i><i></i><i></i></span>

<span class="ws-skel" style="height:120px"></span>

the loader is the three shapes, blinking in turn.there is no spinner, because nothing rotates in this system.
an empty state is an invitation.it says what will appear and gives the one button that makes it appear.
skeletons are striped paper.they are the shape of what is coming, in the ground color, with no shimmer gradient.

code and keys

a code block in ink with a copy button, and a key cap for shortcuts.

.selected { background: var(--emphasis); }

press ⌘ k to search, esc to close.

<div class="ws-code">
  <pre><code>.selected { background: var(--emphasis); }</code></pre>
  <button class="ws-btn ws-btn--small ws-btn--emphasis" type="button" data-copy>copy</button>
</div>

<kbd class="ws-kbd">esc</kbd>

monospace only here.code is the one place a second typeface is allowed, because code is a different material.
copy turns to copied for two seconds.then back. no checkmark animation.

dividers

a 3 px rule, or the three shapes when a page wants a breath instead of a line.

<hr class="ws-hr">
<div class="ws-div" aria-hidden="true"><i></i><i></i><i></i></div>

rules between blocks, shapes between chapters.the shape divider appears at most once per page.

previous in partscomponents next in partsicons