Astrel Design System
Astrel style guide

Astrel Design System

Everything the app is built from, in one place: fundamentals, components, patterns and apps. Change something here and it changes in the app. Every example is the real component, on desktop and iPhone, in dark and light.

FundamentalsThe visual base for components and screens: colors, theme, spacing, radius and text.
ComponentsThe building blocks for screens, with sizes and all states.
PatternsReusable solutions for common screens.
AppsWhat only one app needs, built from the same components.

Fundamentals

The visual base for components and screens: color, themes, spacing, layout, type, icons, motion, content and accessibility.

All fundamentals

NameDescriptionLink
AccessibilityWhat the app does for contrast, keyboard, screen reader and motion, measured in the real app. The gaps are at the bottom, so nothing is hidden.View
Border width1px is the default. 2px only when something must stand out.View
ColorThe app only uses these ramps. Every color is solid. Only the steps the app really uses are listed. Used: how often the color is used in the app styles, directly or through a theme token.View
ContentHow the app talks. Short sentences, plain words, and the same word for the same thing. These rules come from the texts in the app.View
EffectsSmall states: dimmed, hover and aspect ratio.View
FontsThe five choices from Settings.View
IconsAn icon always sits in a square box. Large standalone icons (empty state, logo, document icon) have their own size.View
LayersWhich element sits above which other element. There are five layers, one token per role. A new component picks the layer that fits its role, never a number. Inside one layer, the element added to the document later sits on top.View
LayoutThe breakpoint and the grid: columns, gutters and margins.View
MotionFast for direct response (0.12 s), medium for opening and closing (0.2 s), slow only for loading. Motion is never decoration.View
RadiusEvery rounded corner in the app has the same radius. Only fully round shapes are different.View
ShadowShadow shows how high something floats above the page. The higher, the larger the shadow. Whatever opens above the page always gets the default shadow.View
SpacingAll distances are multiples of 4px. Also fixed container sizes.View
ThemesComponents only use these names.View
TypographyEvery text has a role. The role sets size, line height and weight, on desktop and on iPhone.View

Components

The building blocks for screens, with sizes and all states.

All components

NameDescriptionLink
AccordionHeadings that open and close their content. People read only what they need.View
BadgeA small number or dot on the corner of an icon. It says that something is new or waits for you.View
BreadcrumbThe path to the current document, in the top bar.View
ButtonText buttons, icon buttons and options with icon and text, with all states.View
CheckboxBox with a check. The same box as the checklist in the editor.View
Content switcherText only, no icons.View
File uploaderA zone to drag a file into, or to choose one.View
Input fieldField with all states.View
Input groupA field with text or a button fixed to its side. The text or button belongs to the value.View
LinkText that goes somewhere or does something, and the arrow link above a page.View
List itemA choice in a list: slash menu, mentions, move, items, search results, blocks and icons.View
MenuRows with icon, divider and danger.View
ModalA window on top of the document for one task or one piece of information.View
NotificationSuccess, error and info.View
Progress barThin bar at the top while something loads.View
RadioOne choice out of a few. Use radios when people should see all choices at once.View
SearchSearch field with all states. Only the field: the results belong to the Search pattern.View
SelectSelect field with all states.View
SkeletonGray bars while a page loads.View
SpinnerA turning circle for a short wait.View
Structured listRows for settings, the log, the trash and the history of a document.View
TabsSwitch between views of the same page.View
TagA small label that shows while you drag a block.View
TextareaField for text over several lines.View
ToggleA switch with a knob that turns one setting on or off.View
TooltipA short text next to an element, on hover and focus.View
Tree viewBranch and leaf nodes in a tree, with arrow, icon and more button.View

Breadcrumb

The path to the current document, in the top bar. It only shows from the second level, without icons.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Path

text --fs-body 16px, space between items --sp-2 8px, separator /

FillText
Parentnone--gray-70 #5E5E5C--gray-50 #A8A8A6
Parent hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE
Current documentnone--gray-80 #3A3A3A--gray-40 #D0D0CE
Separatornone--gray-50 #A8A8A6--gray-70 #5E5E5C

Textarea

Field for text over several lines. The user can make it taller.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Field

width 100%, at least --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-60 #838381
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-10 #F7F7F5--gray-100 #202020--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2B

Progress bar

Thin bar at the top of the screen while something loads. It only shows when loading takes longer than 0.2 seconds.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Bar

--bw-2 2px high, full width, at the top of the window

Fill
Hiddennone
Loading--accent

Spinner

A turning circle for a short wait, for example while a cover uploads.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Circle

--btn-s wide and high, line --bw-2 2px, one turn every --dur-4

LineTop
Turning--gray-60 #838381--gray-0 #FFFFFF

Skeleton

Gray bars with a light streak that stand in for text while a page loads. Hidden for screen readers.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Line

--sp-4 16px high, radius --r 6px, streak every --dur-5

Fill
Loading--bg3 with a light streak --hover

Tabs

Switch between views of the same page. One tab is active. The arrow keys, Home and End move between tabs.

Anatomy

1Active tabBold, with a line under it.
2TabThe arrow keys, Home and End move between tabs.
3PanelShows the content of the active tab.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Tab

--btn-l 44px high, text --fs-body 16px, space inside --sp-5 24px to the sides, line under the active tab --bw-2 2px

TextLine under
Default--mutednone
Hover--textnone
Active--text--accent
Focus--mutednone
Inactive--off-fgnone

Tooltip

A short text next to an element, on hover and on keyboard focus. Not on a touch screen. Esc closes it. Never put an action or a link in it.

Anatomy

1TextShort. One line. No action or link.
2ArrowAttached to the text. Points at the element it explains.
3TriggerShows on hover and on keyboard focus.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Bubble

at most --sz-4 220px wide, text --fs-small, space inside --sp-1 4px and --sp-2 8px, radius --r 6px, 8px from the element, shows after 400ms

FillText
Shown--text--bg

File uploader

A zone to drag a file into, or to choose one with a button. It shows busy, done and error.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Zone

full width, space inside --sp-6 32px and --sp-5 24px, radius --r 6px, line --bw-1 1px

FillBorderIcon
Default--bg2--line-strong dashed--muted
Drag over--accent-soft--accent dashed--muted
Busy--bg2--line-strong solidspinner
Done--bg2--line-strong solid--accent
Error--bg2--danger--danger

Patterns

Reusable solutions for common screens, built from components.

All patterns

NameDescriptionLink
CarouselA row of images or GIFs to scroll through.View
Empty statesWhat you see when there is nothing yet.View
FormsLabel, field, message and main button at the bottom. A field is at most --sz-7 380px wide.View
LoadingWhat the app shows while it loads.View
LoginLogo, title, explanation, fields and main button.View
SettingsBuilt from rows, select fields and buttons.View
StatesWhat a screen or control looks like when it is empty, loading, inactive, locked or broken. The same state looks the same everywhere.View

Apps

What only one app needs. Every app is built from the same tokens, colors, atoms and components.

Astrel

NameDescriptionLink
Editor blocksHeadings, lists, quote, card, columns, table, file and table of contents.View
FindSearch field and buttons to step through results.View
Kanban boardColumns with cards to move around.View
LogoThe Astrel planet: where it is used, how large it is and what color it has.View
New pageAdd cover and icon, title, toolbar and empty editor.View
Sticky noteA colored note inside a page, with buttons to duplicate and delete it.View
Text toolbarText styles at the selection, in a panel and above the keyboard.View
TrashRow with two small buttons.View
SidebarSearch, pages, Trash and Settings. On iPhone it slides in as a drawer.View
DialogsWindows for a task: history, export, move and choose an icon.View
Global headerThe top bar on desktop and on iPhone.View
SearchResults and empty state.View
Page layoutA sidebar and one column of text. Where the edges are and how wide the text gets.View

Tag

A small label that shows while you drag a block.

Sizes and states

Per component: what changes per state. Bold differs from Default.

Tag

FillTextBorder
Chip above the block--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919none
On the dragged copy--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919none

List item

A choice in a list: slash menu, mentions, move, items, search results, blocks and icons.

Sizes and states

Per component: what changes per state. Bold differs from Default.

Slash item

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Mention item

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Move item

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Document link

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Search result

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Block item

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Selected--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8

Icon cell

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Selected--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-50 #5996F8nonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Structured list

Rows for settings, the log, the trash and the history of a document.

Sizes and states

Per component: what changes per state. Bold differs from Default.

Setting row

FillTextBorder
With text and buttonnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Title and buttonnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Lognone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Link row

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Item row

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Version row

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
With previewnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Button

Text buttons, icon buttons and options with icon and text, with all states.

Do and don’t

Text button

A button names the action and never has an icon. Variants: primary, secondary, tertiary, ghost and danger. Sizes: large (L, --btn-l), medium (M, --btn-m) and small (S, --btn-s). States: default, hover, focus, pressed, inactive.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Primary

--btn-w 104px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutlineEffect
Default--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonenone
Hover--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonebrightness(1.06)
Focus--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8none
Pressed--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonenone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnonenone

Secondary (default)

width to content, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Tertiary

--btn-w 104px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Hover--blue-30 #B6D1FC--blue-90 #113369--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Focus--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnone--blue-70 #0D59D3--blue-50 #5996F8
Pressed--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Ghost

--btn-w 104px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Danger

--btn-w 104px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--red-70 #D3170D--red-50 #F86159nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159nonenone
Focusnone--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Hover and focus--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Large (L)

--btn-w 104px wide, --btn-l 44px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Medium (M)

--btn-w 104px wide, --btn-m 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Small (S)

width to content, --btn-s 28px high, text --fs-small 14px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
iPhone

Primary

--btn-w 104px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutlineEffect
Default--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonenone
Hover--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonebrightness(1.06)
Focus--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8none
Pressed--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919--blue-70 #0D59D3--blue-50 #5996F8nonenone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnonenone

Secondary (default)

width to content, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Tertiary

--btn-w 104px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Hover--blue-30 #B6D1FC--blue-90 #113369--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Focus--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnone--blue-70 #0D59D3--blue-50 #5996F8
Pressed--blue-20 #D8E6FD--blue-100 #0F213D--blue-70 #0D59D3--blue-30 #B6D1FCnonenone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Ghost

--btn-w 104px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Danger

--btn-w 104px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--red-70 #D3170D--red-50 #F86159nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159nonenone
Focusnone--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Hover and focus--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Large (L)

--btn-w 104px wide, --btn-l 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Medium (M)

--btn-w 104px wide, --btn-m 36px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Small (S)

width to content, --btn-s 28px high, text --fs-small 14px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2Bnone

Icon button

Only an icon, always with title and label. Square at the height of a button.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Icon button (default)

36px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Block button

24px wide, 24px high, text --fs-small 14px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Toolbar button

34px wide, 34px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Back

36px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Close

36px wide, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone
iPhone

