Field notes on design
Practical guides on brand-consistent websites, design systems, typography, layout, and shipping real code from a single prompt.
Why AI Website Builders Drift Off-Brand
Most AI website builders nail the first generation, then drift off-brand by the tenth edit. Here's why it happens — and how a design-system lock fixes it.
Read the articleMore articles
How to Generate a Website From a Prompt
A step-by-step walkthrough of turning a single prompt into a brand-coherent, multi-page website you can edit and export — no templates, no code required.
ReadWhat Is a Design System? A Plain-English Guide
A design system is the single source of truth for your brand's colors, type, spacing, and components. Here's what goes in one and why every website needs it.
ReadHow to Choose a Color Palette for Your Brand
Most strong brand palettes use one primary color, one accent, and a neutral range. A step-by-step guide to choosing colors that stay readable and consistent.
ReadFont Pairing for Websites: A Practical Guide
The safe default is one heading font and one body font. A practical guide to pairing typefaces, sizing body text, and keeping type consistent across a site.
ReadVisual Hierarchy on a Landing Page: A Guide
Visual hierarchy is the order the eye moves through a page. Learn the five levers — size, weight, color, spacing, position — and where to put your call to action.
ReadWhitespace in Web Design: A Practical Guide
Whitespace is the empty space that gives a layout room to breathe. Learn what a spacing scale is, how much space to use, and how to keep spacing consistent.
ReadHow to Design a Hero Section That Works
A hero section needs one clear headline, a short supporting line, one primary CTA, and a supporting visual. Here's how to design a hero that converts.
ReadWhat Makes a Landing Page Convert?
A landing page converts when it has one goal, one clear message, an obvious CTA, fast load, and trust signals. Here are the essentials that drive action.
Read