arkaos 4.28.0 → 4.29.0

package/departments/brand/skills/design-review/references/design-registers.md

@@ -0,0 +1,181 @@
+# Design Registers — Brand vs Product
+
+> Derived from [impeccable](https://github.com/pbakaus/impeccable) (Apache-2.0 — see `impeccable.LICENSE` and `impeccable.NOTICE` in this directory). Merged from upstream `brand.md` + `product.md`; reflex-reject lists relocated to the doctrine hub.
+
+## Register selection
+
+Pick the register before critiquing or designing, in this order:
+
+1. **Task cue** — what the request names: "landing page", "brand site", "campaign" → brand; "dashboard", "settings", "admin", "table" → product.
+2. **Surface in focus** — what the file or route actually is: a marketing route is brand even inside an app repo; an authenticated tool screen is product even on a brand domain.
+3. **Project context** — the project's design system and standing brand commitments break ties and always constrain both registers.
+
+One register per surface. Mixed products (marketing site + app) switch register per surface, not per project.
+
+## Brand register
+
+When design IS the product: brand sites, landing pages, marketing surfaces, campaign pages, portfolios, long-form content, about pages. The deliverable is the design itself; a visitor's impression is the thing being made.
+
+The register spans every genre. A tech brand (Stripe, Linear, Vercel). A luxury brand (a hotel, a fashion house). A consumer product (a restaurant, a travel site, a CPG packaging page). A creative studio, an agency portfolio, a band's album page. They all share the stance (*communicate, not transact*) and diverge wildly in aesthetic. Don't collapse them into a single look.
+
+### The brand slop test
+
+If someone could look at this and say "AI made that" without hesitation, it's failed. The bar is distinctiveness; a visitor should ask "how was this made?", not "which AI made this?"
+
+Brand isn't a neutral register. AI-generated landing pages have flooded the internet, and average is no longer findable. Restraint without intent now reads as mediocre, not refined. Brand surfaces need a POV, a specific audience, a willingness to risk strangeness. Go big or go home.
+
+**The second slop test: aesthetic lane.** Before committing to moves, name the reference. A Klim-style specimen page is one lane; Stripe-minimal is another; Liquid-Death-acid-maximalism is another. Don't drift into editorial-magazine aesthetics on a brief that isn't editorial. A hiking brand with Cormorant italic drop caps has the wrong register within the register.
+
+Then the inverse test: in one sentence, describe what you're about to build the way a competitor would describe theirs. If that sentence fits the modal landing page in the category, restart.
+
+### Typography
+
+#### Font selection procedure
+
+Every project. Never skip. <!-- rule:brand-typo-font-selection-procedure -->
+
+1. Read the brief. Write three concrete brand-voice words. Not "modern" or "elegant," but "warm and mechanical and opinionated" or "calm and clinical and careful." Physical-object words.
+2. List the three fonts you'd reach for by reflex. If any appear in the reflex-reject list below, reject them; they are training-data defaults and they create monoculture.
+3. Browse a real catalog (Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim, Velvetyne) with the three words in mind. Find the font for the brand as a *physical object*: a museum caption, a 1970s terminal manual, a fabric label, a cheap-newsprint children's book, a concert poster, a receipt from a mid-century diner. Reject the first thing that "looks designy."
+4. Cross-check. "Elegant" is not necessarily serif. "Technical" is not necessarily sans. "Warm" is not Fraunces. If the final pick lines up with the original reflex, start over.
+
+#### Reflex-reject list
+
+<!-- rule:brand-typo-reflex-reject-fonts -->
+
+The canonical reflex-reject list (fonts + aesthetic lanes) lives in `departments/brand/references/uiux-knowledge-and-tools.md` §11. The identity-preservation carve-out applies: existing brand commitments always win over the ban list.
+
+#### Reflex-reject aesthetic lanes
+
+Parallel to the font list. Currently saturated aesthetic families that have flooded brand surfaces. If a brief lands in one of these lanes without a register reason that *requires* it (a literal magazine, a literal terminal, a literal industrial signage system), it's the second-order training reflex: the trap one tier deeper than picking a Fraunces font. Look further. <!-- rule:brand-typo-reflex-reject-lanes -->
+
+The canonical reflex-reject list (fonts + aesthetic lanes) lives in `departments/brand/references/uiux-knowledge-and-tools.md` §11. The identity-preservation carve-out applies: existing brand commitments always win over the ban list.
+
+The reflex-reject lists apply to **new design choices**. When the existing brand has already committed to a font or a lane as part of its identity, identity-preservation wins; variants on an existing surface don't second-guess what's already shipping. The reflex-reject lists are for greenfield decisions and for departure-mode variants.
+
+#### Pairing and voice
+
+Distinctive + refined is the goal. The specific shape depends on the brand, not on the brand's category. A category ("restaurant", "dev tool", "magazine", "fintech") is not a recipe; treating it as one is the first-order reflex the doctrine warns against. <!-- rule:brand-typo-pairing-voice -->
+
+Two families minimum is the rule *only* when the voice needs it. A single well-chosen family with committed weight/size contrast is stronger than a timid display+body pair.
+
+#### Scale
+
+Modular scale, fluid `clamp()` for headings, ≥1.25 ratio between steps. Flat scales (1.1× apart) read as uncommitted. <!-- rule:brand-typo-modular-scale -->
+
+Light text on dark backgrounds: add 0.05–0.1 to line-height. Light type reads as lighter weight and needs more breathing room. <!-- rule:brand-typo-light-on-dark-leading -->
+
+### Color
+
+Brand surfaces have permission for Committed, Full palette, and Drenched strategies. Use them. A single saturated color spread across a hero is not excess; it's voice. A beige-and-muted-slate landing page ignores the register. <!-- rule:brand-color-strategy-permission -->
+
+- Name a real reference before picking a strategy. "Klim Type Foundry #ff4500 orange drench", "Stripe purple-on-white restraint", "Liquid Death acid-green full palette", "Mailchimp yellow full palette", "Condé Nast Traveler muted navy restraint", "Vercel pure black monochrome". Unnamed ambition becomes beige. <!-- rule:brand-color-named-reference -->
+- Palette IS voice. A calm brand and a restless brand should not share palette mechanics. <!-- rule:brand-color-palette-is-voice -->
+- When the strategy is Committed or Drenched, color carries the brand. Don't hedge with neutrals around the edges. Commit. <!-- rule:brand-color-commit-no-hedge -->
+- Don't converge across projects. Each brand surface differentiates from the last. <!-- rule:brand-color-no-converge -->
+- When a cultural-symbol palette is the obvious pull, reach past it. Let the cultural reading come from typography, imagery, and copy, not the palette. <!-- rule:brand-color-no-cultural-symbol -->
+
+### Layout
+
+- Asymmetric compositions are one option. Break the grid intentionally for emphasis. <!-- rule:brand-layout-asymmetric -->
+- Fluid spacing with `clamp()` that breathes on larger viewports. Vary for rhythm: generous separations, tight groupings. <!-- rule:brand-layout-fluid-spacing -->
+- For image-led briefs (hotels, restaurants, magazines, photography), full-bleed hero imagery with overlaid menu and centered headline is a canonical move; let the photograph be the design. <!-- rule:brand-layout-image-led-hero -->
+- When cards ARE the right affordance, use `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free responsiveness. <!-- rule:brand-layout-cards-when-right -->
+
+### Imagery
+
+Brand surfaces lean on imagery. A restaurant, hotel, magazine, or product landing page without any imagery reads as incomplete, not as restrained. A solid-color rectangle where a hero image should go is worse than a representative stock photo.
+
+**When the brief implies imagery, you must ship imagery.** Zero images is a bug, not a design choice. "Restraint" is not an excuse. If the approved comp or brief is image-led, ship real project assets, generated raster assets, or a credible canvas/SVG/WebGL scene. Do not replace photographic, architectural, product, or place imagery with generic CSS panels, decorative diagrams, cards, bullets, or copy. <!-- rule:brand-imagery-required -->
+
+- **For greenfield work without local assets, use stock imagery.** Unsplash is the default. The URL shape is `https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w=1600&q=80`. **Verify the URLs before referencing them.** If you have an image-search MCP, web-fetch tool, or browser access, use it to find real photo IDs and confirm they resolve. Guessed IDs (even ones that look real) often 404 and ship as broken-image placeholders. Without a verification path, pick fewer photos you're confident exist over more that you guessed; never substitute colored `<div>` placeholders. <!-- rule:brand-imagery-unsplash-default -->
+- **Search for the brand's physical object**, not the generic category: "handmade pasta on a scratched wooden table" beats "Italian food"; "cypress trees above a limestone hotel facade at dusk" beats "luxury hotel". <!-- rule:brand-imagery-physical-object-search -->
+- **One decisive photo beats five mediocre ones.** Hero imagery should commit to a mood; padding with more stock doesn't rescue an indecisive one. <!-- rule:brand-imagery-one-decisive-photo -->
+- **Alt text is part of the voice.** "Coastal fettuccine, hand-cut, served on the terrace" beats "pasta dish". <!-- rule:brand-imagery-alt-text -->
+
+"Imagery" here is broader than stock photography: product screenshots, custom data visualizations, generated SVG, and canvas/WebGL scenes are all imagery. Text-only pages where typography alone carries the entire visual weight are the failure mode.
+
+### Motion
+
+- One well-orchestrated page-load beats scattered micro-interactions, when the brand invites it. Some brands skip entrance motion entirely; the restraint is the voice. <!-- rule:brand-motion-one-page-load -->
+
+### Brand bans (on top of the shared absolute bans)
+
+- Monospace as lazy shorthand for "technical / developer." If the brand isn't technical, mono reads as costume. <!-- rule:brand-ban-mono-as-shorthand -->
+- Large rounded-corner icons above every heading. Screams template. <!-- rule:brand-ban-large-rounded-icons -->
+- Single-family pages that picked the family by reflex, not voice. (A single family chosen deliberately is fine.) <!-- rule:brand-ban-single-family-by-reflex -->
+- All-caps body copy. Reserve caps for short labels and headings. <!-- rule:brand-ban-all-caps-body -->
+- Timid palettes and average layouts. Safe = invisible. <!-- rule:brand-ban-timid-palettes -->
+- Zero imagery on a brief that implies imagery (restaurant, hotel, food, travel, fashion, photography, hobbyist). Colored blocks where a hero photo belongs. <!-- rule:brand-ban-zero-imagery -->
+- Defaulting to editorial-magazine aesthetics (display serif + italic + drop caps + broadsheet grid) on briefs that aren't magazine-shaped. Editorial is ONE aesthetic lane, not the default brand aesthetic. <!-- rule:brand-ban-editorial-default -->
+- Repeated tiny uppercase tracked labels above every section heading. A single strong kicker can be voice; repeating it as section grammar is AI scaffolding unless it's a deliberate, named brand system. <!-- rule:brand-ban-repeated-section-kickers -->
+
+### Brand permissions
+
+Brand can afford things product can't. Take them.
+
+- Ambitious first-load motion. Reveals and typographic choreography that earn their place; not fade-on-scroll for every section. <!-- rule:brand-permission-first-load-motion -->
+- Single-purpose viewports. One dominant idea per fold, long scroll, deliberate pacing. <!-- rule:brand-permission-single-purpose-viewports -->
+- Unexpected color strategies. Palette IS voice; a calm brand and a restless brand should not share palette mechanics. <!-- rule:brand-permission-unexpected-color -->
+- Art direction per section. Different sections can have different visual worlds if the narrative demands it. Consistency of voice beats consistency of treatment. <!-- rule:brand-permission-art-direction -->
+
+## Product register
+
+When design SERVES the product: app UIs, admin dashboards, settings panels, data tables, tools, authenticated surfaces, anything where the user is in a task.
+
+### The product slop test
+
+Not "would someone say AI made this." Familiarity is often a feature here. The test is: would a user fluent in the category's best tools (Linear, Figma, Notion, Raycast, Stripe come to mind) sit down and trust this interface, or pause at every subtly-off component?
+
+Product UI's failure mode isn't flatness, it's strangeness without purpose: over-decorated buttons, mismatched form controls, gratuitous motion, display fonts where labels should be, invented affordances for standard tasks. The bar is earned familiarity. The tool should disappear into the task.
+
+### Typography
+
+- **One family is often right.** Product UIs don't need display/body pairing. A well-tuned sans carries headings, buttons, labels, body, data. <!-- rule:product-typo-one-family -->
+- **Fixed rem scale, not fluid.** Clamp-sized headings don't serve product UI. Users view at consistent DPI, and a fluid h1 that shrinks in a sidebar looks worse, not better. <!-- rule:product-typo-fixed-rem-scale -->
+- **Tighter scale ratio.** 1.125–1.2 between steps is typical. More type elements here than on brand surfaces; exaggerated contrast creates noise. <!-- rule:product-typo-tighter-ratio -->
+- **Line length still applies for prose** (65–75ch). Data and compact UI can run denser; tables at 120ch+ are fine. <!-- rule:product-typo-line-length -->
+
+### Color
+
+Product defaults to Restrained. A single surface can earn Committed (a dashboard where one category color carries a report, an onboarding flow with a drenched welcome screen), but Restrained is the floor. <!-- rule:product-color-restrained-default -->
+
+- State-rich semantic vocabulary: hover, focus, active, disabled, selected, loading, error, warning, success, info. Standardize these. <!-- rule:product-color-state-vocab -->
+- Accent color used for primary actions, current selection, and state indicators only, not decoration. <!-- rule:product-color-accent-only -->
+- A second neutral layer for sidebars, toolbars, and panels (slightly cooler or warmer than the content surface). <!-- rule:product-color-second-neutral -->
+
+### Layout
+
+- Responsive behavior is structural (collapse sidebar, responsive table, breakpoint-driven columns), not fluid typography. <!-- rule:product-layout-responsive-structural -->
+
+### Components
+
+Every interactive component has: default, hover, focus, active, disabled, loading, error. Don't ship with half of these. <!-- rule:product-components-all-states -->
+
+- Skeleton states for loading, not spinners in the middle of content. <!-- rule:product-components-skeleton-loading -->
+- Empty states that teach the interface, not "nothing here." <!-- rule:product-components-empty-states -->
+- Consistent affordances across the surface. Same button shape. Same form-control vocabulary. Same icon style. <!-- rule:product-components-consistent-affordances -->
+
+### Motion
+
+- 150–250 ms on most transitions. Users are in flow; don't make them wait for choreography. <!-- rule:product-motion-quick-transitions -->
+- Motion conveys state, not decoration. State change, feedback, loading, reveal: nothing else. <!-- rule:product-motion-state-not-decoration -->
+- No orchestrated page-load sequences. Product loads into a task; users don't want to watch it load. <!-- rule:product-motion-no-page-load-sequence -->
+
+### Product bans (on top of the shared absolute bans)
+
+- Decorative motion that doesn't convey state. <!-- rule:product-ban-decorative-motion -->
+- Inconsistent component vocabulary across screens. If the "save" button looks different in two places, one is wrong. <!-- rule:product-ban-inconsistent-components -->
+- Display fonts in UI labels, buttons, data. <!-- rule:product-ban-display-fonts-ui -->
+- Reinventing standard affordances for flavor (custom scrollbars, weird form controls, non-standard modals). <!-- rule:product-ban-reinvented-affordances -->
+- Heavy color or full-saturation accents on inactive states. <!-- rule:product-ban-heavy-inactive-color -->
+- Modal as first thought. Modals are usually laziness. Exhaust inline / progressive alternatives first. <!-- rule:product-ban-modal-first-thought -->
+
+### Product permissions
+
+Product can afford things brand surfaces can't.
+
+- System fonts and familiar sans defaults (Inter, SF Pro, system-ui stacks).
+- Standard navigation patterns: top bar + side nav, breadcrumbs, tabs, command palettes.
+- Density. Tables with many rows, panels with many labels, dense information when users need it.
+- Consistency over surprise. The same visual vocabulary screen to screen is a virtue; delight is saved for moments, not pages.

package/departments/brand/skills/design-review/references/genres/atmospheric.md

@@ -0,0 +1,71 @@
+# Genre — atmospheric
+
+> Derived from [hallmark](https://github.com/nutlope/hallmark) (MIT — see `hallmark.LICENSE` in this directory). Sanitized and adapted for ArkaOS.
+
+For the AI-creative product page. Dark canvas with warm radial blooms, confident sans display, expressive but plain-English copy, single warm accent. The aesthetic of a tool you'd actually want to use after dark — generative music, video, image, voice.
+
+## When to pick it
+
+Brief mentions any of: *AI tool, generative, music, video, image, voice, late-night, atmospheric, dark mode, expressive, creative tool, model playground, vibe-coded, dreamlike, nocturnal*. Also pick when the user names a *mood* that requires darkness (e.g. "moody", "cinematic", "after hours").
+
+## Themes that belong
+
+`Bloom` (canonical light-paper), `Midnight`, `Terminal`, `Aurora`, `Lumen`. Five themes; the rotation walks them when atmospheric is active.
+
+`Lumen` is the premium AI-tool register — Modal / Anthropic / ElevenLabs / Cluely / Adept / Granola. One focal CSS artefact + classical italic-serif headline + mono technical eyebrow. **Two palette drops** (Night Foundry — dark amber-gold, emits; Day Foundry — light indigo, refracts). The only atmospheric theme with a serif display and the only one whose canvas treatment is one *built* artefact rather than two diffuse blooms.
+
+## Voice
+
+- **Display** — Geist Sans 600 or similar weighty sans, plain English, no ornament. Letter-spacing tight (`-0.03em` or tighter).
+- **Body** — same family, 400. Light grey on dark (`oklch(86% 0.008 40)`).
+- **Accent** — single warm hue (orange / amber / red / pink). Used in radial-gradient blooms on the canvas, on focus rings, on small tags. Never on display text (that's gate 2 universal — gradient text stays banned).
+- **Layout** — centred or near-centred heroes. The canvas itself is the design; the type sits on top of an atmospheric ground.
+- **Motion** — fade-in only. No slide, no bounce. The atmosphere does the work.
+- **Copy tone** — direct, slightly poetic, specific. *"Make a house song about quitting your job."* is the calibration.
+
+## What this genre allows
+
+- **Radial-gradient bloom** on the body background — up to two blooms, each ~20–30 % footprint, fixed-attached, no animation. Gate 29 universal is loosened here.
+- **Centred heroes** — gate 6 universal is loosened. The canvas frames the type.
+- **Pill-rounded CTAs** with accent fill — confident, not pastel.
+- **Glow shadows** on hover (cards lift toward the user with a soft warm shadow).
+- **Larger expressive type** — display can hit 6 rem (`clamp(3rem, 6vw + 1rem, 6rem)`).
+
+## What this genre disallows
+
+- **Light-paper aesthetics** — the *default* canvas is dark. Bloom and Lumen's Day Foundry are the documented light-paper exceptions; both still emit/refract light from a focal canvas treatment. Don't sneak white sections into a dark-paper build.
+- **Italic in headers** — banned globally (a top AI tell). Atmospheric display is roman; Lumen ships Instrument Serif as a **roman** headline face, with the verb landmark carried by accent colour + a drawn underline, never italics. Body stays Geist Sans.
+- **Hairlines** — atmospheric uses elevated cards (`paper-2`, `paper-3`) instead of hairline-on-paper.
+- **Multiple accent hues** — one warm bloom + one secondary (pink/red) is the maximum. No teal-and-amber juggling.
+- **Glassmorphism** — banned. Atmospheric is *atmospheric*, not glass. (see doctrine hub §12 absolute bans)
+- **Gradient text** — gate 2 universal. Stays banned.
+
+## Voice fixtures
+
+- *"Built for the dark."*
+- *"The page should feel like a place you could sit in."*
+- *"A canvas, then a tool."*
+- *"Generate, refine, ship — between Tuesday and Wednesday."*
+- *"The instrument is dark. The output is yours."*
+- *"Built to think in real time."* — Lumen voice; the verb is the landmark via accent colour + underline, never italics.
+- *"A single primitive that scales down to zero."* — Lumen voice; technical, declarative.
+
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — the blur backdrop sells the atmospheric mood. The pill sits over the dark canvas and the bloom shows through the blur.
+- **Acceptable also:** N9 Edge-aligned minimal (when the canvas is loud enough that nav should disappear into it); N4 ⌘K-only (when the audience is technical).
+- **Default footer:** Ft5 Statement — closes the page with a sentence. Atmospheric pages argue something; the footer states it.
+- **Acceptable also:** Ft1 Mast-headed; Ft2 Inline single line.
+- **Banned for atmospheric:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the calm); Ft8 Marquee scroll (kinetic, breaks the dark canvas); Ft3 Index columns (AI-footer fingerprint).
+
+See `component-cookbook.md` § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+```css
+/* [arka:design-dna] macrostructure=<name> genre=atmospheric anchor=<oklch> display=<font> body=<font> theme=<name> enrichment=<tier> nav=<N#> footer=<Ft#> critique=P#H#E#S#R#V# */
+```
+
+## Reference register
+
+The aesthetic to match: dark canvas with two warm blooms behind the content, plain-English heroic display, single warm accent on small surfaces. Hand-built, not stock-AI.

package/departments/brand/skills/design-review/references/genres/editorial.md

@@ -0,0 +1,74 @@
+# Genre — editorial (default)
+
+> Derived from [hallmark](https://github.com/nutlope/hallmark) (MIT — see `hallmark.LICENSE` in this directory). Sanitized and adapted for ArkaOS.
+
+The canonical voice of the ArkaOS design flow. Pages built for content-led briefs: portfolios, manifestos, type specimens, agency sites, magazine pieces, indie podcasts, bakery / brand stories, considered B2C marketing.
+
+This is what the ArkaOS design flow looks like when no other genre signal fires. It is the silent default.
+
+## When to pick it
+
+Default. Pick editorial when the brief does not name a specialised aesthetic — when the user said "a landing page for X" without telling you whether X is enterprise, atmospheric, or playful. Most briefs land here.
+
+## Themes that belong
+
+`Specimen`, `Newsprint`, `Atelier`, `Garden`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`, `Editorial`, `Carnival`. Twelve themes — plenty of variety inside the genre.
+
+`Carnival` is the loud-maximalist editorial register — Dropout TV / Fly.io / Stones Throw / Third Man Records. Duo-tone accent system (mustard + oxblood), chunky variable display, decorative ornaments, hard-offset shadows. The loud sibling to Riso / Manifesto / Brutal.
+
+## Voice
+
+- **Display** — roman serif, condensed sans, or display-heavy. Not Inter. Not Geist. The weight commits to an extreme (300 or 700+). Italic is body-emphasis only — never the header face (global rule).
+- **Body** — workhorse serif (Newsreader, Cormorant) or a plain non-default sans (The Future, Söhne). Readable at 45–75 ch.
+- **Accent** — single warm or cool hue, used at < 5 % of any viewport.
+- **Layout** — asymmetric. Hairlines, not card borders. Generous whitespace.
+- **Motion** — quiet. One orchestrated entrance. No bounces.
+- **Copy tone** — specific, hand-set, slightly literary. Verbs over adjectives.
+
+## What this genre allows
+
+- Hairline rules, fleurons, drop caps, double rules.
+- Italic body in long-form content.
+- Asymmetric column counts (2:5, 3:7) on prose pages.
+- Hand-built SVG illustrations, pure-CSS art (Tier A enrichment).
+- Numbered display labels, edge-aligned headlines.
+- Single-accent-colour highlighting (`<mark>` band at x-height).
+
+## What this genre disallows
+
+The universal slop-test gates apply, plus these editorial-specific bans:
+
+- **Pill-rounded buttons** with gradient fill — pill is fine, gradient on a pill is not.
+- **Centred-everything heroes** (gate 6 universal). Editorial heroes are left-biased or asymmetric.
+- **Card-in-card** layouts (gate 4 universal).
+- **Three-column equal-icon-tile feature grid** (gate 3 universal).
+- **Glassmorphism** — never; the medium is paper, not glass. (see doctrine hub §12 absolute bans)
+- **Pure black or pure white** as paper or ink (gate 7). Tint everything toward the anchor.
+
+## Voice fixtures
+
+Each macrostructure under editorial picks from these opening-line patterns. Imitate the *shape*, not the wording.
+
+- *"Type, set with care."*
+- *"Print discipline, on screen."*
+- *"A small skill that argues against the average."*
+- *"We compose the page like a broadsheet — hairlines, columns, restraint."*
+- *"Restraint, repeated, becomes a signature."*
+
+## Nav and footer voice
+
+- **Default nav:** N6 Newspaper masthead — full-width, large centred wordmark, thin issue/date row in serif small caps, double-rule below. Reads as broadsheet.
+- **Acceptable also:** N1a Wordmark + 2 links (when destinations are minimal); N9 Edge-aligned minimal (when the page is letter-shaped or atelier-quiet).
+- **Default footer:** Ft1 Mast-headed (wordmark anchors a single horizontal band, tagline + small links beside).
+- **Acceptable also:** Ft2 Inline single line; Ft4 Dense colophon (newsprint / almanac voices); Ft6 Letter close (atelier / garden / personal); Ft7 Newsletter-first (when the brand legitimately publishes).
+- **Banned for editorial:** N5 Floating pill (modern-minimal vocabulary), N7 Brutal slab (fights the restraint), Ft8 Marquee scroll (kinetic; wrong genre).
+
+See `component-cookbook.md` § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+Output's CSS comment header reads:
+
+```css
+/* [arka:design-dna] macrostructure=<name> genre=editorial anchor=<oklch> display=<font> body=<font> theme=<name> enrichment=<tier> nav=<N#> footer=<Ft#> critique=P#H#E#S#R#V# */
+```

package/departments/brand/skills/design-review/references/genres/modern-minimal.md

@@ -0,0 +1,73 @@
+# Genre — modern-minimal
+
+> Derived from [hallmark](https://github.com/nutlope/hallmark) (MIT — see `hallmark.LICENSE` in this directory). Sanitized and adapted for ArkaOS.
+
+For the polished enterprise / dev-tool / API page. Stripe / Linear / ElevenLabs school: Geist sans, large confident displays, generous whitespace, pill CTAs, monochrome with optional accent. Minimalism with conviction, not the absence of choice.
+
+## When to pick it
+
+Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra, B2B, dashboard, billing, Stripe-like, Linear-like, ElevenLabs-like, dev experience, ship fast*. Also pick when the user names a brand colour but the rest of the brief is restrained.
+
+## Themes that belong
+
+`Coral` (canonical) — warm-grey paper, single warm coral accent, Geist throughout, soft pill CTAs. The "Stripe-not-Linear" warmth.
+
+`Cobalt` — the cool dev-tool / API / docs register (the GitBook + Firecrawl school, executed **cobalt-on-light, not orange**). Cool engineered near-white paper, one electric cobalt signal accent, Space Grotesk display + Inter body + JetBrains Mono code, ruler-drawn hairlines, tight 6 px radii, a bordered ⌘K nav, and a live code/API request–response hero. The technical, instrument-panel sibling to Coral's warmth — the rotation walks Coral ⇄ Cobalt when modern-minimal is active.
+
+The two differ on every axis a glance registers: Coral is warm-grey + coral + Geist + pills; Cobalt is cool-white + electric blue + Space Grotesk/mono + tight-radius bordered controls. Future themes can join this genre too — anything monochrome or near-monochrome with an Inter-class sans display and a single restrained accent.
+
+## Voice
+
+- **Display** — Geist Sans 500–700, Inter Tight Display 600+, or similar. Letter-spacing tight (`-0.02em` to `-0.035em`).
+- **Body** — Geist Sans 400, Inter 400. Same family as display (single-family discipline).
+- **Accent** — monochrome (accent IS ink) or a single restrained hue used only on focus rings. No chromatic floods.
+- **Layout** — two-column heroes (title left, lede right), generous whitespace, refined card surfaces with subtle borders.
+- **Motion** — minimal. Reveals are off; the page is composed.
+- **Copy tone** — declarative, specific, technical. "Built for X" is not banned but must name the X concretely.
+
+## What this genre allows
+
+- **Pill-rounded CTAs** — both filled and outlined. Black-filled primary + white-outlined secondary is the canonical pair.
+- **Pure white paper** (`#fff` / `oklch(100% 0 0)`) — gate 7 is loosened here.
+- **Zero-chroma neutrals** — gate 22 is loosened here. The Stripe / ElevenLabs school is monochrome by design.
+- **Two-column hero with title-left + paragraph-right** — explicitly canonical for this genre.
+- **Refined card surface** with very subtle border (`oklch(91% 0 0)`) and 8 px radius.
+- **Large, tight-set displays** (`clamp(2.5rem, 5vw + 0.5rem, 4.75rem)`).
+
+## What this genre disallows
+
+- **Italic serif body** — modern-minimal stays sans top-to-bottom.
+- **Hairline-everything** — borders are thin but visible, not the editorial 0.5 px hairline aesthetic.
+- **Asymmetric prose columns** — modern-minimal aligns left, justified to a regular grid.
+- **Drop caps, fleurons, ornament** — none of it.
+- **Bouncy / overshoot easings** — gate 12 universal applies strictly here.
+- **Gradient text** — gate 2 universal. Stays banned.
+- **Glassmorphism** — banned. (see doctrine hub §12 absolute bans)
+
+## Voice fixtures
+
+- *"Built to ship."*
+- *"The platform that scales with you."*
+- *"From idea to production in an afternoon."*
+- *"Thirty thousand teams build with X."*
+- *"One API. Every channel."*
+
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — content-sized, detached from edges, blur backdrop, soft shadow. Vercel / Linear / Framer / Raycast vocabulary.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are genuinely minimal); N9 Edge-aligned minimal (when the brand earns the silence).
+- **Default footer:** Ft2 Inline single line — wordmark + tagline + tiny credit, hairline rule above. Restrained.
+- **Acceptable also:** Ft1 Mast-headed; Ft5 Statement (when the page wants a closing line).
+- **Banned for modern-minimal:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the restraint); Ft8 Marquee scroll (kinetic, wrong voice); Ft3 Index columns at full saturation (the AI-footer fingerprint — gate 43).
+
+See `component-cookbook.md` § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+```css
+/* [arka:design-dna] macrostructure=<name> genre=modern-minimal anchor=<oklch> display=<font> body=<font> theme=<name> enrichment=<tier> nav=<N#> footer=<Ft#> critique=P#H#E#S#R#V# */
+```
+
+## Reference register (for the LLM, not credited to anyone)
+
+The aesthetic to match: confident sans display, clean white canvas, two-column hero, pill CTAs, mono accent. The user knows what this looks like when they see it. Do not name external sites in the output.