Icon button (default)

44px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Block button

24px wide, 24px high, text --fs-small 14px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Toolbar button

34px wide, 34px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Back

44px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Close

44px wide, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Options with icon and text

A list of actions where every item has an icon.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Chip

width to content, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnonenone
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-0 #FFFFFFnonenone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnone--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnonenone
Inactive--gray-0 #FFFFFF--gray-110 #191919--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Object bar

width to content, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone
iPhone

Chip

width to content, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnonenone
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-0 #FFFFFFnonenone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnone--blue-70 #0D59D3--blue-50 #5996F8
Pressed--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnonenone
Inactive--gray-0 #FFFFFF--gray-110 #191919--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Object bar

width to content, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Pressednone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Buttons in the app

The smaller buttons for the editor, the sidebar and the find bar.

Sizes and states

Per component: what changes per state. Bold differs from Default.

Cover button

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnonenone
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-0 #FFFFFFnonenone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-0 #FFFFFFnone--blue-70 #0D59D3--blue-50 #5996F8

Image add button

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Image control

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Carousel dot

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8
Currentrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone

Object bar button

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Table button

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Table edge button

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Table menu button

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Sidebar bottom button

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8

Fold button

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8

App name

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hovernone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

New document button

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8

Find button

FillTextBorderOutline
Defaultrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Hoverrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFFnone
Focusrgb(107, 107, 107)--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-0 #FFFFFF--blue-70 #0D59D3--blue-50 #5996F8

Lightbox close

FillTextBorderOutline
Default--gray-20 #EFEFED--gray-90 #2B2B2B--gray-0 #FFFFFFnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-0 #FFFFFFnonenone
Focus--gray-20 #EFEFED--gray-90 #2B2B2B--gray-0 #FFFFFFnone--blue-70 #0D59D3--blue-50 #5996F8

Color swatch

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--red-70 #D3170D--red-50 #F86159--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-0 #FFFFFF--gray-110 #191919--red-70 #D3170D--red-50 #F86159--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--red-70 #D3170D--red-50 #F86159--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8

Format button

FillTextBorderOutline
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Hover--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Focus--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B--blue-70 #0D59D3--blue-50 #5996F8

Document icon button

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8

Checkbox

Box with a check. The same box as the checklist in the editor.

Sizes and states

The size and what changes per state. Bold differs from Default. The box has the same size on desktop and iPhone.

Desktop

Checkbox

--ic-2 20px wide and high, border --bw-1 1px, radius --r 6px, check --ic-1 16px

FillBorder
Defaultnone--gray-60 #838381
Hovernone--blue-70 #0D59D3--blue-50 #5996F8
Focusnone--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2px
Checked--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2B
Read-onlynone--gray-40 #D0D0CE--gray-80 #3A3A3A
Read-only, checkednone--gray-40 #D0D0CE--gray-80 #3A3A3A
iPhone

Checkbox

--ic-2 20px wide and high, border --bw-1 1px, radius --r 6px, check --ic-1 16px

FillBorder
Defaultnone--gray-60 #838381
Hovernone--blue-70 #0D59D3--blue-50 #5996F8
Focusnone--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2px
Checked--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2B
Read-onlynone--gray-40 #D0D0CE--gray-80 #3A3A3A
Read-only, checkednone--gray-40 #D0D0CE--gray-80 #3A3A3A

Content switcher

Text only, no icons.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Not selected

width to content, 38px high, text --fs-body 16px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Pressed--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Selected

width to content, 38px high, text --fs-body 16px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Pressed--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
iPhone

Not selected

width to content, 46px high, text --fs-body 17px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Pressed--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Selected

width to content, 46px high, text --fs-body 17px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Pressed--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Menu

Rows with icon, divider and danger.

Anatomy

1IconSame box size on every row.
2LabelWhat the row does.
3DividerSeparates a different kind of row.
4DangerRed icon and text. Last, below a divider.

Menu item

Sizes and states

Per component: what changes per state. Bold differs from Default.

Menu item

FillTextBorderOutline
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Hover and focus--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Danger

FillTextBorderOutline
Defaultnone--red-70 #D3170D--red-50 #F86159nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159nonenone
Focusnone--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Hover and focus--gray-20 #EFEFED--gray-90 #2B2B2B--red-70 #D3170D--red-50 #F86159none--blue-70 #0D59D3--blue-50 #5996F8
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Slash menu

Modal

A window on top of the document for one task or one piece of information. An overlay covers the document behind the window.

Anatomy

1TitleSays what the window is for.
2Body copyExplains the choice. Every window has it.
3ButtonsCancel left, main action right.
4CloseCloses without an action.

Passive

Shows information. No main action, only a close button.

Transactional

Needs an action to finish. Cancel and a main action.

Danger

Transactional with a red main button, for actions that delete or cannot be undone.

Sizes

NormalDefaultFor short text and one field.
WideWideFor lists and long content. The body scrolls, the header and footer stay.

Measures

Space inside the window. Blue is the space between parts.

Sides, top, bottom32pxsp-6
Title to text16pxsp-4
Text to main button24pxsp-5
Between buttons12pxsp-3

Do and don’t

Behavior

ContentTitle and textEvery window has a title and body copy. The text comes first, then the field or list.
CloseHowWith the close button, with Esc, or with a click outside the window. Focus stays inside the window and goes back to where it was when the window closes.
EnterIn a fieldRuns the main action.

Lightbox

Sizes and states

Per component: what changes per state. Bold differs from Default.

Lightbox

FillTextBorder
Default--gray-0 #FFFFFF--gray-110 #191919--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Notification

Toasts that go away by themselves, and inline notifications that stay in the document. Success, error, warning and info. See also Notifications.

Toast anatomy

1ColorShows the kind: green success, red error, blue info.
2MessageOne short sentence.
3ButtonOptional. For an action you can undo. The toast stays eight seconds.

Inline notification anatomy

1IconA different shape per kind, so color is not the only sign.
2Bold startNames the problem in a few words.
3MessageSays what to do.
4ButtonOptional. One main action.

Inline notification

Sizes and states

Per component: what changes per state. Bold differs from Default.

Inline notification

FillTextBorder
Error--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--red-70 #D3170D--red-50 #F86159
Warning--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--orange-70 #D3630D--orange-50 #F89E59
Success--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--green-70 #158449--green-50 #31D87F
Info--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8

Select

Select field with all states.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Select field

width to content, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorderOutline
Default--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focus--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone
iPhone

Select field

width to content, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorderOutline
Default--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Hover--gray-20 #EFEFED--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CEnonenone
Focus--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5Cnonenone

Input field

Field with all states.

Anatomy

1LabelAlways there. A placeholder is not a label.
2FieldOne line, the same height as a button.
3Helper textSays what to type, or what went wrong.

Validation

Label, field and a message under it. The message has an icon and words, so it does not depend on color. The field gets a colored border too.

Rules

WhenAfter leaving the fieldCheck a field when the person leaves it, not on every key. Show the error until it is fixed.
WordsWhat to doSay what to do: Use at least 10 characters. Not Invalid input.
ValidOnly when it helpsShow a valid state only when the check is not obvious, such as a free name.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Desktop

Field

width to content, --btn-h 36px high, text --fs-body 16px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-60 #838381
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-10 #F7F7F5--gray-100 #202020--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2B
Invalid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--red-70 #D3170D--red-50 #F86159
Warning--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--orange-70 #D3630D--orange-50 #F89E59
Valid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--green-70 #158449--green-50 #31D87F
Read-onlynone--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Password field

width to content, --btn-h 36px high, the button --btn-h 36px wide

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hovernone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Inactivenone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Show password button

icon --ic-1

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hovernone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Helper text

text --fs-small 14px, space above --sp-2 8px

FillTextBorder
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6none
Errornone--red-70 #D3170D--red-50 #F86159none
iPhone

Field

width to content, --btn-h 44px high, text --fs-body 17px, radius --r 6px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-60 #838381
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-10 #F7F7F5--gray-100 #202020--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2B
Invalid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--red-70 #D3170D--red-50 #F86159
Warning--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--orange-70 #D3630D--orange-50 #F89E59
Valid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--green-70 #158449--green-50 #31D87F
Read-onlynone--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B

Password field

width to content, --btn-h 44px high, the button --btn-h 44px wide

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hovernone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Inactivenone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Show password button

icon --ic-1

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hovernone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Focusnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Helper text

text --fs-small 14px, space above --sp-2 8px

FillTextBorder
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6none
Errornone--red-70 #D3170D--red-50 #F86159none

Radio

One choice out of a few. Use radios when people should see all choices at once.

Rules

Choices2 to 5Use a radio group for 2 to 5 choices. For more choices use a Select. For a yes or no setting use a Toggle; for several choices at once use a Checkbox.
DefaultOne is chosenChoose the most likely option in advance. A group never starts empty, unless the person has to decide.
LegendA questionEvery group has a short legend that says what the choice is about. Each choice has words next to it.
KeyboardArrow keysTab goes into the group. The arrow keys move the choice. Space chooses.

Sizes and states

The size and what changes per state. Bold differs from Default. The size is the same on desktop and iPhone.

Desktop

Radio

--ic-2 20px wide and high, border --bw-2 2px, round. The dot is half of the inside.

FillBorderDot
Defaultnone--gray-60 #838381none
Hovernone--blue-70 #0D59D3--blue-50 #5996F8none
Focusnone--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2pxnone
Selectednone--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive, selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C
Read-onlynone--gray-40 #D0D0CE--gray-80 #3A3A3Anone
Read-only, selectednone--gray-40 #D0D0CE--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CE

Radio group

legend --fw-bold, between the choices --sp-3 12px, between the box and the words --sp-3 12px

Text
Legend--gray-80 #3A3A3A--gray-40 #D0D0CE
Choice--gray-80 #3A3A3A--gray-40 #D0D0CE
Choice, inactive--gray-50 #A8A8A6--gray-70 #5E5E5C
iPhone

Radio

--ic-2 20px wide and high, border --bw-2 2px, round. The dot is half of the inside.

FillBorderDot
Defaultnone--gray-60 #838381none
Hovernone--blue-70 #0D59D3--blue-50 #5996F8none
Focusnone--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2pxnone
Selectednone--blue-70 #0D59D3--blue-50 #5996F8--blue-70 #0D59D3--blue-50 #5996F8
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2Bnone
Inactive, selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-30 #E0E0DE--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C
Read-onlynone--gray-40 #D0D0CE--gray-80 #3A3A3Anone
Read-only, selectednone--gray-40 #D0D0CE--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CE

Radio group

legend --fw-bold, between the choices --sp-3 12px, between the box and the words --sp-3 12px

Text
Legend--gray-80 #3A3A3A--gray-40 #D0D0CE
Choice--gray-80 #3A3A3A--gray-40 #D0D0CE
Choice, inactive--gray-50 #A8A8A6--gray-70 #5E5E5C

