Grid & Layout.

Base 4, rhythm 8. Container 1280. Five breakpoints. Radii differentiate by role. images sharp, cards modest, CTAs rounded, pills full. Shadows are hand-tuned, used sparingly.

04.1

Base unit

4 px

Atomic unit. Every spacing value is a multiple of 4.

8 px

Primary rhythm. Gaps, card padding.

04.2

Spacing scale

1
4 px
2
8 px
3
12 px
4
16 px
5
20 px
6
24 px
8
32 px
10
40 px
12
48 px
16
64 px
24
96 px
32
128 px

04.3

Containers

Marketing1280 pxmax-w-[1280px]

Product (jobs)1280 pxmax-w-[1280px]

Hero heading920 pxmax-w-[920px]

Hero subhead640 pxmax-w-[640px]

Form / narrow720 pxmax-w-[720px]

Prose (blog / docs)~65ch pxmax-w-[65ch]

04.4

Breakpoints

Tailwind v4 defaults, un-overridden.

sm≥ 640 px

md≥ 768 px

lg≥ 1024 px

xl≥ 1280 px

2xl≥ 1536 px

04.5

Vertical rhythm

Section padding by context.

Marketing heropy-20 md:py-24

Marketing contentpy-16 md:py-20

Product listing bodypy-10

Product detail mainpy-12

Tight form containerpy-8

04.6

Radius

Radius scales with role. Not uniform. images sharp, cards modest, CTAs rounded, pills full.

image2 px

Country chips, small images, outlined-blue button--radius-image

checkbox3 px

Checkbox shape(custom)

card-tight4 px

JobCard, Apply card, empty state--radius-card-tight

card6 px

Marketing compact cards, inputs, dropdowns--radius-card

input6 px

Form inputs--radius-input

button8 px

Standard action buttons--radius-button

cta10 px

Large hero CTAs(custom)

panel12 px

Process panels, stats containers--radius-panel

pill9999 px

Filter pills, status dots--radius-pill

04.7

Shadows

Used sparingly. Surface contrast (#FFFFFF over #FAFAFA) is the primary separation tool. shadow is the accent.

Whisper (default card)

0 1px 1px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02)

Light shelf

0 1px 2px rgba(0,0,0,0.03)

Card hover lift

0 8px 24px -12px rgba(0,0,0,0.14)

Popover / dropdown

0 10px 30px rgba(0,0,0,0.15)

Hero CTA white-on-dark

0 8px 24px -8px rgba(0,0,0,0.4)

Search over dark

0 10px 40px rgba(0,0,0,0.25)