Terracotta Cream Serif template

← Templates

Terracotta Cream Serif

light

Warm editorial calm. Terracotta accent, cream surface, serif headlines.

lightwarmeditorialaiterracotta

━━ Use this template

━━ Live preview

━━ Name

Terracotta Cream Serif

warm cream surfaces, terracotta accent, charcoal text, classical serif headlines

━━ Colors

14 tokens
primary
#d97757
on-primary
#ffffff
primary-hover
#c66845
primary-soft
#f5e9e0
surface
#faf9f5
surface-1
#f0eee5
surface-2
#e8e5d8
on-surface
#191919
neutral
#646464
neutral-2
#8a8a8a
border
#dcd9cc
success
#5e8a4a
error
#a83232
warning
#b8841e

━━ Typography

6 tokens
display-2xlNewsreader · 5rem · 400
The quick brown fox jumps
display-lgNewsreader · 3rem · 400
The quick brown fox jumps
headline-mdInter · 1.375rem · 500
The quick brown fox jumps
body-mdInter · 1.0625rem · 400
The quick brown fox jumps
body-smInter · 0.9375rem · 400
The quick brown fox jumps
italic-accentSource Serif 4 · — · 400
The quick brown fox jumps

━━ Rounded

6 tokens
none
0
sm
4px
md
8px
lg
12px
xl
20px
full
9999px

━━ Spacing

8 tokens
1
4px
2
8px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px

━━ Components

4 tokens
button-primary
backgroundColor:{colors.primary}→ #d97757
textColor:{colors.on-primary}→ #ffffff
rounded:{rounded.full}→ 9999px
padding:12px 22px
button-primary-hover
backgroundColor:{colors.primary-hover}→ #c66845
textColor:{colors.on-primary}→ #ffffff
button-secondary
backgroundColor:transparent
textColor:{colors.on-surface}→ #191919
rounded:{rounded.full}→ 9999px
padding:12px 22px
card
backgroundColor:{colors.surface-1}→ #f0eee5
rounded:{rounded.lg}→ 12px
padding:32px

━━ Raw DESIGN.md

━━ Lint

0111
  • contrast-ratio

    Component `button-primary` has contrast ratio 3.12:1 (background #d97757 / text #ffffff). WCAG AA requires 4.5:1.

  • contrast-ratio

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

  • orphaned-tokens

    Color token `colors.primary-soft` is defined but never referenced.

  • 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.neutral` is defined but never referenced.

  • orphaned-tokens

    Color token `colors.neutral-2` 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.

  • orphaned-tokens

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

  • token-summary

    Tokens: 14 colors · 6 typography · 6 rounded · 8 spacing · 4 components