Badge

A small number or dot on the corner of an icon. It says that something is new or waits for you.

Rules

CountUp to 99+Show the real number up to 99. Above that show 99+. Never show 0: no badge means nothing is waiting.
DotNewA dot says that something is new, without a number. Give it a name for screen readers.
ColorBlue or redBlue is the default. Red (--danger) is only for things that need action now.
Screen readersSay the numberThe number is part of the button name, for example Notifications, 3. A badge never replaces the name.
OnePer controlPut at most one badge on a control. A badge that shows a state (saved, failed) is a Status, not a badge.

Sizes and states

The size and what changes per state. Bold differs from Default. The size is the same on desktop and iPhone.

Desktop

Badge

at least --ic-1 16px high and wide, padding --sp-1 4px, round, text --fsc-xs bold. On an icon: top right, with a ring of the document color --bw-2 2px

FillText
Count--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919
Danger--red-70 #D3170D--red-50 #F86159--gray-0 #FFFFFF--gray-110 #191919

Dot

--sp-2 8px wide and high, round

Fill
Default--blue-70 #0D59D3--blue-50 #5996F8
Danger--red-70 #D3170D--red-50 #F86159
iPhone

Badge

at least --ic-1 16px high and wide, padding --sp-1 4px, round, text --fsc-xs bold. On an icon: top right, with a ring of the document color --bw-2 2px

FillText
Count--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919
Danger--red-70 #D3170D--red-50 #F86159--gray-0 #FFFFFF--gray-110 #191919

Dot

--sp-2 8px wide and high, round

Fill
Default--blue-70 #0D59D3--blue-50 #5996F8
Danger--red-70 #D3170D--red-50 #F86159

Accordion

Headings that open and close their content. People read only what they need.

Rules

HeadingOne lineKeep the heading short and clear. The heading says what is inside.
ClickWhole headingThe whole heading is a button, not only the chevron. It is at least --btn-l 44px high.
KeyboardEnter and SpaceTab moves between headings. Enter or Space opens and closes. Screen readers hear if a section is open.
OpenAny numberAny number of sections can be open. Make an accordion open one at a time only when the sections are long.
Not forMust-read textDo not hide what people must read. Hidden text is easy to miss. See Disclosures.

Sizes and states

The size and what changes per state. Bold differs from Default. The size is the same on desktop and iPhone.

Desktop

Heading

at least --btn-l 44px high, padding --sp-2 8px and --sp-3 12px, chevron --ic-1 16px turns 90 degrees in --dur-1

FillTextChevron
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focusnone + outline --blue-70 #0D59D3 2px insidenone + outline --blue-50 #5996F8 2px inside--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-70 #5E5E5C--gray-50 #A8A8A6

Content

left aligned with the heading text, padding --sp-4 16px at the bottom. A line --bw-1 1px --gray-90 between the headings

Text
Default--gray-80 #3A3A3A--gray-40 #D0D0CE
iPhone

Heading

at least --btn-l 44px high, padding --sp-2 8px and --sp-3 12px, chevron --ic-1 16px turns 90 degrees in --dur-1

FillTextChevron
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focusnone + outline --blue-70 #0D59D3 2px insidenone + outline --blue-50 #5996F8 2px inside--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Inactivenone--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-70 #5E5E5C--gray-50 #A8A8A6

Content

left aligned with the heading text, padding --sp-4 16px at the bottom. A line --bw-1 1px --gray-90 between the headings

Text
Default--gray-80 #3A3A3A--gray-40 #D0D0CE

Input group

A field with text or a button fixed to its side. The text or button belongs to the value.

Rules

TextBefore or afterShort text that completes the value: https://, @, minutes, kg. Not a label: the label stays above the field.
ButtonCopyA button after a read-only value, such as Copy link. The button has a name for screen readers and a tooltip.
One borderOne focusThe group has one border. When the field has focus, the whole group gets the focus ring.

Sizes and states

The size and what changes per state. Bold differs from Default. The size is the same on desktop and iPhone.

Desktop

Input group

as high as a field, text --fs-body, radius --r 6px, text or button padding --sp-3 12px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-60 #838381
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8
Invalid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--red-70 #D3170D--red-50 #F86159
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2B

Text or button part

FillTextBorder
Text--gray-20 #EFEFED--gray-90 #2B2B2B--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-60 #838381 one line to the field
Buttonnone--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-60 #838381 one line to the field
iPhone

Input group

as high as a field, text --fs-body, radius --r 6px, text or button padding --sp-3 12px

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-60 #838381
Hover--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--blue-70 #0D59D3--blue-50 #5996F8
Invalid--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--red-70 #D3170D--red-50 #F86159
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C--gray-30 #E0E0DE--gray-90 #2B2B2B

Text or button part

FillTextBorder
Text--gray-20 #EFEFED--gray-90 #2B2B2B--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-60 #838381 one line to the field
Buttonnone--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-60 #838381 one line to the field

Status indicators

A status shows the state of one thing: saved or not, working or broken. Icon, words and color always go together.

Kinds and colors

Each kind has its own icon shape. That is how the kind is clear without color.

KindIconColorUse for
Success circle-check--success #158449--success #31D87FSomething worked or is done.
Error circle-xmark--danger #D3170D--danger #F86159Something failed and needs action.
Warning triangle-exclamation--warning #D3630D--warning #F89E59Something may go wrong. Look at it soon.
Info circle-info--info #0D59D3--info #5996F8Good to know. No action needed.
Pending clock--muted #5E5E5C--muted #A8A8A6Something is busy or waiting.
Neutral circle--muted #5E5E5C--muted #A8A8A6Not started, a draft or not known.

Rules

Not color aloneIcon and wordsEvery status has an icon with its own shape and a short text. People who cannot see color still get the meaning.
WordsSay what is trueSay what is the case, not what the system does: Saved, Saving failed. Not Operation completed.
ColorIcon onlyOnly the icon has the color. The words keep the normal text color. Warning is orange: yellow is too light on white.
Contrast3 to 1An icon needs at least 3 to 1 against its background. Light and dark theme each use their own step, see Color.
FewAt most 6Show at most 5 or 6 statuses on one screen. With many statuses none of them stands out. Show a status only when it helps someone decide.
Next to itClose to the thingPut the status next to the item it is about. A message about the whole document is a Notification. A number of new things is a Badge.

Sizes and states

The size and the colors per kind. Bold differs from Success.

Desktop

Status

icon --ic-1 16px, text --fs-body, between icon and text --sp-2 8px

IconText
Success--green-70 #158449--green-50 #31D87F--gray-80 #3A3A3A--gray-40 #D0D0CE
Error--red-70 #D3170D--red-50 #F86159--gray-80 #3A3A3A--gray-40 #D0D0CE
Warning--orange-70 #D3630D--orange-50 #F89E59--gray-80 #3A3A3A--gray-40 #D0D0CE
Info--blue-70 #0D59D3--blue-50 #5996F8--gray-80 #3A3A3A--gray-40 #D0D0CE
Pending--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-80 #3A3A3A--gray-40 #D0D0CE
Neutral--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-80 #3A3A3A--gray-40 #D0D0CE
iPhone

Status

icon --ic-1 16px, text --fs-body, between icon and text --sp-2 8px

IconText
Success--green-70 #158449--green-50 #31D87F--gray-80 #3A3A3A--gray-40 #D0D0CE
Error--red-70 #D3170D--red-50 #F86159--gray-80 #3A3A3A--gray-40 #D0D0CE
Warning--orange-70 #D3630D--orange-50 #F89E59--gray-80 #3A3A3A--gray-40 #D0D0CE
Info--blue-70 #0D59D3--blue-50 #5996F8--gray-80 #3A3A3A--gray-40 #D0D0CE
Pending--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-80 #3A3A3A--gray-40 #D0D0CE
Neutral--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-80 #3A3A3A--gray-40 #D0D0CE

Overflow content

What happens when text is longer than the space it has.

Rules

CutAt the endNames and titles in the sidebar, lists, tags and tiles are cut on one line, at the end, with ... Never in the middle.
TooltipFull textThe full text shows in a Tooltip after 0.4 seconds of hover, and on keyboard focus. Only when the text is really cut.
FocusTabCut text that is not a link or a button can take focus (tabindex 0), so keyboard users see the tooltip too.
Two linesDescriptionsLonger text in a card or tile shows at most 2 lines.
WrapNever cutPage titles, headings, messages, helper text and table cells wrap onto the next line. Button text that does not fit is too long: make it shorter.
TouchNo tooltipA touch screen has no hover. There the full text must be somewhere you can open, for example the document itself.

Common actions

The actions people use most. Each one has one icon and one word, everywhere.

Actions

ActionIconWordWhere
Add plusAdd …, New documentSidebar, blocks, cover
Delete trash-canDeleteDocument menu, blocks, rows, columns, tables, cover. Red.
Duplicate cloneDuplicateDocument menu, block menu
Move arrow-upUp, DownDocument menu, block menu
Change icon iconsChange iconDocument menu
History clock-rotate-leftHistoryDocument menu
Export file-exportExportDocument menu. Saves a file.
Find magnifying-glassFindDocument menu
Lock lockLock nowDocument menu
Remove lock lock-openRemove passwordLock menu
Password keySet password, Change passwordLock menu
More ellipsisMore optionsTop bar. Opens the document menu.
Close xmarkCloseWindows, sidebar
Back chevron-leftBackSettings, top bar
Settings gearSettingsSidebar

Rules

One pairIcon and wordAn action always has the same icon and the same word. Never two icons for one action, or one icon for two actions.
Verb firstDelete documentSay the action first. See Content.
DangerLast and redDelete is the last item in a menu, after a line, in red (--danger), with the trash-can icon.
OrderMake, change, removeItems in a menu go from adding to changing, copying and moving, and last removing.
Icon onlyName and tooltipA button with only an icon has a name for screen readers and a Tooltip with the same word.

Read-only states

A value that people can read and copy but not change. This is not the same as inactive.

Read-only or inactive

Read-onlyInactive
LooksNormal text, no fill, a quiet borderGray text and fill (--off-fg, --off-bg)
FocusYes, with the normal focus ringNo. Tab skips it.
Copy the textYesNo
Screen readerSays: read onlySays: unavailable
Use whenPeople may look but not change: a shared link, a value from the systemThe action is not possible now, but may be later

Rules

No hoverNothing changesA read-only control does not react to hover or click. Only the focus ring shows.
Say whyHelper textWhen it is not clear why a value cannot change, say it in helper text.
CopyButtonA read-only value that people copy, such as a link, gets a copy button, see Input group.
Not lockedDifferentA locked document shows no content at all. See Locked.

Notifications

Tell people what happened, in the right place and in the right size.

