Foundations
Grid and border
Blocks in the main area sit on a 12-column grid. Space separates first; a 1px hairline groups when space isn't enough; 2px marks focus and selection.
Foundations
Grid and border
Blocks in the main area sit on a 12-column grid. Space separates first; a 1px hairline groups when space isn't enough; 2px marks focus and selection.
Page grid
The grid lives inside Main, after the sidebar. 12 columns, 24px gutters, 24px margins. Blocks such as cards, forms and tables span columns; buttons and icons inside them use the space scale, not the grid.
Sidebar 200
Page header 56
Margin 24 · space.300
Gutter 24 · space.300
Column, fluid
Phone: 4 columns, 16 margins and gutters
Settings · Profile
max 1280
Settings and forms
Content stops at 1280px and centres. A form spans 8 columns; a settings section puts its 260px title column on the left.
Candidates
full width
Tables and boards
Run edge to edge of Main with no max width. More columns fit, and the table scrolls sideways inside itself, never the page.
Role
Token
Value
Use
Breakpoints
Phone
default (no prefix)
under 768
4 columns, 16px margins and gutters. Sidebar and panels open as full-screen sheets. 200% zoom lands here
Tablet
md
768 to 1023
12 columns. Sidebar folds to its 52px rail; the details rail opens as a sheet
Laptop
lg
1024 to 1279
Compact sidebar, 172px. Details rail inline on records
Desktop
xl
1280 and up
Sidebar 200px. Settings content stops at 1280 and centres
Vertical rhythm
Row
h-9
Maya Chen
36px
Table, list, menu and nav rows. One height everywhere so lists line up across pages
Control
h-7
Filter
28px
Buttons, inputs, selects, tabs. A control sits centred in a row with 4px to spare on each side
Page header
h-14
56px
Crumb, title, tabs and actions, then a hairline
Borders · width and colour together
Hairline
Groups content
border.width · color.border
1px #EEEFF1
Table grid, dividers, card edges. Decorative, so no contrast minimum
Input edge
An edge you must see
border.width · color.border.input
1px #8C8F97
Inputs, selects, textareas, checkboxes. 3.2:1 on white
Focus
Keyboard position
border.width.focused · color.border.focused
2px #004F46
A ring with a 2px gap on buttons; inputs turn their own edge 2px
Selected
The chosen one of a set
border.width.selected
Details
Files
2px
Active tab underline, chosen choice card. Nothing carries a 2px border at rest
Border, fill or space
Try them in this order and stop at the first that works. Each step adds ink to the page.
Contact
Salary
1 · Space
The default. A 24px gap and a heading separate sections on a record or a form. No line needed.
Maya Chen
Priya Nair
Owen Hart
2 · Hairline
When items repeat tightly: table rows, menu groups, the page header edge. 1px #EEEFF1, never darker.
Maya Chen
Priya Nair
Owen Hart
3 · Fill
For state and regions: hover, selected, the current item, a sunken rail. A fill never adds a border on top.
Rules
1. Blocks align to the 12 columns inside Main. Nothing spills into a gutter or the margin.
2. Settings and forms stop at 1280px. Tables and boards run full width and scroll inside themselves.
3. Rows are 36px and controls 28px, on every page.
4. Space first, then a 1px #EEEFF1 hairline, then a fill. #8C8F97 is for input edges only.
5. 2px means focus or selection, nothing else. Pair the width token with its colour token.