package/departments/brand/skills/design-review/references/genres/playful.md

@@ -0,0 +1,72 @@
+# Genre — playful
+
+> Derived from [hallmark](https://github.com/nutlope/hallmark) (MIT — see `hallmark.LICENSE` in this directory). Sanitized and adapted for ArkaOS.
+
+For the consumer / friendly / onboarding-led page. Soft surfaces, mild colour, motion that responds to hover, friendlier voice. Closer to Notion's marketing or Figma's onboarding than to Stripe's API docs.
+
+## When to pick it
+
+Brief mentions any of: *fun, consumer, casual, family, kids, friendly, approachable, onboarding-heavy, community, social, tactile-but-soft, post-Linear-soft*. Pick playful sparingly — most consumer briefs still belong to editorial (warm-paper, hand-set) unless the user explicitly asks for *softer* and *friendlier*.
+
+## Themes that belong
+
+`Hum` (vibrant, alive) is the genre's canonical theme — the post-Brilliant-alive register: multi-accent cream + pear + cyan + coral, mandatory motion, a single character moment. Pick it when the brief wants "feels alive in the room with you." For the quieter, more restrained end of friendly — "friendly but soft" rather than "alive" — reach instead for modern-minimal (Coral): a single low-chroma accent on warm paper, smooth easings, motion optional.
+
+`Hum` is the catalog's only **rounded-sans-multi-accent** theme — it relaxes several playful defaults: bouncy spring easings are allowed (and canonical) on its primary CTA, accent chroma goes higher than 0.16, and motion is mandatory not optional. It answers a specific brief: a learning platform for curious adults, a daily-curiosity app, a habit tracker with character — products that should feel warm and alive, not merely tidy.
+
+## Voice
+
+- **Display** — Geist Sans 600 with tighter tracking (`-0.025em`), or a bricolage-style display weighted at 700. Friendly, not childish.
+- **Body** — Geist Sans 400 in a slightly muted ink (not pure black).
+- **Accent** — soft indigo, warm coral, or muted rose at low chroma. Always low — never the saturated consumer-app pop.
+- **Layout** — slightly rounded surfaces, soft drop shadows, friendlier card edges (12 px radius is the upper bound).
+- **Motion** — responsive on hover (cards lift slightly). One small bounce-free reveal per section. No spring physics on UI state.
+- **Copy tone** — warm, direct, specific. Avoid quirk for quirk's sake. *"Made for teams who write together."* over *"For the squad ✨"*.
+
+## What this genre allows
+
+- **Soft drop shadows** on cards (`0 8px 24px -10px <accent at low chroma>`). Restrained.
+- **12 px radius** on cards, 8 px on inputs, 999 px on pills.
+- **Hover-lift animations** on cards (`translateY(-2px)` + shadow expansion).
+- **Mild tinted backgrounds** on alternating sections (paper-2 vs paper, with a tinted band).
+- **Soft accent colours** — `oklch(50% 0.13 282)` (indigo) and similar, never above 0.16 chroma.
+
+## What this genre disallows
+
+- **Saturated consumer-app pinks / purples** — playful keeps chroma low by default. **Hum is the documented exception** — pear-yellow at chroma 0.18, sky-cyan at 0.18, coral at 0.24 are allowed and canonical for Hum builds only.
+- **Emoji-as-decoration** — emoji can appear in copy ("we built X 🌱") but never as visual ornament replacing iconography.
+- **Comic Sans, Comic Neue, anything that signals "we're zany"** — playful stays sophisticated, even at full vibrancy.
+- **Bouncy / overshoot easings** — playful uses smooth easings by default. **Hum is the documented exception** — spring overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`) is canonical on the primary CTA and character moment (one each per page).
+- **Glassmorphism** — banned across all genres. (see doctrine hub §12 absolute bans)
+- **Gradient text** — gate 2 universal. Stays banned.
+
+## Voice fixtures
+
+- *"Made for teams who write together."* — Hum voice
+- *"Soft, but exact."* — Hum voice
+- *"Software can be soft and exact at once. That's the trick."* — Hum voice
+- *"A small tool, gently opinionated."* — Hum voice
+- *"Your daily 30-second curio."* — Hum voice
+- *"Get really good at one thing this quarter."* — Hum voice
+- *"Notice yourself, in 30 seconds."* — Hum voice
+- *"Learn something genuinely new today."* — Hum voice
+
+## Nav and footer voice
+
+- **Default nav:** N7 Brutal slab — heavy uppercase wordmark + tracked uppercase links + 2 px border-bottom. The voice is loud but composed.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are minimal); N3 Side-rail (when the page is long-scroll and section-numbered, e.g. Studio).
+- **Default footer:** Ft8 Marquee scroll — horizontal repeating tagline + dot separator. Honours `prefers-reduced-motion: reduce`.
+- **Acceptable also:** Ft5 Statement; Ft3 Index columns (only when the page is a hub).
+- **Banned for playful:** N5 Floating pill (modern-minimal vocabulary, fights the loud register); N6 Newspaper masthead (editorial); Ft6 Letter close (warm-quiet voice; wrong genre).
+
+See `component-cookbook.md` § Navigation and § Footers for the full archetypes + code.
+
+## Stamp signature
+
+```css
+/* [arka:design-dna] macrostructure=<name> genre=playful anchor=<oklch> display=<font> body=<font> theme=<name> enrichment=<tier> nav=<N#> footer=<Ft#> critique=P#H#E#S#R#V# */
+```
+
+## Reference register
+
+The aesthetic to match: soft surfaces, low-chroma colour, friendly-but-restrained type, hover-responsive motion. The post-Linear soft school. Never childish, never quirk-for-quirk.

package/departments/brand/skills/design-review/references/hallmark.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hallmark contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.