Design system

Graphite theme

The master reference for the /de site. Everything below is the real component or class the site uses, styled by app/de-themes/graphite.css, so it stays in step with the pages.

Colour

One accent per job. Blue is the theme colour and every link.

Accents

Blue

--de-link

Links, focus rings, check marks · Build

Blue, hover

--de-link-hover

Link hover

Green

--de-growth

Growth arrows, done · Research

Pink

deAccents.pink · #ef6f9a

In progress · Design

Text

Primary

--color-off-blue

Headings, names

Secondary

--de-text-secondary

Result lines

Body

--color-de-muted

Long-form text

Tertiary

--color-sky-blue

Labels, eyebrows

Quiet

--de-text-quiet

Unselected controls

Surfaces and lines

Canvas

--color-de-page-bg

Surface

--de-surface

Cards

Surface 2

--de-surface-2

Tracks, raised controls

Button fill

--color-de-cta-bg

Hairline

--de-hairline

Borders, dividers

Hairline, strong

--de-hairline-strong

Type

Inter throughout, sentence case, no letter-spacing on labels.

Eyebrow, hero · .de-eyebrow-hero

Senior Product Designer · Design Engineer

Headline · h1

I turn complex technical products into experiences that teams ship.

Section title · h2

AI made design output fast. Judgement is the hard part.

Sub-heading · h3

Most of the work is deciding what to solve

Lede · .de-lede

I design products and enterprise workflows for AI dev tools, health, consumer, and infrastructure.

Body

Users, PMs, engineers, often the founder in the room. I arrive with the tradeoffs already mapped.

Section label · .de-eyebrow

Selected work

Small label · .de-eyebrow-sm

Judgement

Buttons

Filled pills. White is reserved for the one main action.

Contact row · primary, then secondary

GitHubLinkedInX

Copy email with mail-app button

Header buttons · deHeaderButtonClass

LinkedIn⌘K

Secondary · deContactButtonClass

GitHub

Text links · footer

GitHubLinkedInX

Links

Always blue; lighter on hover.

Action link · .de-link

Case study

Inline link · .de-link-inline

Also: dCloud Assistant

Labels

Not clickable, so they never look like buttons.

Proof points · ProofPoint

Cisco-scale enterpriseYC-backed dev toolsAI-native productsRegulated health0→1 products

Tool pills · ToolPill, one dot colour per group

ResearchDesignBuild

Role tag · RoleTag

Cisco Topology Builder

Lead UX Designer

Tag · .de-tag

Enterprise

Data

Results and live status.

Result · TrendLine

31.9k users, up from 10.4k

Status line · NowStatus

Open to roles·London· 

Now·Freelancing at Toptal·AI agent health app (personal project)

Controls

Segmented control · role=group + aria-pressed

Radio · .de-radio (theme picker)

SelectedNot selected

Cards

Card · .de-card

Raised surface with a top highlight.

Glass card · .de-card-glass

Frosted, for the work cards. Hover it.

Case study

The scannable building blocks of a case study, from components/case-study/editorial.tsx.

Badge · beside a decision title, or on an idea

Readable at a glanceValidated in testing

Marked · ✓ / ✕ lines for pros, cons and options dropped

Shows the result exactlyDoesn't support other results

DecisionItem · summary, then Problem / Tried / Shipped / Why rows, then the longer story behind a toggle

01A floating pill menu, not a fixed sidebar Validated in testing

Replaced the fixed sidebar with a floating pill menu, so complex diagrams had room.

Problem
The menu and search bar left the diagram tiny.
Tried
Fixed, fully-labelled sidebarSearch bar on the canvas
Shipped
A floating pill menu plus a hover zoom panel.
Why
A small learning cost on the icons, a huge gain in canvas space.

Every pixel the UI takes is a pixel stolen from the work.

More detail

The longer story, for readers who want it.

Shipped

CompareTable · findings and what was designed; marks adds ✕ / ✓

Competitors

Appari

No social integration

Social sharing built in

Complex setup

One full-body photo

IdeaGrid · explored options, sketch over its ✓ / ✕

Idea 1: highlight and zoom

Dropped

The result is highlighted and zoomed in on the diagram.

Shows the result exactlyDoesn't support other results

Idea 4: search modal

Shipped

A modal lists results with info.

A list to choose from, with info

Hinge · the chapter break between two parts

Then adoption grew
10.4kUsers
31.9kUsers

The feature-request tool showed a clear ask: draw a full solution.

Takeaways · two cards of short points

What I learned

  • Trust the thing the research keeps returning to.

Would do differently

  • Test feasibility at the wireframe stage.

Patterns

Whole sections, as they appear on the About page.

What I bring

Design and build

I design the interface and write the front end myself, in React and Next.js.

Zero to one

Turning a one-line brief into a live, tested product.

Fix and scale

Auditing existing products to find where users drop off, then redesigning to fix it.

Evidence then judgement

Research and analytics tell me what's true. Deciding what to do with that is still the job.

AI in the process

I use it for research and for generating options at volume. I choose what's right and build it myself.

Changelog

  1. Now

    Toptal

    Freelance

    Freelancing as a product designer.

  2. AI agent health app

    Personal project

    Designing and building it.

  3. 2026

    Appari

    Lead Product Designer

    60% first-use completion

    Case study : Appari

  4. 2025

    AeonBio

    Lead Product Designer, founding team

    Used in pre-seed raise

    Case study : AeonBio

  5. 2024-2025

    Course Careers

    Design mentor

    Mentoring students and junior designers.

  6. 2021-2024

    Cisco Topology Builder

    Lead UX Designer

    31.9k users, up from 10.4k

    Case study : Cisco Topology Builder

  7. 2022

    Bloop

    Senior UX Designer

    70% adoption

    Case study : Bloop