KindUse whenStaysExample
ToastThe result of something the person did3 seconds, 6 for an error. A toast with progress stays until it is done.Uploading: photo.png...
Inline notificationA message about this document or this part of a document, maybe with buttonsUntil the person fixes itChanged on another device
Helper textOne fieldWhile the field has the problemUse at least 10 characters.
ModalA decision is needed before going onUntil answeredDelete this document?
StatusThe state of one itemWhile it is trueSaved

Rules

WordsWhat and nextSay what happened and what to do. Saving failed, trying again. Not Error 500.
Not color aloneIcon tooEvery kind has its own icon: success, error, warning and info look different without color.
Action neededNot a toastA toast disappears. When the person must do something, use an inline notification that stays.
OnceOne placeShow a message in one place, not as a toast and inline at the same time.
Screen readersAnnouncedToasts are announced politely. An error that blocks the person uses role alert.

Disclosures

Content that opens and closes. The heading stays, the content shows or hides.

Kinds

KindUse forWhere
AccordionA few sections of text that people may skipNot used in the app yet
Tree viewDocuments inside documentsSidebar
GroupNavigation groupsThe menu of this Design System

Rules

ChevronRight, then downClosed shows a chevron to the right. Open turns it 90 degrees down in --dur-1. With reduced motion it does not move.
ClickWhole headingThe whole heading row opens and closes, not only the chevron.
KeyboardEnter and SpaceTab moves between headings. Enter or Space opens and closes. Screen readers hear if it is open.
Not forMust-read textDo not hide what people must read. Hidden text is easy to miss.

Toggle

A switch with a knob that turns one setting on or off. The change works at once, without a save button.

Sizes and states

The size and what changes per state. Bold differs from Default. The toggle has the same size on desktop and iPhone.

Desktop

Toggle

--sp-7 40px wide, --ic-3 24px high, round. Knob --ic-2 20px, slides --dur-1 from left to right.

TrackKnob
Off (default)--gray-60 #838381--gray-0 #FFFFFF--gray-110 #191919
Hover--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-0 #FFFFFF--gray-110 #191919
Focus--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2px--gray-0 #FFFFFF--gray-110 #191919
On--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919
On, hover--blue-70 #0D59D3 + ring --blue-20 2px--blue-50 #5996F8 + ring --blue-100 2px--gray-0 #FFFFFF--gray-110 #191919
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C
Read-only--gray-40 #D0D0CE--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CE
Read-only, on--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-0 #FFFFFF--gray-110 #191919
iPhone

Toggle

--sp-7 40px wide, --ic-3 24px high, round. Knob --ic-2 20px, slides --dur-1 from left to right.

TrackKnob
Off (default)--gray-60 #838381--gray-0 #FFFFFF--gray-110 #191919
Hover--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-0 #FFFFFF--gray-110 #191919
Focus--gray-60 #838381 + outline --blue-70 2px--gray-60 #838381 + outline --blue-50 2px--gray-0 #FFFFFF--gray-110 #191919
On--blue-70 #0D59D3--blue-50 #5996F8--gray-0 #FFFFFF--gray-110 #191919
On, hover--blue-70 #0D59D3 + ring --blue-20 2px--blue-50 #5996F8 + ring --blue-100 2px--gray-0 #FFFFFF--gray-110 #191919
Inactive--gray-20 #EFEFED--gray-90 #2B2B2B--gray-50 #A8A8A6--gray-70 #5E5E5C
Read-only--gray-40 #D0D0CE--gray-80 #3A3A3A--gray-80 #3A3A3A--gray-40 #D0D0CE
Read-only, on--gray-70 #5E5E5C--gray-50 #A8A8A6--gray-0 #FFFFFF--gray-110 #191919

Tree view

Branch and leaf nodes in a tree, with arrow, icon and more button.

Tree nodes

Sizes and states

Per component: what changes per state. Bold differs from Default.

Leaf node

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Branch node, closed

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Branch node, open

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Favorite

FillTextBorder
Defaultnone--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone
Selected--gray-20 #EFEFED--gray-90 #2B2B2B--gray-80 #3A3A3A--gray-40 #D0D0CEnone

Link row

A row with icon and text, without arrow.

Sizes and states

Per component: what changes per state. Bold differs from Default.

Sidebar row

FillTextBorderOutline
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Hover--gray-20 #EFEFED--gray-90 #2B2B2B--gray-70 #5E5E5C--gray-50 #A8A8A6nonenone
Focusnone--gray-70 #5E5E5C--gray-50 #A8A8A6none--blue-70 #0D59D3--blue-50 #5996F8

Kanban board

Columns with cards to move around.

Dialogs

Windows for a task: history, export, move and choose an icon.

History

Empty state in a wide window.

Export

List of options and explanation.

Move

List of pages.

Choose icon

Search field and grid.

Editor blocks

Headings, lists, quote, card, columns, table, file and table of contents.

Empty states

What you see when there is nothing yet.

Overview

1
2Welcome to Acme
3Create your first document to get started.
4
New document

Parts

1LogoCentred, 32px above the title.
2TitleNames the screen.
3ExplanationOne line, 16px under the title.
4Main button24px under the text. Always one.

Components

LogoButton

Welcome (no document yet)

Logo, title, text and main button, centred. --sp-4 between title and text, --sp-6 between logo and title, --sp-5 between text and button.

Trash empty

What you see when the trash is empty.

Empty lists

Sizes and states

Per component: what changes per state. Bold differs from Default.

Empty search

FillTextBorder
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6none

Empty suggestions

FillTextBorder
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6none

Empty history

FillTextBorder
Defaultnone--gray-70 #5E5E5C--gray-50 #A8A8A6none

Find

Search field and buttons to step through results.

Forms

Label, field, message and main button at the bottom. A field is at most --sz-7 380px wide.

Example

Measures

A field is at most 380px wide. Blue is the space between parts.

Field widthmax 380pxsz-7
Label to field8pxsp-2
Field to help text8pxsp-2
Last element to main button24pxsp-5

Do and don’t

Global header

The top bar on desktop and on iPhone.

Top bar

Menu, back and forward, breadcrumbs, favorite, more and save.

Top bar iPhone

The top bar on iPhone with menu, breadcrumbs, favorite and more.

Loading

What the app shows while it loads.

Login

Logo, title, explanation, fields and main button.

Overview

1
2Set up Acme
3Choose a password. This password encrypts everything on your device.
4
Password (at least 10 characters)
Password again
5
Set up

Parts

1LogoCentred, above the title.
2TitleSays what the screen is for.
3ExplanationSays what the person must do.
4FieldsAt most 380px wide, 16px apart.
5Main buttonAs wide as the fields, 24px below the last one.

Components

LogoText inputButtonNotification

Measurements

380px max
Set up Acme
Email
16
Password
24
Log in
Fields are at most 380px wide, 24px above the main button

Login screen with logo

Locked

Logo, title, field and main button, centred with --sp-4 between, and --sp-5 above the main button. Same structure as Welcome and Set up.

New page

Add cover and icon, title, toolbar and empty editor.

Search

Results and empty state.

Settings

Built from rows, select fields and buttons.

Overview

1Settings
These settings apply to this device.
2Appearance
3Theme
Dark
4Password
Backup
5Export Markdown
Export

Parts

1Page titleOne per screen, with one line of explanation under it.
2Section headingGroups rows. A line below.
3Row with select fieldBold label left, select field right.
4Row with arrowOpens another screen.
5Row with buttonFor an action, not a setting.

Components

SelectButton

None

Heading, rows with select field, rows with arrow and buttons in a row.

Devices

Row with a button.

Log

Download at the top, then rows.

Sidebar

Search, pages, Trash and Settings. On iPhone it slides in as a drawer.

None

Search, pages, Trash and Settings.

Sidebar as drawer

On iPhone the sidebar slides in from the left.

States

What a screen or control looks like when it is empty, loading, inactive, locked or broken. The same state looks the same everywhere.

Empty

An icon, then a short text that says what happens next. No button. Examples: Trash empty, Search without result and History.

Space--sp-4 16pxBetween the icon and the text.

Loading

Grey lines in the shape of the content, never a spinner in the document. The lines pulse slowly. With reduced motion they stand still.

Inactive

Fill --off-bg and text --off-fg. No hover and no focus. The cursor is the default arrow.

Read-only

The value can be read, selected and copied, but not changed. It keeps the normal text color. See Read-only states.

Locked

A locked document shows no content, only the lock screen. See Locked.

Error

Red text under the field in --danger, with words that say what to do. Not color alone. Errors that are not about one field appear as a toast, see Toasts.

Examples

Sticky note

A colored note inside a page, with buttons to duplicate and delete it.

Sizes and states

Per component: the size and what changes per state. Bold differs from Default.

Plain

width of the document or free (floating), padding --sp-4, radius --r. Notes have dark text (--gray-90) in both themes

FillTextBorder
Default--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-30 #E0E0DE--gray-90 #2B2B2B
Focus--gray-10 #F7F7F5--gray-100 #202020--gray-80 #3A3A3A--gray-40 #D0D0CE--gray-70 #5E5E5C--gray-50 #A8A8A6

Note yellow

FillTextBorder
Default--yellow-30 #FCEDB6--gray-90 #2B2B2B--gray-30 #E0E0DE
Focus--yellow-30 #FCEDB6--gray-90 #2B2B2B--gray-30 #E0E0DE

Note pink

FillTextBorder
Default--red-30 #FCB9B6--gray-90 #2B2B2B--gray-30 #E0E0DE
Focus--red-30 #FCB9B6--gray-90 #2B2B2B--gray-30 #E0E0DE

Note green

FillTextBorder
Default--green-30 #A9EFCA--gray-90 #2B2B2B--gray-30 #E0E0DE
Focus--green-30 #A9EFCA--gray-90 #2B2B2B--gray-30 #E0E0DE

Note blue

FillTextBorder
Default--blue-30 #B6D1FC--gray-90 #2B2B2B--gray-30 #E0E0DE
Focus--blue-30 #B6D1FC--gray-90 #2B2B2B--gray-30 #E0E0DE

Text toolbar

Text styles at the selection, in a panel and above the keyboard.

Format bar at selection

Floating bar with text styles above selected text.

Format panel

Text style, block and color.

Toolbar above the keyboard

Six equal buttons and close.

Trash

Row with two small buttons.

Color

Every color runs from 0 (lightest) to 100 (darkest). Gray also has step 110, the background in dark. Every color is solid. The small number under a color is how often the app uses it.

Gray

0
#FFFFFF
73x
10
#F7F7F5
23x
20
#EFEFED
93x
30
#E0E0DE
86x
40
#D0D0CE
98x
50
#A8A8A6
143x
60
#838381
15x
70
#5E5E5C
137x
80
#3A3A3A
101x
90
#2B2B2B
192x
100
#202020
31x
110
#191919
64x

Blue

