# Outlex Design Principles v3.1: Founder Taste Ledger Version **v3.1**, dated **14 September 2026**. This is the principles layer of The Outlex Standard: judgment rules distilled from 184 recorded founder corrections (outlex-marketing, `design-study-2026-09`) plus the design-recovery decisions of September 2026. It sits alongside `GRAMMAR.md` (Volume 1, foundation recipes) and `GRAMMAR-v3.md` (Volume 2, cinematography laws): those two files hold exact CSS, and this file holds the *why* and the *when*, so it never restates a token value. Fetch `brand-v3.md` for identity/token reference, `brand/compositions-v3.md` for product-presentation recipes, `brand/taste-v3.md` for the approved/rejected examples, `brand/founder-corrections.md` for the live log this ledger is folded from. **Precedence** (full statement: `brand/precedence.md`): current founder correction, then this live canon, then project adapter, then surface-specific skill. Every rule below is dated; a newer, explicit founder correction on the same surface wins even if it is not yet folded in here. **Source key**: `Ledger#` is an entry in `brand/taste/founder-taste-ledger-v3.json` (curated copy of the 184-entry ledger; full ledger at outlex-marketing `main`, `marketing/design-system/evidence/design-study-2026-09/taste/founder-taste-ledger-2026-09-10.json`). `Brief` is `founder-taste-brief.md` (confirmed 11 Sept 2026). `Plan §n` is `mvp2/.claude/plans/2026-09-10-outlex-great-design-system.md`. --- ## 1. Restraint **P-01. Subtraction is the default.** Cut sections, badges, and buttons rather than keep them "just in case." One primary call to action per screen; a second CTA styled the same as the first is clutter, not a safety net. Reason: the footer rebuild kept only a plain 5-column layout with no external badges and no emoji; a product-overview PR was corrected because "...these CTAs are redundant." Example: `design.outlex.ai` footer; GRAMMAR-v3 §5 color-budget checklist ("never two primary CTAs in view"). Scope: all surfaces. Version v3.1. Date 2026-03-22 / 2026-07. Source: Ledger#restraint (footer, PR#16; product overview page). **P-02. Rules live in the code, enforced by CI, never left as inline styles that can drift.** A design system is only real once it is the path of least resistance to follow. Reason: "Convert 323 inline styles to Tailwind utility classes" (PR #16). Example: `tokens-v2.css` / `tokens-v3-gravity.css` as the single source, verified by the repo's token lint. Scope: website, product. Version v3.1. Date 2026-03-22. Source: Ledger#restraint. **P-03. Minimalism: every added detail must earn its place with extreme value.** When unsure whether to add an element, prefer the version with fewer, better ideas. Reason: "what details could we add to add more value... if any... i rather have it minimalistic-only ideas with extreme value." Example: any new section proposal should be defensible against deletion, not merely justified by precedent. Scope: all surfaces. Version v3.1. Date 2026-07-31. Source: Ledger#restraint. **P-04. Breaking no rule is the floor, not a win.** A generic, templated composition with no real photograph and no distinctive move can be the weakest option in a set even at zero violations. Reading as "AI slop" is a failure on its own. Reason: confirmed founder judgment standard: a checklist alone predicted a blind-test loss even for a design he ultimately rejected, so rule compliance never substitutes for the founder's own comparison against the live site. Example: `Brief` § "How he judges." Scope: all surfaces. Version v3.1. Date 2026-09-11. Source: Brief. **P-05. Section boundaries blend, they don't cut.** Dark-to-light (or scene-to-horizon) transitions fade organically; no hard seam between sections. Reason: "Organic dark → cream fade at section bottom (no seam to next section)." Example: GRAMMAR-v3 §2 horizon divider (1px hairline plus breathing glow) is the sanctioned mechanism for this. Scope: website, marketing/hero surfaces. Version v3.1. Date 2026-05-11. Source: Ledger#restraint. --- ## 2. Colour and Light **P-06. Dark is the default identity, always warm.** Any new direction, whether hero, homepage mockup, or product scene, keeps dark as the default state; drifting toward pale/light compositions is a regression, not a fresh take. Reason: "i wanted default dark mode... your mockups are too boring too pale." Example: `GRAMMAR-v3.md` §7 "Both worlds" (dark is the theater, light is the gallery; both ship, but dark is first). Scope: website, marketing hero. Version v3.1. Date 2026-09-08. Source: Ledger#colour_and_light. **P-07. One small, named warm palette, used consistently, never gradients or one-off hex as a default treatment.** A gradient is a scarce, explicitly budgeted effect (Law 00's three homes), not a background convenience. Reason: "added warm color tokens (dark, cream, charcoal, blue, sage, terracotta, amber...)"; "brand mark gradient (logo SVG ONLY, never elsewhere)." Example: `tokens-v2.css` accent ramps; GRAMMAR-v3 §1 Color Law. Scope: all surfaces. Version v3.1. Date 2026-03-22 / 2026-04-29. Source: Ledger#colour_and_light. **P-08. Colour supports photography and product evidence; it never flattens or competes with it.** Too many shades of one accent, or a heavy colour wash over a product shot, reads as a downgrade even when each token is individually valid. Reason: "colours are terrible... too many shares of green, taste is off, its just too bad and a clear downgrade." Example: a product section that replaces a real screenshot's own colours with a brand-colour overlay. Scope: website, marketing. Version v3.1. Date 2026-09-08. Source: Ledger#colour_and_light. **P-09. Pale and low-contrast reads as boring, not calm.** A light composition still needs the same visual weight and engagement as a dark one; "calm" is not an excuse for washed-out. Reason: "the background makes the entire thing boring... overall colours are pale and not engaging." Example: light-theme gallery pages must hit the same craft bar as dark-theme theater pages (GRAMMAR-v3 §7). Scope: all surfaces, light theme specifically. Version v3.1. Date 2026-09-08. Source: Ledger#colour_and_light. --- ## 3. Type **P-10. Restraint on weight: one deliberate accent per page, never heavy bold.** The display face's 400-weight ceiling (brand-v3.md §19) is not only a technical limit; it is a taste rule the founder stated directly and repeated across two design systems. Reason: "replace font-bold with font-semibold in Pricing (max weight 600)"; the display serif never goes bold across the V7-to-Gravity transition (compiler's paraphrase, no founder_words recorded for that entry). Example: `brand-v3.md` §6d weight caps. Scope: all surfaces. Version v3.1. Date 2026-03-22. Source: Ledger#type. **P-11. Emphasis is a scarce resource: one italic sage (or ink) phrase per page, never more.** This predates and matches Law 00 item 2 exactly: the founder rule and the token rule are the same rule, stated twice. Reason: emphasis correction history from hero copy, 2026-03 through the Gravity lock. Example: GRAMMAR-v3 §1, `--ox-phrase-shine`. Scope: all surfaces. Version v3.1. Date 2026-03-22 to 2026-07-16. Source: Ledger#type. **P-12. Typography is a named, reusable scale defined once, never re-invented per component with arbitrary pixel values.** Reason: Compiler's summary of ledger entry #65 (2026-04-28), no founder_words recorded for that entry: typography is a named, reusable scale defined once in the config, not re-invented per component with arbitrary pixel values. Example: `brand-v3.md` §6b type scale. Scope: website, product. Version v3.1. Date 2026-04-28. Source: Ledger#type. **P-13. Hero headline emphasis comes from serif weight, restraint, and word choice, not a bold-sans-plus-gradient effect or italics scattered across individual words.** Reason: two reversals on the same failure mode (gradient-fill headline; per-word italics) across 2025-12 and 2026-05. Example: GRAMMAR-v3 §9b hero display recipe (400 weight, one italic phrase only). Scope: marketing hero. Version v3.1. Date 2025-12-03 / 2026-05-14. Source: Ledger#type. --- ## 4. Photography **P-14. Real, curated, assigned to one page, never a shared stock pool any PR can reshuffle.** Photo choice carries its own sign-off per surface and per theme. Reason: Compiler's summary of ledger entry #97 (2026-08-09 to 2026-08-12), no founder_words recorded for that entry: photo choice is page-specific curation with its own sign-off, not a shared stock pool that any PR can reshuffle. Example: `design/photo-registry.json` (outlex-corporate-website): one entry per image, one page assignment, a rights field. Scope: website, marketing. Version v3.1. Date 2026-08-09 to 2026-08-12. Source: Ledger#photography. **P-15. Never fabricate people, photos, or credentials to "humanize" the brand.** Invented team content or social proof is deleted outright, not edited down: this is a hard no, not a polish note. Reason: Compiler's summary of ledger entry #2 (2025-08-03), no founder_words recorded for that entry: never fabricate people, photos, or credentials to "humanize" the brand; invented team content gets deleted outright, not edited. Example: `Brief` Hard No, "fabricated social proof." Scope: all surfaces. Version v3.1. Date 2025-08-03. Source: Ledger#photography; Brief. **P-16. Ship images at their real rendered dimensions, never a full-resolution original scaled down by CSS.** Reason: compiler's paraphrase, no founder_words recorded for that entry: ship images resized to their actual rendered dimensions, not full-resolution originals scaled down by CSS. Example: the four-crop derivative family in `marketing.md` § Approved Photography Formats. Scope: all surfaces. Version v3.1. Date 2025-12-16. Source: Ledger#photography. **P-17. A visible placeholder in production is a real defect, not an acceptable in-progress state.** Reason: caught on the Portuguese contract-review page. Example: any locale or theme variant missing its approved asset blocks ship; it does not degrade gracefully. Scope: all surfaces, all locales. Version v3.1. Date 2026-08-11. Source: Ledger#photography. --- ## 5. Product Presentation **P-18. Product imagery is small, purposeful, and proves exactly one insight, never large just to fill space, never a centrepiece.** On the homepage, product shots live in the section just below the hero, never as its centrepiece. Reason: "product images occupy too much space, not subtle no value..."; decided 11 September 2026 that product never leads. Example: `brand/compositions-v3.md` § Product Moments. Scope: website, marketing hero and section. Version v3.1. Date 2026-09-08 / 2026-09-11. Source: Ledger#product_presentation; Brief. **P-19. A product shot must look art-directed and intentional, never "a screenshot taken from anywhere."** This is the single most repeated rejection in the ledger: five separate corrections across one review session named the same failure. Reason: "...this is 0 sexy, not engaging feels like a bad screenshot taken from anywhere." Example: `brand/compositions-v3.md`'s product-moment recipe (cropped insight, own paper frame, quiet surface) versus a flat `` of a full screen. Scope: all surfaces showing product. Version v3.1. Date 2026-09-08. Source: Ledger#product_presentation. **P-20. Show real features only, freely styled, with one coherent set of fictional data.** Concept screens that do not exist in the product are never an acceptable substitute for a real crop. Reason: Plan §2, "product: real features, freely styled, no concept screens." Example: the product-moment contract's `sourceBox` field: every crop traces to a real, approved master screen. Scope: website, marketing. Version v3.1. Date 2026-09-10. Source: Plan §2. **P-21. The product-moment contract is the reference implementation for product presentation on the website:** crops only (no pixel edits) from approved masters, at 2x, one shared type scale (1.15x the product's own size) applied to every piece on every page, composed per page so no two pages show the same pieces, a plain literal caption per piece, and the provenance line "Real Outlex screen · synthetic example data" (Portuguese: "Ecrã real da Outlex · dados de exemplo sintéticos") under the copy. Reason: founder-approved 14 September 2026 after three independent review rounds (type 9/10, clarity 8/10, polish 8/10, minimalism 9/10) as the website reference for product presentation. Example: `outlex-corporate-website` `src/components/shared/ProductScreenshot.tsx`, `src/styles/product-screenshot.css`, `public/product-moments/48cc6bdf/moments.json`. Full recipe: `brand/compositions-v3.md`. Scope: website. Version v3.1. Date 2026-09-14. Source: Plan §14 step 1; PR #314, PR #321. **P-22. No piece repeats across pages except a founder-approved repeat, recorded with its date.** As of 14 September 2026 there are four approved repeats, all decided 2026-09-14: `humanEscalation.handoff` on `/pricing` and `/how-it-works`; `regulatoryAction.issue` plus `source` on `/compliance-hub` and `/use-cases/regulatory-compliance`; `sourcedAnswer.jurisdiction` plus `checked` on `/answers` and `/lexi`; and `sourcedAnswer.limit` on `/trust` and `/how-it-works`. Reason: keeps every product moment reading as a distinct, specific proof rather than filler reused for convenience. Example: `src/test/product-moments.test.tsx`'s `FOUNDER_APPROVED_REPEATS` map, checked directly against `src/data/productScreenshots.ts`'s `pages` object for every moment (not just the `placements` array, which can lag it). Scope: website. Version v3.1. Date 2026-09-14. Source: Plan §15 GATE 1 decision 4; founder decision 2026-09-14 for `sourcedAnswer.limit`. **P-23. A dead product artifact is a brand violation, not a minor issue.** Every product-theater frame (Law 05) must be alive on its loop; a static screenshot fails the same rule the founder stated in plain words before it was a law. Reason: "P1 and P2 are really bad... this is 0 sexy, not engaging..." applies equally to a flat marketing crop and a frozen theater frame. Example: GRAMMAR-v3 §5 step 5; §8 Don'ts. Scope: product theater contexts (not the flat product-moment crops, which are intentionally still, see P-21). Version v3.1. Date 2026-09-08. Source: Ledger#product_presentation; GRAMMAR-v3. --- ## 6. Components **P-24. One CTA pair per hero does the job.** A second, duplicate CTA block stacked in the same area is clutter, not redundancy protection: matches P-01, restated here for component-level review. Reason: "video does not play and these CTAs are redundant." Example: GRAMMAR-v3 §5 color budget ("exactly 1 sage CTA in this viewport"). Scope: all surfaces. Version v3.1. Date 2026-07. Source: Ledger#components. **P-25. The whole card is the tap target, not a small corner control.** Reduce hit-target friction; drop label text unless it reads as subtle, secondary information. Reason: "the button should be central and the full card should trigger the capture... no text needed unless its subtle." Example: `Brief` § Components, "the whole card is the tap target." Scope: product, in-app components. Version v3.1. Date 2026-07-31. Source: Ledger#components; Brief. **P-26. Icons are functional signals, not decoration.** Prefer a monochrome icon over a text label where it scans faster, and never colour an icon and its adjacent label at the same time. Reason: "add icons from Linear and Todoist vs names..."; matches brand-v3.md §19 "one accent per element." Example: `brand-v3.md` §13 Iconography. Scope: all surfaces. Version v3.1. Date 2026-08-18. Source: Ledger#components; GRAMMAR-v3. --- ## 7. Motion Full additive recipe and don'ts: `GRAMMAR-v3.md` §6 (Light sweeps) and its §6b v3.1 addendum ("Why these numbers"). Principles here are the judgment layer behind that recipe. **P-27. Motion is earned and paid for per page, never a blanket library switched on everywhere.** Prefer cheap CSS animation (fade-in, gradient pulse, scale) over a JS motion library by default; reach for a library only when the effect cannot be done cheaply. Reason: "IntersectionObserver fade-up animations, no MagneticButton, no motion lib imports"; motion is earned and paid for per page, not a blanket library switched on everywhere (compiler's paraphrase, no founder_words recorded for that entry). Example: GRAMMAR-v3 §6 sanctioned sweeps (`ox-shine`, `ox-sheen`, `ox-ambient`, `ox-horizon`) are all CSS, with no JS dependency. Scope: all surfaces. Version v3.1. Date 2026-03-22 to 2026-07-03. Source: Ledger#motion. **P-28. Different interaction states need different motion character.** A hover flourish must never slow down the feedback of an actual click or tap: the asymmetric-timing rule (enter slower, exit/press snappier) is a taste rule as much as a performance one. Reason: Compiler's summary of ledger entry #79 (2026-07-04), no founder_words recorded for that entry: different interaction states need different motion character; a hover flourish should never slow down the feedback of an actual click. Example: brand-v3.md §11a token set, `--ox-enter` versus `--ox-press`. Scope: all interactive surfaces. Version v3.1. Date 2026-07-04. Source: Ledger#motion. **P-29. Motion accessibility is re-litigated on every new interactive surface, not signed off once.** `prefers-reduced-motion` support is a per-surface acceptance check, not a global tickbox closed early in a project. Reason: repeat correction across two separate PRs in the same week. Example: brand-v3.md §11f (always-include block). Scope: all surfaces. Version v3.1. Date 2026-07-04 to 2026-07-05. Source: Ledger#motion. **P-30. Slow cycles, earns its place, off under reduced motion, no gimmick effects by default.** 7 to 18 second cycles (law-level: `ox-shine` 7s, `ox-sheen` 12s, `ox-theater-cycle` 18s) are the ceiling for ambient motion; anything faster or busier reads as a gimmick. Reason: `Brief` § Motion. Example: brand-v3.md §11b cycle durations. Scope: all surfaces. Version v3.1. Date 2026-09-11. Source: Brief. --- ## 8. Copy **P-31. Reject generic or AI-flavored copy on sight; plain, human tone in both languages is non-negotiable, enforced by process rather than by re-reading everything after the fact.** Reason: "I need to constantly monitor copy so it's not AI slop and the copy is actually human-to-woman relatable in a good tone of voice." Example: `voice.md`, `voice-marketing.md` originality test (§17g of `brand-v3.md`: "could this have been written by any other company?"). Scope: all copy surfaces. Version v3.1. Date 2026-08. Source: Ledger#copy. **P-32. Slides are visual-first with minimal text: one clear place for the eye to look, never competing text blocks.** Reason: "this slide is still too verbose... we need slides to be much more visual and appealing..." Example: `Brief` § Slides. Scope: slides. Version v3.1. Date 2026-09-03. Source: Ledger#copy; Brief. **P-33. Every surface passes a plain-language, scan-first bar; dense unstructured prose fails regardless of accuracy.** Every word earns its place. Reason: "language complicates instead of simplifying... each word should earn its place." Example: applies equally to product copy, internal docs, and marketing. Scope: all surfaces. Version v3.1. Date 2026-09-09. Source: Ledger#copy; Brief. **P-34. One newsletter ask per inner page, footer only; in-page cards and sections go, no exceptions.** Reason: founder GATE 1 decision, website simplification. Example: 19 inner pages shipped 14 September 2026 with exactly one footer-form ask each. Scope: website, inner pages (not homepage). Version v3.1. Date 2026-09-14. Source: Plan §15 GATE 1 decision 3. --- ## 9. Across Surfaces **P-35. One design language, adapted to each surface, never reinvented per surface.** A platform surface (watch, mobile, email, product) must carry the flagship surface's language, adapted for its constraints, not designed as an unrelated experience. Reason: "apple watch UI has nothing to do with IOS... please align Watch design to be same as IOS but adapted." Example: `Brief` § Across surfaces. Scope: all surfaces. Version v3.1. Date 2026-07-31. Source: Ledger#restraint; Brief. **P-36. The live site is the bar, not the checklist.** A new direction is only accepted if it beats the live site side by side on restraint, class, human feeling, and fit with context; rule compliance is necessary, never sufficient. Reason: confirmed founder judgment standard, validated by blind prediction against the September proof-1 verdict. Example: `Brief` § How he judges. Scope: all surfaces. Version v3.1. Date 2026-09-11. Source: Brief; Plan §0. **P-37. Fixed core: logo, name, Inter body, Newsreader-role display, colours mostly fixed.** A shift needs an extreme-value case, never a routine "let's try something different." Reason: Plan §2, "fixed core." Example: `brand-v3.md` §6a font stack; §1 Identity. Scope: all surfaces. Version v3.1. Date 2026-09-10. Source: Plan §2. --- ## Hard nos (unchanged, restated for this ledger's completeness) These are Brief-level absolutes, already enforced as brand-v3.md §19 Hard Stops where a token exists: fabricated social proof; purple/violet glows or glow blobs; bubble-icon feature cards; sparkle icons or emoji standing in for AI; pure/cold black anywhere; more than one italic accent phrase per page or more than two ambient glows per screen; bold display type; large/dominant product screenshots or raw screen recordings as a homepage centrepiece; a different colour per card/icon in one group; pale, washed-out, or grainy/textured backgrounds; text-heavy slides; duplicate CTAs on one screen; a design language reinvented per surface. Source: `Brief` § Hard no; version v3.1; date 2026-09-11.