The w3-kit designin one page
Reference for every w3-kit site: six colours, five type sizes, the spacing, the parts and the motion, read live from the same CSS the sites use.
Back to w3-kitBlack, white, one purple.
- Ground… · var(--w3-ground) · 55 %The page. Half of every screen or more.
- Ink… · var(--w3-ink) · 25 %Text, the footer field, dark tiles.
- Tone… · var(--w3-tone) · 10 %One step off the ground: panels, menus, fields.
- Tone 2… · var(--w3-tone-2) · 4 %The second step: hover, alternate rows.
- Soft ink… · var(--w3-ink-soft) · 3 %Secondary notes and captions only.
- Purple… · var(--w3-accent) · 3 %The logo and the one action on a screen.
The bar above is a page's colour budget. Switch the theme in the footer and every value updates.
Five sizes, one family.
Geist for everything, Geist Mono only inside real code. Figures are tabular so they line up.
- text-w3-display · 44–96 px
- Web3 components
- text-w3-title · 36–72 px
- Every address typed.
- text-w3-statement · 24–32 px
- Every state of a transaction, handled.
- text-w3-body · 18 px
- Swap 0.5 ETH for 958.75 USDC on Base, confirmed in block 21,904,113.
- text-w3-small · 15 px
- Navigation, labels and captions.
Spacing in steps of eight.
Page margin 16 px on a phone, 40 px on a computer. Sections sit 96 to 160 px apart; nothing inside a section is further apart than 96 px.
- 8 px
- 16 px
- 24 px
- 32 px
- 48 px
- 64 px
- 96 px
- 160 px
One button, one mark.
Buttons are 44 to 48 px tall with square corners. Purple for the action, ink for a second choice. Pressing shrinks them a little.
- w3-kitOn white
- w3-kitOn tone
Motion that settles.
Only position and opacity move. With reduced motion turned on, everything appears in place.
- Rise
- 700 ms, 24 px
- Each part of a section entering, 80 ms apart.
- Drop
- 200 ms, 8 px
- Header panels opening.
- Press
- 160 ms, 97 %
- Every button when pressed.
- Shutter
- 1100 ms
- Once per page, on the hero stage.
Four rules.
- Purple means actIt sits on the logo and the one action. Nothing decorative is purple.
- No lines, no shadowsSurfaces step in tone. Only floating menus cast a shadow.
- Two lines at mostEvery headline, at every width. Cut words before shrinking type.
- Real data onlyNumbers, addresses and counts come from the registry and the build.