0
#F6F9FD
0x
10
#ECF3FD
0x
20
#D8E6FD
31x
30
#B6D1FC
12x
40
#89B5FA
0x
50
#5996F8
72x
60
#2071F3
7x
70
#0D59D3
79x
80
#10469E
0x
90
#113369
3x
100
#0F213D
31x

Red

0
#FDF7F6
0x
10
#FDEDEC
0x
20
#FDDAD8
2x
30
#FCB9B6
1x
40
#FA8F89
0x
50
#F86159
19x
60
#F32B20
2x
70
#D3170D
18x
80
#9E1710
0x
90
#691611
0x
100
#3D120F
0x

Orange

0
#FDF9F6
0x
10
#FDF4EC
0x
20
#FDE8D8
0x
30
#FCD4B6
0x
40
#FABA89
0x
50
#F89E59
7x
60
#F37C20
0x
70
#D3630D
8x
80
#9E4D10
0x
90
#693711
0x
100
#3D230F
0x

Yellow

0
#FDFCF6
0x
10
#FDFAEC
0x
20
#FDF5D8
0x
30
#FCEDB6
4x
40
#FAE289
0x
50
#F8D559
1x
60
#F3C620
1x
70
#D3A80D
3x
80
#9E7F10
0x
90
#695611
1x
100
#3D330F
0x

Green

0
#F7FCFA
0x
10
#EFFBF4
0x
20
#D5F6E4
2x
30
#A9EFCA
1x
40
#6DE3A4
0x
50
#31D87F
5x
60
#1DA55C
2x
70
#158449
6x
80
#0F5731
0x
90
#104127
0x
100
#0E2A1B
0x

Transparency

Only these two may be see-through: the shadow under menus and windows (20% in light, 40% in dark), and the layer behind a window.

Shadow
rgba(0, 0, 0, .2) in light, .4 in dark
6x used
Layer behind window
rgba(15, 15, 15, .6)
4x used

Contrast

How readable text is on its background. Ratio 7 or more is AAA, 4.5 or more is AA, 3 or more is only for large text. Ratios are calculated from the real colors.

Themes

Components only use these names.

NameUsed forLightDark
bgDocumentgray-0gray-110
bg2Sidebar, cardsgray-10gray-100
bg3Raised surfacegray-20gray-90
textTextgray-80gray-40
mutedGray text, at least 4.5 : 1 contrast on every surfacegray-70gray-50
lineBordersgray-30gray-90
hoverHovergray-20gray-90
bg3-hoverHover on a field with the bg3 background (select)gray-30gray-80
hover-popHover in menus and windowsgray-20gray-80
accentAccent: fill, links, focusblue-70blue-50
dangerError: text and danger buttonred-70red-50
accent-linkAccent as text: links and tertiary buttonblue-70blue-30
accent-textText on accent and on the danger buttongray-0gray-110
field-lineEdge of a fieldgray-60gray-60
popMenu and popupgray-0gray-90
code-bgCode backgroundgray-20gray-100
inline-codeCode textred-60red-60
text-redText color redred-50red-50
text-orangeText color orangeorange-70orange-70
text-yellowText color yellowyellow-70yellow-70
text-greenText color greengreen-60green-60
text-blueText color blueblue-60blue-60
text-grayText color graygray-60gray-60
mark-yellowHighlight yellowyellow-30yellow-30
mark-greenHighlight greengreen-20green-20
mark-blueHighlight blueblue-30blue-30
mark-redHighlight redred-20red-20
mark-grayHighlight graygray-30gray-30

Radius

Every rounded corner in the app has the same radius. Only fully round shapes are different.

Measurements

r = 6px
Corner enlarged 10 times
Button
Field
Card
Real size: the same 6px everywhere
r6pxButtons, icon buttons, fields, menus, popups, cards, columns, images, carousel, cover, toasts, window, note, checkbox, chips, counters, inline code, highlight, sidebar rows, the toolbar and the preview bar above the keyboard on iPhone, and bottom sheets (top corners only). 161x used
r-roundroundFully round, only where the shape is a circle: the toggle and its knob, the radio button and the spinner. 5x used
r top6pxThe same 6px, only on the top corners: bottom sheets and panels on iPhone. 4x used

Border width

1px is the default. 2px only when something must stand out.

bw-11pxDefault border and divider: buttons, fields, sidebar, top bar, tables. 90x used
bw-22pxEmphasis: focus ring, quote line, active tab, underline, outline on image hover. 70x used

Shadow

Shadow shows that something floats above the page. There are two: the default shadow for everything that opens or floats, and a larger one for what you drag.

Measurements

4 down12 blur
1px border, 4px down, 12px blur

Shadows only use these two. The color is always --shade: 20% black in light, 40% black in dark.

shadowborder + 0 4px 12pxEverything that opens or floats above the page: menu, window, popup, bubble, palette, toast, note, toolbar above the keyboard and sidebar on iPhone. 25x used
shadow-drag0 8px 20pxHighest: block or card you drag. 2x used

Layers

Which element sits above which other element. There are five layers, one token per role. A new component picks the layer that fits its role, never a number. Inside one layer, the element added to the document later sits on top.

z-page10Parts inside the document: delete button, carousel controls, spinner, tree arrow, table edge buttons, toolbar, floating note and block handles. 9x used
z-fixed20Fixed screen parts: outline panel and the dim layer behind the sidebar on iPhone. 2x used
z-bar30Bars and panels: toolbar above the keyboard, block panel, find bar and the sidebar on iPhone. 4x used
z-overlay40Everything that opens above the page: window, menus, popups, suggestions, format bubble, color palette, object bar, paste choice, lightbox and the startup screen. 11x used
z-top50Always on top: toasts, drag previews, drop line, drag chip, progress bar and keyboard preview. 9x used

Effects

Small states: dimmed, hover and aspect ratio.

op-1.5Document that fades out when switching. Dimmed. 2x used
op-2.6Dimmed, a bit stronger: start of a slide-in. 1x used
bright1.06Slightly lighter on hover over a primary or dangerous button. 2x used
ratio-wide16 / 9Cover and carousel: 16 by 9. 4x used

Spacing

All distances are multiples of 4px. Also fixed container sizes.

Measurements

Name
8
Field
16
Email
8
Field
24
Main button
Between label, field and main button
4Page title
16
12Cancel12
32
Next section
Next to text, in a button, between sections

Do and don’t

Space above elements in a document

Every element in a document has the same optical space above it as a heading 2: about 40px on desktop and 38px on iPhone, measured from the text above to the first line or edge of the element. This goes for headings 1 and 3, intro text, quote, lists, task list, divider, image, table, card, columns, carousel, table of contents and a line with only a document link or file. Only body text keeps its own space.

Spacing scale

Every step, from smallest to largest.

sp-14pxSmallest distance. Icon next to text, inside small chips. 48x used
sp-28pxInside buttons and rows. Label to field. 153x used
sp-312pxSide of buttons and fields. Padding in menus and cards. 120x used
sp-416pxDefault distance between fields and rows. Side margin of the screen on iPhone and in the sidebar. 60x used
sp-524pxSpace between the last element and the main button, everywhere. Room in windows. Side margin of the document on desktop. 28x used
sp-632pxBetween sections and blocks. 11x used
sp-740pxGenerous distance: bottom of the editor, indent of checkboxes, height of keys in the toolbar on iPhone. 10x used
sp-848pxHeight of the top bar and the toolbar on iPhone. 3x used
sp-964pxRoom at the bottom of the document for keyboard or dragging. Minimum height of a card. 5x used
sp-1096pxDocument margin on desktop. Logo on the login screen. Minimum width of table columns and segment buttons. 10x used
sp-11140pxBottom of the document on desktop. Width of select fields in Settings. 11x used

Container sizes

Fixed widths and minimum heights for surfaces that do not grow with their content: menus, windows and the document itself. Further down are sizes that scale with text or screen.

Fixed sizes

From small to large. The larger the step, the more it is a whole screen or window.

sz-156pxSmallest surface: document icon box, empty column, button in the block panel. 11x used
sz-2120pxMinimum height of a card or column. Placeholder of an image while loading. 7x used
sz-3180pxFloating card and drag preview. 3x used
sz-4220pxMenu and column in the card grid. 8x used
sz-5240pxPanel next to the document: outline and sidebar during startup. Select field. 5x used
sz-6320pxPopup with list: suggestions and slash menu. Maximum sidebar on iPhone. 7x used
sz-7380pxForm on an empty screen: login and locked. Find bar in the document. 10x used
sz-8460pxWindow and empty state. 5x used
sz-9560pxWide window and toasts. 4x used
sz-10760pxDocument in narrow view. 5x used
sz-11900pxDocument on desktop (default). 1x used

Relative to the text

Space in document content scales with the font size.

mc-1.3emVery small distance between text lines: headings and list items. 8x used
mc-2.6emDistance between paragraphs, lists and quotes. 6x used
mc-31emDistance above a heading. 4x used
mc-41.2emDistance below a title, around a divider, minimum height of an error message. 7x used
mc-51.5emIndent of lists and height of a checkbox row. 5x used

Relative to the screen

Height and width as a part of the screen. Dvh is the visible height on a phone.

vh-112vhSpace above an empty state and the lock screen. 4x used
vh-224vhSpace below the login screen, so the form looks centred. 2x used
vh-340vhMinimum height of the editor. 1x used
vh-450vhMaximum height of long lists: icons, move to. 3x used
vh-560vhMaximum height of the slash menu and the outline panel. 2x used
vw-138vwMaximum width of the save status in the top bar. 1x used
vw-286vwWidth of the sidebar on iPhone (at most sz-6). 1x used
dvh-192dvhMaximum height of a window on iPhone, allowing for the address bar. 1x used

Percentages

Shape of the loading animation.

pct-140%Width of a progress bar and of a search suggestion. 3x used
pct-255%Width of the title in the loading state. 2x used

Icons

An icon always sits in a square box. Large standalone icons (empty state, logo, document icon) have their own size.

Measurements

ic-0
12px
ic-1
16px
ic-2
20px
ic-3
24px
ic-4
32px
The box is always square. In rows and buttons the glyph is as large as the text: 14px on desktop

Icon box sizes

Every icon sits in a square box. The box sets the position. In rows and buttons the glyph is as large as the text (14px on desktop, 17px on iPhone).

ic-012pxSmall glyph in a helper button: arrow in the tree, table buttons, delete block, carousel arrow. Same on desktop and iPhone. 11x used
ic-116pxGlyph in a toolbar button on desktop, search icon, eye for password, logo in the sidebar. 14x used
ic-220pxBox for an icon in a row or menu (sidebar, menu, suggestions). The glyph inside follows the text size: 14px on desktop, 17px on iPhone. 29x used
ic-324pxBox for a main icon: card icon, settings row, arrow button in the tree, icon picker. 14x used
ic-432pxDocument icon while editing (desktop and iPhone) and empty state in lists. 3x used
ic-548pxLarge empty state. Document icon in the header on iPhone. 2x used
ic-672pxDocument icon in the header on desktop. Logo on the lock screen. 2x used
ic-bar18pxToolbar above the keyboard on iPhone. Checkbox, divider and carousel width. 7x used
ic-inset9pxMargin between cover and title. On iPhone it is 7px. 2x used

