Nasapunk Design

NASAPUNK DESIGN SYSTEM (× STARFIELD-MODERN)

Build pages that read as "1970s government aerospace documentation meets worn flight hardware — polished with Starfield's modern brand-system confidence." Reference implementation (baseline template): assets/reference.html (open in browser — single file, zero dependencies). Copy-paste CSS recipes: references/snippets.css.

0. STACK PORTABILITY (global constraint)

Every law and recipe in this skill MUST remain implementable across React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui:

• The single-file HTML reference is the CANONICAL spec. When the target stack differs, translate tokens/structure - never drop laws.
• Tokens: CSS custom properties are canonical; map them 1:1 to platform equivalents (SwiftUI Color/Font extensions, RN theme object, Flutter ThemeData, Tailwind theme.extend.colors).
• Effects matrix: hatching/stripe fills = repeating-linear-gradient (web/Tailwind arbitrary values) | SwiftUI .linear-gradient stripes or ShapeStyle | RN gradient lib | Flutter DecoratedBox/CustomPainter. Donut/dial = conic-gradient | SwiftUI Circle().trim(AngularGradient) | RN react-native-svg Circle strokeDasharray | Flutter CustomPaint. blend/mask tricks degrade gracefully - substitute precomputed colors where a stack lacks mask support.
• Component mapping: figure plates/cards become components per stack (shadcn/ui = recipe over primitives; SwiftUI/RN/Flutter = view structs/widgets); semantic roles (figure/figcaption, table headers) preserved for a11y.
• Workflow: build against the HTML reference first when unsure, then port; visual verification (§9 step 10) applies to EVERY stack output.

0B. STYLE SYSTEM (one base skin, two surface families)

One base skin carries TWO surface families. Both deploy AUTOMATICALLY when the scene fits - and the user can always explicitly request either:

Base skin composition (always on)

• §2 light tokens + ALL §4 texture recipes
• §6 print-document layer woven in (>=2 Band-15 artifacts)
• §2B console tokens + §5g component grammar, deployed onto fitting sections
• Era grades are part of this skin's toolkit: apply a root class (.era-apollo etc.) when the scene warrants a commemorative/heritage tone; default none

Deployment laws

• Page-level ground stays LIGHT unless the user explicitly requests full-console mode
• Dark instrument surfaces attach to instrument-shaped content: terminals, log walls, telemetry, status-heavy clusters - never to body text or reading surfaces
• If the user asks "which styles exist", present both surface families from this table
• If the user wants BOTH skins on one subject, deliver a variant set: PRINT version first as canonical, then a CONSOLE twin
• Silence = PRINT-dominant build with autonomous dark-instrument deployment where scenes fit

1. THE ONE RULE (dual-layer decision filter)

Layer 1 (retro body): "Would this look at home in a 1979 government technical exhibit?" Layer 2 (modern soul): "…and would Starfield's brand team ship it today?"

Every visual decision passes through BOTH. Layer 1 blocks cyberpunk drift; layer 2 blocks museum-piece stiffness. NASApunk is NOT cyberpunk, NOT neon sci-fi — and NOT a costume: the retro language is executed with contemporary cleanliness.

Spirit checklist — the page must feel:

• Grounded: everything extrapolated from real aerospace tech; function parts visible (tanks cylindrical, pipes exposed, radiators prominent)
• Institutional optimism: "High tech, high hope" → extended by Starfield's "Forever in adventure" — scientifically inspired, grounded warmth, unapologetically optimistic
• Utility first: design serves engineering truth, not gloss; hardware looks like it just came out of a lab
• Worn, not ruined: "乐观主义的磨损" — scuffed paint, lived-in surfaces, but maintained and loved ("a worn and loved futuretech" — ESA). Never decayed/abandoned
• Analog-first: physical switches > touchscreens; CRT texture only on instrument widgets
• Systematically branded: like AKQA's Clio-winning brand book — consistent tokens, deliberate motion, dos-over-don'ts coherence

2. COLOR TOKENS (hardcode exactly — no free interpretation)

