Lab · How I design
Form follows system. And the system follows the experience.
My design principles, as things you can touch. Each one takes about ten seconds.
I start from the experience people need, then design the system that delivers it: the structure, the rules and the components that let a product grow without losing its shape. When those rules are clear enough for people and AI tools to apply, quality scales with the product instead of breaking apart.
PRINCIPLE 01 / 05
Decide once, at the right layer.
Make a design decision in one place. Every product reads it from there.
BRAND COLOR
DESIGN SYSTEM
One brand color, set in one place. Five products read it.
THE POINT
A system pays off when one change reaches every product and nothing drifts.
IN MY WORK
In the cluster and HUD design system I lead, components only read final, resolved tokens. Brand, theme and hardware can change without touching a component.
Follow a token through the tiers →PRINCIPLE 02 / 05
Responsive to the window, adaptive to the hardware.
Responsive design reflows one layout to fit the window. Adaptive design recomputes sizes for each screen: its pixel density and how far away you are.
One layout. It reflows to fit the window.
Same content. Sizes are computed for each screen.
Example hardware. Letters are held at about 0.4° of your view on every screen.
Responsive changes the layout to fit the window. Adaptive changes the sizes to fit the hardware.
THE POINT
Web and mobile need layouts that reflow. Cars need sizes that are calculated. I have shipped both, and I know which one a product needs.
IN MY WORK
In the cluster and HUD system, text, icon and touch sizes are computed from each display’s density and viewing distance, following ISO 15008 visual-angle guidance. A 12.3″ cluster read at 750 mm gets 1 dp = 2.91 px. The owner app is responsive; the EV pages adapt to each vehicle’s center display.
Try the sizing model →PRINCIPLE 03 / 05
Brands are themes, not forks.
Every brand runs on the same components. A brand is a set of token values, not a copy of the library.
A fix to one button would be made once.
One component library, one brand. Pick another brand and count what you would maintain.
THE POINT
A fork per brand means every fix is made once per copy. A theme per brand keeps it to one.
IN MY WORK
Fourteen brands share one cluster and HUD component library. Signature tokens carry what makes each brand recognizable: needles, dial faces, numerals. The EV pages started as one unbranded core that every brand skins with its own tokens.
See the decision →PRINCIPLE 04 / 05
Constraints are inputs, not reviews.
How much attention people have goes into the design at the start. It is not something a review catches at the end.
One screen for every moment. Problems are caught later.
Attention is an input. The screen follows it.
INPUT SIDE, COMPUTED FROM THE CONTEXT
Parked: there is time to look, so the full screen is fine on both sides.
THE POINT
Feed the constraint in first and the right screen follows. Check it at the end and you get a list of problems.
IN MY WORK
In the cluster and HUD system, legibility minimums live in the display tokens, so a screen cannot go below them. Nobody has to catch it in review.
See where the minimums live →PRINCIPLE 05 / 05
Write rules machines can follow; people make the calls.
Design rules written clearly enough for an AI skill to apply. Anything that needs judgment comes back to a person.
A skill is a set of written rules an AI tool follows inside Figma. If a change matches a rule, it applies it. If not, it asks.
How I built the Figma AI skills →- Fill #3DDCF8 becomes the accent color tokenRule: a raw color that matches a token exactly
- Layer “Rectangle 214” renamed to card/surfaceRule: layer naming
- New promo banner, not in the library yetNo rule covers this
- Gap of 15 px becomes 16 pxRule: spacing scale
- Detached button reattached to the libraryRule: use the main component
- Text at 13 px becomes the Body small styleRule: type scale
- Warning orange used on a sale priceNo rule covers this
- Missing dark mode value filled inRule: every color token has a dark pair
8 changes from a design review. Some follow a rule. Some need a person.
THE POINT
Machines take the repetitive work. People keep the decisions that need taste and context.
IN MY WORK
My Figma AI skills apply the design system’s rules to files. Changes they cannot match to a rule with confidence go to a designer.
See the AI skills workflow →If this is how you want your product to work