Ceramic Studio

A design system shaped by hand, fired by intention

Color Palette

Colors drawn from the kiln: raw terracotta before firing, celadon glaze pooling in carved lines, cobalt oxide brushstrokes, and the quiet grey of wood ash settling on stoneware.

Raw Clay
#C17847
Primary actions, warmth
Bisque
#D49A72
Hover states, highlights
Clay Slip
#E8C4A6
Borders, dividers
Fired Earth
#8B4E2A
Active states, emphasis
Celadon
#8BAE8B
Secondary actions, info
Cobalt Oxide
#2B4B7A
Accent, links, success
Ash Glaze
#9E9A8E
Muted text, subtle UI
Kiln Brick
#9E4A3A
Warnings, destructive
Studio Wall
#F5EDE4
Page background
Workbench
#EDE3D6
Panels, inputs
Stoneware
#6B5B4E
Dark text, anchors
Kiln Interior
#2E2620
Dark cards, contrast

Typography

Three faces, each with a distinct purpose: the elegant serif for display work, the steady text serif for long reading, and a clean sans for interface elements and small labels.

Display — Cormorant Garamond

Shaped by the potter's hand

3rem / 400 weight / 1.2 line-height

Headings

Heading One — Raku Firing

Heading Two — Celadon Glaze

Heading Three — Slip Trailing

Heading Four — Bisque Ware

Cormorant Garamond / 600 weight / 1.3 line-height

Body — Libre Baskerville

Every piece that leaves the kiln carries the memory of its making. The slight wobble of a thrown rim, the way glaze pools in the foot ring, the fingerprints pressed into wet clay — these are not flaws but signatures. In wabi-sabi, beauty lives in imperfection, in the asymmetry of a hand-shaped lip, in the crackle pattern that maps a glaze's cooling journey.

1rem / 400 weight / 1.7 line-height

UI Text — Source Sans 3

Interface labels, captions, and meta information use the clean sans-serif for readability at small sizes. This keeps functional text distinct from editorial content.

0.85rem / 400 weight / 1.5 line-height

Captions & Labels

Cone 10 Reduction • Stoneware • Wood Fired

0.75rem / 600 weight / uppercase / 0.1em tracking

Spacing

A consistent base-8 spacing scale, like the steady rhythm of a potter's wheel. Each increment doubles, building visual hierarchy through measured white space.

xs 4px
sm 8px
md 16px
lg 32px
xl 64px
2xl 96px

Buttons

Each button carries a glaze sheen — a soft highlight that catches light like a finished ceramic piece. Colors map to intent: warm clay for primary action, celadon for secondary paths, cobalt for tertiary, kiln-glow for emphasis.

Standard Sizes

Variants

Forms

Form inputs sit in shallow bowls — inset shadows suggest the concavity of thrown ware. Focus states warm the clay, drawing the eye to the active field.

The name for your pottery piece in the studio catalog.

Cards & Panels

Cards rest on shelves like finished pieces awaiting a buyer. Each carries a glaze band at its crown — a stripe of color that identifies its category, like the colored marks potters leave on kiln shelves.

Celadon Tea Bowl

A quiet vessel with pooling jade-green glaze, crazed surface catching light differently with each turn. Cone 10 reduction.

Stoneware Reduction

Raku Vessel

Pulled from the kiln at peak temperature, plunged into reduction. Copper reds flash across a crackled white surface in unpredictable beauty.

Raku Copper

Cobalt Pitcher

Bold oxide brushwork under a clear glaze. The deep blue bleeds slightly at each stroke edge, a signature of hand-painted work.

Porcelain Oxidation

Wood-Fired Jar

Three days in the anagama. Ash deposits create their own glaze — no two surfaces alike. Natural flame marks trace the fire's path.

Wood Fire Anagama

Slip-Trailed Platter

Liquid clay piped in freehand lines across a leather-hard surface, then dipped in ash glaze. The raised trails catch light and shadow.

Earthenware Slip

Unglazed Sculpture

Raw clay left bare after bisque firing. The body speaks for itself — texture, color, and form without the veil of glaze.

Sculpture Bisque

Alerts

Status messages styled as kiln-side notices. The left border echoes the color-coding potters use to track temperatures and states through a firing schedule.

Bisque Ready Your pieces have completed the bisque firing and are ready for glazing. Handle with care — bisque ware is porous and fragile.
Cone Bending Kiln temperature approaching target. Monitor witness cones through the peephole. Adjust damper for atmosphere control.
Overfire Warning Temperature has exceeded cone 10. Risk of glaze running and shelf damage. Begin crash cooling or adjust fuel immediately.
Glaze Test Passed Test tile shows excellent melt, color development, and food-safe results at cone 6 oxidation. Recipe approved for production.

Navigation

Two navigation patterns: shelf tabs for primary sections (the active tab marked with a warm clay underline) and glaze pills for filtering and secondary choices.

Shelf Tabs

Glaze Pills

Design Principles

This system draws from the ceramic tradition's deepest values: imperfection over precision, warmth over polish, honesty of material over decoration.

01

Embrace Imperfection

Like the wobble in a hand-thrown rim, slight organic irregularity makes interfaces feel human. Use organic radii, subtle texture, and asymmetric whitespace.

02

Truth to Material

Let the clay body show. Surfaces should feel honest — no gratuitous gloss, no fake depth. Shadows reflect real-world light. Colors come from earth and fire.

03

Warmth Over Polish

Choose warm neutrals over sterile greys. Let backgrounds breathe with the warmth of unfired clay. Interfaces should feel like a sunlit studio, not a clean room.

04

Quiet Hierarchy

Like a shelf of pottery, each piece holds its space without shouting. Use scale, weight, and subtle color shifts rather than bold borders and heavy contrast.

05

The Maker's Mark

Every piece should carry evidence of craft. A glaze band, a crackle pattern, a wheel mark — small details that reward close attention and build identity.

06

Fire Transforms

Interactions should feel transformative. Hover states warm. Clicks press into clay. Transitions flow like glaze melting. The kiln is the commit — irreversible and revealing.