Style Guide · Living Document

The system behind this portfolio.

Every colour, typeface, surface and motion pattern used across these pages — documented the way I'd expect any product team to document theirs. Practice what you preach.

01Colour

Warm neutrals, one aurora.

The palette stays quiet — warm off-whites and near-blacks — so the single gradient accent can do all the talking. Purple is the working accent pulled from the aurora.

Canvas

#FCFBFAPage background

Raised

#FFFFFFCards & panels

Ink

#15161BHeadings, primary buttons

Body

#55565FBody copy

Muted

#7A7B84Secondary text

Faint

#9A9BA6Meta & captions

Rule

#E4E0D9Divider lines

Card Border

#EEEAE41px card outlines

Accent

#A855F7Links, hovers, highlights

Accent Soft

#FAF5FFTinted fills

Midnight

#1A1530Dark hero gradient base

Aurora — surface gradient

120deg · #5B5BF5 → #A855F7 → #F0567A → #FF9D5C

aurora text

Aurora — text gradient

115deg · #A78BFA → #F0567A → #FF9D5C · clipped to text

Deep section gradient

135deg · #1A1530 → #2A1840 → #3A1A38 → #3A2420

Product Accents — From the Design System

Blue

#2563EB · PMS & Ecosystem

Red

#B4453C · POS & Ecosystem

Green

#1F8A5B · Inventory

Purple

#7A4FC2 · Extended Family

02Typography

Three voices, one conversation.

Hanken Grotesk

The workhorse. Headlines, body copy and UI — weights 400 to 800, tight negative tracking on display sizes.

Newsreader Italic

The editorial voice. Italic accents inside headlines, pull quotes and oversized numerals — often gradient-clipped.

IBM Plex Mono

The system voice. Eyebrow labels, section numbers and metadata — uppercase, letter-spaced .12–.18em, 11–12px.

Display · clamp(42–88px) · 700Great design starts here.

Heading · clamp(26–46px) · 700Section headings carry the argument.

Heading 3 · 19–24px · 700Card and component titles keep it tight.

Lead · Newsreader italic · 19–24pxA lead line sets the scene before the body begins.

Editorial accent · Newsreaderthe moment that matters.

Body · 16–16.5px · 1.66Body copy sits in the warm grey ink, never pure black — generous line height, capped measure, text-wrap pretty.

Label · 11–12px · .14em capsEyebrow labels & section numbers

03Buttons & Interactions

Pills, always. Hover to feel them.

On light surfaces

Primary Secondary Tertiary Text Link Pill Link

On dark surfaces

Primary Ghost

Sizes

Medium Small

md · 16×30px pad · 15.5px / sm · 11×20px pad · 14px

Focus

Focused

Accent ring — soft + solid · 45% white ring on dark

04Elements

Small parts, repeated everywhere.

Eyebrow Label

Section Eyebrow · 01

Mono, uppercase, accent-coloured — sits above every section heading.

Tags & Pills

Design Systems Enterprise UX Leadership

12px · 1px #E7E3DD border · radius 999px · 6×12px padding.

Stat

40%

Faster Design→Dev Handoff

Newsreader italic numeral, 40–76px, with a mono uppercase label beneath.

Testimonial

Serif open-quote, body quote, then the person — never a wall of praise.

Name Surname

Role · Company

05Surfaces & Cards

Soft borders, big radii, deep soft shadows.

Light card

1px #EEEAE4 border, 18–24px radius, canvas or white fill. On hover: −5px lift, lilac border, purple-tinted shadow.

Dark feature card

The midnight-violet gradient (150deg, #1A1530 → #3A1A38) for hero moments, active states and detail panels.

Aurora card

Full-gradient surface — used once per page at most, for the single statement that deserves it.

"Pull quotes take a 2px accent rule on the left, Newsreader italic, and room to breathe."

06Motion · Radii · Shadow

Scroll-driven, never gratuitous.

Scroll reveal

Every section fades up (or scales in) as it enters the viewport — driven by CSS scroll timelines, no JS.

fadeUp/scaleIn · .9–1s · cubic-bezier(.16,1,.3,1) · entry 0%–cover 22%

Reading progress

The 3px aurora bar at the top of every page grows with scroll position.

scaleX 0→1 · animation-timeline: scroll()

Hover lift

Cards lift −4 to −6px with a lilac border and a purple-tinted soft shadow; buttons lift −2px.

transform .3–.4s · translateY(-5px)

Kinetic marquee

Hero keyword strips loop endlessly, alternating solid and outlined display type.

translateX 0→−50% · 38s linear infinite

Radii

999

Small controls 12 · cards 18–26 · buttons, tags and avatars always pill.

Shadow

Card · 0 30px 64px −50px rgba(30,40,80,.4)

Hover · 0 28px 56px −34px rgba(90,50,140,.26)

Accent glow · 0 44px 84px −54px accent

07Voice & Tone

Say less, mean more.

Casing

Headlines and body in sentence case. Buttons, links, nav and tags in Title Case — "View Case Study", "Download Resume".

Rhythm

Short declaratives. One idea per line. Numbers earn their place — 40%, 1→30, 15+ — never stat padding.

Emphasis

One gradient-italic phrase per headline. Pull quotes in Newsreader italic. Everything else stays quiet.