onshelf.
Page 07.00Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
Section 07

Web & digital assets.

Every pixel that represents Onshelf on a screen.

§07 Digital · Cover07.00
Page 07.01Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
01 · Favicons

The "o." mark across every browser tab.

The full wordmark won't survive at 16px. The "o." icon does. White background, never transparent. ~15% padding from edges.

o.

16 × 16 — .ico

o.

32 × 32 — .png

o.

64 × 64 — preview

o.

180 × 180 — apple-touch.png

o.

512 × 512 — PWA / android-chrome (scaled)

Export pack

favicon.ico (multi-res 16/32/48) · favicon-32.png · apple-touch-icon-180.png · android-chrome-512.png · favicon.svg (scalable). Linked from <head> with rel="icon", rel="apple-touch-icon", and a web manifest reference.

§07 Digital · Favicons07.01
Page 07.02Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
02 · OG / Share Images

1200 × 630. Three templates. Zero exceptions.

Safe zone 100px from each edge. Wordmark top-left. Eyebrow pill + title bottom-left. Shelf-line beneath title.

onshelf.onshelf.me
Blog

The five things that broke when we scaled to nine DCs.

Blog — ink background, lime eyebrow, white title (max 2 lines).

onshelf.onshelf.me
Case study

How L'Oréal hit 14 GCC retailers in 90 days.

Case study — white background, sage eyebrow, ink title.

onshelf.onshelf.me
Announcement

Onshelf is live in Australia. Melbourne DC open.

Announcement — lime background, ink eyebrow + title.

§07 Digital · OG07.02
Page 07.03Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
03 · LinkedIn

Company, team, and post cards.

onshelf.

Direct-to-Retail.
Made Operational.

Company cover — 1584 × 396, ink bg.

Building the future of retail distribution at

onshelf.

Employee cover — 1584 × 396, deep green bg.

Announcement

Live in Australia.

14

retailers in 90 days

Hiring

Head of GCC Ops

Sharjah · UAE

"

We compressed six months of channel work into six weeks.

· VP Sales, Top-5 CPG

Post cards — 1080 × 1080. Announcement · Case study · Hiring · Quote.

§07 Digital · LinkedIn07.03
Page 07.04Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
04 · Social Specs

Same system, different canvas.

Every other platform reuses the LinkedIn or OG templates. Don't invent new ones.

PlatformDimensionsNotes
Instagram post1080 × 1080Same 4 card types. Carousels add 'Swipe →' bottom-right, 10px Inter Medium, off-white.
Instagram story1080 × 1920Wordmark top-center, content centered, shelf-line at 75% height, CTA zone bottom 20%.
X / Twitter header1500 × 500Same layout as LinkedIn company cover. Ink bg.
X / Twitter post1200 × 675Use the OG templates (blog / case study / announcement).
YouTube banner2560 × 1440Safe area 1546 × 423. Ink bg, centered wordmark + tagline beneath shelf-line.
YouTube thumbnail1280 × 720Large headline max 5 words, Inter Display 96px. Wordmark bottom-right at 24px.
§07 Digital · Social07.04
Page 07.05Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
05 · Slide Deck

Seven slide types. 16:9. 1920 × 1080.

onshelf.

Direct-to-Retail.

01 · Title — ink, wordmark top-left, headline bottom-left, shelf-line.

01

The Problem.

02 · Section divider — lime bg, big number + title, deep-green period.

How D2R compresses the chain.

onshelf.

03 · Content — white, title top-left, mini wordmark top-right, grid center.

100+

Retail channels

04 · Stat — hero number centered, lime underline, label.

"

Onshelf compressed six months of channel work into six weeks.

· VP Commercial, top-5 CPG

05 · Quote — deep green, lime quote mark, italic, attribution.

Operators, not consultants.

Name

Role

Name

Role

Name

Role

Name

Role

06 · Team — white, photo circles, name + role.

onshelf.

hello@onshelf.me · onshelf.me

07 · Final — ink, centered wordmark + shelf-line, contact.

§07 Digital · Deck07.05
Page 07.06Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
06 · Email Newsletter

600px, table-based, fonts inboxes actually have.

Header: ink, 64px tall. Body: white, 24px padding, Arial 15px / 1.6. Footer: shelf-line + unsubscribe links.

onshelf.May 20, 2026

Operator notes · Issue 12

Three things that broke
at the Jakarta DC.

SKU drift, slotting fees, and a forecasting model that assumed dry-season velocity. Here's what we changed in 48 hours.

Read the post-mortem →
Unsubscribe · Preferences

Buttons: 44px tall, 8px radius, lime fill, ink text. Arial is the only safe stack in email — never Inter Display.

§07 Digital · Email07.06
Page 07.07Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
07 · Video Call Backgrounds

Wordmarks at 30–35% opacity. The person is the content, not the background.

onshelf.

01 · Neutral — off-white, wordmark bottom-right at 30%.

onshelf.

02 · Brand — white, dot grid (8%), wordmark at 30%.

Direct-to-Retail.
Made Operational.

03 · Tagline — ink, tagline centered at 20%.

onshelf.

04 · Deep green — for panel / fireside formats.

All exports: 1920 × 1080 .jpg. Mirror-safe — wordmark in a corner that won't get flipped during share.

§07 Digital · Zoom07.07
Page 07.08Onshelf · Brand Guidelines · v1.0
onshelf.§07 Web & Digital
08 · Additional Surfaces

The other places the brand lives.

Loom thumbnail — 1280 × 720

Walkthrough

Inside the Jakarta DC.

onshelf.

Same construction as YouTube thumbnail.

Notion / Coda header — 1500 × 300

onshelf.Operating Manual · v3

Wordmark left, document title right, shelf-line full-width at bottom.

Google Docs

Inter won't render — fall back to system defaults (Arial / Helvetica). Insert a 100px-wide wordmark image at the top of the doc and place a 1px lime horizontal rule beneath it. Body in Arial 11pt, 1.4 line-height.

§07 Digital · Additional07.08