Canada's National Observer
CNO Developer System
Section 04 — Foundations

Foundations

Spacing, radius, elevation, motion and layout: the values every component is built from.

SpacingTailwind scale
TokenValue
--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-832px
--space-1040px
Radius
TokenValueUsed for
--radius-sm4pxCards, inputs, code boxes
--radius-btn-sm15pxSmall pill button
--radius-btn-md20pxMedium pill button
--radius-btn-lg24pxLarge pill button
--radius-round50%Icon buttons, dots
ElevationRarely used
--shadow-1
Resting card (admin only; the site uses almost none)
--shadow-8
Menus and hovered tiles
--shadow-24
Dialogs
Motion
  • One transition: --transition-focus: 150ms ease-in-out; hover fades use --duration-hover (150ms)
  • Colour and background-colour only; nothing moves except the twisty chevron and the mobile menu arrow
Layout
PartSpec
Sidebar240px wide, black
Contentmax width 1290px (the site's wide main column), padding 40px
Article columnmax width 790px
Footerlight grey, side padding 20px