Kiln

Kiln is for people who sell things they make: a ceramics studio, a small shop, a bakery, a portfolio. It should feel like a good paper bag and a hand-written price tag: warm, plain and sure of itself. The page is clay-colored paper, the ink is a deep brown instead of black, and the one loud color is the terracotta of something just out of the kiln.

• Primary (#963614) is fired terracotta, for the main action and for links in running text.
• Secondary (#2A1D14) is a brown-black ink for secondary buttons and headings.
• Tertiary (#2F4A7A) is denim blue, the one cool note. Use it for a badge such as "New" or "Sold out", never for large areas.
• Neutral (#6B5B4E) sets captions, prices' small print and secondary text.
• Background (#F4ECE1) is clay paper. Surface (#FBF6EE) is a lighter sheet laid on it, for cards and product tiles.
• Success (#2F6B3A) and Error (#B3122D) report state, and always come with a word or an icon.
• Glaze pale (#F2EADC) and Glaze dark (#5A4132) are for one thing: a piece drawn where there is no photograph of it. They are the same in light and dark mode, because a pot does not change color when the page does. Such a piece has a thin outline in the text color, so a pale piece shows on a pale ground and a dark one on a dark ground.

Bricolage Grotesque sets headings. It is a grotesque with uneven, hand-cut shapes, so set it large and tight and let it carry the personality. DM Sans sets body text at 16px. DM Mono sets labels, prices and small print: a price is a figure, and figures line up. Labels are sentence case, never uppercase.

A 12-column grid, 1120px at its widest, with 24px gutters. Product tiles sit three or four to a row and go to two on a phone. Spacing comes from the scale (4, 8, 16, 24, 40, 80): 80px between sections, 24px inside a card. Leave paper showing. A page with one object and a lot of clay around it is doing its job.

Flat, like printed card. A surface is told from the page by its lighter color and a 1px border. Nothing casts a shadow except things that float over the page, which get one short, warm shadow.

Barely rounded, as if cut by hand and sanded once: 2px for badges, 4px for buttons and inputs, 10px for cards and images. No pills, no circles except avatars.

• Buttons: terracotta for the one main action, brown-black for the rest. Mono labels in sentence case.
• Cards: the lighter sheet, 10px corners, 24px padding (16px in a narrow product tile), a 1px border.
• Badges: denim blue, 2px corners, one or two words.
• Prices: mono figures, tabular, with the currency sign close to the number.
• Icons: 1.5px stroke line icons. Never emoji.

• Do let the clay background show: most of a page is paper.
• Do use a terracotta fill once per screen, for the thing you want pressed.
• Do set prices and quantities in the mono font.
• Don't use pure black or pure white. The ink is brown and the paper is clay.
• Don't use gradients, glows or drop shadows on cards.
• Don't introduce a color, size or radius that is not a token above.