Internal

Style Guide

Colours · Typography · UI Elements · Both Themes

Colours

All tokens are adaptive — switch theme via the nav icon to see both states.

Surfaces

--color-surface
page bg · odd sections
--color-surface-alt
even sections
--color-surface-raised
cards · panels · layered content

Text

--color-text
--color-text-soft
--color-text-ghost

Accents

--color-brand
#FF4D00
--color-highlight
#F5C400
--color-border
decorative
CTA gradient
#f76364 → #ff6701

Hardcoded Colors

These literal color values appear in page markup or scoped CSS — not yet tokenized. Candidates for future design token cleanup.

Section label accents

#FF4D00
Celonis · Research labels
= --color-brand
#4db8a8
Life Lessons banner label
#c45e1a
Peace Viz banner label
Life Lessons impact label

Gradient colors (used standalone)

#f76364
Bullet dots · link hover
research.astro, peace-viz
#ff6701
Gradient end
≈ --color-brand
Impact callout gradient
#f76364 → #f76362 → #ff6701
all case study pages + index

Transparent / overlay

rgba(255,77,0,0.07)
Card gradient background
index.astro banner cards
rgba(10,10,9,0.07)
Flow field stroke (dark)
rgba(245,245,240,0.1)
Flow field stroke (light)

Typography

Display — Fraunces

H1 / Display — clamp(3rem, 6.5vw, 5.5rem) · 400 · lh 1.02

Humans and data.

H2 / Banner — clamp(1.75rem, 3vw, 2.75rem) · 700 · lh 1.08

Bringing consistency to enterprise analytics

H2 / About — clamp(1.75rem, 3.5vw, 3rem) · 700 · lh 1.12

Designer, researcher, engineer.

Body — Instrument Sans

Body — 1.22rem · 400 · lh 1.65 · color-text

People don't engage with data analytically first. They engage personally — matching data to their own experience, beliefs, and context before deciding what to think about the numbers.

Body secondary — 1.22rem · color-text-soft

My PhD research explored how people engage with data visualizations. As a designer, I build products that put that knowledge to work.

Section label — 0.6875rem · 500 · 0.15em tracking · uppercase

Enterprise Product Design

Small / meta — 0.75rem · color-text-ghost

Product Designer · Process Mining · 2023–present

UI Elements

Buttons & Links

See my work About me → All work

Impact Callouts

First quantitative UX framework in the Product Experience team — design decisions now grounded in telemetry data

Unlocked public sector market through accessible visualization design

Interaction patterns that give users control over information density

Impact List

  • First quantitative UX framework — design decisions grounded in telemetry
  • Unlocked public sector market through accessible visualization design
  • 6.5× more customers acquired after platform relaunch
  • Repeat rate nearly tripled — from ~9% to ~27%

Accordion / Details

Making Design Measurable
Before the MUJ program, design decisions at Celonis were almost entirely qualitative. I built a quantitative UX framework that introduced structured telemetry tracking for user journeys.
Consistency at Scale
Process data involves a lot of visual encoding — colors, nodes, layouts — and Celonis had grown fast enough that each team had made their own choices.

Banner Cards (dark / warm)

Impact

  • Design decisions grounded in telemetry data
  • Unlocked public sector market

Impact

  • 6.5× more customers acquired
  • Repeat rate tripled

Output

11
publications
135+
citations

Navigation arrows

Previous: Celonis Next: Life Lessons