Motion

Fast for direct response (0.12 s), medium for opening and closing (0.2 s), slow only for loading. Motion is never decoration.

Time

dur-1.12sDirect response: hover, color change, rotating an arrow, showing or hiding a button. 34x used
dur-2.2sOpening and closing: window, sidebar, switching document. 27x used
dur-3.35sLarger movement: switching image in the carousel. 1x used
dur-4.7sSpinner: busy button, loading cover, trash. 3x used
dur-51sLoading: progress bar and shine over a placeholder. 2x used

Easing

ease-closecubic-bezier(.5, 0, .75, .4)Closing: lid of the trash. 1x used
ease-slidecubic-bezier(.3, .7, .2, 1)Sliding in: image in the carousel. 1x used

Pressing and rotating

scale-press.97A button you press gets a little smaller. 4x used
rot-1-38degTrash: lid opens. 1x used
rot-2-4degTrash: lid falls back. 1x used
rot-390degArrow that opens or closes. 3x used
rot-4360degOne turn of the spinner. 2x used
rot-51.2degA card you drag is tilted a little. 2x used

Loading bar

shim-angle100degAngle of the shine over a placeholder. 1x used
shim-130%Start of the shine. 1x used
shim-250%Middle of the shine. 1x used
shim-370%End of the shine. 1x used
shim-size250% 100%Width of the shine relative to the placeholder. 1x used
shim-from-120%Start position of the shine. 1x used
shim-to120%End position of the shine. 1x used

Fonts

The five choices from Settings.

Typography

Every text has a role. The role sets size, line height and weight, on desktop and on iPhone.

Desktop interface

Everything the app itself shows.

Title
Title · --fs-title 36px · line height --lh-title 44px · weight --fw-bold 600
Page title and large heading on the login screen. 9x used
Heading
Heading · --fs-head 20px · line height --lh-head 26px · weight --fw-bold 600
Window title, heading in Settings, heading in panel. 9x used
Text
Text · --fs-body 16px · line height --lh-body 24px · weight --fw-normal 400
All text of the app itself: buttons, fields, rows, menus. 144x used
Text bold
Text bold · --fs-body 16px · line height --lh-body 24px · weight --fw-bold 600
Emphasis: active row, button text, labels. 37x used
Small
Small · --fs-small 14px · line height --lh-small 21px · weight --fw-normal 400
Explanation, labels above lists, meta and save status. 28x used

Desktop document content

Text you type in a document. Scales with the font size in Settings.

Heading 1
Heading 1 · --fsc-h1 1.875 em · line height --lhc-2 1.3 · weight --fw-bold 600 · 30px at base --fs-page-d 16px
Main heading in a document. 1x used
Heading 2
Heading 2 · --fsc-h2 1.5 em · line height --lhc-2 1.3 · weight --fw-bold 600 · 24px at base --fs-page-d 16px
Subheading in a document. 1x used
Heading 3
Heading 3 · --fsc-h3 1.25 em · line height --lhc-3 1.4 · weight --fw-bold 600 · 20px at base --fs-page-d 16px
Small heading in a document. 1x used
Quote
Quote · --fsc-q 1.25 em · line height --lhc-5 1.6 · weight --fw-normal 400 · 20px at base --fs-page-d 16px
Quote and intro text. 1x used
Text
Text · --fs-page-d 16px · line height --lhc-6 1.7 · weight --fw-normal 400
Running text in a document. 14x used

iPhone interface

Everything the app itself shows.

Title
Title · --fs-title 28px · line height --lh-title 34px · weight --fw-bold 600
Page title and large heading on the login screen. 9x used
Heading
Heading · --fs-head 20px · line height --lh-head 26px · weight --fw-bold 600
Window title, heading in Settings, heading in panel. 9x used
Text
Text · --fs-body 17px · line height --lh-body 26px · weight --fw-normal 400
All text of the app itself: buttons, fields, rows, menus. 141x used
Text bold
Text bold · --fs-body 17px · line height --lh-body 26px · weight --fw-bold 600
Emphasis: active row, button text, labels. 47x used
Knop
Knop · --fs-body 17px · line height --lh-small 21px · weight --fw-normal 400
4x used
Small
Small · --fs-small 14px · line height --lh-small 21px · weight --fw-normal 400
Explanation, labels above lists, meta and save status. 29x used

iPhone document content

Text you type in a document. Scales with the font size in Settings.

Heading 1
Heading 1 · --fsc-h1-m 1.6 em · line height --lhc-2 1.3 · weight --fw-bold 600 · 27px at base --fs-page-m 17px
Main heading in a document. 1x used
Heading 2
Heading 2 · --fsc-h2-m 1.35 em · line height --lhc-2 1.3 · weight --fw-bold 600 · 23px at base --fs-page-m 17px
Subheading in a document. 1x used
Heading 3
Heading 3 · --fsc-h3-m 1.15 em · line height --lhc-3 1.4 · weight --fw-bold 600 · 20px at base --fs-page-m 17px
Small heading in a document. 1x used
Quote
Quote · --fsc-q-m 1.1 em · line height --lhc-5 1.6 · weight --fw-normal 400 · 19px at base --fs-page-m 17px
Quote and intro text. 1x used
Text
Text · --fs-page-m 17px · line height --lhc-5 1.6 · weight --fw-normal 400
Running text in a document. 14x used

Weight

Text is normal or bold. Light is only for the document title in the Source Serif font.

fw-light300Sample textPage title in the Source Serif font. 1x used
fw-normal400Sample textNormal text: running text, fields, rows. 7x used
fw-bold600Sample textEmphasis: headings, buttons, active row. 55x used

Relative text sizes

For text in documents. Scales with the font size in Settings.

fsc-h11.875 emMain heading in a document (desktop). 2x used
fsc-h21.5emSubheading in a document (desktop). 2x used
fsc-h31.25emSmall heading in a document (desktop). 2x used
fsc-q1.25emQuote and intro text (desktop). 2x used
fsc-h1-m1.6emMain heading in a document on iPhone. 1x used
fsc-h2-m1.35emSubheading in a document on iPhone. 1x used
fsc-h3-m1.15emSmall heading in a document on iPhone. 1x used
fsc-q-m1.1emQuote on iPhone. 1x used
fsc-s.9emSmall text in a document: document links, tables, table of contents. 7x used
fsc-xs.8emVery small text: file size next to a file. 1x used
fsc-code.85emCode in a document. 2x used

Line height in documents

lhc-11.2Line spacing of the largest titles. 5x used
lhc-21.3Headings in a document. 9x used
lhc-31.4Small headings, quotes and intro text. 6x used
lhc-41.5Short text: table header. 7x used
lhc-51.6Quotes, document links and chips. 7x used
lhc-61.7Running text in a document: roomy, for longer reading. 1x used

Letter spacing

ls-tight-.01emA bit tighter for large titles. 4x used
ls-wide.06emA bit wider for small headings in capitals and codes. 3x used

Base for document content

fs-page-d15pxnot used
fs-page-m17pxnot used

Layout

The breakpoint and the grid. Every app places its content on the same grid.

Breakpoint

Switch at820pxUp to 820px wide, or on a screen you touch, the iPhone layout is used. Above that, the desktop layout. The same rule applies to every component.

Grid

Every screen is divided into columns with a space between them. Content takes whole columns. Resize the window to see the columns change.

iPhoneDesktop
Screen widthup to 820pxabove 820px
Columns--cols 4--cols 12
Gutter--gutter --sp-4 16px--gutter --sp-5 24px
Margin--margin --sp-4 16px--margin --sp-6 32px

Rules

Gutter--gutterThe space between two columns. It is the same between every pair of columns.
Margin--marginThe space between the edge of the screen and the first column, and between the last column and the edge.
Spanwhole columnsContent starts and ends on a column. It never ends halfway through one.
Maximum width--sz-10 760px, --sz-11 900pxThe grid is fluid. A screen with long text can set a maximum width from the size scale.
Tokens onlyspacing scaleGutter and margin point to the spacing scale. Do not use other values.

Page layout

How Astrel places its screens: a sidebar and one column of text in the middle. The grid and the breakpoint are on the Layout page.

Measurements

Sidebar 260auto96
Text 708px
96auto
Desktop at 1400px. Document 900px max, 96px padding left and right

Desktop

Sidebar260pxOn the left, can be hidden. It has its own variable (--sb-w) and is not on the size scale.
Top bar48pxHeight follows the control height: --btn-m 36px plus --sp-3 12px.
Document--sz-11 900pxMaximum width, centred in the space next to the sidebar.
Document padding--sp-10 96pxLeft and right. The text column is 900px minus 2 times 96px, so 708px at most.
Narrow document--sz-10 760pxSettings, Trash and other screens with lists.

iPhone

Top bar56pxHeight follows the control height: --btn-l 44px plus --sp-3 12px.
Document padding--sp-4 16pxLeft and right. The text column is the screen width minus 32px.
Sidebar--sz-6 320pxA drawer over the document, with a dim layer behind it.

Screens and windows

Login--sz-7 380pxLogin and locked screen: a form in the middle of an empty screen. The width is the same on desktop and iPhone.
Window--sz-8 460pxWide window: --sz-9 560px.

Width of the text column

Measured in the app, with the sidebar open on desktop.

Screen widthLayoutText column
390pxiPhone358px
600pxiPhone568px
820pxiPhone788px
821pxDesktop369px
1000pxDesktop548px
1280pxDesktop708px
1600px and widerDesktop708px

Known gap

From 821px to about 1160px wide the 96px padding next to the sidebar makes the text column narrow: 369px at 821px. A smaller padding in this range would give the text more room.

Accessibility

What the app does for contrast, keyboard, screen reader and motion, measured in the real app. The gaps are at the bottom, so nothing is hidden.

Contrast

Contrast ratio of the color pairs, in dark and light. Normal text needs 4.5. The edge of a field needs 3. All colors come from the existing color scales.

PairDarkLightResult
Text on the document11.411.4Passes
Secondary text (--muted)7.46.5Passes
Error text (--danger)5.75.4Passes
Accent as text, for example links (--accent-link)11.36.2Passes
Text on accent: primary button, checked checkbox6.06.2Passes
Text on the danger button5.75.4Passes
Edge of a field (--field-line) against the document4.63.8Passes (needs 3)
Accent text on grey fills (--bg2, --bg3) and on the tertiary button10.5, 9.1 and 10.45.8, 5.4 and 4.9Passes
Inactive text on inactive fill2.22.1Inactive controls are exempt

