design: stoke brand system, without the 23MB of binaries
Replaces #12, which committed every generated render into the repo. Rebuilt on a clean branch because merging the original would have written those blobs into main's history permanently, even with a later commit deleting them. What changed from #12: - Keeps docs/DESIGN.md and assets/logo-mark.svg (1.4 kB of vector text). - Drops ~23 MB of PNG/MP4. They live in the Figma file, which was already the source of truth and is linked from the doc. stoke's .git is ~23 MB; those assets would have doubled it, forever. - Adds the missing "files" whitelist to package.json. There wasn't one, so npm pack shipped the whole working directory: measured 23.7 MB with the assets, and it was already shipping the test suite without them. Now 26.7 kB across 7 files. The packaging bug is pre-existing and independent of the design work; the oversized PR is just what made it visible. 61/61 tests pass; `stoke --version` → 1.3.0.
This commit is contained in:
parent
f4b0bdbe4e
commit
f5a44021da
3 changed files with 150 additions and 1 deletions
28
assets/logo-mark.svg
Normal file
28
assets/logo-mark.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Mark">
|
||||||
|
<g clip-path="url(#clip0_0_4)">
|
||||||
|
<rect width="120" height="120" rx="28" fill="#0C0A09"/>
|
||||||
|
<g id="Ellipse" filter="url(#filter0_f_0_4)">
|
||||||
|
<circle cx="60" cy="85" r="75" fill="#FF6A2C" fill-opacity="0.35"/>
|
||||||
|
</g>
|
||||||
|
<path id="spark" d="M60 22L68.061 51.939L98 60L68.061 68.061L60 98L51.939 68.061L22 60L51.939 51.939L60 22Z" fill="url(#paint0_linear_0_4)"/>
|
||||||
|
<path id="Star" d="M89 20L91.489 28.511L100 31L91.489 33.489L89 42L86.511 33.489L78 31L86.511 28.511L89 20Z" fill="#FFB347"/>
|
||||||
|
</g>
|
||||||
|
<rect x="0.5" y="0.5" width="119" height="119" rx="27.5" stroke="#3A2A1E"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_f_0_4" x="-55" y="-30" width="230" height="230" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_0_4"/>
|
||||||
|
</filter>
|
||||||
|
<linearGradient id="paint0_linear_0_4" x1="60" y1="22" x2="60" y2="98" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FFB347"/>
|
||||||
|
<stop offset="0.5" stop-color="#FF6A2C"/>
|
||||||
|
<stop offset="1" stop-color="#E2452B"/>
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_0_4">
|
||||||
|
<rect width="120" height="120" rx="28" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
114
docs/DESIGN.md
Normal file
114
docs/DESIGN.md
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
# 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 |
|
||||||
|
|
||||||
|
> Renders live in the [Figma file](https://www.figma.com/design/q6bYh7pRChTbg0diKAVrcS/stoke-Brand-Landing) — see "Why the raster assets are not committed here" below.
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
| Asset | Where it lives |
|
||||||
|
| --- | --- |
|
||||||
|
| `assets/logo-mark.svg` | **In this repo** — ember spark logo mark, vector, 1.4 kB |
|
||||||
|
| Hero backdrop · 2048×878 21:9 — glowing coals, hot steel, sparks | Figma, page 04 |
|
||||||
|
| Operator's hand stoking coals · 3:2 (philosophy section) | Figma, page 04 |
|
||||||
|
| Molten ember bed · 21:9 (CTA / section backdrops) | Figma, page 04 |
|
||||||
|
| 5s ambient ember loop (motion) | Figma, page 04 |
|
||||||
|
| Desktop landing render · brand system render | Figma, pages 02 / 01 |
|
||||||
|
|
||||||
|
### Why the raster assets are not committed here
|
||||||
|
|
||||||
|
The first version of this change committed all of them — **23 MB of PNG and MP4
|
||||||
|
into a CLI repo.** That was a mistake, and it was mine. Two concrete costs:
|
||||||
|
|
||||||
|
- `stoke`'s `.git` is ~23 MB; the assets would have **doubled it**, permanently.
|
||||||
|
Git history is forever, so a marketing render committed today is still being
|
||||||
|
cloned by every contributor in five years.
|
||||||
|
- `package.json` had no `files` whitelist, so `npm pack` shipped the working
|
||||||
|
directory. Measured: **the tarball went from ~100 kB to 23.7 MB** — a 200×
|
||||||
|
bloat delivered to every user of a command-line tool, for images none of them
|
||||||
|
will ever look at.
|
||||||
|
|
||||||
|
Binaries that exist to be *looked at* belong where people look at them: the Figma
|
||||||
|
file, which is linked at the top and is the source of truth anyway. The vector
|
||||||
|
logo stays because it is 1.4 kB of text, diffs cleanly, and is the one asset the
|
||||||
|
project itself might need to render.
|
||||||
|
|
||||||
|
This change also adds the missing `files` whitelist to `package.json`, so the
|
||||||
|
published tarball now contains only `src/` and the docs a user needs — a
|
||||||
|
pre-existing packaging bug that shipping the test suite had been hiding.
|
||||||
|
|
||||||
|
## 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, one vector
|
||||||
|
asset, and a packaging fix.
|
||||||
|
|
@ -28,5 +28,12 @@
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"stoke": "src/cli.js"
|
"stoke": "src/cli.js"
|
||||||
}
|
},
|
||||||
|
"files": [
|
||||||
|
"src/",
|
||||||
|
"README.md",
|
||||||
|
"LICENSE",
|
||||||
|
"docs/DESIGN.md",
|
||||||
|
"assets/logo-mark.svg"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue