Constraint-Driven Design: The ALO Methodology

We wrote a single TypeScript file before opening a single design file. Colors, fonts, spacing, easing curves, four complete Edition palettes — all defined as typed constants before the first component existed. That file became the entire visual language for 12 pages, 4 Edition systems, a live diagnostic tool, and a component generation engine. The constraints made every decision downstream faster, not slower.

The Problem With Blank Canvases

Open any ten studio websites. Dark background, geometric sans-serif, "We craft digital experiences" headline, three service cards, a contact form. You could swap the logos and nobody would notice. When your own site is indistinguishable from your competitors, why would a prospect trust you to make their brand distinct?

We built a site that practices what we sell. Every section either answers "what do you do?" or "why should I care?" — and if it does neither, it gets cut. One CTA per viewport. No decorative sections. No adjective-heavy copy disguising the absence of a point.

Phase 1: Identity Before Pixels

A monogram with three strokes, each encoding a part of the business model. One warm accent color. One display face. One easing curve. These decisions, locked before anything was designed, eliminated thousands of downstream choices. The specifics are ours — but the principle is universal: define the rules before you design the first pixel.

Phase 2: Tokens Before Components

The token file maps every design decision to a typed constant. Components import from this file — never hardcode. When we needed four distinct visual languages for the Editions, we extended the same architecture. Same base, four palettes, zero duplication.

• RED (Atelier) — Big Shoulders Display 900, #C4362A, editorial asymmetry
• CONCRETE (Grid) — Azeret Mono 600, #7A8B6E, blueprint precision
• VELVET (Depth) — Playfair Display italic, #9B6FD4, atmospheric immersion
• VOID (Manifesto) — Spectral 200 italic, #FFFFFF, typographic minimalism

Phase 3: The Canvas — Diagnostic as Product

The Engagement Canvas scores your site across six behavioral variables — urgency, clarity, emotional confidence, political safety, switching friction, cognitive load. Drag the sliders, see your score, read prescriptions that are specific to your gaps. Not "improve your UX" — more like "your clarity is at 3/10: rewrite the H1 to state who you help, what you deliver, and the measurable outcome."

Phase 4: Ship What Survives the Audit

Every animation respects reduced motion preferences. Every interactive element has a visible focus ring. The quality audit framework we built for FrameIT — a multi-axis scoring system — we ran against our own pages. Sections that did not pass got cut or rebuilt. If you sell a diagnostic, you should survive it.

What Shipped

• 12 pages built on one token file, 4 Edition palettes, zero Tailwind
• A live Engagement Canvas with real-time scoring and prescriptions — try it yourself
• FrameIT: AI component generation constrained to Edition design languages
• Sub-second static export, Cloudflare Pages, Lighthouse 92+
• WCAG AA: reduced motion on every animation, semantic HTML, 4.5:1 contrast minimum

When the token file is right, every component decision is 80% made before you open the editor. The system does the thinking. You do the building.