design.vecreal.com / Workshop / T6 softening

Brand atom workshop · favicon · round 5b (T6 softening)

T6 softening — easing the white-on-clay hard contrast

Round 5 surfaced T6 (clay-light tile + soft-white V/dot) as a strong direction. Operator flagged the white-on-clay relationship still feels hard-contrast. This round tests three softening approaches against the T6 baseline: strokes on V/dot (intermediate-color buffer), container border (tile framing), and cream V/dot (color warming).

Why does T6 feel hard-contrast?

Luminance contrast is fine — #FAFAF8 white on #A05847 clay = ~5.1:1 (AA text). The issue isn't brightness.

It's a warm/cool temperature clash. Pure white is neutral-cool (RGB equal-ish). Clay is strongly warm (R high, B low). The two colors don't "belong" to the same family — they meet at a hard cultural edge, not just a luminance edge. Color theory term: simultaneous contrast.

Three softeners worth testing: (A) intermediate stroke buffer between white and clay, (B) container border that frames the tile against chrome, or (C) warming the V/dot to a cream so the temperatures harmonize.

Baseline · T6 unchanged

For direct comparison against the softened variants below.

C1 · T6 REFERENCE
Pure white V/dot on clay-light tile. No softening applied.
tile  #A05847
V/dot fill  #FAFAF8
stroke  none
border  none

The "hard contrast" baseline. Reference for all softening tests below.

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

Group A · Stroke on V/dot (operator suggestion #1)

Adds clay-darker outline. Acts as an intermediate-color buffer between white fg and clay bg.

C2 · V/DOT STROKE 1.5
Thin clay-darker outline on V and dot.
tile  #A05847
V/dot fill  #FAFAF8
V/dot stroke  #5C2D26 sw=1.5
border  none

Subtle outline. At 16px it's sub-pixel — softens edges via AA blur. At 64px it reads as a thin distinct outline.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
C3 · V/DOT STROKE 2.5
Thicker clay-darker outline.
tile  #A05847
V/dot fill  #FAFAF8
V/dot stroke  #5C2D26 sw=2.5
border  none

Heavier outline. Distinctly outlined at 48-64px but might over-darken the V at small sizes.

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

Group B · Container border (operator suggestion #2)

Frames the tile so the warm clay doesn't meet browser chrome as a hard edge.

C4 · CONTAINER BORDER
2-unit clay-darker inset border around the tile.
tile  #A05847
tile border  #5C2D26 2u inset
V/dot fill  #FAFAF8
V/dot stroke  none

Tile gets a dark clay frame. Hard edge against chrome becomes "framed brand object" instead of "raw color square".

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
C5 · STROKE + BORDER
Combined — V/dot outline AND container frame.
tile  #A05847
tile border  2u inset
V/dot fill  #FAFAF8
V/dot stroke  sw=1.5

Both softeners applied. Most "designed" looking; may be too much detail at small sizes.

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

Group C · Color softening (warm/cool root cause)

Replace pure white with a warm off-white. Reduces the temperature gap that causes the perceived hard contrast.

C6 · CREAM V/DOT
Warm cream V/dot — same temperature family as clay, no stroke or border.
tile  #A05847
V/dot fill  #F0E6D5 (cream)
contrast vs tile  ~4.6:1 (AA text)
stroke  none

No outlines needed — warm-on-warm harmony does the softening. Cleanest look.

Light tab
16
24
32
48
64
Cyan tab
16
24
32
48
64
Dark tab
16
24
32
48
64
C7 · SAND V/DOT
More saturated sand tone — softer than cream, even warmer.
tile  #A05847
V/dot fill  #E8DCC8 (sand)
contrast vs tile  ~4.2:1 (AA large)
stroke  none

Most warm-harmonized but starts losing contrast at small sizes. Borderline for AA text.

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 · T6 V geometry held; softening method varies

VARIANT V/DOT FILL V/DOT STROKE TILE BORDER APPROACH WORKS AT 16px?
C1 · reference#FAFAF8——T6 baselineyes (but hard-contrast)
C2 · stroke 1.5#FAFAF8#5C2D26 sw=1.5—thin outline buffersub-pixel softening only
C3 · stroke 2.5#FAFAF8#5C2D26 sw=2.5—thicker outlineover-darkens V at 16px
C4 · border#FAFAF8—#5C2D26 2u insettile frame2u = 0.5px at 16px (marginal)
C5 · both#FAFAF8#5C2D26 sw=1.5#5C2D26 2u insetcompoundbusy at 16px
C6 · cream#F0E6D5——warm/cool harmonyyes (cleanest at all sizes)
C7 · sand#E8DCC8——deeper warm harmonyyes (lowest contrast)
Reply with your pick — "C1" through "C7". Note that strokes and borders fight sub-pixel rendering at favicon sizes (16-32px); the color-shift variants (C6, C7) work cleanly at every scale because they don't add detail, they harmonize temperature. Once picked, propagates to the rev-6 H2 favicon spec across all consumers.