Terracotta
StyleKit→
mediterranean craft

Terracotta

Warm earth tones, handcrafted roundedness, and sun-baked glow. A design language rooted in Mediterranean clay — where every element feels shaped by human hands.

Components

Clay-formed Elements

Each component shaped with warm earth principles — tactile, grounded, never cold.

All buttons: active:translate-y-[2px] clay press · warm rgba shadows · minimum rounded-lg

Earth Palette

Five Earth Tones

Every hue drawn from the Mediterranean landscape — nothing synthetic, nothing cold.

Terracotta
#b5654a

Sun-baked clay fired in an open kiln — the warmth at the heart of every Mediterranean vessel.

Cream
#faf5ef

Whitewashed limestone walls dried under the Aegean sun — the breath between warm hues.

Sand
#d4a373

Fine coastal sand carried by the sirocco, layering gentle warmth across every surface.

Earth
#7a6350

Rich soil from ancient olive groves, grounding the palette with centuries of depth.

Olive
#8b9d77

Silver-green leaves of the olive tree catching morning light — life growing from earth.

State Metaphor

The Pottery Workshop

Every UI interaction follows the life of a clay vessel — from raw earth to glazed completion. Map your component states to the kiln.

○
Input State

Raw Clay

Unformed earth pulled from the ground. Full of potential, awaiting the potter's hands to give it shape and intention.

placeholder state · no interaction yet

◑
Focused State

Shaped Vessel

Clay centered on the wheel, walls rising with each careful revolution. The form begins to breathe.

focus ring · olive green outline active

●
Active State

Fire-Baked

Set deep inside the kiln at peak heat. The clay transforms — hardening, the color deepening with every degree.

pressed · scale-down · clay press active

✦
Complete State

Glazed Pottery

Lifted from the kiln: glazed, sealed, whole. A finished vessel ready to hold warmth — oil, wine, memory.

success state · olive seal complete

Decorative Language

Mediterranean Motifs

Botanical and geometric patterns drawn from the terracotta palette. Use these as decorative tile compositions and background accents.

Olive Branch

Life and abundance — the evergreen symbol of Mediterranean craft.

Sun Disc

The drying sun above the kiln that transforms clay into enduring form.

Sea Arc

The curved shoreline where craftspeople gather the finest coastal clay.

Vessel Ring

Concentric circles of the potter's wheel — motion frozen into geometry.

Terracotta spectrum — warm-to-warm only, no cold hues permitted

Design Principles

Rules of the Kiln

What fires true terracotta — and what breaks it.

Do
  • Use warm earth tones exclusively — terracotta, cream, sand, earth, olive only.
  • Minimum rounded-lg on every element — organic handcrafted forms, never sharp.
  • Warm tinted shadows: rgba(181,101,74,*) for depth that feels sun-baked.
  • Focus states use olive green #8b9d77 — grounded, natural, never cold blue.
  • Active/press states use translate-y-[2px] clay press — downward, not bounce.
  • Transitions at duration-300 ease-out — unhurried, handcrafted slowness.
  • Cards lift with hover:-translate-y-1 — gentle rise, like picking up a vessel.
Don't
  • Never use any cold color — no blue, purple, cyan, or grey-blue tones at all.
  • Never use sharp corners — zero rounded-none or rounded-sm, no exceptions.
  • Never use cold box shadows with default rgba(0,0,0,*) grey tones.
  • Never use bounce or spring animations — clay moves with deliberate weight.
  • Never use focus rings in the default blue — always override with olive green.
  • Never mix high saturation neon accents into the warm palette.
  • Never use monospace fonts — this palette speaks in warm, humanist strokes.
Ceramic Pieces

The Collection

Six vessel archetypes from the Mediterranean tradition. Each shaped for a distinct purpose, each bearing the warmth of the kiln.

Storage

Amphora Series

Double-handled vessels for olive oil and wine — the original Mediterranean storage system.

mediterranean · handcraft→
Serving

Kalathos Bowls

Wide, open bowls shaped for communal meals around the courtyard table at dusk.

mediterranean · handcraft→
Ritual

Lekythos Flask

Slender oil vessels carried for sacred offerings — form shaped entirely by purpose.

mediterranean · handcraft→
Cellar

Pithos Jars

Large storage jars buried in earthen floors, keeping grain cool through summer heat.

mediterranean · handcraft→
Personal

Pyxis Vessels

Small lidded boxes for pigments, kohl, and precious oils — intimate daily ritual.

mediterranean · handcraft→
Ceremony

Krater Mixing

Large open bowls for mixing wine and water at the symposium — the heart of gathering.

mediterranean · handcraft→
Type Scale

Warm Typography

Humanist strokes at every scale. Generous line heights, warm color fills — always legible against cream.

Display / Hero
Terra
Section Title
Handcrafted Forms
Card Title
Kiln-fired Vessels
Lead Copy
Warm earth tones drawn from the Mediterranean coast.
Body Text
Every hue pulled from sun-baked clay, olive groves, and coastal sand. Nothing synthetic, nothing cold.
Label / Tag
MEDITERRANEAN CRAFT · EST. 500 BCE
Form Language

Roundedness Scale

The minimum is rounded-lg. Sharp corners belong to cold, industrial systems — not this kiln.

0.5rem
rounded-lg
0.75rem
rounded-xl
1rem
rounded-2xl
1.5rem
rounded-3xl
9999px
rounded-full

Shadow Scale

Subtle
0 2px 8px rgba(181,101,74,0.08)
Input fields, inline tags
Card
0 6px 16px rgba(181,101,74,0.12)
Default cards, panels
Lifted
0 12px 28px rgba(181,101,74,0.18)
Hover state, modals
Terracotta

A warm earth design system rooted in Mediterranean clay craftsmanship. Part of the StyleKit collection.

© 2024 StyleKit · Terracotta Design System

Shaped by hand · Fired with warmth · Never cold