design.vecreal.com / Workshop / C5 + cooler white

Brand atom workshop · favicon · round 5c (C5 + cooler white)

C5 refinement — container border + cooler white

Round 5b surfaced C5 (container border + V/dot stroke) as the operator's pick on the softening question. C6 (warm cream) was rejected as "off brand." This round keeps C5's container border but swaps to the brand-locked cooler off-white (the same #f7f8f8 used for "ecreal" text in the dark-mode wordmark). Five variants test whether the V/dot stroke is still needed once we have border + cool white, and the stroke-weight tradeoff.

White color comparison

#FAFAF8 (rev-4 favicon, light-mode bg): RGB 250,250,248. Two extra red points = subtle warm tint. Reads as "warm white." This is what's been on the round 5b C5 reference.

#f7f8f8 (dark-mode wordmark text, brand-locked): RGB 247,248,248. One less red = neutral / slightly cool. This is what the wordmark uses for "ecreal" on dark mode — i.e., what the operator sees on the live vecreal.com.

#F0F4F8 (slightly cooler hedge): RGB 240,244,248. Four less red, distinctly cool slate-leaning tone. Provides a cooler bracket option in case #f7f8f8 doesn't read cool enough.

R · C5 REFERENCE
C5 from round 5b — pure white #FAFAF8 (warm). Kept for direct comparison.
tile  #A05847
tile border  2u inset
V/dot fill  #FAFAF8 (warm)
V/dot stroke  sw=1.5

What the operator picked at round 5b, but flagged the white as too warm.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128
V1 · COOLER WHITE + C5 ★
Brand off-white #f7f8f8 (dark-mode wordmark text color) + border + stroke 1.5.
tile  #A05847
tile border  2u inset
V/dot fill  #f7f8f8 (brand cool)
V/dot stroke  sw=1.5

Direct operator pick — C5 with the brand-locked cool off-white from the dark-mode wordmark.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128
V2 · BORDER ONLY
Cooler white + tile border, NO V/dot stroke. Does the stroke add value once we have border?
tile  #A05847
tile border  2u inset
V/dot fill  #f7f8f8
V/dot stroke  none

Test: stroke is sub-pixel at 16px anyway. If the border alone gives enough framing, this is cleaner.

Light tab
16
24
32
48
64
128
Cyan tab
16
24
32
48
64
128
Dark tab
16
32
64
128
V3 · THICKER STROKE
Cooler white + border + V/dot stroke 2.0 (heavier outline).
tile  #A05847
tile border  2u inset
V/dot fill  #f7f8f8
V/dot stroke  sw=2.0

More pronounced outline at app-icon sizes. May over-darken the V at 16-24px.

Light tab
16
24
32
48
64
128
Cyan tab
16
32
64
128
Dark tab
32
64
128
V4 · CLEAR COOL
Distinctly cool slate-leaning white #F0F4F8 + border + stroke 1.5.
tile  #A05847
tile border  2u inset
V/dot fill  #F0F4F8 (clearer cool)
V/dot stroke  sw=1.5

If #f7f8f8 doesn't read cool enough vs #FAFAF8, this gives a clear cool bracket.

Light tab
16
24
32
48
64
128
Cyan tab
16
32
64
128
Dark tab
32
64
128

Spec deltas · clay-light tile + 2u border held constant; V/dot fill + stroke vary

VARIANT V/DOT FILL FILL CHARACTER V/DOT STROKE NOTE
R · reference#FAFAF8warm white (light-mode bg)sw=1.5round 5b C5 baseline
V1 · cooler white ★#f7f8f8brand cool (dark-mode wordmark text)sw=1.5operator's exact ask
V2 · border only#f7f8f8brand cool—test: is stroke still needed?
V3 · thicker stroke#f7f8f8brand coolsw=2.0heavier outline option
V4 · clear cool#F0F4F8distinct cool (slate-leaning)sw=1.5hedge if #f7f8f8 isn't cool enough
Reply with your pick — "R" through "V4". Once picked, propagates to all favicon data URIs across consumers as rev-7 favicon amendment. The CHANGELOG rev-6 H2 stays as the geometry/composition lock; this round adds the tile-color + framing direction on top.