My Style Guide
Introduction
Systems thinker. Story designer.
I came to interaction design through architecture — where I fell in love with a simple truth: design doesn't decorate life, it shapes it. That truth drives everything I make. I think in systems, design for real people, and stay close to the gap between how life is and how it could be. As an endurance athlete, I know firsthand what it means to push toward your best self — and I've made that the center of my work. I believe the most meaningful thing design can do is help people make the most of being alive — and I'm here to spend my career telling those stories.
Color
Pink leads. Orange energizes.
Cobalt grounds. Green surprises.
Typography
Design shapes life.
Story designer.
I think in systems, design for real people, and stay close to the gap between how life is and how it could be.
Section 01 — Color
Section 02 — Typography
Section 03 — Spacing & Layout
01 — Introduction · COMPONENT 01
Spacing & Layout
Rules of thumb
Whitespace is not emptiness — it's emphasis.
No extra linework. Headlines carry the story.
Decorative rules, dividers, and borders are clutter
unless they're doing structural work.
This applies across all contexts — UI, case studies, presentations.
It's a named aesthetic decision, not a default.
Big headlines, clean space. Let the type do the heavy lifting.
Color carries meaning. Never decoration alone.
Two headline weights, same color family.
Primary statement bold and dark. Supporting thought toned down. Never two competing colors — always same tone, two shades. In presentations: Ink #1A1A1A primary, gray supporting. In other artifacts: any palette pair from the same family — #D45FA8 + #FFB8E7 yes; #D45FA8 + #79DAE3 never.
Elevation through behavior, not blur.
No shadows anywhere. Each element signals interaction — cards tilt, buttons invert color, tags scale, dots elongate.
Components
Button System
All CTAs, project links, and actions. Pill shape echoes the bloom illustrations — organic roundness carried into UI. Three variants for hierarchy.
Tag / Badge
Categorical labels for project type, content, or status. Each variant draws from the palette — color signals category, not decoration. Outline for secondary or neutral tagging.
Data Card with Trend
Stat value + label + directional delta vs. baseline. Up in Forest, down in Deep Pink, stable in Ash. Baseline-relative communication — not absolute.
Used in health and data-dense screens — Emma's Twin dashboard, Stella training metrics.
Input Field
Pill-shaped to match the button system — same shape language throughout. Focused state uses a 2px Deep Pink border for clear active feedback.
Toggle Switch
On state in Deep Pink, off in neutral. Used in settings flows across Stella and Emma's Twin.
Progress Dots with Label
Active dot elongates to pill in Deep Pink. Inactive dots in Petal. Optional label next to active dot. No linework — shape and color do all the work.
Navigation Pattern
Text only — no borders, no pill wrappers. Previous in neutral, Next in Deep Pink. Consistent with the no-linework principle.
Voice & Tone
direct. genuine. never corporate.
Rules of thumb
Every project leads with a story
Before the brief, before the problem — there's a person.
The story is the argument.
The specs follow.
Short sentences that land, then breathe
When something matters, it gets its own line.
Then space.
Then the next thing.
Direct and genuine — never corporate
Write how you talk.
No jargon, no buzzwords, no performance.
Your voice is a design choice — own it.
The specifics
Lead with the human,
then the problem,
then the work.
Conversational without
being cutesy.
Big headline IS the argument.
Two tones, same color family.
Belief over credentials.
Architecture background up front.
Illustration
Hand-drawn and clean-sketchy using a wavy pen tool — intentionally imperfect, meant to evoke feeling and tell stories rather than be perfectly polished. Illustration for concept and expression. Clean geometric icons (Lucide) for function.
Pink
Red
Orange
Yellow
Illustration for expression.
Icons for function.
Sketchy style is never used for functional UI or navigation.