Kiln
Design sandbox

Warm Minimal

The visual foundation
for Kiln.

Cream backgrounds, near-black foreground, ember accent, sans-serif throughout. One signature visual move per surface. New components must appear here before they ship into feature code.

Brand mark

#mark
64px
48px
32px
24px
Kiln
Kiln

Palette

#palette

Semantic

bg
surface
surface-elevated
fg
fg-muted
fg-subtle
accent
border

Cream

50
100
200
300
400
500
600
700
800
900

Charcoal

50
100
200
300
400
500
600
700
800
900

Ember

50
100
200
300
400
500
600
700
800
900

Typography

#typography

Display — Inter Tight

Hope Rise is Support

Headings

H1 Display

H2 Display

H3 Display

H4 Heading

H5 Heading

Body — Inter

Lead. Kiln turns your sources into LinkedIn posts and blogs on cadences you set.

Body. The same words, rendered at body size, set in Inter at roughly 1rem with comfortable line height. Generous whitespace, disciplined hierarchy.

Small / muted. Used for metadata, captions, secondary information.

Caption. The smallest sensible size; use sparingly.

const result = await generate('LinkedIn post');

Buttons

#buttons

Variants

Sizes

States

Form primitives

#forms

New source

Form primitives. Cream surface, focus rings on accent, generous spacing.

Cards

#cards

Personal blog

3 documents, last refreshed 2h ago

Website Ready

kiln

main branch · 312 files indexed

RepoRefreshing

On the kiln launch

Drafted from 4 sources · ready for review

One contrast card per surface. This is the BizLink-style move. Use it once.

Badges

#badges
DefaultAccentOutline Ready Pending review Failed

Alerts

#alerts

Empty states

#empty

No drafts yet

Drafts will land here when your cadences fire. Until then, add a source and capture your brand voice.

Topic queue is empty

Add topics manually, or let Kiln suggest them from changes in your sources.

Loading

#loading