Operating model
The case studies are evidence. The operating model is the idea.
Knowledge becomes AI-assisted prototypes, validated interactions, product specifications, and shipped software.
System
A reusable structure for turning complex information into product judgment.
The system page documents the rules we have been applying in Figma: a dark interface, green semantic accents, a 4px base unit, structured typography, and evidence-led case study components.
Component hierarchy
Reusable pages should be built from stable component roles.
- 01Navigation
- 02Hero + metadata
- 03Evidence rows
- 04Data callouts
- 05Journal modules
Grid
Use a 4px base unit.
Type sizes, line heights, widths, heights, and gaps should resolve cleanly to the 4px rhythm wherever practical. Case-study artboards should be horizontally arranged with consistent spacing between desktop and mobile groups.
Color
Use two default text colors.
Primary text stays close to white. Secondary text is an off-white gray-green. Green is reserved for metadata, links, metrics, and data visualization accents.
Assets
Export from source frames.
Do not rebuild screenshots as wireframes. Use original source frames or high-resolution PDF crops, export at 2x or higher, and keep historical product UI visually intact.
Pages
Separate site routes, consolidate Figma pages.
Figma can keep related artboards in fewer pages, but the website should expose clear routes for home, work, system, journal, and individual case studies.