Spacing
Two scales. Fine (4 to 16) is for small gaps inside a component. Base (8 to 128) is for layout: gaps, margins and section padding. Use the variable, not the number.
| Token | CSS name | Size | Preview |
|---|---|---|---|
| fine/4 | --arche-space-fine-4 |
4px | |
| fine/8 | --arche-space-fine-8 |
8px | |
| fine/12 | --arche-space-fine-12 |
12px | |
| fine/16 | --arche-space-fine-16 |
16px | |
| base/8 | --arche-space-base-8 |
8px | |
| base/16 | --arche-space-base-16 |
16px | |
| base/24 | --arche-space-base-24 |
24px | |
| base/32 | --arche-space-base-32 |
32px | |
| base/40 | --arche-space-base-40 |
40px | |
| base/48 | --arche-space-base-48 |
48px | |
| base/64 | --arche-space-base-64 |
64px | |
| base/80 | --arche-space-base-80 |
80px | |
| base/96 | --arche-space-base-96 |
96px | |
| base/128 | --arche-space-base-128 |
128px |
Stroke
Three line weights. 1px is rest, 2px is hover, 4px is the focus ring or the active bar. Borders are drawn inside the box with an inset shadow, so a thicker border never changes the size of a component.
| Token | CSS name | Size | Preview |
|---|---|---|---|
| stroke/1 | --arche-stroke-1 |
1px | |
| stroke/2 | --arche-stroke-2 |
2px | |
| stroke/4 | --arche-stroke-4 |
4px |
End mark spacing
In Canon, the page ends with a 4px red rule, the end mark. It sits base/24 (24px) below the last column of text. On a page with no text column, it sits 24px below the last content block. There is one end mark per page.
Grid and breakpoints
Layouts are designed at three widths. In code the grid is 12 columns from 1024px up, so layouts scale between 1024 and 1440. Above 1440 the content stops growing and stays centered.
| Breakpoint | Design width | Columns | Gutter | Margin | Applies |
|---|---|---|---|---|---|
| Desktop | 1440 | 12 | 24 | 64 | 1024 and up |
| Tablet | 768 | 8 | 16 | 32 | 768 to 1023 |
| Mobile | 375 | 4 | 16 | 16 | up to 767 |
Sizes to match
- Buttons and nav links are 48px tall, and form fields are 56px. Text links are at least 32px tall. WCAG 2.2 AA asks for 24 by 24 at minimum.
- The top nav is 80px on desktop and tablet, and 72px on mobile.
- Corners are square.
Up next
Motion and focus
One easing curve, three durations, and the focus ring.