Design

Where I decide how it looks and feels. I design before I build — and I design a system, not a pile of screens, so the decisions compound instead of repeating.

Overview

Design takes the scope from Discovery and gives it form: flows become wireframes, wireframes become real screens, and the visual decisions get codified into a design system — tokens first. The goal is that by the time I write code, the hard choices (color, type, spacing, components) are already made and reusable.

Goals

• Turn requirements into concrete flows and screens.
• Define the design system: tokens, type scale, color, spacing.
• Establish the component language before implementing it.
• Validate the look on real UI, not in isolation.

Activities

Tools & skills

• Figma for design and the source of tokens.
• Realtime Colors and tweakcn for palette and theme.
• The Foundations — Color Guidance, elevation, typography — as the token contract.
• Web Design Guidelines and Frontend Design skills to keep the agent on-system.

Deliverables

• Wireframes for the key flows.
• A defined token set (color, type, spacing, radius).
• A core component language, ready to implement.
• A previewed, agreed visual direction.

How Morpha UI did it

The design system came from a Figma source — the Cupido token set — rather than a generated palette. I applied it site-wide as CSS variables (app/global.css plus the lib/tokens/ layer), with light and dark handled by the same contract. Those tokens are documented in Color Guidance and are exactly what every component themes against, so design decisions made here propagate to every screen instead of being re-litigated per page.

Checklist

• Key flows are wireframed before any styling.
• Tokens (color, type, spacing, radius) are defined as the source of truth.
• Light and dark are covered by the same token contract.
• The palette has been previewed on real UI.
• The core component language is decided before implementation starts.