Layout Reference

The canonical Page › Board › List › Card structure & tokens

Hierarchy

Every page nests the same way
Page
h-dvh column; sticky header, title top-left
Board
horizontal rail — overflow-x, snap-x, gap-3
List
w-64 column · rounded-xl · gray-50 · p-2.5
Card
square (radius 0) · hairline border · p-2.5
Radius rule
Card · 0px
Button
Button · rounded

Cards & panels: square. Buttons, chips, pills, avatars, inputs, textareas & the list container: rounded.

Colour

Brand & accent
Primary
red-600
Primary soft
red-100
Priority
High
red-500
Medium
amber-500
Low
blue-500
Neutrals & surface
Surface
white
List bg
gray-50
Border
gray-200
Text
gray-900
Status
Success
green-500
Warning
amber-500

Type & spacing

Type scale
Page titletext-lg/semibold
Section titletext-sm/semibold
Card / list titletext-sm/medium
Body texttext-sm
Meta / secondarytext-xs
Eyebrow labeltext-[11px]/upper
Title position

Titles are top-left of their container. Page title in the header; list & card titles at the top, meta/badges beneath.

List width
w-64

Lists are a fixed w-64 (256px) at every breakpoint — same as /board. Fixed and not-too-wide keeps the left sidebar visible on mobile; you swipe the rail to see more.

Spacing & borders
  • • List width: w-64 (256px, fixed)
  • • Card / list padding: p-2.5
  • • Rail gap: gap-3
  • • Borders: hairline gray-200 / gray-800
  • • Priority accent: border-l-[3px]
3

To Do

Card title sits top-left
urgent
Today1/3🍅 2
Square corners, hairline border
Tomorrow
No priority = transparent left rule
0/2
2

In Progress

Meta row is text-xs, muted
🍅 1
Completed cards dim + strike

Buttons & controls

Buttons — all rounded
Icon buttons — rounded
Chips & pills — rounded-full
ActiveInactiveBadge
Textarea — fully rounded, inline send
↑

Textareas are fully rounded with a round send button inside, bottom-right. Plain text inputs use rounded-lg.