forked from heavy-duty/stoke
cluade-reviewer-andresmgsl
0f220d7542
Adds a design record under docs/ and generated media under assets/ — no CLI
changes. Brand identity ("ember on anthracite") and a full desktop + mobile
landing page were built in Figma, grounded in the actual command surface:
auth, repo, issue, pr, branch, org/team, user.
- docs/DESIGN.md — Figma link, palette, type, page structure, asset inventory
- assets/ — hero/operator/texture stills + 5s ember loop (Artlist), logo mark
(SVG), and full-page preview renders
Figma: https://www.figma.com/design/q6bYh7pRChTbg0diKAVrcS/stoke-Brand-Landing
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
92 lines
4.3 KiB
Markdown
92 lines
4.3 KiB
Markdown
# stoke — Brand & Landing Design
|
||
|
||
> _The operator's hand on the forge._
|
||
|
||
A complete brand identity and marketing landing page for **stoke**, the CLI for the
|
||
Heavy Duty Forgejo forge. Designed from the codebase itself — every command group,
|
||
install path, and principle on the page maps to something the tool actually does.
|
||
|
||
## 🔗 Figma
|
||
|
||
**[stoke — Brand & Landing (Figma)](https://www.figma.com/design/q6bYh7pRChTbg0diKAVrcS/stoke-Brand-Landing)**
|
||
|
||
The file has four pages:
|
||
|
||
| Page | Contents |
|
||
| --- | --- |
|
||
| `01 · Brand System` | Logo lockup + ember spark mark, 14-token color palette, type scale, voice & principles |
|
||
| `02 · Landing — Desktop` | Full 1440px landing: nav, hero, ecosystem strip, command showcase, philosophy split, install, CTA, footer |
|
||
| `03 · Landing — Mobile` | 390px responsive landing |
|
||
| `04 · Assets & Components` | Command-group icon set (24px line) + generated-asset gallery |
|
||
|
||
|
||
|
||
## Concept
|
||
|
||
`stoke` is named after the act of feeding and tending a fire. The identity takes that
|
||
literally: a working **forge** — controlled heat, hot steel, precision — rendered as
|
||
hot ember on near-black anthracite. Industrial craft meets modern dev tool. The product
|
||
principle from the README ("every real operation performed against Forgejo becomes a new
|
||
CLI command") is the spine of the page.
|
||
|
||
### Color — ember on anthracite
|
||
|
||
| Token | Hex | Use |
|
||
| --- | --- | --- |
|
||
| `bg/base` | `#0C0A09` | Anthracite canvas |
|
||
| `bg/raised` | `#1A1614` | Raised surfaces |
|
||
| `bg/inset` | `#14100E` | Wells / code blocks |
|
||
| `border/subtle` | `#2A2320` | Hairlines |
|
||
| `border/ember` | `#3A2A1E` | Warm edges |
|
||
| `ember/red` | `#E2452B` | Deep heat |
|
||
| `ember/orange` | `#FF6A2C` | **Primary** · CTAs |
|
||
| `ember/amber` | `#FFB347` | Bright heat · command text |
|
||
| `hot/white` | `#FFF3E6` | White-hot highlight |
|
||
| `steel/blue` | `#3B6EA5` | Quench accent · links / URLs |
|
||
| `text/primary` | `#F5EDE6` | Primary text |
|
||
| `text/secondary` | `#A89A8E` | Secondary text |
|
||
| `text/muted` | `#6B5F56` | Meta / muted |
|
||
| `text/onEmber` | `#1A0E06` | Text on ember fills |
|
||
|
||
### Type
|
||
|
||
- **Archivo** (Black / SemiBold) — geometric-industrial display & headings, tight tracking
|
||
- **Inter** (Regular / Medium) — body copy
|
||
- **JetBrains Mono** — everything command-flavored (it's a CLI): prompts, flags, install snippets
|
||
|
||
### Logo
|
||
|
||
An **ember spark** mark — a four-point spark that reads as both a flame and a striker
|
||
feeding the forge — set over a warm glow, locked up with a heavy lowercase `stoke`
|
||
wordmark. Vector source in [`assets/logo-mark.svg`](../assets/logo-mark.svg).
|
||
|
||
## Page structure (desktop)
|
||
|
||
1. **Nav** — logo, section links, `Get started`
|
||
2. **Hero** — forge backdrop, `Every operation becomes a command.`, copy-able `apt-get install stoke`, CTAs
|
||
3. **Ecosystem strip** — the six repos the forge manages: `box · rig · cast · infra · handbook · incubator`
|
||
4. **Command showcase** — a live, syntax-colored `stoke` terminal session + cards for all 7 command groups (auth, repo, pr, issue, branch, org, user) with real example commands and command counts
|
||
5. **Philosophy split** — "Built for the hand on the forge" with the operator image + feature checklist (apt-native, 0600 tokens, batch import, dogfooded)
|
||
6. **Install** — apt (recommended) and from-source code cards, with the Node ≥ 22.12 note
|
||
7. **CTA band** — `Feed the forge.` over ember texture
|
||
8. **Footer** — logo, link columns, forge URL, version
|
||
|
||
## Assets
|
||
|
||
All imagery generated with **Artlist** (Seedream 5.0 Pro for stills, Kling 1.6 for the
|
||
ambient loop) and embedded in the Figma file.
|
||
|
||
| File | What |
|
||
| --- | --- |
|
||
| `assets/hero-forge.png` | 2048×878 · 21:9 hero backdrop — glowing coals, hot steel, sparks |
|
||
| `assets/operator-hand.png` | 3:2 — a hand stoking coals (philosophy section) |
|
||
| `assets/ember-texture.png` | 21:9 — molten ember bed (CTA / section backdrops) |
|
||
| `assets/ember-loop.mp4` | 5s ambient ember loop (bonus motion asset) |
|
||
| `assets/logo-mark.svg` | Ember spark logo mark (vector) |
|
||
| `assets/preview-landing.png` | Full desktop landing render |
|
||
| `assets/preview-brand.png` | Brand system page render |
|
||
|
||
## Notes
|
||
|
||
- This PR was opened with `stoke pr create` — the tool designing its own storefront.
|
||
- Nothing here changes the CLI; it adds a `docs/` design record + `assets/`.
|