Interactive Design System

A system for clarity, trust, and complex product storytelling

This system turns your portfolio from a collection of polished sections into a cohesive product language. It is built for complex workflows, research-backed narratives, and high-trust product experiences.

Systems-first Enterprise-ready Warm editorial polish Workflow storytelling

Foundations

The logic underneath the visuals.

Design principles
  • Clarity over decoration — visuals should support comprehension.
  • Warm professionalism — premium, human, not sterile enterprise blandness.
  • Consistent structure — spacing, hierarchy, and cards should feel deliberate.
  • Trust-first UX — suitable for fintech, SaaS, billing, workflows, and research-heavy storytelling.
Brand personality
Strategic Elegant Structured Clear High-trust Thoughtful

Color System

Click any swatch to copy its token/value.

Core palette
Click a swatch to copy
Semantic palette
Success#2aa86b
Warning#f59e0b
Danger#d14343
Info#7ea2d1

Typography

Readable, strong hierarchy, no fake luxury nonsense.

Type scale
H1 — Product-level headline
40–58px · 950 · -0.03em
H2 — Section heading
28–36px · 900–950 · -0.02em
H3 — Card title / module header
18–22px · 900
Body text — long-form case study narrative for real reading, not skimming pain.
15.5–17px · line-height 1.7–1.9
MICRO LABEL / EYEBROW / SYSTEM LABEL
11–13px · 900–950 · uppercase only when useful
Live type tester
Design for complex workflows with clarity

Big headline energy is good. Going huge everywhere is not. Save the strongest scale for hero moments.

Spacing + Layout

Spacing is the difference between premium and chaotic.

Spacing scale
8px
12px
16px
22px
32px
56px
Radius + shadows
14px
18px
22px
28px
shadow-sm
shadow-md
shadow-lg

Components

Reusable UI that should stay consistent across your site.

Pills
SaaS workflows Research strategy Complex UX Systems thinking
Stat cards
$4.5M
Risk protected
92%
Task success
Expandable detail block

Use blocks like this for edge cases, implementation notes, guardrails, or design decisions that matter but do not belong in the main narrative flow.

Hiring Signals

What this system tells product teams and hiring managers about you.

This system communicates
  • You can handle complex workflows without making things visually messy.
  • You think in systems, not random one-off pages.
  • You care about structure, readability, and trust.
  • You can present product work to both leadership and execution teams.
Best fit roles this supports
Principal Product Designer Senior Product Designer Complex SaaS Fintech / enterprise Workflow-heavy UX Research-backed product design