# 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

1. [Landing](./01-landing.webp)
2. [Authentication](./02-auth.webp)
3. [Profile / dashboard](./03-profile.webp)
4. [Create repository](./04-new-repository.webp)
5. [Repository code](./05-repository-code.webp)
6. [Issues / pull requests](./06-work-tracking.webp)
7. [Actions](./07-actions.webp)
8. [Sites](./08-sites.webp)
9. [Transcripts / commit history](./09-transcripts-history.webp)
10. [Settings](./10-settings.webp)
11. [Changelog](./11-changelog.webp)

## 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](./PROMPTS.md) for the generation prompt set.