True white, cool grays
No beige. #FFFFFF and zinc-100 (#F4F4F5) keep the page sharp — the same neutral stack Stripe and Vercel use.
Why · Warm tints read cheap; cool neutrals read engineered.Style library
Each entry is a full mockup with tokens, rationale, and specimens — pick a direction, ship it.
Catalog
Article eval · Preview + structured judge + attribution (SitePolicy vs GlobalPolicy). Eval queue, pipeline steps, traces drawer.
Feed · Conversational — one question at a time (Typeform / progressive profiling). No visible queue; value-exchange microcopy.
Feed · Progress — 6-layer stepper with field checklist and one question at a time. Goal-gradient nudges.
Feed · Thread — sticky image card + activity feed; operational transparency shows where answers land on the profile.
Style book · Dashboard templates + component defs (stats bar, tables, forms, media). Binder nav, void white B&W.
App shell · Binder — Linear-style sidebar. Full app chrome with client switcher, section nav, and content area.
App shell · Brief — chapter tab deck with pagination. Focused reading mode for presenting the brand book.
App shell · Board — dashboard overview. Section cards + stats + activity feed. Multi-client brand portal.
Brand book · Manifesto — cinematic scroll narrative. Full-viewport chapters, tight type, do/don't pairs.
Brand book · Specimen — sidebar nav, color tokens, type scale, component examples, token table.
Brand book · Letter — first-person voice, pull quotes, annotations, personal founder narrative.
Void glass, bento grid, violet glow — SaaS and dev tools.
Water Resources International — dual-path hero, contract proof, groundwater trade sections. Hawaii drilling.
Full client site — proof callout hero, trades section order, Field Notes. Opens like a live site.
Blackstone Landscaping AK — homepage mocks, Google review gate QR zone, hero and fold catalogs.
QR review business card → mobile star gate → Google or private feedback.
FPS marketing site — void white Clear system. Specimen numbering, ink-on-white, Inter tight tracking.
Trades web design pitch — portfolio, process, and pricing for electricians, drillers, and contractors. Customer-facing void white layout.
Seven fal-generated marks + CSS typography baseline — aquifer, island, spring, and strata badge directions.
Eighteen hero directions — aquifer, full-bleed rig, aerial plant, dual-path, and basin coverage patterns.
Eighteen styled homepage text blocks — meta tags, intro bands, authority prose, geo copy, and life-theme narrative.
Nine below-the-fold sections — contract bar, capabilities, sectors, featured well, and quote close.
Chalkboard stats component — Flux texture + SVG icons + crawlable text, compared to Ideogram PNG explorations.
WRI blog article demo — life-theme photography, chalk stats infographic, permits and deep-well guides.
Twelve hero directions — layout, conversion, and trades-specific contractor patterns.
Nine below-the-fold sections in three volumes — trust, services, proof, areas, and close.
Nine image-first heroes — canopy, arch portal, triptych, reveal slider, lower third, and more.
Ten below-the-fold sections — credentials, services, reviews, plans, areas, FAQ, seasons, and projects.
Blog layout for Sparky — consult-crisp masthead, editorial rhythm, latest rail.
Serif trade site — left-aligned article on a local contractor homepage.
White field, zinc type, one blue accent — crisp product marketing.
Light product
The light counterpart to Surface. Same discipline: restrained palette, obvious hierarchy, zero ornamental warmth.
No beige. #FFFFFF and zinc-100 (#F4F4F5) keep the page sharp — the same neutral stack Stripe and Vercel use.
Why · Warm tints read cheap; cool neutrals read engineered.Inter at -0.04em on headings. No serif pairing — hierarchy comes from weight and size, not font switching.
Why · Fewer variables; faster to implement consistently.Ink (#09090B) for text and primary actions. Blue (#2563EB) reserved for links and focus — never decorative fill.
Why · Accent scarcity makes CTAs obvious.Annotated mockup
Product copy, one action, zinc-muted support text. Nothing else on the fold.
Get startedHeadline ~12ch
Stacked short lines — scans like a product changelog, not a brochure paragraph.
6px radius, not pills
Slightly square corners feel technical. Save full pills for tags only.
Zinc placeholder blocks
Cool gray mock UI — neutral until real screenshots land. No tan placeholders.
Solid black CTA
One filled button. No gradients competing with the headline.
Four steps max on marketing pages.
4px base, 8px grid for layout.
Three colors do the work.
Buttons
Quote
Reduce choices on the fold. One headline, one button.
Rules
Use Clear when