The challenge
When every interface starts from scratch, the same decisions get made again: type, spacing, controls, and how they behave. I wanted a foundation I could carry between projects.
Framework is where I am making my growing design practice concrete. It connects the visual choices in an editable design with the behavior of a working interface.
The approach
Framework turns those decisions into explicit roles. Typography, colour, and geometry have a purpose; components include states as well as their default appearance.
- Regular, tight headings. Comfortable body text.
- Square controls. Capsule navigation.
- Visible focus. Meaningful mobile layouts.
Inter Tight carries headings and actions; Inter supports reading and everyday UI. Graphite anchors the interface, with neutral surfaces and restrained Ember punctuation. Shape follows purpose instead of applying the same rounded card to everything.
From drawing to behavior
Editable Paper designs establish composition and states. The implementation gives those drawings semantic structure, keyboard behavior, responsive layouts, and visible focus.
Default appearance is only part of a component. A usable system must also account for hover, focus, loading, validation, recovery, and the information that needs to survive on smaller screens.
The result
A portable kit of tokens, component patterns, and implementation guidance. This website uses the same foundation.
Framework remains a living practice: a place to explore interface design, examine the small decisions, and carry what works into the next product.