shape
Our screens are built from simple, square shapes, like the panes of a terminal. Every frame has square corners, every line is one pixel wide, and surfaces lie flat on the canvas. The only rounded shapes are the icons.
square frames
Every card, panel, tile, button, field, menu, toast, tooltip and dialog has square corners; the components take care of it themselves. There are no rounded corners, no pill shapes, and no circles behind an icon or a count.
A square frame reads like a terminal pane. It lines up with its neighbours, and with the lines of text inside it.
lines
Frames and dividers are drawn with hairlines, in four kinds:
| line | where |
|---|---|
| A hairline | Cards, tables, dividers, the edge of a region |
| A brighter hairline | The edge of what floats over the page: menus, tooltips, toasts and dialogs; and a standard button |
| A control's edge | Text fields, selects, text areas, checkboxes and the switch's track. It is strong enough to be seen (3 to 1), so the control is visible |
| A state's border | The frame of a banner or a status chip, around its tint |
The first two are decoration, so they don't need to meet the contrast rules, and a control is never recognised by them alone; see colour.
rules
A thicker line on one edge marks what is current, or what something is about:
- A blue bar on the leading edge: a selected table row, the current tile, and a focused menu item, in the focus colour.
- A blue line under the label: the current tab.
- A thicker bar in a state's colour on the leading edge: a banner, a toast, a highlighted table row.
- A thicker blue bar on the leading edge: the selection toolbar, while something is selected.
A rule always comes with words: the row also has its ticked checkbox, the banner its message, and the tab its label.
surfaces
- Surfaces are flat. A card, a panel or a tile is a fill and a hairline, never a shadow.
- What floats over the page is set apart by a brighter hairline. The two menus that float over the content, the action menu and the panel of the multi select, also cast one soft shadow, so they read as lying above the rows they cover.
- A modal sits on a dark veil that dims the page behind it. It casts no shadow.
- Depth comes from the steps of the canvas, from darker to lighter, not from shadows.
the one rounded shape
Icons are the only rounded shape. The icon set draws them with round line ends and corners, and the app icon carries its rounded corners in the image itself. Everything around an icon stays square: no rounded corners, and no circle or pill behind it. The tile's icon box is square and has no fill.
do and don't
related
- Colour: the steps of the canvas, and the colours of the lines.
- Iconography: the icons, the one rounded shape.
- Layout: the space inside and between the frames.
- Interaction: the rules and outlines of each state.
specs
- Corners.
border-radius: 0on every card, panel, tile, button, input, menu, toast, tooltip and dialog, set by the components; the Tailwind preset's default radius is 0 too.
| line | token | where |
|---|---|---|
| Hairline, 1px | --border |
Cards, tables, dividers, the edge of a region |
| Heavier hairline, 1px | --border-2 |
Menus, tooltips, toasts, dialogs; a default button |
| Control boundary, 1px | --border-control |
Inputs, selects, textareas, checkboxes, the switch track: 3:1 |
| State border, 1px | --state-*-border |
A banner or a status chip, around its tint |
--border and --border-2 are decoration, outside the contrast policy.
| rule | where |
|---|---|
2px --cloud-blue, leading edge |
A selected table row, the current tile; a focused menu item in --focus-ring |
2px --cloud-blue, under the label |
The current tab |
| 3px in the state's colour, leading edge | A banner, a toast, a highlighted table row |
3px --cloud-blue, leading edge |
The selection toolbar, while something is selected |
- Surfaces. A fill (
--surface) and a hairline. The action menu and the multi select panel cast0 8px 24pxof black at 45%. A modal's backdrop is the canvas at 72%. Depth:--bg,--bg-2,--surface,--surface-2. - Icon box. The tile's icon box is 28px, square and unfilled.