Design system gianlucacaico.com →
MenuClose

The standard · 43 tokens

Foundations

The decisions every component inherits. Change one and everything built on it follows.

Colour

Ink and violet carry the brand, coral partners violet in gradients, and the neutrals do the rest.

Brand

  • --ink#0A2540Headings, body text, dark sections
  • --violet#635BFFPrimary accent, buttons
  • --violet-deep#4B44D6Hover, links, eyebrows
  • --violet-washrgba(99,91,255,0.08)Tag backgrounds
  • --coral#EB5D76Gradient partner, flags
  • --amber#FFA659Warm highlight, agentic lane
  • --amber-deep#D9822BWarm accent on light
  • --cyan#0E97AACool accent

Neutrals

  • --paper#FFFFFFPage background
  • --panel#F6F9FCSoft panels
  • --text#0A2540Body text (same as ink)
  • --muted#425466Secondary text
  • --faint#8792A2Meta text
  • --border#E3E8EFLines and card borders

On dark

  • --muted-on-ink#A6B4CCSecondary text on dark
  • --border-on-ink#233A5CBorders on dark

Artwork

  • --cyan-bright#12B5CBCyan inside colour fields and artwork
  • --tint-cyan#3FD3E3Pictogram highlight on dark cards
  • --tint-coral#FF8AA0Pictogram highlight on dark cards
  • --tint-amber#FFB070Pictogram highlight on dark cards

Card art

  • --art-fsFinancial services
  • --art-healthHealth
  • --art-energyEnergy
  • --art-sportSport
  • --art-saasSaaS

Type

Inter throughout, from 400 to 800. Headings are 700 with tight tracking, body copy is 16px with generous line height.

  • Outcome-first, in plain language

    DisplayHero headline, 34 to 58px, 700

  • Thinking on CX and delivery

    Page titlePage headers, 34 to 51px, 700

  • Outcomes I've driven

    Section titleSection heads, 26px, 700

  • Enterprise design system strategy

    Card titleCards and list items, 18px, 700

  • Notes from the work: what holds up and what doesn't.

    LedeIntro paragraphs, 18px, 400, muted

  • Short paragraphs, evidence first, then the point.

    BodyEverything else, 16px, 400, 1.6 line height

  • 15 October 2026 ยท 6 min read

    MetaDates, counts and labels, 13px, 600, faint

Shape

Pills for anything you tap, softer corners as things get bigger. In the kit, every radius scales with one setting.

  • --r-pill999pxButtons, tags, controls
  • --r-xl28pxHero portrait, glass panels
  • --r-lg20pxFeature cards
  • --r-md16pxPanels and groups
  • --r-sm12pxCards inside panels

Material and motion

Liquid glass for anything that floats, and a spring for anything that moves. Tap the control to feel it.

Liquid glassBlur, saturation and a light inner edge
--ease-spring
Things that move: the glass lens, pressed nodescubic-bezier(.34,1.56,.64,1)
--ease-out
Entrances and revealscubic-bezier(.22,1,.36,1)
--dur-fast
Hovers and colour changes.18s
--dur-lens
The sliding glass lens.55s

Layout

One page width, one reading measure and five breakpoints, from wide screens down to phones.

--wide
Page width1120px
--max
Reading measure700px
Under 1000px
Models and panels stack
Under 900px
Two-column grids stack
Under 760px
Desktop nav swaps to the phone tab bar
Under 640px
Cards go single column
Under 520px
Stat grids go single column