Focus

Focus ring--bw-2 2pxA solid line in --accent, 2px away from the element. It shows when you use the keyboard. It is the same on buttons, links, fields, rows and menus.

Keyboard

Skip linkTabThe first stop is "Skip to content". Enter moves the focus past the sidebar to the document. The link only shows when it has focus.
OrderTabFollows the screen: sidebar, then top bar, then document.
MenuEnterOpen a menu with the keyboard and the focus goes to the first item. Arrow up and down, Home and End move between the items. Enter picks one.
CloseEscCloses menus and windows. Tab also closes a menu. The focus goes back to the button that opened it.
WindowTabA window keeps the focus inside itself until you close it.

Screen reader

LanguagelangThe document tells the screen reader which language it is in: English or Dutch, as set in Settings.
Namesaria-labelEvery button with only an icon has a name. In the app no control is without a name.
Partsaside, main, headerSidebar, document and top bar are separate parts.
Windowsrole="dialog"With aria-modal and a title that is linked with aria-labelledby.
Messagesrole="alert"Toasts and error messages are read out when they appear.
Iconsaria-hiddenIcons next to text are hidden from the screen reader.

Touch targets

iPhone--btn-l 44pxEvery control is at least 44px high and wide.
Desktop--btn-m 36pxThe smallest control is the logo link in the sidebar, 24px high. The standard (WCAG 2.2) asks 24px.

Motion

Motionreduced motionWhen the system asks for less motion, transitions and animations stop: windows, menus, toasts, sidebar and loading lines. The scroll to the top jumps instead of gliding.

Skip link

The link is the first thing a keyboard user reaches. It is the accent color, so it is easy to see.

Known gaps

Found while measuring. Decide which to fix next.

Gap 1Text sizeText sizes are in px. Document zoom works. A bigger standard font size in the browser has no effect.

Content

How the app talks. Short sentences, plain words, and the same word for the same thing. These rules come from the texts in the app.

Voice

CapitalsSentence caseOnly the first word and names get a capital. Move to trash, not Move To Trash.
LengthShortOne idea per sentence. Write at B1 level: no jargon and no long words.
ToneCalmNo exclamation marks, no "Oops" and no "Please". Say what happened and what to do.
DutchjeThe app has an English and a Dutch version. Both follow these rules. The Dutch version says "je", not "u".

Words

Use one word for one thing, everywhere.

UseDo not useNote
DocumentNote, documentEverything you write is a document. A document can have items.
TrashBin, recycle bin
Log in, log outSign in, sign outTwo words as a verb. Log out device, not Sign out device.
DeleteEraseThe thing is gone for good: document, row, column, block.
RemoveDeleteTake something off something else: a password, a link, a favorite.
CancelNo, BackThe button that closes a window without doing anything.

Buttons and menu items

Verb firstDelete documentSay what happens: Set password, Move to, Empty trash. Not OK, Yes or Submit.
No full stopAdd rowButtons, menu items and titles have no full stop.
Same nameDelete documentThe menu item, the window title and the button use the same words.

Messages

ToastDocument moved to trash.A full sentence with a full stop. It says what happened. See Toasts.
ErrorEnter a web address.Say what is wrong, then what to do. A table needs at least 1 column. Otherwise delete the whole block.
WarningCareful: ...Starts with "Careful:" when something may be lost, for example when changes were not saved.
ConfirmPermanently delete "Notes"? This cannot be undone.A question with the name of the document in straight quotes. Then what the result is. See Confirm.

Empty states

SentencesNothing logged yet.Say what is not there. If it helps, say when it appears: No earlier versions yet. They appear once you edit the document again after a while.

Numbers

Plural1 time, 2 timesWrite numbers as digits. Singular and plural match: Replaced 1 time. Replaced 2 times.

Changelog

Version 1.13.0. The Design System and the app share one version number.

How the Design System and the app work together

1It leadsAll tokens, colors, styles and components live in this Design System. It is the single source.
2The app followsThe app is built from the Design System. It has no styles and no components of its own. A build check fails if it builds one itself.
3Change here firstChange a token, style or component here, then build the app. Never the other way around.
4Raise the versionEvery set of changes gets a new version number and a line below.

1.13.0, 9 November 2026

A kanban board for pages.

Kanban boardAddedColumns with cards inside a page. On a computer you drag a card to another column. On a phone you move it with the menu on the card, and the columns scroll sideways.
Buttons in the appAddedThe Kanban add button, for adding a card or a column.

1.12.1, 5 November 2026

Tile is removed, and the labels match the app.

TileRemovedThe document card and Tile are gone from the app and from this design system. Old cards on pages become the page name as text.
Used in the appChangedThe labels now match the app. Toggle is used in the app. Textarea is not used in the app yet.

1.12.0, 5 November 2026

A grid for every app, and examples built from the real components.

LayoutAddedResponsive grid: 4 columns on iPhone, 12 on desktop, with gutters and margins. New tokens --cols, --gutter and --margin.
AppsChangedThe sidebar and document layout moved from Layout to Page layout in Apps.
AnatomyChangedAnatomy, Measures and Do and don’t use the real components. The numbers and spaces are measured in the example itself.
ModalChangedThe space between the text and the buttons was 40px and is now 24px, as the page says.
Select and SearchChangedThe examples no longer stretch. They show the real height.
Sticky noteChangedThe note is no longer part of Tile. It is in Apps, under Sticky note, with its four colors.
SearchChangedThe search field is now as high as a button and an input field, also on iPhone (44px).

1.11.1, 5 November 2026

The anatomy and measures examples now match their numbers and captions.

Input fieldChangedAnatomy: every number has a line to its part.
ModalChangedAnatomy: one numbered list that matches the picture, with the numbers in blue. Measures: the 12px between the buttons is marked.
FormsChangedMeasures: removed the 32px side marks that no caption explained.

1.11.0, 4 November 2026

Sidebar, Dialogs, Global header and Search moved to Apps, and the examples no longer name an app.

AppsChangedSidebar, Dialogs, Global header and Search moved here from Patterns. They are specific to one app.
ExamplesChangedExamples in Fundamentals, Components and Patterns use neutral texts, a neutral logo and the word document instead of page. They no longer name an app.

1.10.0, 4 November 2026

A new section for what only one app needs, and text and highlight colors that come from tokens.

AppsAddedA new section for what only one app needs. Astrel has Editor blocks, Find, Logo, New page, Sticky note, Text toolbar and Trash there. Every app uses the same tokens, colors, atoms and components.
ThemesAddedTokens for text colors (text-red to text-gray) and highlight colors (mark-yellow to mark-gray). They use colors from the ramps.
ThemesChangedThe page background follows the bg token in light and dark. It no longer has a fixed color.
Text toolbarChangedThe colors in the text and highlight pickers come from the new tokens. Colors in older pages become the nearest token, and old purple becomes blue.
ColorChangedThe numbers under the colors are counted again, also through theme tokens.

1.9.0, 30 October 2026

One look for icon buttons, one corner radius, one space above every element, and undo and redo that also bring back deleted blocks.

Icon buttonsChangedEvery button that shows on hover is a square icon button without text: image, GIF, cover and carousel, the delete button, the table edge buttons, the handle on iPhone and the close button of the lightbox. The name shows as a tooltip, also in Dutch.
RadiusChangedOne radius of 6px everywhere. The toolbar and preview bar above the keyboard, chips, counters and bottom panels are no longer round or 12px. Only the toggle, radio button and spinner stay round.
SpacingChangedEvery element has the same optical space above it as a heading 2. Quote, lists, task list, and a line with only a page link or file were too tight or too wide.
Card and tableChangedNo delete button on hover and no separate handle at the right of a card. The ... button with its menu is gone from the table. Row and column buttons stay.
TableFixedIn Safari a loose line could appear between a table and its buttons. Loose text or a line break next to a table is removed now.
FindChangedPrevious and next are inactive when there is nothing to step to. Text in the field that is empty or only spaces marks nothing on the page.
Undo and RedoFixedThey also bring back a deleted block, table, image or card, and a moved block. The cursor goes back to where the change was made.
LinksChangedNo more links to a website in the text. Links to a page and files stay. Links always open in a new tab of the browser.
App iconChangedThe planet in the blue app icon sits a little higher. All sizes are new files.
ExamplesChangedExamples of the bar at an image, cover, carousel, find, sticky note, block handle and editor show the new buttons. The Table menu button example is removed.

1.8.2, 23 October 2026

The Design System shows more with pictures: measurements, anatomy, do and don’t and a searchable icon grid.

MeasurementsNewA Measurements card draws the real empty space in blue, with the size next to it, on Spacing, Radius, Login, Icons, Layout and Shadow.
AnatomyNewAn Anatomy card shows one example with numbered parts and a short line per part, built from the real components: Text input, Tooltip, Notification, Tabs and Menu.
Do and don’tNewDo and don’t examples: 24px above the main button, and one main button per window.
OverviewsNewAn Overview shows the whole screen with numbered parts and a list of the components it uses, with links.
ExamplesChangedAll example screens (Modal, Form, Settings, Anatomy, Do and don’t) follow the theme: light is light and dark is dark. They were always dark before.
Sizes and statesChangedThe tables show the colors of the active theme: light values in light, dark values in dark. They only showed dark values before.
ColorNewContrast has a live check: pick a text and a background color and see the ratio and AA or AAA.
IconsNewThe icon grid has search, filters, a large preview with the four box sizes, and a button that copies the name.

1.8.1, 22 October 2026

Tighter layout in the Design System, a lighter shadow and a rule that every window has body copy.

Design SystemChangedEvery card has a title with one line under it, and the title sits in the middle of that block. Every item in the side menu of a page is its own card. No card sits inside another card.
Login, Empty states, FormsChangedThe space between the last element and the main button is --sp-5 24px everywhere, as in a modal. Login was 16px, the welcome screen 32px.
Modal, LoginChangedMore space inside: --sp-6 32px around the title, text and buttons.
Sticky noteChangedThe shadow no longer has a thin line around it.
ModalChangedEvery window has a title and body copy. In the app, Move to, Choose icon, Export page, Add bookmark, Add link and Set password got a short text. More space between the title and the field.
Login, Empty statesChangedThe logo sits inside the card on every login screen, also in the app. The card is the lightest blue, --accent-tint. On the welcome screen there is more space between the logo and the title, and between the text and the button.
Forms, FieldsChangedFields in a form are at most --sz-7 380px wide. In the examples of Input field, Search, Select, Input group and Accordion, the fields now fill the width in four equal columns on a large screen, two on a small one.
ColorNewThe token --accent-tint: the lightest blue in light theme and the darkest blue in dark theme.
ShadowChangedLighter. --shadow is now 0 4px 12px, --shadow-drag is 0 8px 20px, and --shade is 20% black in light and 40% in dark. The example on the Shadow page now shows the real shadow.
NotificationChangedThe toasts in the examples stand below each other, over the full width.
Sticky noteChangedNo border.
MenuChangedThe example is centred.

