Case study

Design System

The system behind the site.

One source of truth — colour, type, space, motion, and the components they build. The bones were already consistent across seven pages; this makes them explicit.

00PrinciplesIt wasn't designed as a "system" up front — these seven rules made it one.
i

Everything expressive is made of light.

ii

Premium and lightweight are one requirement.

iii

Attractors fire before decisions.

iv

The fallback is the truth.

v

Numbers are captions.

vi

One horizontal line per surface.

vii

The amber italic is spent only at climaxes.

01ColourWarm-dark is canonical; cool-dark & light are themed overrides of the same token names.

Ink & surface

ink
#EDE9E1
ink-dim
#C8C2B5
dust
#B0A088
ash
#A29A8C
ash-2
#807A70

Accent

highlight (amber)
#E5B068
amber-hi
#F0C585

Frame & surfaces

frame (bg)
#0C0B09
surface
#1A1814
lift
#252219

Theming — the same tokens, re-skinned

Selected work

Brought to light.

The exact same components — eyebrow, title, body, metric, button — re‑skinned by swapping a single token set. Nothing else changes.

−62%Start
02TypographyTwo faces: Lora (serif, editorial) + Poppins (sans, UI). Roles below.
Vinay Peri.
Display · Lora 500 · clamp 42–84 · −0.02em
A career of crossings.
Section title · Lora 500 · clamp 28–40 · −0.015em
−62%
Stat number · Lora 500 · clamp 34–52
The screen they trusted least.
Quote / thesis / closer · Lora italic 400 · clamp 18–22
Each study leads with what changed, then shows the decisions that got it there.
Body · Poppins 300 · 16 · lh 1.7
Selected work
Eyebrow / label · Poppins 500 · 11 · 0.18em · uppercase

Proposed scale (collapses 30+ sizes → 8)

11 13 16 2026 3444 Aa
03Spacing4px base. Retire the 7/14/22 off-steps.
4
8
12
16
24
32
48
64
04RadiusFrom 8 ad-hoc values → 5 steps.
0 · edges
4 · chips
8 · buttons
16 · panels
999 · pills
50% · dots
05ElevationThree shadow patterns do all the work.
card
amber glow
focus / pressed
06MotionOne signature easing; three durations. Hover the chip.

Easing cubic-bezier(0.22, 1, 0.36, 1) · Durations 160 / 200 / 320ms

Hover me — that's the feel
07ButtonsOne anatomy; fill steps down the ladder. One primary per view.
1 · Primary▶ Start Walkthrough
2 · SecondaryView case study
3 · TertiaryDownload résumé
4 · TextRead the case →
08Labels & badges
Selected work Under NDA ✦ AI Project
09Heading + prose

The problem

A workflow that had stopped being where the work happened.

For an enterprise security platform, trust isn't a feature — it's the whole product. The screen they relied on most was the one they trusted least.

10Pull quote

“I went into the renewal call this quarter without an apology written into the agenda.”

CSM lead · first renewal cycle post-launch

11Stats / metrics
−62%
Support tickets
5×
Faster to action
3
Month window
12Snapshot — “In short”

In short.

Role
UX designer & researcher — primary IC across discovery, design, and post-launch.
Scale
The core 26,000-record vulnerability table, redesigned end to end.
Outcome
−62% support tickets · 5× faster to action · an at-risk renewal saved.
13Icons & controlsAll UI icons: 24×24 grid · 1.8 stroke · round caps. Three jobs — don't mix them.

Toggles — stateful (on ⇄ off)

‖ Motion. (Theme toggle paused — dark only for now.)

Icon buttons — a single action (not stateful)

✕ ‹ › ⧉

Inline / decorative — meta & proof (read time, NDA, etc.)

◷ 8 min read 🔒 Under NDA
14Persona / voice listAvatar + name + role. Avatar is the shared 44px initials circle.
Ch
Chase
CISO
Al
Alex
Security Analyst
Av
Avery
Auditor
15Callout / asideAmber left-rule + 6% tint. The one "stop and read this" block. Distinct from pull quote.

The big cut

AI had the loudest energy, but search had the clearest path to delivery.

The chatbot scored highest on impact — but its position on the cost axis put it outside what the insights would justify.

16Pagination / stepperWas two styles for one action — now unified to a single ghost button, live site-wide.

Before — the drift

Iteration walkthrough · outlined 4px
1 / 4
Image modal · white-tint 6px bold
1 / 4

Now — one ghost button, on the family's 8px radius (live)

1 / 4