Design system

The parts this site is made of

Every value below is read from tokens.css when the site is built, and every component is the real one used on the other pages — so this page cannot fall out of date.

Principles

Dark only
One theme, tuned properly, rather than two themes tuned half-way.
One accent
Blue is the only colour that means "interactive". Everything else is neutral.
Motion with a reason
Movement explains change (a page wiping in, a screen swapping). It is switched off when the visitor asks for reduced motion.
Readable first
Every text colour is measured against its background. Faint text still clears AA.
Fluid, not fixed
Type and spacing scale with the viewport through clamp(), so there are few breakpoints.
Keyboard friendly
A visible focus ring on everything, and a skip link at the top of every page.

Colour

Contrast is measured with the WCAG formula against the page background unless stated.

--bg#07090fPage background
--surface#0d121cCards and panels
--surface-2#141b29Raised or hovered surface
--text#eef2f9Primary text17.73:1 · AAA on bg
--text-muted#8f9bb0Secondary text7.09:1 · AAA on bg
--text-faint#7a869bCaptions and metadata5.41:1 · AA on bg
--accent#3b82ffInteractive text and glow5.52:1 · AA on bg
--accent-bright#5eb8ffHighlights and focus9.27:1 · AAA on bg
--accent-solid#2563ebFills that carry white text5.17:1 · AA white text on it
--accent-ink#04122eText on bright fills8.64:1 · AAA on accent-bright
--linergb(255 255 255 / 0.09)Hairline borders
--line-strongrgb(255 255 255 / 0.18)Emphasised borders
--glowrgb(59 130 255 / 0.35)Soft accent shadow

Type

Display

Space Grotesk

'Space Grotesk Variable'

Body

DM Sans

'DM Sans Variable'

--fs-xs0.75rem
EYEBROW LABEL
--fs-sm0.875rem
Secondary text and labels
--fs-md1.0625rem
Body copy sits at this size and a 1.6 line height.
--fs-lgclamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)
A clear, calm interface for complex tasks
--fs-xlclamp(2rem, 1.4rem + 2.4vw, 3.5rem)
Products people use
--fs-heroclamp(3.25rem, 1.2rem + 9vw, 10rem)
Ship.

Space, shape and layout

--s-10.25rem · 4px
--s-20.5rem · 8px
--s-30.75rem · 12px
--s-41rem · 16px
--s-61.5rem · 24px
--s-82rem · 32px
--s-123rem · 48px
--s-164rem · 64px
--s-246rem · 96px

--radius14px

--gutterclamp(1.25rem, 4vw, 4rem)

Side padding that grows with the screen.

--rail76px

Width of the left navigation rail. It becomes a bottom bar under 800px.

Motion

Press play to compare the two easings at the same distance.

--ease-outcubic-bezier(0.2, 0.7, 0.2, 1)

--ease-wipecubic-bezier(0.76, 0, 0.18, 1)

--t-fast0.2s
Hover and colour changes.
--t-med0.5s
Reveals and swaps.
Page wipe0.7s
Page-to-page transition, using ease-wipe.

Components

Button

Primary and ghost. Primary text is white on --accent-solid (5.2:1).

View work Get in touch

HTML

<a class="btn" href="/work/">View work</a>
<a class="btn ghost" href="mailto:…">Get in touch</a>

Pill

Short context labels, such as discipline, client and dates.

UX Rescue · Mobile AppArab National Bank · Riyadh2020 – 2023

HTML

<span class="pill solid">UX Rescue · Mobile App</span>
<span class="pill">2020 – 2023</span>

Chip

Technology tags. Add hover when it sits in a skills grid.

OutSystemseBaoCordovaFramework 7Figma

HTML

<span class="chip solid">OutSystems</span>
<span class="chip hover">Figma</span>

Stat

A single big number with its label.

Industry awards won post-launch: 5
Live apps: iOS + Android: 2

HTML

<dl>
  <div class="stat"><dt>Industry awards</dt><dd>5</dd></div>
</dl>

Card

The standard container for grouped content.

Call centre / customer care

Consumed by inbound calls for routine policy modifications.

HTML

<div class="card">…</div>

Callout

A pulled quote with an accent rule, for the brief or a key moment.

The brief
"Fix the UX so the app can actually be used — rather than being scrapped in full."

HTML

<blockquote class="callout">
  <p class="cl">The brief</p>
  <p>"Fix the UX so the app can be used."</p>
</blockquote>

Ledger

Year, title and source in a ruled list. Used for awards.

2021Best Mobile Banking App — Saudi ArabiaGlobal Finance Magazine
2021Best Digital Bank — Saudi ArabiaDigital Banker Awards

HTML

<ul class="ledger">
  <li><span class="yr">2021</span><span class="nm">Best Digital Bank</span><span class="by">Digital Banker Awards</span></li>
</ul>

Larger patterns — the side rail, the device scroller, the scroll-scrubbed video and the gallery — live in src/components and are used on the home and case-study pages.