design.vecreal.com / Workshop / Favicon tile softening

Brand atom workshop · favicon · round 5 (post-H2-lock)

Favicon tile softening — too stark against light browsers

H2 locked the V geometry, dot size, dot baseline, and horizontal tightening. Operator flagged the #131517 tile reads too dark against light-mode browser chrome (and the screenshot confirms — looks like a black square cut into the tab bar). This round holds the locked H2 V+dot geometry constant and tests softer tile colors, plus revisits the warm-clay-tile direction (was rejected pre-H2; may read differently now).

Two problems with the current #131517

Light-mode browser chrome (Chrome, Safari, Firefox) sits around 85–95% luminance. Current tile is ~8%. Edge contrast: ~12:1 — favicon reads as a stark black cutout. Brand identity (warm clay-forward) fights against that pure-cold dark.

Dark-mode browser chrome typically sits around 13–18% luminance. Current tile at ~8% is very close — favicon BLENDS into the bar and loses its "icon" presence.

Direction. Two paths to a fix: (A) soften within the current dark direction (lighter / warmer dark tones) so the contrast is less stark in light mode and the favicon differentiates from dark chrome; or (B) revisit the warm-clay-tile direction (T6/T7) which gives the favicon its own brand-color identity in both light and dark chrome contexts.

Group A · Soften within current dark direction (F1)

Same composition — clay-bright #C68070 V+dot on lifted / warmed darks.

T1 · CURRENT (reference)
#131517 — what shipped in rev-6. Operator flag: too stark.
tile  #131517 (bg-app-dark)
V/dot  #C68070 (clay-bright)
luminance  ~8%
contrast vs chrome  light 12:1 · dark 1.2:1

Stark in light mode, blends in dark mode.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
T2 · WARM BLACK
#1D1D1F — brand CTA color. Slight warm/brown undertone, sub-pixel lift.
tile  #1D1D1F (bg-cta-dark)
V/dot  #C68070 (clay-bright)
luminance  ~10%
contrast vs chrome  light 10:1 · dark 1.3:1

Most brand-aligned softening. The CTA color was tuned for warmth-on-dark already.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
T3 · CARD BOTTOM
#1c1e23 — brand card-dark-bottom. Neutral, slightly lifted.
tile  #1c1e23 (bg-card-dark-bottom)
V/dot  #C68070
luminance  ~11%
contrast vs chrome  light 9:1 · dark 1.4:1

Subtler softening than T2; neutral grey character.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
T4 · CARD TOP
#21242a — brand card-dark-top. Clearly lifted, slight cool/grey character.
tile  #21242a (bg-card-dark-top)
V/dot  #C68070
luminance  ~13%
contrast vs chrome  light 7.5:1 · dark 1.7:1

Most-lifted of the brand-locked options. Tile reads as "mid-dark" vs "deep dark."

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
T5 · WARM-MID
#2A2520 — custom, warm tinted, mid-dark. Clearer warmth than T2.
tile  #2A2520 (custom)
V/dot  #C68070
luminance  ~13%
contrast vs chrome  light 7.5:1 · dark 1.7:1

Same luminance as T4 but with warm brown undertone instead of cool grey. Most "brand-feel" of the dark-direction options.

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

Group B · Direction shift back to warm clay tile

The original Round-1 rejection was about white-on-clay with broken geometry. With H2 geometry locked, the warm-tile direction may read differently. Note: V/dot color also changes (clay-bright can't sit on clay tile — contrast fails).

T6 · CLAY-LIGHT TILE
#A05847 tile + #FAFAF8 V/dot. Rev-4 direction with H2 geometry (the original geometry now fixed).
tile  #A05847 (clay-light)
V/dot  #FAFAF8 (soft white)
luminance  ~22%
contrast V/dot vs tile  ~5.1:1 (AA text)

Strong brand identity, visible in both light AND dark chrome. White-on-clay relationship that was rejected pre-H2 — now with fixed V and dot positioning.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
T7 · CLAY-DARK TILE
#5C2D26 tile + #FAFAF8 V/dot. Deep warm clay — distinctive across all browser contexts.
tile  #5C2D26 (clay-dark)
V/dot  #FAFAF8 (soft white)
luminance  ~4%
contrast V/dot vs tile  ~9.5:1 (AAA text)

Deep warm clay reads as distinctive brand color in both light and dark browser chrome — but also pretty dark itself. Strongest brand identity.

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

Spec deltas at a glance · H2 V+dot geometry held constant; tile + V/dot color vary

VARIANT TILE V/DOT LUM CONTRAST (vs light · cyan · dark chrome) READS AS
T1 · current#131517#C68070~8%12 · 11 · 1.2stark cutout in light, blends in dark
T2 · warm black#1D1D1F#C68070~10%10 · 9 · 1.3subtle softening with brand warmth
T3 · card-bottom#1c1e23#C68070~11%9 · 8 · 1.4most subtle, neutral grey lift
T4 · card-top#21242a#C68070~13%7.5 · 7 · 1.7clearly lifted, mid-dark feel
T5 · warm-mid#2A2520#C68070~13%7.5 · 7 · 1.7same lift as T4 but warm undertone
T6 · clay-light#A05847#FAFAF8~22%3.5 · 3 · 7distinctive warm brand color; visible in dark mode too
T7 · clay-dark#5C2D26#FAFAF8~4%17 · 16 · 1.1deepest warm clay; strong V/dot contrast
Reply with your pick — "T1" through "T7", or describe a tile color between two and I'll generate a tighter range. Note: T6/T7 also change V/dot color back to soft-white. Once picked, propagates to all favicon data URIs + locks rev-7 in CHANGELOG. The four-round H2 archive stays intact as the geometry decision audit trail; this round adds tile-color to the same family.