DocsDesign and customizationSmolForge clay workshop UI

Opening the page…

SmolForge clay workshop UI#

Concept package for applying the cute isometric clay SmolForge identity across the product's top-level screens.

Design thesis#

Mythic workshop at identity, orientation, onboarding, and empty states; precision tooling everywhere work happens.

The clay world explains product concepts:

Product concept	Workshop object
SmolForge / repositories	Smolnir hammer and rune chest
Agent transcripts	Raven carrying a sealed scroll
Actions	Thunder drums
Sites / deploys	Longship carrying a repository parcel
Issues	Cracked stone being shaped
Pull requests	Interlocking forged rings
Success / releases	Tiny goat, used sparingly

Clay objects are not replacements for functional icons. File trees, tables, forms, diffs, logs, timestamps, hashes, switches, and small actions should use crisp conventional UI and line icons.

Palette#

Token	Value	Purpose
Canvas	`#E6EFF2`	Pale icy mineral backdrop
Surface	`#FCF9F1`	Chalk content panels
Surface raised	`#E7DDC8`	Oat clay controls and cards
Ink	`#1D252B`	Primary soot text
Muted	`#667078`	Secondary text
Primary	`#40566F`	Fjord blue controls
Primary dark	`#263849`	App bar and deep surfaces
Brand accent	`#C96B43`	Terracotta primary actions
Positive	`#758B59`	Success and open states
Warning	`#C49A4B`	Queued and warning states
Danger	`#A94338`	Failure and destructive states

Terracotta is a brand/action color, not an error color. Status semantics stay conventional.

Typography#

Display: sturdy, slightly condensed grotesk with a hand-built feeling.
UI: quiet humanist sans with excellent small-size legibility.
Technical: compact monospace, used only for code, paths, logs, and hashes.

Surface rules#

Use 14–18 px radii for large cards and 8–12 px for controls.
Give cards a subtle darkened clay rim and short soft shadow.
Use filled or inset active tabs, not thin colored underlines.
Keep one signature clay object per task-heavy screen.
Keep the full workshop tableau for marketing and onboarding only.
Keep small functional icons flat and conventional.
Do not use gradients, neon, glass, glowing lines, circuit motifs, decorative node graphs, thin colored side rails, or arbitrary historical runes.

Mockups#

Important critique before implementation#

These are visual-direction mockups, not route-accurate specifications. Image generation occasionally introduced GitHub-like global navigation or small copy differences. Implementation should preserve the real SmolForge route structure and exact repository tab set:

Code · Issues · Pull Requests · Actions · Sites · Transcripts · Branches · Settings

The repository Code, Actions, Sites, Transcripts, and Settings screens are the strongest system references. The landing illustration is the strongest brand reference. The Issues screen's layout and object language are useful, but its header information architecture should not be copied literally.

See PROMPTS.md for the generation prompt set.

Design thesis#

Mythic workshop at identity, orientation, onboarding, and empty states; precision tooling everywhere work happens.

The clay world explains product concepts:

Product concept

Workshop object

SmolForge / repositories

Smolnir hammer and rune chest

Agent transcripts

Raven carrying a sealed scroll

Actions

Thunder drums

Sites / deploys

Longship carrying a repository parcel

Issues

Cracked stone being shaped

Pull requests

Interlocking forged rings

Success / releases

Tiny goat, used sparingly

Clay objects are not replacements for functional icons. File trees, tables, forms, diffs, logs, timestamps, hashes, switches, and small actions should use crisp conventional UI and line icons.

Palette#

Token

Value

Purpose

Canvas

#E6EFF2

Pale icy mineral backdrop

Surface

#FCF9F1

Chalk content panels

Surface raised

#E7DDC8

Oat clay controls and cards

Ink

#1D252B

Primary soot text

Muted

#667078

Secondary text

Primary

#40566F

Fjord blue controls

Primary dark

#263849

App bar and deep surfaces

Brand accent

#C96B43

Terracotta primary actions

Positive

#758B59

Success and open states

Warning

#C49A4B

Queued and warning states

Danger

#A94338

Failure and destructive states

Terracotta is a brand/action color, not an error color. Status semantics stay conventional.

Surface rules#

Use 14–18 px radii for large cards and 8–12 px for controls.

Give cards a subtle darkened clay rim and short soft shadow.

Use filled or inset active tabs, not thin colored underlines.

Keep one signature clay object per task-heavy screen.

Keep the full workshop tableau for marketing and onboarding only.

Keep small functional icons flat and conventional.

Do not use gradients, neon, glass, glowing lines, circuit motifs, decorative node graphs, thin colored side rails, or arbitrary historical runes.

Important critique before implementation#

Code · Issues · Pull Requests · Actions · Sites · Transcripts · Branches · Settings

See PROMPTS.md for the generation prompt set.