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