Terracotta

Sun-baked clay, ink, and weathered paper.

Serifserifterracottadesign-md

Terracotta

FeaturesDocsPricingBlog

Real product preview

Build with Terracotta

Sun-baked clay, ink, and weathered paper.

Fast integration

Purpose-built components that reflect this brand language in every interaction.

Built for scale

Purpose-built components that reflect this brand language in every interaction.

Obsessed with quality

Purpose-built components that reflect this brand language in every interaction.

99.99%

Uptime

4.8M

Monthly users

147ms

Median response

24/7

Support

Get early access

DESIGN.md

---
version: alpha
name: Terracotta
description: Sun-baked clay, ink, and weathered paper.
colors:
  primary: "#2B1D14"
  secondary: "#8B6F5B"
  tertiary: "#C56A3C"
  neutral: "#F3E8D8"
  surface: "#FBF4E7"
  on-primary: "#FBF4E7"
typography:
  display:
    fontFamily: DM Serif Display
    fontSize: 4.5rem
    fontWeight: 400
    letterSpacing: "-0.015em"
  h1:
    fontFamily: DM Serif Display
    fontSize: 2.75rem
    fontWeight: 400
  body:
    fontFamily: DM Sans
    fontSize: 1.05rem
    lineHeight: 1.7
  label:
    fontFamily: DM Sans
    fontSize: 0.75rem
    letterSpacing: "0.1em"
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 24px
---
## Overview

A slow, sun-drenched palette for long-form reading. Cream background, ink headlines, and terracotta for emphasis.

## Colors

The palette is built around high-contrast neutrals and a single accent that drives interaction.

- **Primary (`#2B1D14`):** Headlines and core text.
- **Secondary (`#8B6F5B`):** Borders, captions, and metadata.
- **Tertiary (`#C56A3C`):** The sole driver for interaction. Reserve it.
- **Neutral (`#F3E8D8`):** The page foundation.

## Typography

- **display:** DM Serif Display 4.5rem
- **h1:** DM Serif Display 2.75rem
- **body:** DM Sans 1.05rem
- **label:** DM Sans 0.75rem

## Do's and Don'ts

- **Do** use Tertiary for exactly one action per screen.
- **Do** let Neutral carry the composition — negative space is a feature.
- **Don't** introduce gradients. This system is flat on purpose.
- **Don't** mix Tertiary with alternate accents; the single-accent rule is load-bearing.

Resources · Serif

53 markdown files

Atelier Noir

/design-mds/serif/atelier-noir/design.md

Barbershop Pole

/design-mds/serif/barbershop-pole/design.md

Board Game Tavern

/design-mds/serif/board-game-tavern/design.md

Botanical

/design-mds/serif/botanical/design.md

Botanical Apothecary

/design-mds/serif/botanical-apothecary/design.md

Broadsheet 01

/design-mds/serif/broadsheet-01/design.md

Campaign Rally

/design-mds/serif/campaign-rally/design.md

Campus Collegiate

/design-mds/serif/campus-collegiate/design.md

Ceramics Kiln

/design-mds/serif/ceramics-kiln/design.md

Chapel Stained

/design-mds/serif/chapel-stained/design.md

Civic Register

/design-mds/serif/civic-register/design.md

Classroom Paper

/design-mds/serif/classroom-paper/design.md

Criterion Letterbox

/design-mds/serif/criterion-letterbox/design.md

Desert Rose

/design-mds/serif/desert-rose/design.md

Dungeon Crawl

/design-mds/serif/dungeon-crawl/design.md

Farmers Market

/design-mds/serif/farmers-market/design.md

Field Notes

/design-mds/serif/field-notes/design.md

Florist Bouquet

/design-mds/serif/florist-bouquet/design.md

Forest Floor

/design-mds/serif/forest-floor/design.md

Gallery Avant

/design-mds/serif/gallery-avant/design.md

Gallery White

/design-mds/serif/gallery-white/design.md

Heritage

/design-mds/serif/heritage/design.md

Horology Chronograph

/design-mds/serif/horology-chronograph/design.md

Hotel Riviera

/design-mds/serif/hotel-riviera/design.md

Jazz Club

/design-mds/serif/jazz-club/design.md

Law Chambers

/design-mds/serif/law-chambers/design.md

Linen

/design-mds/serif/linen/design.md

Luxe Commerce

/design-mds/serif/luxe-commerce/design.md

Magazine Rouge

/design-mds/serif/magazine-rouge/design.md

Meditation Zen

/design-mds/serif/meditation-zen/design.md

Museum Plaque

/design-mds/serif/museum-plaque/design.md

National Park

/design-mds/serif/national-park/design.md

Newsletter Sunday

/design-mds/serif/newsletter-sunday/design.md

Observatory

/design-mds/serif/observatory/design.md

Old Money

/design-mds/serif/old-money/design.md

Paper White

/design-mds/serif/paper-white/design.md

Podcast Studio

/design-mds/serif/podcast-studio/design.md

Poker Felt

/design-mds/serif/poker-felt/design.md

Portfolio Studio

/design-mds/serif/portfolio-studio/design.md

Realty Open House

/design-mds/serif/realty-open-house/design.md

Record Sleeve

/design-mds/serif/record-sleeve/design.md

Science Journal

/design-mds/serif/science-journal/design.md

Spa Onsen

/design-mds/serif/spa-onsen/design.md

Speakeasy

/design-mds/serif/speakeasy/design.md

Storybook Paper

/design-mds/serif/storybook-paper/design.md

Tarot Deck

/design-mds/serif/tarot-deck/design.md

Tea House

/design-mds/serif/tea-house/design.md

Terracotta

/design-mds/serif/terracotta/design.md

Theatre Playbill

/design-mds/serif/theatre-playbill/design.md

Wealth Noir

/design-mds/serif/wealth-noir/design.md

Whisky Peat

/design-mds/serif/whisky-peat/design.md

Wine Country

/design-mds/serif/wine-country/design.md

Yacht Club

/design-mds/serif/yacht-club/design.md

More Designs

View all →

Serif

Atelier Noir / UI

FoundationsComponents

Preview

Atelier Noir

Serif

Fashion-week black, silk ivory, thin everything.

serif

Serif

Barbershop Pole / UI

FoundationsComponents

Preview

Barbershop Pole

Serif

Classic barbershop: stripe red, ivory lather, nickel.

serif

Serif

Tavern Tabletop / UI

FoundationsComponents

Preview

Tavern Tabletop

Serif

Tabletop tavern: parchment map, wax-seal red, inked routes.

serif

Serif

Botanical / UI

FoundationsComponents

Preview

Botanical

Serif

Pressed leaves, tea-stained paper, a copper ink.

serif

Serif

Botanical Apothecary / UI

FoundationsComponents

Preview

Botanical Apothecary

Serif

Herb apothecary: amber bottle, linen label, eucalyptus.

serif

Serif

Broadsheet 01 / UI

FoundationsComponents

Preview

Broadsheet 01

Serif

Newsprint ink, column rules, masthead gravitas.

serif