design: three icon candidates, a brief, and the Imagine prompt
The icon cannot carry the product's sentence, so it carries the shortest true part: something is beating and you can see it. Three candidates as plain SVG geometry, all rendered through make_icons.py and judged at 32px rather than at full size. A rows (workload table), B tab carrying a pulse, C pulse alone. B is the most specific idea and needs simplifying; A is the clearest and the least distinctive; C wins at 16px but says health monitor, not browser. Signed-off-by: Christian Sass <csass@binaryranch.com>
This commit is contained in:
parent
bb9471442a
commit
2af4a877ec
5 changed files with 68 additions and 0 deletions
BIN
docs/design/candidates.png
Normal file
BIN
docs/design/candidates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
49
docs/design/icon-prompts.md
Normal file
49
docs/design/icon-prompts.md
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
# Vitals icon — brief and Imagine prompt
|
||||||
|
|
||||||
|
## What the mark has to say
|
||||||
|
|
||||||
|
Vitals is a workload map with browser tab accounting. The icon cannot carry that
|
||||||
|
sentence, so it carries the shortest true part: **something is beating, and you
|
||||||
|
can see it.**
|
||||||
|
|
||||||
|
## Constraints
|
||||||
|
|
||||||
|
- 16px is the real test. Everything below that size detail is decoration.
|
||||||
|
- Two colors from the Binary Ranch palette: ink `#0a0a0a`, paper `#f0ede8`,
|
||||||
|
accent rust `#d4623a`.
|
||||||
|
- No text, no gradients, no shadows.
|
||||||
|
- Square, safe inside a rounded-square mask.
|
||||||
|
|
||||||
|
## Grok Imagine prompt
|
||||||
|
|
||||||
|
> Flat vector app icon, 1:1 square, deep charcoal background `#0a0a0a`. A simple
|
||||||
|
> browser tab shape in off-white, drawn as one solid rounded rectangle with a
|
||||||
|
> single angled corner at the top right, and a thick rust `#d4623a` heartbeat
|
||||||
|
> trace running across its middle: one flat line, one sharp peak up, one sharp
|
||||||
|
> trough down, then flat again. Uniform heavy stroke, geometric, no gradients, no
|
||||||
|
> shadows, no 3D, no text, no letters, no extra detail. The silhouette must read
|
||||||
|
> as a single bold shape at 32 pixels.
|
||||||
|
|
||||||
|
Simplification prompt if the result is too busy (image to image):
|
||||||
|
|
||||||
|
> Keep the tab shape and remove the corner notch. Keep one peak and one trough
|
||||||
|
> only. Make the pulse stroke twice as thick. Two colors, flat, centered, no text.
|
||||||
|
|
||||||
|
## Candidates built as geometry
|
||||||
|
|
||||||
|
Three hand-drawn SVG candidates live in `docs/design/`, rendered through
|
||||||
|
`tools/make_icons.py`:
|
||||||
|
|
||||||
|
| file | idea | verdict |
|
||||||
|
|---|---|---|
|
||||||
|
| `vitals-a-rows.svg` | three workload rows, top one hot | legible, but reads as a generic chart |
|
||||||
|
| `vitals-b-tab-pulse.svg` | a browser tab carrying a heartbeat | most on-message, notch dies at 32px |
|
||||||
|
| `vitals-c-pulse.svg` | the pulse alone | strongest at 16px, says "health" not "browser" |
|
||||||
|
|
||||||
|
Recommended direction: **B, simplified.** Remove the corner notch (it is the
|
||||||
|
first casualty at small size), keep one peak and one trough, thicken the stroke.
|
||||||
|
That keeps the browser reference that makes the mark specific while surviving the
|
||||||
|
tab bar.
|
||||||
|
|
||||||
|
Do not ship A. It is the clearest of the three and the least distinctive; it
|
||||||
|
could belong to any dashboard.
|
||||||
6
docs/design/vitals-a-rows.svg
Normal file
6
docs/design/vitals-a-rows.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
|
||||||
|
<rect x="0" y="0" width="1024" height="1024" rx="232" fill="#0a0a0a"/>
|
||||||
|
<rect x="224" y="300" width="576" height="104" rx="18" fill="#d4623a"/>
|
||||||
|
<rect x="224" y="460" width="432" height="104" rx="18" fill="#f0ede8"/>
|
||||||
|
<rect x="224" y="620" width="288" height="104" rx="18" fill="#f0ede8" opacity="0.55"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 408 B |
7
docs/design/vitals-b-tab-pulse.svg
Normal file
7
docs/design/vitals-b-tab-pulse.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
|
||||||
|
<rect x="0" y="0" width="1024" height="1024" rx="232" fill="#f0ede8"/>
|
||||||
|
<path d="M232 300 h400 l64 72 h128 v352 h-592 z" fill="#0a0a0a"/>
|
||||||
|
<path d="M300 620 h96 l48 -132 l64 232 l64 -176 l40 76 h112"
|
||||||
|
fill="none" stroke="#d4623a" stroke-width="56"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 414 B |
6
docs/design/vitals-c-pulse.svg
Normal file
6
docs/design/vitals-c-pulse.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
|
||||||
|
<rect x="0" y="0" width="1024" height="1024" rx="232" fill="#0a0a0a"/>
|
||||||
|
<path d="M180 700 h180 l60 -150 l90 260 l80 -190 l50 80 h204"
|
||||||
|
fill="none" stroke="#f0ede8" stroke-width="72"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 347 B |
Loading…
Reference in a new issue