SelfPOS · Brand Guide v1

The experience
layer, designed.

This is the single source of truth for the SelfPOS visual system — logo, color, type, spacing, components, voice and tone. For partners, agencies and the SelfPOS team.

Version 1.0·Last updated · today·Maintained in code (see styles.css)

The mark

The SelfPOS wordmark pairs a glyph (an inward-flowing arrow loop) with the word "SelfPOS" set in Inter Semibold. Use the dark mark on light, light on dark.

SelfPOS
SelfPOS
Clear space

Minimum clear space around the mark equals the height of the glyph (~26px at base size).

Minimum size

Don't render the wordmark smaller than 80px wide on screen or 14mm in print.

Don't

Don't rotate, recolor (outside palette), apply effects, or place on busy imagery without a scrim.

Color · restrained

The system is monochromatic by default — near-black foreground on warm off-white. An accent color is selectable per deployment; mono is the safest default.

Neutrals
Foreground--fg#0E0E10
FG · soft--fg-soft#3A3A40
FG · faint--fg-faint#6B6B72
Background--bg#F7F5F0
BG · alt--bg-alt#EFECE4
Surface--surface#FFFFFF
Accent options
Mono.pal-mono#0E0E10
Amber.pal-amber#D97757
Electric.pal-electric#2A6FDB
Sage.pal-sage#1F8A5B

Type · Inter & Instrument Serif

Inter does the heavy lifting — display, headings, body, UI. Instrument Serif italic is reserved for emphasized words inside display copy ("a world", "the next", "every").

Display · MegaImagine a worldInter 500 · 144px
H1 · HeroRecognise. Reward.Inter 500 · 72px
H2 · SectionBuilt for the wayInter 500 · 46px
Display · Serifa worldInstrument Serif italic 400 · 80px
H3 · CardClosed-loop stored valueInter 500 · 32px
Lede · 22pxCustomers can buy anywhere — what they can't get is to be seen.Inter 400 · 22px
Body · 16pxBody copy reads in Inter at 16px with 1.5 line height for legibility.Inter 400 · 16px
Meta · 13pxCaptions, helper text and table cells.Inter 400 · 13px
Eyebrow · 11pxEYEBROW LABELInter 500, tracked 0.14em uppercase · 11px

Spacing · 4px baseline

Tailwind-derived spacing scale. Page padding clamps from 24px (mobile) to 96px (desktop). Section padding is typically 100–140px vertical.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-7
28px
--space-8
32px
--space-10
40px

Radius & shape

Soft but considered corners. Pill (999px) for CTAs, rounded for cards. The Commerce Infrastructure tone overrides these to sharper values.

--radius-sm
4px
--radius
8px
--radius-md
14px
--radius-lg
22px

Components · buttons & tags

A small set of well-considered building blocks. Implemented in src/components/ as React components.

Tags
01 / XOSFlagshipNewNEWPlatform

Voice & tone

How SelfPOS writes. Three principles, each with a "do" and an "avoid" so writers across the company can stay in voice.

Speak in plain English

No jargon. No buzzwords. We are not a 'next-generation, AI-powered, omnichannel orchestration platform' — we are the experience layer that recognises customers.

"We help you recognise customers the moment they walk in."

We leverage AI-driven omnichannel orchestration to deliver synergistic customer engagement.

Confident, quietly

Make the claim, then stop. Don't oversell, don't qualify too much. The brand is restrained — like a well-set room.

"Patent-pending technology. Used by retail and hospitality brands across nine countries."

World-leading, award-winning, best-in-class patent-pending technology used by countless leading brands!

The customer is the subject

Frame outcomes from the customer's point of view. Not 'our platform processes 4 million identities' — 'four million customers are recognised across our network'.

"Your best customer just walked in. SelfPOS lets your team treat them like it."

Our identity engine handles 4.6 million records with sub-100ms recognition latency.

Iconography

Stroke icons drawn from Lucide. 24×24, 1.6 stroke, currentColor. Icons are functional — never decorative — and always pair with a label.

layers
gift
phone
tap
wallet
qsr
retail
coffee
hotel
crown
vip
go
sparkle
shield
chart
users
star
bag
bolt
plus
arrow
check

Photography · real moments

Photography should be natural light, restrained color, and focused on the human moment of recognition or hospitality. Avoid stock-looking shots, heavy filters, or overly product-y compositions.

Moments

The instant of recognition — staff meeting a returning customer.

Interiors

Premium retail and hospitality environments — quiet, well-lit, no clutter.

Product detail

Tactile close-ups — phone tapping, wallet open, gift card in hand.

Where this lives

The brand is maintained in code. Tokens live in styles.css; components in src/components/; mocks in src/art/. Updating the brand means updating those files.

// All tokens are CSS variables in styles.css
--bg: #F7F5F0; /* warm off-white */
--fg: #0E0E10; /* near-black */
--accent: var(--fg); /* swappable via .pal-* */
--font-display: "Inter", sans-serif;
--font-serif: "Instrument Serif", serif; /* italic only */
--radius: 14px;