structure

Fonts

Samples are editable so that you can experiment with text length. Inspect to see the classes.

Display fonts

FontXL
FontL
FontM
FontS
FontXS
FontXXS

Text fonts

FontB
FontC

Long sample

People with some visual or cognitive disabilities need to be able to select the color of text and the color of the background. They sometimes choose combinations that seem unintuitive to someone without that disability. Sometimes these combinations have very low contrast. Sometimes only very specific color combinations work for them. Control of color or other aspects of text presentation makes a huge difference to their comprehension.

Frames provide structural framing foundations for components. They're designed to correlate with Sketch symbols. Shown here are different frames each applied to multiple elements for quality assurance. Blank frames are white-space and :empty tests for preceding tag

.frame-dense

span

.frame-basic

span

.frame-plush

span

Corners

Round corners

.round-small

.round-medium

.round-large

.round-circle

Sharpen any side

.sharp-top

.sharp-left

.sharp-right

.sharp-bottom

Sharpen inners

.sharp-shelf .sharp-shelf .sharp-shelf

.sharp-stack .sharp-stack .sharp-stack

Buttons

Buttons may appear in many form factors. Recommended sizing is as shown below. In certain layouts we may flex the button. Apply color via button paint.

Buttons may contain more than just text.

Pill

See related: #pillbox

Disclosure

For disclosing another element. Works with any button tone.
Use aria-expanded to indicate the open state
Use aria-controls if disclosed element is outside

Grouped

Use aria-pressed to indicate the chosen one(s)

Checkbox

Checklist

Radio

Radiogroup

Dropdowns

#optionbox => #opdown

Opdown

Box uses role=listbox and aria-multiselectable=false|true
Box uses tabindex=0 for focus support
Options use role=option and aria-selected
JavaScript must manage keyboard interaction
Options truncate via CSS. Box overflow-y is auto
CSS forthcoming: shadows, max-height, z-index, coloring class

Pillbox

role may be either textbox or searchbox
Defaults to aria-autocomplete=none
Suitable as #autocomplete input by specifying aria-autocomplete=list
Uses aria-multiline=false for compatibility with usage in combobox
Uses tabindex=0 for focus support
Supports aria-disabled aria-invalid aria-required etc
Refer to #pill for details about pills
CSS forthcoming: unclipping descenders, spacing finetuning

Autocomplete

Uses role=combobox containing input and role=listbox
Disable ARIA via divs via aria-disabled="true"
Disable HTML input via disabled=""
Disable via the parent fieldset when applicable for both semantic and CSS sake
CSS forthcoming: z-index, TBD about shadow behavior

Profile

Groups

Collaborators (12)

collaborators@example.com

Elongated collaboration squad (21)

elongatedcollaborationsquad@example.com

People

Jane Doe

jane@example.com

Jane Doe names truncate regardless of count

elongatedemailaddress@example.com

Fields

Model

Field (fieldset for grouping or disabling)

Tactile (label touch area)

Identify

Clarify

Input

Feedback

Ready

Choose username

Clarified

Choose username Be creative :)

Error

Choose username Unavailable :(

Unitcap

Duration Days

Checkcap

Limit

Icon inside input (WIP)

Textareas are similar to inputs.

Description

Textareas may set aria-invalid like inputs do.

Description Be precise :) Missing details :(

Loading

Spinner

Design team recommends 3 sizes as shown. 48x48 24x24 16x16
Design team recommends that stroke-width computes differently per size
- Target stroke-width computed value for 48x48 is 3px
- Target stroke-width computed value for 24x24 is 3px or 2.5px
- Target stroke-width computed value for 16x16 is 2px
CSS forthcoming: spinning

Here the 0 0 16 16 SVG is manually scaled to match the targets

Raw SVGs from design. Demo'd at scale on VPN

Show animation