:root{
  /* Brand layer */
  --red:#E4002B;            /* signal red (proven default) */
  /* Official alternatives: worm red PMS 179 = #E03C31 (warm orange-red,
     light backgrounds ONLY); meatball red PMS 185 = #FC3D21 */
  --navy:#0B3D91;           /* NASA blue PMS 286 */
  --ink:#20232A;

  /* Paint / metal layer */
  --paint:#F4F3EF;          /* off-white baked paint — page base, LIGHT-dominant */
  --paint-alt:#E9E7E1;
  --metal-light:#A8ACAF;
  --metal-mid:#6E7378;
  --metal-dark:#43484C;
  --rule:rgba(67,72,76,.28);
  --seam:rgba(67,72,76,.38);

  /* Rust / orange-brown layer */
  --rust:#C96A2B;
  --rust-deep:#8C4A22;

  /* Kapton gold layer — use SPARINGLY (1–2 hero elements max) */
  --gold-1:#E8B84B;
  --gold-2:#C9932E;
  --gold-3:#A87A1F;
  --gold-sheen:#B98A5A;

  /* STARFIELD-MODERN accent layer (extracted from game assets, ColorKit)
     ACCENT ONLY — base stays red/white/blue dominant.
     Division of labor: Kapton gold = hardware foil; sf-gold = brand badge. */
  --sf-gold:#d4ac63;
  --sf-crimson:#cd2435;
  --sf-orange:#e56335;
  --sf-navy:#2b4d7d;
  --sf-offwhite:#f4f5f7;

  /* Motion tokens (Starfield motion language) */
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --dur-enter:240ms;
  --dur-exit:180ms;
  --stagger:30ms;
}

Color laws (worm-era graphics standards, 1976-92, used as stylistic reference window):

• Red/white/blue dominant + gray-white metal base + orange-brown accents
• NO PASTELS — explicitly banned by the manual; bright primaries only
• Warm red is THE signature color; navy is structure; gold is rare and precious (Kapton foil reads as expensive thermal hardware)
• Worm-style red only on white/light backgrounds
• --sf-* tokens are a thin accent layer: emblem stripes, small chips, motion highlights. Never repaint base surfaces with them.

Shared noise/grunge data-URIs (inline feTurbulence, zero network):

--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
--grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.92 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");

2B. CONSOLE-MODE TOKENS (dark surface mode)

Console mode is the sanctioned full-page dark variant: instrument-band logic expanded to a whole page. Deploy it in EITHER of two ways: (a) autonomously, when the scene is instrument-shaped (terminal/dashboard/log wall), or (b) on explicit user request for dark/console/HUD mode (§6). Hardcode exactly:

Console-mode color laws:

• SEMANTIC AXIS: the cyan family (--info-cyan, --screen-glow) marks passive data/tech/info ONLY; amber (--alert-amber) marks alerts/actions/interactive states ONLY, never decorative rest-state
• NO pure #000 or #FFF surfaces anywhere in console mode
• Panels are FLAT alpha overlays of --panel-base at ~55-66% opacity over --bg-deep; backdrop-filter:blur FORBIDDEN (Scaleform-faithful flatness)
• Console mode inherits every other §2 law unchanged; the light palette remains the default page mode

2C. ERA COLOR GRADES (optional light-mode tint grades)

Optional tint grades over the standard §2 print palette, named after Starfield's real photo-mode filters (Mercury Era / Gemini Era / Apollo Era). Implement each as a class-scoped :root override on the root element (<html class="era-apollo">): the class re-maps existing tokens, it never adds new ones. Hardcode exactly:

ERA GRADE LAWS:

• Grades are SUBTLE: token-level tints only, never new hues; the base §2 palette must stay identifiable through the grade
• ONE grade per page, applied at the root; never mix grades inside a page
• Console mode (§2B) ignores era grades entirely
• Recipe: references/snippets.css Band 14

3. TYPOGRAPHY LAWS (Swiss / NHB 1430.2)

--font-head:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

