Design tokens

Generated from packages/tokens, which is extracted from design/_style.css v3. This page exists to prove the tokens render and to make invariant violations visible. Phase 1 replaces it with the real templates.

Palette

Reference swatches, not a layout. Restricted colours carry their use policy in the token so the content lint can enforce it.

ink
#131C33
ink-800
#1B2749
ink-700
#243356
charcoal
#1F2839
wgray
#5F6B7E
line
#E3E9F2
card
#FFFFFF
offwhite
#F7F9FC
brand
#1274B4
brand-700
#0E5E93
blue-100
#EEF3FA
sky
#F4F7FC
teal
#2AA79B
teal-100
#E8F5F3
amber
#F0A62F
cta-only
amber-600
#DC9418
cta-only
amber-ink
#3D2B00
cta-only
wa
#25D366
whatsapp-only
wa-700
#1DA851
whatsapp-only
green
#2E9E4F
verification-only
green-100
#EFF8F1
verification-only
tp
#00B67A
trustpilot-badge-only

Type scale

3xlCompare verified clinics abroad38px
2xlCompare verified clinics abroad29px
xlCompare verified clinics abroad27px
lgCompare verified clinics abroad19px
baseCompare verified clinics abroad16px
smCompare verified clinics abroad14.5px
xsCompare verified clinics abroad13.5px
2xsCompare verified clinics abroad12.5px
3xsCompare verified clinics abroad11px

Components

Plain React and Tailwind, no Next.js imports, enforced by lint. Exactly one amber action below, per invariant 1.

Match me with a clinic
9.4FlymediScorefrom €2,300All-inclusive packageVerified clinicUltrasonicLast updated in July 2026888 clinic reviews

Radius, shadow, layout

radius sm
radius card
radius button
radius pill
shadow card
shadow lg
shadow float
maxWidth
1200px
gutter
24px
headerHeight
66px
anchorOffset
78px
stickyTop
86px

Contracts

Breakpoints

Min-width, mobile first. Designed and verified at 390 first.

  • xs: 600px
  • sm: 700px
  • md: 960px

Page classes

Quiet pages get one conversion moment and none of the persistent furniture.

  • money: sticky true, float true, mobile bar true, moments multiple
  • quiet: sticky false, float false, mobile bar false, moments one

WhatsApp off renders body.wa-off on the server and the surfaces are absent from the HTML.

Restricted colours

  • amber (cta-only) Exactly one amber element per viewport (CLAUDE.md invariant 1). Never a second CTA, never decoration.
  • amber-600 (cta-only) Hover state of the primary CTA.
  • amber-ink (cta-only) The only approved text colour on amber; plain ink fails contrast.
  • wa (whatsapp-only) WhatsApp brand green. Any other use breaks invariant 1.
  • wa-700 (whatsapp-only) Hover state of WhatsApp actions.
  • green (verification-only) Verification ticks and success states only.
  • green-100 (verification-only) Background for verification chips and the in-listing WhatsApp module.
  • tp (trustpilot-badge-only) Trustpilot green may only appear inside the official badge/widget.