Vanessa Martin
Frontend Architect.
Systems from first principles.
Harmonia
capacity → tokens → components
cognitive × temporal × emotional → 4-layer framework
Renge
φ / Fibonacci / OKLCH → production
100+ CSS vars, 6 profiles, runtime switching
8 years
PlayStation → aviation → npm
traffic records, 3-month rescues, open-source
Framework
Harmonia UI
Capacity as first-class input.
Most adaptive interfaces infer state from behavior. Harmonia inverts this. The user declares cognitive load, available time, and emotional state explicitly. The framework derives everything else.
4-layer architecture
cognitive: 0–100 / temporal: 0–100 / emotional: 0–100No inference. No profiling. The user declares their state directly.
energy = ∛(cognitive × temporal × emotional)EMA smoothing prevents style thrashing on rapid input changes.
deriveMode() → density | motion | focus | tone tokensReact context layer. Components read tokens. No prop drilling.
layout density / content length / motion level / color toneprefers-reduced-motion hard override at this layer. Always respected.
Design System
Renge Design System
Proportion as first principle.
Every token in Renge is derived, not chosen. Typography from the golden ratio. Spacing from the Fibonacci sequence. Colors in OKLCH for perceptual uniformity. Motion curves from phi-derived easing. Nothing arbitrary.
Typography — \u03c6 scale from 16px
| step | formula | value |
|---|---|---|
| 4xl | 16 × φ⁵ | 177px |
| 3xl | 16 × φ⁴ | 110px |
| 2xl | 16 × φ³ | 68px |
| xl | 16 × φ² | 42px |
| lg | 16 × φ¹ | 26px |
| base | 16px | 16px |
| sm | 16 × φ⁻¹ | 10px |
Spacing — Fibonacci \xd7 4px base unit
| token | fib | value |
|---|---|---|
| fib-11 | 89 | 356px |
| fib-10 | 55 | 220px |
| fib-9 | 34 | 136px |
| fib-8 | 21 | 84px |
| fib-7 | 13 | 52px |
| fib-6 | 8 | 32px |
| fib-5 | 5 | 20px |
| fib-4 | 3 | 12px |
| fib-3 | 2 | 8px |
Runtime injection
createRengeTheme('ocean') → 100+ CSS custom properties → productioncolor profiles
6 named themes
colors
OKLCH perceptual uniformity
motion
φ-derived easing curves
Production proof
The Hondana
Reading tracker built on Renge tokens. Full profile switching in production. All spacing, typography, and color from the system.
the-hondana.vercel.appThis portfolio
Built on Renge tokens. The color system, type scale, and spacing you are reading right now are Renge-derived.
Experience
Production Systems
Senior Front-end Engineer
@ Hello Goodwin
2025
- ▹Inherited a non-functional multi-tenant aviation platform mid-development. Shipped production-ready in 3 months against undocumented, schema-inconsistent APIs.
- ▹Diagnosed and resolved critical data persistence failure in React Query causing client profile mutations not to sync. Corrected company-level branding isolation breaking cross-tenant context boundaries.
- ▹Built entire frontend-to-backend integration from scratch. Reverse-engineered data contracts in the absence of reliable backend communication.
- ▹Operated through significant org instability: team lead departure, principal backend engineer terminated. Delivery uninterrupted.
- ▹Produced handoff documentation for Persona KYC/KYB integration, giving the incoming engineer a clear implementation pathway for the B2B/B2C fintech authorization layer.
Philosophy
Principles
Inputs over inference
Behavior should not be guessed from past patterns. If the system needs information, ask for it. Explicit state is safer, more respectful, and more accurate than prediction.
Capacity, not preference
A user who chose dense layouts last Tuesday may not have the bandwidth for them today. Adapt to what the user can handle now, not what they usually prefer.
Proportion as first principle
Every dimension in the system should be derived, not chosen. When the math is right, the aesthetics follow. Arbitrary numbers are technical debt.
Form without behavior
A component that only renders is not an interface. Interfaces respond. Every visual element should have a defined behavioral contract.