Fable design

Fable Design

Core thesis: slop is the absence of decisions. Generic AI design is not a skill problem — it is what happens when no direction was chosen, so every choice silently defaults to the statistical mean: Inter, a purple-blue gradient, glassy cards, three centered columns, emoji icons. The cure is not more effects. It is making the decisions explicit, deriving a system from them, and enforcing coherence until the result could belong to no one else.

Pipeline, in order: Direction → System → Composition → Craft → Proof. Pixels before direction is the root failure; everything else inherits from it.

1 — Direction (before any pixels)

Read the brief for its temperature, then commit:

• Place the product on the axes that matter: calm ↔ loud, warm ↔ technical, dense ↔ airy, classic ↔ novel, playful ↔ serious. Pick a position, not the middle of every axis — the middle of every axis is the definition of generic.
• Write the direction sentence: the feeling in one line, plus three concrete commitments that will be visible in the artifact. Example: "Editorial and unhurried, like a well-set book: serif display, ink-on-paper palette, one warm accent doing all the work."
• Name 2–3 real design languages to steer by — Swiss editorial, terminal/monospace, brutalist, luxury print, OS-native, industrial spec-sheet. Steal structure and logic, never screenshots.
• Redesigns start with an audit: what the current design does, what must survive, what is actually broken. Respect what works; redesign is not erasure.

Checkpoint — Direction block: the sentence, the three commitments, the references. Every later decision must be defensible from this block.

2 — System (derive, don't improvise)

Turn the direction into tokens before composing. Few values, used everywhere — coherence is the aesthetic:

• Type: one display + one text face (or one family, two optical roles). A modular scale of 5–7 sizes. Weights chosen once. Line-height by role (tight display, readable body). Measure 45–75ch for running text.
• Color: background, surface, text, muted, one accent, semantic states. The accent is a worker, not a decoration — it marks interaction and priority, nothing else. Contrast AA minimum for all text, including muted-on-surface.
• Space: one spacing scale (4/8-based or similar), applied to everything — padding, gaps, section rhythm. Vertical rhythm is a design decision, not an accident.
• Shape & depth: one radius policy, one border weight, an elevation scale of 2–3 steps (or borders instead of shadows — decide once).
• Motion: a policy, not a mood — durations (UI: 150–400ms), one or two easings, and a rule for what animates. Every animation must name its job: orient, confirm, or delight-once. Respect prefers-reduced-motion.

3 — Composition

• One focal point per view. Decide what the eye lands on first, second, third — then check by squinting. If everything is emphasized, nothing is.
• Typography does the heavy lifting. Hierarchy through size, weight, and space before boxes, lines, and color.
• Whitespace is structure, not absence — it groups, separates, and paces. Density is chosen deliberately: dashboards earn density, marketing earns air.
• Let content shape layout. Sections take the form their content wants — not every idea is three cards. Asymmetry, full-bleed moments, and scale contrast are how a page gets a pulse.
• Grid with intent: align to it everywhere, break it on purpose somewhere.

4 — Craft

• Real content only. Actual-shaped names, numbers, and copy — including the ugly cases: the 40-character name, the empty state, the 0 and the 1,000,000. If the design survives only perfect strings, it isn't designed.
• Optical over mathematical: align icons and text by eye, compensate visual weight, fix the punctuation hanging and the widowed last word in display text.
• States are the product: hover, focus-visible, active, disabled, loading, empty, error, overflow. A component without states is a picture of a component.
• Responsive is reflow, not shrink: layouts reorganize at breakpoints; type scales down gracefully; touch targets stay ≥40px; test at 360px width.
• Accessibility is the floor, not a feature: contrast, keyboard order, focus states, labels, reduced motion. Non-negotiable regardless of direction.

5 — Proof (design verification)

You cannot grade what you did not render. Before delivering: render it, open it, look at it at full size, squint at it, resize to 360px, feed it a hostile string, tab through it. Screenshot if the harness allows. "The code looks right" is not a design review.

The rubric

Score 0–2 each before delivering (feeds the fable-core Gauntlet). Any 0 blocks delivery.

1. Direction — nameable in one sentence and visible in every section. Test: point to three places where a different direction would have produced a different choice.
2. Distinctiveness — attributable to this brand. Test: could this screenshot be any SaaS template from 2024? If yes, 0.
3. Hierarchy — squint test passes; first/second/third read as intended.
4. System coherence — every value traces to a token. Test: count distinct font sizes and colors in the output; more than the scale defines → fail.
5. Typography craft — pairing, scale, measure, leading, no display widows.
6. Color discipline — one hard-working accent; AA contrast everywhere; dark mode (if in scope) re-derived, not inverted.
7. Spatial rhythm — spacing from the scale; grouped by whitespace; aligned to grid.
8. Motion purpose — every animation names its job and obeys the policy.
9. Content & states realism — real-shaped content; empty/long/error states designed.
10. Proof — it was rendered and inspected, at desktop and 360px.

The anti-slop catalog

Check by name in the Gauntlet. Format: name — the tell → the correction.

1. Default gravity — Inter + purple-blue gradient + glass cards, unchosen → they are banned as defaults; use them only if the Direction block chose them.
2. Decoration without a job — glows, blobs, gradients "for pop" → every effect names its job (orient, group, emphasize) or dies.
3. Emoji-as-icon — 🚀✨💡 standing in for iconography → real icon set, or none.
4. Three-card syndrome — every section a centered 3-column icon+title+text grid → let each section's content pick its structure; vary rhythm and scale.
5. Uniform density — everything the same size and spacing, no focal point → re-run Composition; emphasize one thing per view.
6. Palette sprawl — a 12th gray and a 5th accent added ad hoc → back to tokens; delete until the scale is the whole truth.
7. Fake content — lorem ipsum, "John Doe", strings of convenient length → real-shaped data including the hostile cases.
8. Motion confetti — everything fades and slides in on scroll, equally → motion policy; animate meaning, not presence.
9. Shadow soup — heavy shadows at random elevations → elevation scale of 2–3 steps, or borders; decide once.
10. Center-everything — long text center-aligned, layout centered to avoid hierarchy decisions → left-align running text; earn your centered moments.
11. Contrast cowardice — light gray on white, thin weights at small sizes → AA minimum; text exists to be read.
12. Dark mode by inversion — same hues, flipped → re-derive surfaces, elevation, and accent luminance for dark.
13. Platform amnesia — web pretending to be iOS, native pretending to be web → respect the platform's physics: scrolling, focus, selection, semantics.

Interplay

Within fable-core: the Direction block extends Phase 1 (Altitude), the system audit of an existing product is Phase 2 (Recon), this rubric and catalog run in Phase 5 (Gauntlet), and Proof is Phase 6 (Verify). Scope discipline applies: a redesign brief for one page is not an invitation to restyle the app.

Exemplars

Read references/exemplars-design.md to calibrate what fable-grade design looks like — recommended before any greenfield interface, and whenever your work starts feeling like a template.