Building Block 01
Brand Artifact
The permanent reference for every surface Xverse Digital builds. Identity, colour, type, philosophy, voice and system — defined once, inherited everywhere.
Identity
The mark
A dot matrix forming an X — precision assembled from small, deliberate parts. It is never redrawn, only placed.
Clear space
Minimum clear space on all sides equals the height of one large dot in the mark.
Minimum size
Mark: never below 28px. Wordmark: never below 120px wide.
Placement
Mark for compact surfaces (nav, favicon, avatars). Wordmark for first impressions and footers.
Never
- ✕Never stretch, rotate, or recolour the mark.
- ✕Never place the colour mark on a coloured background.
- ✕Never add shadows, outlines, or gradients to the mark.
- ✕Never rebuild the dot grid or alter dot proportions.
Colour
Obsidian and signal
Black is the canvas. White carries the message. Signal Pink is the only voice raised.
Obsidian
#000000
Primary canvas. The brand lives on black.
Signal Pink
#FF0055
Accent only. CTAs, emphasis, active states.
Pure White
#FFFFFF
Primary type and the mark on dark.
Neutrals
Graphite 900
#0A0A0A
Graphite 800
#141414
Graphite 600
#2A2A2A
Graphite 400
#6E6E73
Graphite 200
#D2D2D7
Bone
#F5F5F7
Roughly 90% black and white, 10% Signal Pink. Pink earns attention by being rare.
Typography
Type as hierarchy
A single family across two optical roles. Size and spacing carry all the emphasis we need.
Display
Aa
SF Pro Display / system stack — tight, optical, confident.
Body
Aa
SF Pro Text / system stack — quiet, highly legible.
Display XL
Hero statements. One idea only.
Experience is the strategy
Display L
Section openers.
Experience is the strategy
Headline
Card and block titles.
Experience is the strategy
Subhead
Supporting sentence under a display line.
Experience is the strategy
Body
Paragraphs. Never wider than 65 characters.
Experience is the strategy
Eyebrow
Section labels above headlines.
Experience is the strategy
Caption
Metadata, footnotes, legal.
Experience is the strategy
- —Negative letterspacing on large type, positive on eyebrows.
- —Weights: 400, 500, 600 only. No 700+ and no italics.
- —Sentence case everywhere except eyebrows.
Philosophy
What Xverse stands for
Positioning, pillars, methodology and beliefs — the substance the website must communicate.
You've chosen CX as a strategic lever. We amplify it.
Xverse turns customer experience into measurable business advantage — shaping the systems, strategies and stories that drive loyalty, growth and innovation.
CX Transformation
A customer-centric operating model that lifts satisfaction, loyalty and brand perception.
Design Transformation
Interfaces and journeys engineered for usability, emotion and recall.
Digital Transformation
Seamless digital adoption that unlocks agility and new revenue streams.
Methodology
⌘
Know
Identify and deeply analyse the real needs of end-users and stakeholders.
★
Design
Craft solutions that are user-centred and aligned to business goals.
➜
Implement
Prioritise and execute with precision and adherence to best practice.
∞
Sustain
Continuously improve and adapt as feedback and needs evolve.
What we believe
Experience is the strategy, not the decoration.
If it isn't measured, it isn't transformation.
Simplicity is the hardest deliverable — and the most valuable.
We build capability inside the client, not dependency on us.
Voice
How Xverse speaks
Declarative, evidence-led, human, unhurried. Copy across the site is written to this standard.
Declarative
State the outcome, not the effort. Short sentences carry authority.
Evidence-led
Every claim earns its place with a number, a name, or a result.
Human
Plain language over consulting jargon. We advise, we don't posture.
Unhurried
Confidence is quiet. No exclamation marks, no hype, no urgency tricks.
Words we use
Words we never use
System
Layout, motion, controls
The mechanical rules that keep every page feeling like one considered product.
Layout
8px base unit. Sections breathe at 96–160px vertical rhythm.
max-w-[1120px] mx-auto px-6
Cards 20px, buttons full pill, media 28px.
- —One idea per screen. Whitespace is the primary design material.
- —Centre-aligned hero statements, left-aligned reading content.
- —Full-bleed media, contained text.
Motion
cubic-bezier(0.28, 0.11, 0.32, 1)
micro 180ms · standard 420ms · cinematic 800ms
- —Reveal on scroll: 24px rise plus fade. Once, never on repeat.
- —Hover: opacity and 1.02 scale only. No bounce, no spring.
- —Motion clarifies hierarchy — it never performs.
Controls