Pristine White Blue template

← Templates

Pristine White Blue

light

Premium consumer minimalism. Vast white space, cinematic imagery, one blue.

minimalpremiumlightconsumergeometric

━━ Use this template

━━ Live preview

━━ Name

Pristine White Blue

pure white space, vivid blue actions, soft gray cards, crisp neutral sans

━━ Colors

11 tokens
primary
#0071e3
on-primary
#ffffff
primary-hover
#0077ed
surface
#ffffff
surface-1
#f5f5f7
surface-2
#fbfbfd
on-surface
#1d1d1f
neutral
#86868b
border
#d2d2d7
success
#34c759
error
#ff3b30

━━ Typography

5 tokens
display-2xlInter · 5rem · 600
The quick brown fox jumps
display-lgInter · 3rem · 600
The quick brown fox jumps
headline-mdInter · 1.5rem · 600
The quick brown fox jumps
body-mdInter · 1.0625rem · 400
The quick brown fox jumps
captionInter · 0.875rem · 400
The quick brown fox jumps

━━ Rounded

6 tokens
none
0
sm
8px
md
12px
lg
18px
xl
24px
full
9999px

━━ Spacing

7 tokens
1
4px
2
8px
4
16px
6
24px
8
32px
12
48px
20
80px

━━ Components

4 tokens
button-primary
backgroundColor:{colors.primary}→ #0071e3
textColor:{colors.on-primary}→ #ffffff
rounded:{rounded.full}→ 9999px
padding:12px 24px
button-primary-hover
backgroundColor:{colors.primary-hover}→ #0077ed
textColor:{colors.on-primary}→ #ffffff
button-secondary
backgroundColor:transparent
textColor:{colors.primary}→ #0071e3
rounded:{rounded.full}→ 9999px
padding:12px 24px
card
backgroundColor:{colors.surface-1}→ #f5f5f7
rounded:{rounded.lg}→ 18px
padding:24px

━━ Raw DESIGN.md

━━ Lint

081
  • contrast-ratio

    Component `button-primary-hover` has contrast ratio 4.32:1 (background #0077ed / text #ffffff). WCAG AA requires 4.5:1.

  • orphaned-tokens

    Color token `colors.surface` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.surface-2` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.on-surface` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.neutral` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.border` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.success` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.error` is defined but never referenced.

  • token-summary

    Tokens: 11 colors · 5 typography · 6 rounded · 7 spacing · 4 components