Notes on design systems for AI-generated frontends.
Writing on color, typography, spacing, and the decisions that keep an AI-generated interface looking like one deliberate product.
Color Mistakes That Make Apps Look Cheap (And How to Fix Them)
The code is solid, the layout is clean, and the app still looks a little off. Usually it's the colors. Here are the mistakes actually causing it.
Border Radius in UI Design: Sizes, Scales & the Nested Rule
The border-radius values that work for buttons, inputs, cards and pills, how to turn them into a scale, and the one rule that fixes nested corners.
How to Pair Fonts That Go Together (14 Real Examples)
Most font pairings fail for the same reason: they match instead of contrast. Here are 5 simple pairing formulas and 14 Google Font pairings you can use today.
Modular Type Scales Explained: How to Size Text Without Guessing
Picking font sizes by eye leads to inconsistent hierarchy. A modular scale replaces guesswork with a single ratio, and here is how to choose one and use it.
Box Shadow Elevation Scale: 5 Copy-Ready Levels for UI
A single copy-pasted box-shadow value doesn't communicate depth. It just decorates. Here is a 5-level elevation scale you can copy, and how to use it.
The 8pt Grid (8px Grid System): How to Build a Spacing Scale
Layouts that feel "off" are usually a spacing problem, not a color or typography problem. A base-unit spacing scale fixes it, and here is how to build one.