onshelf.
Page 04.00Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
Section 04

Visual language.

Five systems: isometric line illustrations, real-world photography, a line icon set, a pattern library, and motion principles.

01.
Illustrations
02.
Photography
03.
Icons
04.
Patterns
05.
Motion
§04 Visual Language · Cover04.00
Page 04.01Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
01 · Illustrations

Isometric line. Structural, not decorative.

Brand ABrand BBrand Conshelf. platformAmazonNoonShopeeLazadaSephoraWatsonsTikTokCarrefour

Fig. 04.01 — Platform architecture: brands → onshelf. platform → retail channels.

  • · Perspective: true isometric (30°) for 3D. Flat 2D for diagrams.
  • · Strokes: 1.5px primary · 1px secondary · 0.5px tertiary.
  • · Corner radius: 3–4px on rectangles.
  • · Stroke colors: ink, deep green, lime (connections).
  • · Fills: sage default · lime active · white empty.
  • · Junction dots: 3–4px filled lime circles.
  • · Inputs: dashed (3/2). Outputs: solid.
  • · Don't: 3D renders, mascots, gradient fills, decoration.
§04 · Illustrations04.01
Page 04.02Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
02 · Photography

Real shelves. Real warehouses. Real operators.

Do
Warehouse worker scanning pallet
Do
Product close-up on retail shelf
Do
Distribution center, golden hour
Don't
Stock people at laptops
Don't
Teal-and-orange editorial filter
Don't
Abstract puzzle/gear/globe metaphors

Subjects

  • · Warehouse interiors with real product on shelves
  • · Retail close-ups in-situ
  • · DC operations: packing, labeling, staging
  • · Regional retail: souks, malls, conv. stores, pharmacies
  • · Team in operational contexts — never posed portraits

Treatment

  • · Warm natural light (window, warehouse LED)
  • · Grade: +5 warmth, −10 saturation
  • · Shallow DOF for hero · wide for environments
  • · No heavy filters, no teal-and-orange
  • · Prioritise regional diversity: GCC, SEA, ANZ, Greater China, US
§04 · Photography04.02
Page 04.03Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
03 · Iconography

Lines. Never glyphs.

Ship
Shelf
Speed
Box
Operator
Comply
Connect
Dashboard
  • · Outline only. Never filled, dual-tone, or glyph.
  • · Stroke: 1.5px @ 24px. Scale proportionally.
  • · Rounded joins and caps.
  • · Grid: 24×24 · 2px padding · 20×20 live area.
  • · Default: ink on light · white on dark.
  • · One element may use lime for emphasis. Never the whole icon.
  • · Source: Phosphor (light) or Lucide as the base set.
  • · Custom icons follow the same construction rules.
§04 · Icons04.03
Page 04.04Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
04 · Patterns

Three textures. Never combined.

01 · Dot grid. 2px circles, 16px spacing, deep green, 30–40% opacity. Use for hero backgrounds, empty states, behind stats.
02 · Route lines. Sine waves, amplitude 20px / wavelength 60px, 1.5px lime, 15–25% opacity. Use in shipping sections, footer textures.
DIRECT-TO-RETAIL ·GET YOUR BRAND ONSHELF ·100+ RETAILERS ·9 DISTRIBUTION CENTERS ·5 REGIONS ·DIRECT-TO-RETAIL ·GET YOUR BRAND ONSHELF ·100+ RETAILERS ·9 DISTRIBUTION CENTERS ·5 REGIONS ·DIRECT-TO-RETAIL ·GET YOUR BRAND ONSHELF ·100+ RETAILERS ·9 DISTRIBUTION CENTERS ·5 REGIONS ·
03 · Ticker marquee. 48–56px tall, deep-green bg, lime text, uppercase 13px / tracking 0.04em, 40px/s. Middle dot separator · max 2 per page.

Rule. Never layer patterns on each other. Never place behind body text — only behind headlines, stats, or imagery.

§04 · Patterns04.04
Page 04.05Onshelf · Brand Guidelines · v1.0
onshelf.§04 Visual Language
05 · Motion

Movement with a purpose.

01.
Hover lifts
translateY(-2px) + subtle shadow · 200ms ease-out
02.
Map pulses
scale 1.0→1.4→1.0, opacity 1→0.3→1 · 2s loop
03.
Ticker scroll
continuous left 40px/s · translateX · pause on hover
04.
Count-up stats
0 → value on scroll-into-view · 800ms ease-out · once
05.
Stagger-in
translateY(20px)→0, opacity 0→1 · 400ms, 80ms stagger
06.
Shelf-line draw
stroke-dashoffset L→R · 600ms ease-out · 200ms delay

Easing

ease-out for entrances · ease-in-out for loops · never linear except continuous scroll.

Duration

200ms micro · 400–800ms reveals · 2s ambient.

Reduced motion

Respect prefers-reduced-motion. Disable all except essential state changes.

Golden rule. If you can't explain what the animation communicates, remove it.

§04 · Motion04.05