1.8.0, 21 October 2026

Four new components, validation, four kinds of inline notification and six new patterns, after a look at Carbon and Bootstrap.

RadioNewOne choice out of a few, with a radio group, and all states.
BadgeNewA small count or dot, on its own or on the corner of an icon button.
AccordionNewHeadings that open and close their content.
Input groupNewA field with text or a button fixed to its side.
Text inputNewValidation: invalid, warning and valid, with an icon and words under the field.
NotificationChangedThe inline notification has four kinds: error, warning, success and info. In the app, the message about a page changed on another device is now a warning.
Checkbox, radio, toggle, select, text inputNewA read-only state.
ColorNewThree colors with a meaning: --success, --warning and --info, for light and dark.
PatternsNewStatus indicators, Overflow content, Common actions, Read-only states, Notifications and Disclosures.
Design SystemChangedThe group Astrel in the menu can be opened and closed, like the other groups.
Design SystemFixedTabs examples have the same width. Skip link shows once in the page menu. Tables with words are stacked on iPhone.
AppChangedEvery Delete has the trash-can icon and is red: delete row, delete column and delete on the cover used a cross or a minus.
AppChangedThe save state in the top bar is a status with an icon: error for saving failed, warning for changed on another device.

1.7.9, 21 October 2026

Login in a window, colored toasts, a tooltip with an arrow and an icon overview.

Design System and appChangedLogin screens (log in, set up, recovery code, restore, no connection) are a window without a close button, with the logo centered above it.
Design System and appChangedToasts have a color: success is green, error is red and info is blue.
Design System and appChangedThe space under the title of a window is the same everywhere, on desktop and iPhone.
Design SystemNewIcons shows all Font Awesome icons the app uses in a grid, with their name.
Design System and appChangedThe tooltip has an arrow that points at the element. It sits below the element when there is no room above.
Design SystemFixedThe pages Radius, Shadow, Layers, Effects and Border width open again. The sizes and states of an example switch correctly when you change tabs.
Design System and appRemovedThe font Caveat. A saved choice for Caveat falls back to the system font.
Design System and appRemovedThe Popover. The app did not use it.
Design System and appChangedThe login window has no border and no shadow. It stands out by its own background color.
Design System and appChangedThe spinner is blue.
Design System and appRemovedThe shadows shadow-1, shadow-2 and shadow-up. Two are left: shadow and shadow-drag. A card in a page has a border and no shadow.
Design System and appNewLogo has its own page. The sidebar shows the Astrel planet instead of a layers icon.
Design SystemNewToggle: a switch with a knob, with all states. The app does not use it yet.

1.7.8, 20 October 2026

Nine new components.

Design SystemNewTabs, Tooltip, Popover and File uploader, with sizes and all states. They are built in the Design System first. The app does not use them yet.
Design SystemNewBreadcrumb, Textarea, Progress bar, Spinner and Skeleton have their own page, with sizes and all states.
Design SystemChangedFonts has its own page, no longer a part of Typography. Typography shows the real size of every text style on desktop and iPhone. Long pages have a row of jump links to their sections. The header block of every page is taller, and the pages use the full width. The menu groups fold in and out. The Overview page also shows the breadcrumb.

1.7.7, 20 October 2026

Source Sans.

Design SystemChangedThe text is Source Sans 3. The page titles are Source Serif 4 Light.
AppNewSettings has a new font choice: Source Sans. Text in Source Sans 3, page title in Source Serif 4 Light.
WeightNewToken fw-light (300), only for the page title in the Source Serif font.
FontsChangedThe Fonts page is built from the real component with all states. The example is not a copy anymore.

1.7.6, 20 October 2026

Undo and redo in the top bar.

Undo and RedoNewTwo icon buttons in the top bar, next to Back and Forward. They undo and redo the text of the open page. They are off when no page is open. On iPhone the same actions stay in the text toolbar.
Icon buttonChangedThe Back variant now also shows Undo and Redo with all states.

1.7.5, 20 October 2026

One delete button, no Stable label, stricter build.

Delete buttonChangedThe delete button on a block (sticky note, table, table of contents, bookmark, card) is the round dark button, like the carousel.
Delete button on iPhoneChangedOn a touch screen the button shows when you tap the block. Before, it was hidden.
Page headerChangedThe Stable label is removed.
BuildChangedThe build stops on a double page, a double example box or examples without a box.

1.7.4, 19 October 2026

Delete button on the sticky note.

Sticky noteChangedThe delete button is a round dark button, the same as the buttons of the carousel.

1.7.3, 19 October 2026

Tabs follow the sections of a page. Examples at real size.

TabsChangedEvery component and pattern has the same two tabs: Examples and Sizes and states. A fundamentals page with 2 to 5 sections has one tab per section. A page with one section has no tabs.
Desktop and iPhoneChangedThe switch only shows when desktop and iPhone really differ. Otherwise the page says: Same on desktop and iPhone.
ThemesChangedRadius, Border width, Shadow, Layers and Effects are their own pages. Themes only holds the themes.
ExamplesChangedExamples show at 100% real size, with no extra white space and no horizontal scroll.
NameChangedDesign System is written with capitals everywhere.

1.7.2, 19 October 2026

Page header, theme button and no horizontal scroll.

Page headerChangedGrey block with more space. The device choice (Desktop or iPhone) sits at the right of the tabs as a switch.
Theme buttonChangedDark and light button at the top right on desktop too.
MenuChangedThe text under the name only shows the version.
ExamplesChangedDesktop and iPhone examples shrink to fit the width. Tables stack on the phone. No horizontal scroll.
Forms, Locked, Verify, Devices, LogChangedThese examples now use the current components.
Settings rowChangedButtons wrap to the next line when there is no room.
Format barChangedWraps to two rows on a narrow screen.

1.7.1, 19 October 2026

Calmer pages in the Design System.

Component pagesChangedEvery component, pattern and fundamentals page has the same header (status and last updated) and tabs: Guidelines and, where there are tables, Specifications. In Guidelines you choose Desktop or iPhone.
MenuChangedThe dark and light switch is removed from the menu. On the phone it stays in the top bar.

1.7.0, 19 October 2026

No more loose parts in the app. Everything is a component.

Structured listAddedRows for settings, devices, log, trash and history.
List itemAddedSlash menu, mention, move, search result, block and icon cell.
LinkAddedText link and back link. Links in text for pages and files.
Inline notificationAddedA message that stays in the page, with buttons.
Buttons in the appAddedCover, carousel, object bar, table, sidebar, find, swatch and format buttons.
Label, checkbox labelAddedThe text next to a field or a checkbox.
Empty listsAddedSearch, suggestions and history.
LoadingAddedProgress bar, spinner and loading lines.
Tag, font tile, lightboxAddedDrag label, selectable font tile and image at full size.
Top bar on iPhoneChangedOne row with breadcrumb and a theme button.
Focus ringChangedNow on all new clickable parts.
Error textChangedSmall everywhere, same as the helper text.

1.6.0, 19 October 2026

Loose parts of the app become components.

Password fieldAddedField with a button that shows or hides the password. Login, setup, restore, lock screen and the password setting use it.
Helper textAddedThe line under a field, default or error. It replaces five separate error styles.
Text inputChangedThe states of all fields now fit in the frame. A filled field shows its value.

1.5.3, 19 October 2026

Better navigation on the phone.

Top barChangedThe top bar and the breadcrumb stay in view while you scroll.
ThemeAddedA button at the top right switches between dark and light.

1.5.2, 19 October 2026

Search gets a clear button.

SearchAddedA clear button shows when the field has text. It empties the field and puts the focus back in it. The sidebar and the icon window get it too.

1.5.1, 19 October 2026

Better contrast in the dark theme.

accent-linkAddedNew token for blue text and links. In the dark theme it uses blue-30, so text on dark layers passes 4.5. Light theme is unchanged.
ColorChangedThe counts (Nx used) are recalculated.

1.5.0, 19 October 2026

Fundamentals follow Carbon.

NamesChangedColors is now Color, Theme is Themes, Writing is Content and Grid and layout is Layout.
PagesChangedRadius, Border width, Shadow, Layers and Effects are headings on Themes. Container sizes is a heading on Spacing. Old links still work.

1.4.0, 19 October 2026

More components, and the states are now shown.

SearchAddedSearch is a component: only the field, with enabled, focus, filled and inactive. The results stay in the Search pattern. The sidebar and the icon window use this field.
Tree viewAddedTree nodes (leaf, branch closed, branch open, favorite) come from the library. The app builds the tree with them.
Menu, Tile, ModalChangedMenu items have default, hover, focus, hover and focus, and inactive. Tiles are clickable (page and bookmark, now with inactive). The note is in Apps, under Sticky note. Modal shows the parts and the variants Passive, Transactional and Danger.
StatesFixedHover, focus and pressed were not shown in this Design System: every state looked like Default. They are shown now, and the tables are measured from the real components.

1.3.0, 19 October 2026

Components and patterns follow Carbon.

ComponentsChangedOne flat list with one page per component and Carbon names: Button, Checkbox, Content switcher, Menu, Modal, Notification, Select, Text input, Tile, Tree view. Variants are headings on the page.
PatternsChangedSettings, Sidebar, Dialogs, Login, Global header, Text toolbar and others are patterns, built from components. They are no longer components.
LinksChangedOld page links still work and go to the new page.

1.2.0, 19 October 2026

More components in the library.

ComponentsAddedToast, window, segmented control, page card, bookmark card and note card. The app builds them from the library and has no copy.

1.1.0, 19 October 2026

The style guide became the Design System.

ComponentsChangedButton, icon button, field, checkbox, select field and menu come from one component library. The app and this Design System use the same code. The app has no copy of them.
NamesChangedStyle guide is now Design System. Foundations is now Fundamentals.

1.0.1, 19 October 2026

Small change.

GuideChangedThe cards on the overview and category pages have no icons. The icons did not always fit the page.

1.0.0, 18 October 2026

The first version for launch.

GuideNewPages Grid and layout, Accessibility, States, Writing and Changelog. Search. Cards and a breadcrumb to move through the guide.
ColorChangedAccent is blue-90 and error text is red-70 in the light theme. In the dark theme, text on accent and on the danger button is gray-110. New token --field-line for the edge of a field. All pass the contrast rules in Accessibility.
KeyboardNewSkip link. Menus work with the keyboard: arrows, Home, End, Esc and Tab.
ScreensChangedLocked screen is 380px wide. Checkbox is 20px. Find and replace fields are equally long. Block menu shows a text label for Intro.
AppChangedThe page language is set to English or Dutch. The log shows "IP unknown" in English.