Nasalization note (Starfield's UI typeface): Starfield's menus use Nasalization (Ray Larabie, 1997) — a geometric sans whose letterforms descend from the worm logotype of the worm-era graphics standards (1976-92) used as stylistic reference window. It is the spiritual benchmark for display type. Web zero-dependency strategy: keep the Helvetica stack as default; if the host project already loads a licensed Nasalization or similar geometric sans, apply it to display headings via an optional @font-face hook. Without it, hint the geometry with slightly wider tracking (+0.01em) on the largest headline only.

Font tiering note (reference faces vs free chain): Starfield's actual UI faces are NB Architekt and NB Grotesk R (Neubau Berlin, commercial licenses, diamond-grid construction). They are the REFERENCE faces: study their proportions, never hotlink or embed them. Free implementation chain for tech display: Exo 2 first, Chakra Petch where a harder stencil-technical voice is needed; both via host-project font loading only (zero external requests law still applies to shipped output). Directional arrows ← ↑ → ↓ are set in the text font itself, never swapped for icon sprites. CJK note: when CJK glyphs enter the stack, the Latin face carries identity alone; pair any system CJK fallback and do not attempt to stylize CJK glyphs.

Prop document fonts (diegetic print props): memos, forms, crates and other diegetic prop documents MAY set BODY text in a plain late-90s system stack "Verdana",Tahoma,Geneva,sans-serif, reproducing the game's actual printed-prop texture (community font surveys report stock Microsoft-era faces on posters/signage). The display/headline layer stays Helvetica-family. Law: prop fonts never exceed body/small sizes and never appear in mastheads or display settings.

4. TEXTURE RECIPES (effect → technique → where)

Full copy-paste code in references/snippets.css; live examples in assets/reference.html.

4.1 Blueprint grid — required scenarios

The navy dual-scale grid (§4 "Blueprint section" row) is a signature device. Apply it as a REQUIREMENT to:

• Any technical drawing / diagram / schematic section
• Data-dense exhibits: spec tables wider than 2 columns, dashboards, telemetry-adjacent readouts
• Sections whose content IS engineering documentation (drawings, tolerances, revision history)

Do NOT apply to: body-text paragraphs, footer/legal fine print, hero headline zone, or anywhere it would sit behind running text at full strength. Legibility law: grid lines ≤7% opacity equivalent (rgba(244,243,239,.035–.075) on navy); content contrast always wins over texture. A light-on-paint variant (--rule colored lines) may serve data sections on light surfaces.

4.2 Small-icon style contract

4.3 Composition coherence rules

• Max TWO texture systems per component (a plate may be rivets+seams; not rivets+hazard+stamp+foil stacked)
• Max ONE grid-breaking element per section (chip/stamp); everything else sits on the grid
• Color proportion target: ~70% neutral paint/metal · ~20% structure (navy/ink) · ~10% accents (red/emblem bars/Kapton)
• Nested blocks inherit their host's alignment; never stack independently rotated children
• Every decorative layer must EARN its place: hazard=warning, stamp=approval, emblem=identity. Decoration stacked on decoration with no meaning = delete it

4.4 Layout collision prevention (hard rules)

1. Text-over-block requires ≥4.5:1 contrast against THE BLOCK's color — never dark glyphs on navy/red, never light on paint
2. Hanging decorations: negative offset + element width must fit inside container side margin — or reserve space with padding instead of hanging into the margin at all
3. z-index registry — background slabs 1 < content 2 < accents 3 < rails 4 < stamps 6; never improvise values
4. Breakpoint audit: every absolutely-positioned element re-checked at 1440/1020/720/380px; when base geometry changes, DELETE stale responsive overrides (don't patch around them)
5. white-space:nowrap data gets an ellipsis/shrink guard at ≤720px; wide tables scroll horizontally instead of compressing
6. Stamps/chips may overlap only EMPTY space or their own host's border — never glyphs of unrelated text

4.5 Ambient line-art backdrop (doodles)

Low-opacity stroke-only SVG motifs scattered as background decoration: ringed planet, latitude planet, spiral galaxy, constellation + four-point sparkle, retro rocket, orbit diagram. Build ONE hidden <defs> symbol library; instantiate with <svg class="doodle"><use href="#dd-*"/></svg>.

Laws:

• Stroke currentColor, fill:none, stroke-width ~2 @ 120 viewBox — same drafting voice as §4.2 icons
• Opacity 0.06–0.10 on light surfaces (color:--metal-dark), 0.10–0.14 on navy/blueprint (--paint-alt)
• Always pointer-events:none; z-index:0 with every section's .container lifted to z-index:1 — doodles may pass under text but must never lower its contrast; prefer placing them in padding/margin whitespace zones
• Deterministic hand-placed positions, sizes 60–180px, slight rotations — NO JS random placement (reproducibility + collision control); ≤2 per section; skip dense instrument bands (telemetry) entirely

7. Text-in-box law: compute rendered width BEFORE boxing text — monospace advance ≈ 0.6em + letter-spacing per char; rendered text must fit its box minus ≥6% side padding. Size the box to the string, never squeeze the string into a pre-existing box
8. Circular textPath law: baseline radius = ring-band midpoint − cap-height/2 (glyphs grow OUTWARD from the baseline on top arcs); path length must exceed text length (semicircle = π·r) — verify with the 0.6em+tracking estimate, shrink font/tracking until it fits with ≥5% margin. Clipped glyphs or baseline-hugging rings are defects
9. Marker/label lane separation: timeline/map markers and their labels live in separate perpendicular lanes — ≥6px clearance between marker's rotated/hover bounding extent and label ink at BOTH rest and hover states. Preferred pattern: step the label diagonally up-right of its marker (both axes offset, technical-callout style) — diagonal separation survives hover growth far better than direct stacking; on mobile collapse to stacked flow with the marker moved into a side gutter

5. STARFIELD-MODERN LAYER (the evolution, not a repaint)

This is what separates "museum-piece retro" from Starfield's shipped aesthetic. Apply AFTER the NASApunk base is complete.

5a. Constellation four-color emblem stripes

The signature motif — from AKQA's brand book: "a stripe composed of four earthly colours became their emblem."

Construction (critical): NOT a smooth gradient. It is 4 equal-width SOLID-COLOR bars side-by-side with hard edges, square ends, tight/no gaps, full height. Color sequence left→right is blue → gold(yellow) → orange → red, deliberately mirroring stellar spectral classification cooling down (O blue → M red) — an astronomy easter egg confirmed in Bethesda interviews.

/* hard-stop gradient form — single element, zero markup */
.sf-bars{
  background:linear-gradient(90deg,
    var(--sf-navy)   0 25%,
    var(--sf-gold)   25% 50%,
    var(--sf-orange) 50% 75%,
    var(--sf-crimson) 75% 100%);
}
.sf-stripe-v{width:clamp(5px,.8vw,14px)}   /* vertical bar cluster — hero side */
.sf-stripe-h{height:clamp(4px,.6vw,8px)}   /* horizontal variant — structural bands */

/* flex form — when bars need individual widths/gaps */
.sf-flag{display:flex;gap:0} /* gap:2px for the spaced variant seen on merch */
.sf-flag > i{flex:1}

Note: the Constellation circular badge (navy disc + white star dots + warm semicircle arc) is a SEPARATE element from this stripe — don't conflate them.

Optional display variant — white block, blue text: in composed lockups (NOT inside the 4-bar rail itself), an --sf-offwhite block may sit to the RIGHT of a red block, carrying text set in stripe-blue (--sf-navy). Use for value chips, short labels, or a secondary headline word. Pairing law: always place it after/near red or a full stripe so the white reads as part of the sequence, never as a floating gray box. Recipe: .sf-chip-white in snippets.css.

Placement rules (restraint is the point):

• ONE prominent vertical bar-cluster beside the hero headline
• Thin 4–6px vertical accents on card/plate left edges
• ONE horizontal band under masthead or atop footer
• Small chip near mission patch
• Never more than ~4 stripe instances per page; never on dark instrument bands

Faction-livery variant (UC ship paint): white body with hard red/blue side bars — use as color-blocked panel headers sparingly.

5b. Motion system

MOTION TEMPO LAW (hard):

• Attention states BREATHE: 2.5s ease-in-out sine opacity loop, .55 → 1. They never blink
• Blinking or pulsing under 500ms is a HARD FAIL (also §10)
• Entrances/exits run 150-250ms ease-out; the §2 duration tokens remain canonical for the light mode
• Holographic / flicker / sci-fi glow effects are permitted in AT MOST ONE designated special zone per page (the SANCTIONED EXCEPTION ZONE); everything else stays flat vector. Name the zone in a comment before styling it

5c. Panel modernization

• Keep square corners and hard offset shadows (retro character) but LAYER a soft modern shadow first in the stack: 0 2px 10px rgba(32,35,42,.08)
• Hover lifts use var(--ease-out) timing
• Dual-mode split is codified: LIGHT menus/pages + DARK instrument bands (telemetry/HUD widgets) — both exist, cleanly separated

5d. Interaction states (hover / press — required, not optional)

Every interactive element answers the pointer. Timing from micro-interaction standards: hover 150–200ms, press ≤150ms; animate transform/opacity only.

Laws: states must remain readable with motion disabled (global reduced-motion kill-switch handles it); hover may REVEAL information but never MOVE text the user is reading; only ONE sweep animation per region — a page of everywhere-sweeping underlines is noise, not polish.

5e. Data visualization - technical-report figures

Charts are rendered as PRINTED REPORT FIGURES set into light figure plates - monochrome ink first, color only as accent. This mirrors actual 1960s-70s NASA TN/SP report figures (verified against NTRS primary sources). Recipes: references/snippets.css SS12e.

Four-fill ladder (series encoding WITHOUT color):

Plot-area laws (from primary sources):

• NO graph paper inside plots - plain face only; sparse DASHED reference lines when needed
• AXES DEFAULT OFF: do not draw X/Y axis lines unless the layout guarantees >=12px clearance from every label and bar - a fixed-position axis line crossing label lanes is the most frequent NASApunk-chart defect. Tick stubs alone (.fig-ticks) carry the scale; when axes ARE justified use the opt-in .fig-plot--axed modifier and re-run the collision scan
• Event flags: HOLLOW squares; dashed verticals mark events
• Caption strip inside plate bottom: FIG. 2A - TITLE letterspaced mono caps, hairline rule above
• Monochrome-first is authentic: era reports were 1-2 color prints (NHB 1430.2); red/rust reserved for emphasis

Gauge state vocabulary (scoped to dials/meters only):

• Range bands: muted aviation green #3A8C3A / amber #E8B830 / brick #C62828 - desaturated, painted-on-dial authenticity; page palette elsewhere unchanged
• Three-state flags (Apollo Experience Report): GRAY = operating/open, BLACK-WHITE STRIPED (repeating-linear-gradient(45deg,#1A1A1A 0 4px,#F4F3EF 4px 8px)) = deactivated/closed, RED = failed
• Annunciator tiles: sage frosted lens linear-gradient(#CFD4CF,#A8B0A8) + olive bezel #85857F, lit amber #E39A2F; green #4FC04F permitted ONLY inside annunciator rows (restored-MOCR evidence)

Instrument hierarchy: the THREE-RING INSTRUMENT (§5g) supersedes the plain dial gauge for HERO instruments (FIG. 9E, Band 14); keep the plain dial for dense multi-gauge arrays.

5f. Figure sheets (charts as printed document inserts)

One figure per sheet; present 3-up exactly like the spec-plates section - but the sheets must NOT reuse the metal-plate shell (avoid section homogeneity). Instead each chart sits on a report-figure sheet: bone paper, thin ink frame, graph-grid texture, FIG tab notch breaking the top border, crop marks outside two corners, caption below.

Construction:

1. .fig-sheet: bone #FBFAF7 + dual-scale light grid (22px) + 1px ink border; padding reserves a top band for the tab
2. .fig-tab: FIG id chip breaking the top border (background matches sheet so the border reads "interrupted")
3. .sheet-head: mono caps title left / qualifier right, above the plot
4. .fig-plot: L-axes + ticks per §5e; modifiers: --hbar drops the Y axis (horizontal charts own that lane for labels), --bare drops axes entirely (dial plates)
5. .sheet-cap: letterspaced mono caption below the plot
6. Optional annunciator tile row (max 4) under one sheet per section Laws: one chart type per sheet; values plausible + consistent across sheets; ink-on-paper only (no backlight/glow). Live example: Section 02 in assets/reference.html. Recipes: references/snippets.css SS12e/SS12f.

5g. Component grammar (console/HUD vocabulary)

Named components of the console/instrument vocabulary (deployed per §0B deployment laws). Each is a closed construction: build it as specified, do not improvise variants except through the faction skin system.

• SCANNER MONOCLE VIEWER: circular reticle + horizon line + vignette inside the lens. Unscanned state = cyan outline only; scanned state = solid fill. A flat survey card docks LEFT of the monocle, never overlapping it
• STARMAP PANEL: concentric orbit rings + one dotted ellipse + double-ring planet nodes; info card docked left of the ring system
• LEADER-LINE CALLOUT: 1px line + terminal dot connecting a label card to its target; same lane-separation laws as §4.5 rule 9
• STATUS CHIP TRIAD: green/amber/red state chips (console-mode extension of the §5e gauge vocabulary to chip scale) plus the rarity trio #73CCDF / #9A7BFF / #EEC162; chips carry status ONLY, never decoration
• HERITAGE SERIF LAYER: gold #D4A94A serif headlines on deep ground + an eight-point compass-rose SVG mark; reserved for fictional heritage brands ONLY (§8: never real insignia, never Starfield's actual marks)
• FACTION SKIN SYSTEM: ONE neutral geometry + N paint packs (e.g. EXPLORER / MILITARY / CORPORATE / FRONTIER). Same geometry, different livery tokens; NEVER redraw geometry per faction
• ROUNDEL CONSTRUCTION FORMULA: faction/corp badge in four zones: outer inscription ring (curved textPath: org name + est. year) + upper field (star cluster or glyph) + lower semicircle band split into 2-3 color arcs (gold/orange/red family) + center core glyph. Annotate the zones when presenting the badge. All branding fictional per §8; zone grammar descends from worm-era graphics standards (1976-92) used as stylistic reference window. Reference: assets/reference.html FIG. 9D; recipe: references/snippets.css Band 14
• ROUNDEL CONCENTRIC LAW: every zone circle/arc in a roundel/badge shares ONE center - verify with scripts/icon-geometry-check.js (arc-center reconstruction catches off-axis bands eyeballing misses). A band tip crossing the field boundary is a HARD FAIL.
• WAYFINDING SIGN: navy-ground plate, white text: large letter-code station ID + station name + arrow rows with district codes + corner map thumbnail. This is the SANCTIONED EXCEPTION where a solid navy ground replaces cream; every other surface stays light-dominant (§10). Reference: assets/reference.html FIG. 9G; recipe: references/snippets.css Band 14
• THREE-RING INSTRUMENT: dial upgrade: outer ring = function ticks/icons, middle ring = percentage arc + needle, inner circle = date/time/status line. Replaces the single-ring gauge whenever an "instrument cluster" feel is requested. Spec lineage: Chronomark watch FCC filing. Reference: assets/reference.html FIG. 9E; recipe: references/snippets.css Band 14. DIAL GEOMETRY LAW: value-arc endpoints must be typed ON the dominant center - both endpoints exactly at ring radius (a single mistyped coordinate drifts the entire sweep off-axis; caught by scripts/icon-geometry-check.js single-arc rule). The needle tip must reach the ring-track inner edge, never float short of its scale.

5h. Interface component gallery (ten standard patterns - DEFAULT VOCABULARY)

Ten complete, interaction-ready page patterns. Selection is driven by STRUCTURE, not keywords: inspect what the page (or request) actually contains - lists, cards, meters, forms, maps, dialogs, logs, tables - and apply the matching pattern. The game flavor in the names is optional paint; the grammar below fits ANY domain (e-commerce, CMS, SaaS admin, portfolio, docs, blog...).

Laws: one pattern per section; compose up to 3-4 per page; every pattern inherits Bands 1-14 base laws unchanged; interactions are vanilla JS; live implementations render in assets/reference.html SECTION 07 (FIG. G1-G10); recipes in references/snippets.css BAND 15.

COMPOSITE SIGNATURE (candidate, not mandate): a G-pattern fires when its signature atoms co-occur on one screen - but the detection output is a CANDIDATE with confidence, never a forced command. Agent verifies before composing. Signatures live in references/component-matrix.md M-G sections.

DUAL-CHANNEL DETECTION (G1 data-menu, G9 reading, M-IMG images): these patterns fire via TWO independent channels, kept deliberately parallel:

• Channel A — SCRIPTED: refactor-inventory.js detects structural signals and emits candidates — G1 via data-menu-trio (rail+list+detail in one pane) or counting signature; G9 via long-form-prose (≥5 non-list paragraphs, ≥300 chars, outside card/table/form); M-IMG via img-photo/carousel atoms (any photo image or carousel → IMG?, plus img-avatar/img-gallery role hints).
• Channel B — AGENT/MANUAL: the agent judges scenes per the §5h table and M-IMG grammar, independent of any script signal — G1 on any category-rail+list+detail screen (including framework three-pane compositions the script cannot see), G9 on any long-form reading surface, M-IMG on any image-bearing surface (banner, long figure, carousel, avatar, gallery, inline figure, thumbnails) including framework image components the regex cannot see. Either channel alone may raise a candidate; the agent confirms the scene/role before composing. Keep BOTH channels — never replace one with the other: scripted detection catches repeatable structure the eye may skip, manual judgment catches framework containers the regex cannot see.

5i. Image presentation grammar (photo/image layout — M-IMG)

Image-rich pages (nasa.gov-style: banners, long figure shots, carousels, portraits, galleries, inline figure photos) must map EVERY image to the NASApunk image-presentation grammar — never a plain embed. Full per-role table + stack mappings + verification in references/component-matrix.md M-IMG; live implementations in assets/reference.html FIG. 14A-14H. Rules:

1. Framing: every photo sits in an ink 1px frame with corner crop marks (L-marks outside two corners). No rounded frames (crop marks need square corners) — portraits included.
2. Captions: every image gets a FIG plate — mono FIG. N-M id (red) + title + credit; preserve the figcaption element for a11y and re-skin it.
3. Role grammar (per M-IMG table): banner = full-bleed + caption slab (red/ink, contrast-checked) over dark image area; long figure = ink frame + binding rail + fold ticks; carousel = framed + mono index chips 01/04 + square arrow buttons (no animated dots); avatar = square frame + initials chip fallback (navy fill, mono caps); gallery = equal-width cells each with own FIG chip + own caption; inline figure = float left/right max-width 45% + 16px gutter; thumbnails = small square frames + mono indices; loading/error = hatch placeholder + "LOADING"/"NO DATA" stencil, breathe 2.5s (never blink).
4. Zero image/text occlusion: figure gutters ≥ 12px; caption bars never overlap image pixels; overlaid headline slabs contrast-checked; inline figures keep body copy clear.
5. Zero external requests: no external image sources — inline SVG/data-URI placeholders, or the original image inlined; framework image components (el-image, next/image) wrapped with frame classes.
6. Data preservation (SAFETY LAW #2): original src, dimensions, alt, and caption TEXT are never altered — only the frame/chrome/caption STYLE changes.

PRIORITY & DISAMBIGUATION (advisory): when one screen matches several composites - charts >= 3 -> M-DASH first; sidebar+list+detail -> G1; confirm-dialog present -> G7 always wins for that dialog; ambiguity unresolved -> present the shortlist to the user, never blind-pick.

OPTIONAL SCENE PATTERNS: G2 (Terminal), G3 (Power allocation), G8 (Credits roll) are scene-optional: they compose ONLY when the scene genuinely matches (log viewer / allocation widget / acknowledgments reel). They are never forced, and their absence from a page is a correct outcome, not a coverage miss.

SAFETY LAW (hard, all refactors):

1. LAYERED IRREVERSIBILITY: L1 token/color layer = always safe & reversible. L2 structural layer = allowed ONLY while the framework behavior contract is preserved (sorting, validation, pagination, v-model bindings, ARIA). L3 dataviz = option-object changes only, never swap rendering engines.
2. SKIN NEVER TOUCHES LOGIC: data flow, validation, accessibility, and framework contract stay byte-identical. A pattern that requires DOM replacement of a behavior-bearing component is implemented as deep-selector overrides instead.
3. COMPOSITE CANDIDATES NEED AGENT CONFIRMATION: never blind-compose on signature count alone.
4. COVERAGE GATE CHECKS BEHAVIOR PRESERVATION: transformation evidence = computed-style assertion AND original event bindings/methods still usable - not just "style changed".
5. REVERSIBLE BY DEFAULT: every transformed screen must be revertible by removing the injected skin layer (no baked-in data mutations).

REFACTOR LAW (whole-project application): when restyling an EXISTING frontend, this skill applies IN FULL - there is no partial mode. Procedure: (1) structurally inventory the target (nav / lists / cards / forms / tables / modals / footers / logos); (2) map every structure to its gallery pattern and texture set; (3) re-skin everything with §2 to

…(truncated)