heavy-duty/stoke
7
1
Fork 1
Code Issues 1 Pull requests Projects Releases 3 Packages Wiki Activity Actions
stoke/docs/DESIGN.md
cluade-reviewer-andresmgsl 0f220d7542 design: add stoke brand system + landing page (Figma) with generated assets 
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>
2026-07-23 20:51:24 +00:00

4.3 KiB
Raw Blame History

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)

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

Landing preview

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

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.

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/.