spirewise 1.7.1 → 1.8.0

package/skills/brutalist-tech-design-system/accessibility-system.md

@@ -0,0 +1,61 @@
+# Accessibility System — Brutalist Tech
+
+Good news: brutalism's **stark high contrast and big type are accessibility strengths**. The
+risks are loud accent colors (contrast on fills), all-caps overuse, raw "edgy" layouts that
+confuse, and motion (marquees/press). This system keeps the raw look **fully usable** at AA.
+
+## Color & contrast (leverage the strength)
+- **Body ≥ 4.5:1**, large/UI ≥ 3:1 — easy with near-black on paper. Keep muted grays
+  (`--text-muted`) above AA.
+- **Verify accent fills.** Loud accents need the right text: **yellow/lime → black** text;
+  saturated blue/red → white. Test every accent block (`--on-accent`) before shipping. Never
+  put low-contrast text on a loud accent.
+- **Non-text contrast ≥ 3:1** for borders that carry meaning, focus outlines, controls — the
+  thick black borders easily pass.
+- **Don't rely on color alone** for status; pair flat status colors with a label/icon.
+
+## Typography accessibility
+- **All-caps for labels/headings only**, not long body — uppercase hurts readability of
+  paragraphs; keep body sentence-case. If body is mono, keep line-height ~1.55 and measure ≤ 70ch.
+- Don't crush spacing for "edge" — maintain readable line-height and word-spacing.
+- Avoid illegible display faces for anything but the hero; never below ~14px for read text.
+
+## Focus & keyboard
+- **Thick, visible focus:** `:focus-visible { outline: 3px solid var(--ring); outline-offset:2px }`
+  — on brand AND highly visible. Never `outline:none`.
+- **The press effect must not hide focus** — focus outline stays visible in `:active`.
+- **Full keyboard operability**; logical tab order; no traps (except modal focus-trap, ESC).
+  **Skip link** to `#main` first in DOM. Accordions/menus: `aria-expanded`, ESC.
+
+## Motion (marquees + press)
+- Honor `prefers-reduced-motion`: stop marquees/typewriters/count-ups (final state); reveals in
+  final state; press becomes an instant state change.
+- **Marquees are pausable** (hover/focus) and decorative duplicate copies are `aria-hidden`; the
+  real content (logos/links) is in the DOM once and reachable. No flashing > 3×/sec.
+- No motion required to access content.
+
+## Semantics & structure
+- One `<h1>` per page; ordered headings (size with CSS; don't skip levels). Landmarks
+  `<header><nav><main id="main"><section><footer>`.
+- Buttons vs links: `<button>` actions, `<a href>` navigation. Lists `<ul>/<ol>`; quotes
+  `<blockquote><cite>`; code `<pre><code>`. Native elements over ARIA; minimal correct ARIA.
+- Decorative stickers/marks `aria-hidden`; informative images have meaningful `alt`.
+
+## Forms
+- Programmatic `<label>` per input (placeholders aren't labels); `<fieldset><legend>` for
+  groups; errors in text + `aria-describedby`, focus to first error. Inputs use the bordered
+  box style but stay legible.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px** (blocky buttons easily satisfy this); blocks stack on mobile;
+  oversized type clamps down (no overflow); no unintended page horizontal scroll (marquees clip
+  inside their band); 200% zoom OK; pinch-zoom not disabled.
+
+## Checklist (run before finishing)
+1. Body + muted text meet AA; **every accent block's text** verified (yellow/lime → black, etc.).
+2. All-caps limited to labels/headings; body sentence-case + readable measure.
+3. Thick visible focus everywhere, including during the press; keyboard-complete; skip link.
+4. Reduced motion → marquees/typewriters/count-ups stopped at final; press is instant.
+5. Marquees pausable; decorative copies `aria-hidden`; real content reachable; nothing flashes.
+6. Correct semantics (one H1, landmarks, button/link, lists); informative media has alt.
+7. 44px targets; blocks stack; type clamps; 200% zoom; zoom not disabled.

package/skills/brutalist-tech-design-system/color-system.md

@@ -0,0 +1,101 @@
+# Color System — Brutalist Tech
+
+Stark and flat: **pure black, paper white, and one loud accent**, plus raw status colors and
+an **inverted block** mode. No gradients, no soft tints — color comes in **flat full-bleed
+blocks** that invert against each other (this is how sections separate — never borders). Ships
+**raw light by default**; an inverted dark mode is included. Override `--accent` to rebrand.
+Contrast is high by design — but **verify accent text/fills meet AA**.
+
+## Tokens (`:root`) — raw light (default)
+
+```css
+:root {
+  /* ---- Core (stark) ---- */
+  --paper:   #f5f4ef;   /* default page (raw off-white) */
+  --paper-2: #ffffff;   /* pure white block */
+  --ink:     #0a0a0a;   /* near-pure black — text, borders, shadows */
+  --ink-2:   #1a1a1a;   /* inverted block background */
+
+  /* ---- Block backgrounds (sections invert between these) ---- */
+  --block-paper:  var(--paper);
+  --block-white:  var(--paper-2);
+  --block-ink:    var(--ink);      /* black section (text becomes paper) */
+  --block-accent: var(--accent);   /* accent section (text per --on-accent) */
+
+  /* ---- Text ---- */
+  --text-primary:   #0a0a0a;   /* on light blocks */
+  --text-secondary: #2a2a2a;
+  --text-muted:     #444444;   /* still AA on paper */
+  --text-invert:    #f5f4ef;   /* on ink/accent blocks */
+  --on-accent:      #0a0a0a;   /* text on the accent fill (verify per accent) */
+
+  /* ---- Borders & shadows (THICK, HARD — component-level, not section dividers) ---- */
+  --border-w: 3px;                       /* default thick border */
+  --border-w-2: 4px;                     /* heavier */
+  --border: var(--border-w) solid var(--ink);
+  --shadow:   6px 6px 0 var(--ink);      /* hard offset shadow, NO blur */
+  --shadow-sm:3px 3px 0 var(--ink);
+  --shadow-lg:10px 10px 0 var(--ink);
+  --ring:     #0a0a0a;                    /* focus outline color (thick) */
+
+  /* ---- Accent (ONE loud color — pick per brand) ---- */
+  --accent:       #2b2bff;   /* electric blue (default). Alts: #e8ff00 yellow, #ff3b00 red, #b6ff00 lime, #ff5cc8 pink */
+  --accent-2:     #ffd400;   /* optional secondary block accent */
+  --accent-press: #1f1fd6;
+
+  /* ---- Status (raw, flat) ---- */
+  --good: #00a341; --good-block:#b6ff8a;
+  --warn: #b46a00; --warn-block:#ffd400;
+  --bad:  #d10000; --bad-block: #ff6b6b;
+  --info: #0050ff; --info-block:#9ec5ff;
+}
+```
+
+## Inverted / dark mode
+
+```css
+[data-theme="dark"]{
+  --paper:#0a0a0a; --paper-2:#000000; --ink:#f5f4ef; --ink-2:#111111;
+  --text-primary:#f5f4ef; --text-secondary:#dcdcd6; --text-muted:#a8a8a2;
+  --text-invert:#0a0a0a; --on-accent:#0a0a0a;
+  /* borders/shadows now use the light ink (#f5f4ef) so they read on black */
+}
+```
+In dark mode the "ink" is light, so thick borders + hard shadows are drawn in off-white on
+black — still stark and structural.
+
+## Palette roles
+
+- **Core** (`--ink`, `--paper`): the only two "neutrals" — pure-ish black + raw white. Used at
+  full strength; no in-between grays for chrome (muted grays only for secondary text).
+- **Block backgrounds** (`--block-*`): full-bleed flat **section blocks**. Sections separate by
+  **inverting blocks** (paper → ink → accent → white), **not** by a border/divider line.
+- **Text** (`--text-*`, `--text-invert`, `--on-accent`): black on light blocks, paper on ink/
+  accent blocks. Always set the matching text color per block. Never below AA.
+- **Borders & shadows** (`--border*`, `--shadow*`): **thick solid borders + hard offset
+  (un-blurred) shadows** on cards/buttons/inputs/tables — *inside* components, never between
+  sections. No `blur` in any shadow.
+- **Accent** (`--accent`, `--accent-2`): one (occasionally two) loud, flat colors for the
+  primary action, an accent block, and highlights. Pick a high-contrast accent and verify text on it.
+- **Status** (`--good/warn/bad/info` + `*-block`): flat raw status colors for badges/alerts;
+  pair with a label/icon (never color-only).
+
+## Usage rules
+
+1. **Flat only.** No gradients, no soft tints, no glass. Color is solid blocks.
+2. **Sections = inverted blocks.** Alternate `--block-paper/white/ink/accent` to separate
+   sections; **never** a border/`<hr>` between two sections.
+3. **Two neutrals + one accent.** Resist extra colors; the restraint is the look.
+4. **Hard shadows only.** Every shadow is `Xpx Ypx 0 <ink>` — **no blur radius**.
+5. **Verify AA on accent.** Loud accents (yellow/lime) often need **black** text; saturated
+   blue/red can take white — check each accent's text pairing before shipping.
+
+## Accent options (pick ONE primary)
+
+| Accent | Hex | Text on it |
+|---|---|---|
+| Electric blue (default) | `#2b2bff` | white or `--text-invert` |
+| Safety yellow | `#e8ff00` | **black** (`--on-accent`) |
+| Hot red | `#ff3b00` | white |
+| Lime | `#b6ff00` | **black** |
+| Hot pink | `#ff5cc8` | black |

package/skills/brutalist-tech-design-system/component-library.md

@@ -0,0 +1,117 @@
+# Component Library — Brutalist Tech
+
+Specs for the 17 required components re-cast as **brutalist blocks** — thick borders, hard
+**offset shadows (no blur)**, mono labels, oversized type, blocky buttons that press. Each:
+purpose, anatomy, tokens, states, responsive + a11y. **No borders between sections** (component
+borders are *inside* a section; sections separate by inverted color blocks).
+
+Shared primitives:
+
+```css
+/* Brutalist box + press button */
+.box { background: var(--paper-2); color: var(--text-primary);
+  border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius-0); padding: var(--space-6); }
+.btn { display:inline-flex; align-items:center; gap: var(--space-2);
+  font-family: var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
+  font-size:.9375rem; padding: var(--space-3) var(--space-6);
+  border: var(--border); border-radius: var(--radius-0); cursor:pointer;
+  background: var(--paper-2); color: var(--ink); box-shadow: var(--shadow-sm);
+  transition: transform .08s linear, box-shadow .08s linear; }
+.btn:hover  { box-shadow: var(--shadow); }                         /* shadow grows */
+.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }  /* PRESS: collapses */
+.btn-primary { background: var(--accent); color: var(--on-accent); }
+.tag { font-family: var(--font-mono); text-transform:uppercase; font-size:var(--fs-micro);
+  border: 2px solid var(--ink); padding: 2px 8px; box-shadow: var(--shadow-sm); }   /* sticker chip */
+:where(a,button,input,[tabindex]):focus-visible { outline: 3px solid var(--ring);
+  outline-offset: 2px; }                                           /* thick visible focus */
+```
+**The press effect** (`:active` translate + shadow collapse) is the signature interaction —
+apply to buttons and clickable boxes.
+
+---
+
+## 1. Navbar
+A bordered bar (thick bottom border or a full bordered block), often sticky. Wordmark (bold/
+mono) · mono UPPERCASE nav links · a **`.btn-primary`** CTA · mobile hamburger. **Extensionless
+hrefs**. Optional blocky dropdown (a bordered `.box` panel). Mobile: full-screen block overlay,
+big mono links, ESC/focus-trap. a11y: `<nav>`, `aria-current`, `aria-expanded`, thick focus.
+
+## 2. Hero
+Layout BH-A/BH-B/BH-C on an accent or ink block. Kicker (`[ TAG ]`) · huge UPPERCASE display
+H1 · mono deck · blocky CTA pair (press) · optional bordered preview box or a marquee band. One
+H1, one primary CTA. Decorative marks `aria-hidden`.
+
+## 3. Feature Grid
+`.grid.cols-3` of `.box` cards (icon/number · bold title · body), or **F-B exposed grid** of
+bordered cells. Hover: shadow grows / slight translate. Mono kicker per card.
+
+## 4. Bento Grid
+A blocky bento: varied bordered boxes (one big anchor) on the grid — mixed content (stat, mini
+preview, quote). Hard borders + shadows; gaps show the block background between boxes.
+
+## 5. Testimonials
+Quotes in bordered `.box` cards (big quotation mark, mono attribution), or one giant pull quote
+on an accent block. `<blockquote>` + `<cite>`. Optional marquee of short quotes.
+
+## 6. Logos Section
+A **marquee** ticker of customer logos (monochrome) or a bordered logo grid. "TRUSTED BY" mono
+kicker. Marquee pausable. `<img alt>`.
+
+## 7. Pricing
+Layout P-A: bordered tier boxes; recommended tier = **accent block** / heavier border + a
+sticker `.tag` ("BEST"); price in big mono/grotesk; feature list with `+`/`✓` mono marks;
+blocky CTA. Monthly/annual blocky toggle. a11y: real switch/radio.
+
+## 8. FAQ
+Bordered accordion rows; `+`/`−` mono toggle; `<button>` + collapsible answer. Hard edges. a11y:
+`aria-expanded`/`aria-controls`.
+
+## 9. CTA
+Layout C-A: a full-bleed **accent or ink block** with a giant UPPERCASE headline + a `.btn-primary`
+(press). `--section-y-lg`, no border between it and neighbors (block inversion does the work).
+
+## 10. Footer
+An **ink block** mega footer: big wordmark, mono column labels + links, fine print, social,
+"BUILT WITH HTML/CSS/JS" tag. `<footer>`, `<nav>` lists. Thick top edge via the block change.
+
+## 11. Dashboard Preview
+A product screenshot/mock in a thick-bordered `.box` with a **mono title bar** (e.g. `> app —
+v1.0`); hard shadow, slight rotation optional (sticker feel). Real-looking data. Decorative
+chrome `aria-hidden`; informative → alt.
+
+## 12. Agent Workflow Section
+Steps as bordered boxes connected by thick lines/arrows (PLAN → RETRIEVE → ACT → VERIFY), mono
+labels + big numbers. Reveal/step animation snappy. a11y: `<ol>` text equivalent.
+
+## 13. Code Preview
+A bordered `.box` with a mono title bar + copy button; code in `--font-mono` on paper/ink;
+high-contrast syntax (flat colors, no soft tints). `<pre><code>`; copy `aria-label`.
+
+## 14. Terminal Preview
+A bordered terminal box (ink block), mono prompt lines (`$`), optional snappy typewriter
+(reduced motion → final state). Real text, not an image.
+
+## 15. Trust Section
+Big mono **numbers** (tabular) in bordered boxes or an exposed grid (uptime, users, requests),
+with mono labels. Count-up snappy on reveal (final value in DOM). Accent on numbers optional.
+
+## 16. Security Section
+Compliance badges (SOC 2/ISO/GDPR/HIPAA) as bordered `.tag`/boxes + assurances list (mono `//`
+notes) + "SECURITY DOCS" link. Flat, factual. Badges alt text.
+
+## 17. Enterprise Section
+"FOR ENTERPRISE" block: SSO/RBAC/SLAs/VPC as bordered list items + a `.btn-primary` "TALK TO
+SALES" + optional logo marquee. No border between it and neighbors.
+
+---
+
+## Component rules
+- **Brutalist primitives:** every card/button/input/table uses `.box`/`.btn` (thick border +
+  hard offset shadow, no blur); the press effect on clickables.
+- **Sections separate by inverted blocks**, not borders; component borders stay *inside* sections.
+- Compose from shared `.box`/`.btn`/`.tag`/tokens — consistent border width + shadow offset.
+- Every interactive element has hover (shadow/translate) **and** a **thick `:focus-visible`**
+  outline; components reflow to single column by `md`/`sm`.
+- Decorative marks `aria-hidden`; informative media has meaningful `alt`.
+- Flat only: **no gradients, no glass, no blurred shadows, no pillowy radii.** Restraint: two
+  neutrals + one loud accent.

package/skills/brutalist-tech-design-system/design-principles.md

@@ -0,0 +1,73 @@
+# Design Principles — Brutalist Tech
+
+The philosophy distilled from neo-brutalist/raw references (Gumroad, Vercel-blocky, brutalist
+Awwwards winners, Read.cv, Bloomberg, Hatch) and modern AI sites (OpenAI, Anthropic,
+Perplexity, Cursor, Replit) for structure. Brutalism on the web = honesty, structure, and
+raw confidence — built **legibly and accessibly**, not as an excuse for unusable chaos.
+
+## The one-sentence philosophy
+
+**Show the structure, loudly.** Build the page from stark flat color blocks and oversized
+type, expose the grid and the construction (thick borders, hard offset shadows), and let the
+rawness *be* the design — with high contrast and clear function throughout.
+
+## Core principles
+
+1. **Blocks, not gradients.** Compose in flat, full-bleed **color blocks** that invert
+   against each other (black ↔ white ↔ accent). No gradients, no glass, no soft fades.
+2. **Type is the graphic.** Oversized **monospace** and **bold grotesk** headlines — often
+   UPPERCASE, tight tracking, set huge. Type carries the personality; imagery is secondary.
+3. **Expose the structure.** A visible grid, hard edges, **thick component borders**, and
+   **hard offset shadows** (e.g. `6px 6px 0 #000`, never blurred) reveal how it's built.
+4. **Honesty + function.** Buttons look like buttons, links are underlined, the layout reads
+   like a document. The raw, "default browser turned up" feel is intentional.
+5. **One loud accent.** A single saturated accent (electric blue / safety yellow / hot red /
+   lime) does the shouting; everything else is black and white.
+6. **High contrast = the look AND the a11y.** Brutalism's stark contrast is an accessibility
+   advantage — lean into it (and verify accent text/fills meet AA).
+7. **Mechanical motion.** Snappy, abrupt interactions — a button "presses" (translate +
+   shadow collapse), hovers snap, a marquee scrolls. Not silky; deliberate and a little raw.
+8. **Density with order.** Pack content into a clear grid; the rawness is composed, not messy.
+   Alignment and a strict grid keep "brutal" from becoming "broken."
+9. **No decoration for its own sake.** Skip ornament, gradients, drop-shadow fluff, rounded
+   "friendly" corners. Hard edges (or tiny radii at most).
+10. **Legible above all.** Big type, high contrast, clear hierarchy — brutalist should be
+    *more* readable, not less. Never sacrifice legibility for edginess.
+
+## Visual-hierarchy laws
+
+- **One H1 per page**, set huge — the loudest block on the screen.
+- **Block inversion = section change.** A black block followed by an accent block followed by
+  a white block creates rhythm and separates sections — **no divider lines**.
+- **Contrast ladder via weight + case + size:** UPPERCASE bold display, sentence-case body,
+  mono labels — not subtle gray steps.
+- **One primary CTA per viewport:** a blocky, bordered, hard-shadow button that presses.
+- **Group with bordered blocks + the grid**, not soft cards or rules between sections.
+- **Accent marks importance** — the primary action, a highlighted block, a key word.
+
+## Brutalist devices
+
+- **Color-block sections:** full-bleed flat blocks that invert (the section separator).
+- **Thick borders:** 2–4px solid black on cards/buttons/tables/inputs (inside components).
+- **Hard offset shadow:** `box-shadow: 6px 6px 0 #000` (no blur) — the "sticker" look; presses
+  on click (shadow shrinks + element translates).
+- **Marquee:** a scrolling ticker of words/logos (pausable, accessible).
+- **Mono labels / tags:** `[ LABEL ]`, `// note`, `001 —`, kbd-style chips.
+- **Exposed grid:** visible column lines / a bordered grid of cells.
+- **Sticker badges:** rotated, bordered, hard-shadow callouts ("NEW", "BETA").
+
+## Reference cues (what each does well)
+
+- **Gumroad:** loud color blocks, thick borders, hard shadows, bold type — the canonical neo-brutalist.
+- **Vercel (blocky moments) / Read.cv:** stark black/white, mono, exposed structure, restraint.
+- **Awwwards brutalist winners:** oversized type, marquees, raw grids (borrow craft; stay legible).
+
+## Do / Don't
+
+**Do:** flat color blocks that invert · oversized mono/grotesk type · thick black component
+borders · hard offset shadows (no blur) · one loud accent · exposed grid · snappy mechanical
+motion · UPPERCASE labels · high contrast · marquees/stickers used with intent.
+
+**Don't:** gradients · glassmorphism · soft blurred shadows · pillowy rounded everything ·
+low-contrast accent text · borders/lines between sections (use inverted blocks) · timid type ·
+soft generic SaaS layouts · motion that's silky instead of snappy · illegible "edgy" chaos.

package/skills/brutalist-tech-design-system/example-page-structures.md

@@ -0,0 +1,92 @@
+# Example Page Structures — Brutalist Tech
+
+Ready-to-assemble, **brutalist block** page blueprints. Each section names a layout (see
+`layout-system.md`) and components (see `component-library.md`). Compose in stark full-bleed
+**color blocks** that invert; thick borders + hard shadows live inside components. **Sections
+separate by inverted blocks — never borders.**
+
+Legend: `BH-* / F-* / P-* / C-* / Q-* / FT-*` layouts · components by name · block colors:
+paper / white / ink / accent.
+
+## MANDATORY: 15+ page site map (≈20), 10+ sections/page, clean URLs
+
+Always ship a **full multipage website with 15+ pages (≈20)** — never a single landing page.
+Every page carries **at least 10 sections (≈12)**, **no borders/dividers between sections**
+(sections invert via block colors), pure HTML/CSS/vanilla JS, **extensionless URLs**. Required
+20-page map:
+
+```
+/                Home              /customers      Customers
+/platform        Platform          /case-studies   Case Studies
+/solutions       Solutions         /developers     Developers
+/products        Products          /docs           Documentation  ← + DOC-A subpages
+/features        Features          /about          About
+/ai-agents       AI Agents         /careers        Careers
+/enterprise      Enterprise        /blog           Blog           ← + article pages
+/security        Security          /contact        Contact
+/pricing         Pricing           /partners       Partners
+                                   /resources      Resources   /faq  FAQ
+```
+
+Each blueprint below is a **10-section** skeleton — extend toward 12, never fewer than 10.
+Every page must include: **Hero (block) · Feature Sections · Product Highlights · Trust Signals
+· Testimonials · Use Cases · Statistics · Integrations · CTA (accent block) · Footer (ink).**
+**Alternate block colors** so adjacent sections invert.
+
+---
+
+## 1. Home (default) — block sequence shown
+1. **Navbar** (bordered bar) — extensionless mono links
+2. **Hero** `BH-A` — **[accent block]** huge UPPERCASE H1 · mono deck · blocky CTAs · preview box
+3. **Logos / Marquee** — **[ink block]** scrolling logo ticker
+4. **Feature Grid** `F-A` — **[paper block]** bordered `.box` cards
+5. **Exposed grid** `F-B` — **[white block]** bordered cells (construction look)
+6. **Numbered list** `F-D` — **[ink block]** `001/002/003` big mono + bold titles
+7. **Statistics** — **[accent block]** big mono numbers in boxes (count-up)
+8. **Testimonials** — **[paper block]** bordered quote boxes / giant pull quote
+9. **Pricing** `P-A` (or teaser) — **[white block]** bordered tier boxes
+10. **CTA** `C-A` **[accent block]** giant headline + press CTA  +  **Footer** `FT-A` **[ink block]**
+
+## 2. Platform / Product
+1. Navbar · 2. **Hero** `BH-B` split (accent) · 3. Marquee (ink) · 4. Feature `F-A` (paper) · 5.
+**Dashboard Preview** bordered box (white) · 6. Exposed grid `F-B` (ink) · 7. Code Preview box ·
+8. Statistics (accent) · 9. Testimonials (paper) · 10. CTA (accent) + Footer (ink)
+
+## 3. Features
+1. Navbar · 2. Hero (block) · 3.–8. feature blocks (alternate `F-A`/`F-B`/`F-C`/`F-D`, inverting
+paper/white/ink/accent each time) · 9. Integrations marquee · 10. CTA + Footer
+
+## 4. Developers / Documentation
+- **Developers:** Navbar · **Hero** with **Terminal/Code box** (ink) · Logos marquee · Code
+  Preview (tabbed boxes) · Feature grid · Use Cases · Statistics · CTA ("READ DOCS"/"GET KEY") ·
+  Footer (≥10).
+- **Docs:** `DOC-A` three-pane (bordered sidebar · prose `--container-md` · TOC); bordered code
+  blocks; breadcrumb. Borders are inside the docs UI, not between sections.
+
+## 5. Enterprise / Security
+1. Navbar · 2. Hero (outcome, ink) · 3. Logos · 4. Feature `F-C` · 5. **Enterprise** block
+(accent) · 6. **Security** (compliance `.tag` boxes, white) · 7. Statistics (ink) · 8.
+Testimonials (paper) · 9. CTA "TALK TO SALES" (accent) · 10. Footer (ink)
+
+## 6. Pricing
+1. Navbar · 2. Hero (short + blocky toggle) · 3. **Pricing** `P-A/P-B` boxes (recommended =
+accent block + sticker) · 4. Feature comparison (exposed grid) · 5. Enterprise band · 6. Logos ·
+7. Statistics · 8. Testimonials · 9. **FAQ** `Q-A` bordered rows · 10. CTA + Footer
+
+## 7. Content pages (About, Customers, Case Studies, Careers, Blog, Partners, Resources, Contact, FAQ)
+Reach **≥10 sections** by inverting blocks: Hero → body blocks (manifesto/values, customer grid,
+case-study with big stats, open roles list, article boxes, partner grid, resource boxes, contact
+form in a bordered box) → Trust Signals → Statistics → Testimonials → Integrations marquee → CTA
+(accent) → Footer (ink). About can be a bold "MANIFESTO" block page.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**. Never a single/thin page.
+- **Sequence the blocks** (paper → ink → accent → white …) so adjacent sections clearly invert —
+  this is how sections separate; **no borders/dividers between sections**.
+- **Thick borders + hard offset shadows on components only** (boxes/buttons/tables/exposed grids).
+  Flat — no gradients/glass/blurred shadows.
+- **Oversized mono/grotesk type, UPPERCASE labels/buttons/nav**, one loud accent; verify accent
+  text contrast.
+- Use **real, punchy copy** (brutalist voice — short, declarative); mark guesses `[PLACEHOLDER]`.

package/skills/brutalist-tech-design-system/layout-system.md

@@ -0,0 +1,74 @@
+# Layout & Grid System — Brutalist Tech
+
+A 12-column **exposed grid** + canonical **block** layouts. The grid is allowed to *show*
+(visible column lines / bordered cells), composition is blocky and confident, and **sections
+separate by inverted color blocks — never borders**.
+
+## Grid
+
+```css
+:root { --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 28px); }
+
+.grid { display: grid; gap: var(--grid-gap);
+        grid-template-columns: repeat(var(--grid-cols), 1fr); }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+.split  { grid-template-columns: 1fr 1fr; }
+.asym   { grid-template-columns: 2fr 1fr; }     /* off-balance brutalist split */
+@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
+@media (max-width: 760px){ .split,.asym { grid-template-columns: 1fr; } }
+@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }
+
+/* Exposed grid: a bordered grid of cells (the "construction" look).
+   Borders here are INSIDE the component, not section dividers. */
+.grid--exposed { gap: 0; border: var(--border); }
+.grid--exposed > * { border: var(--border); margin: calc(var(--border-w) * -0.5); padding: var(--space-6); }
+```
+
+Breakpoints: `sm 480` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1440`. Mobile-first; blocks
+stack to one column by `md`; oversized type clamps down.
+
+## Canonical block layouts
+
+### Hero
+- **BH-A Block hero (default):** a huge UPPERCASE display headline on a block, a mono deck,
+  blocky CTAs (bordered, hard shadow), optional a bordered product/screenshot box. Often the
+  accent block or the ink block.
+- **BH-B Split:** oversized headline (`.asym` left) + a bordered box/preview (right).
+- **BH-C Marquee hero:** headline + a scrolling **marquee** ticker band beneath it.
+
+### Feature
+- **F-A Bordered card grid:** `.grid.cols-3` of `.box` cards (thick border, hard shadow).
+- **F-B Exposed grid:** `.grid--exposed` of cells (visible grid lines) — the construction look.
+- **F-C Alternating blocks:** copy block ↔ bordered media box, flipping sides; blocks invert.
+- **F-D Numbered list:** big `001 / 002 / 003` mono numbers + bold titles, bordered rows.
+
+### Pricing / CTA / FAQ / Footer
+- **P-A 3-tier boxes:** bordered tier cards, the recommended one in the **accent block** /
+  heavier border + sticker badge ("BEST"). Monthly/annual toggle (blocky switch).
+- **C-A CTA block:** a full-bleed **accent or ink block** with a giant headline + blocky CTA.
+  `--section-y-lg`, no border.
+- **Q-A Accordion FAQ:** bordered rows; `+`/`−` mono toggles; hard edges.
+- **FT-A Mega footer:** an **ink block** with mono columns, big wordmark, fine print, social.
+
+### Dashboard / Docs
+- **D-A Bordered shell:** product preview in a thick-bordered box with a mono title bar.
+- **DOC-A Three-pane docs:** bordered sidebar · prose (`--container-md`, mono-ish) · TOC;
+  bordered code blocks; breadcrumb. Hairlines/borders are *inside* the docs UI.
+
+## Composition rules
+
+1. **Separate sections by inverted color blocks, NEVER borders.** Sequence blocks (paper →
+   ink → accent → white) so adjacent sections clearly differ; `.section{border:0}`; no `<hr>`
+   between sections. Component borders (cards/boxes/grids) are fine *inside* a section.
+2. **Compose in blocks on the grid.** Confident, slightly asymmetric splits (`.asym`),
+   full-bleed blocks, oversized type. Keep alignment strict so "raw" reads as composed.
+3. **One loud idea per block.** Big headline or one demo per section; don't muddle blocks.
+4. **At least 10 sections per page**, **15+ pages.** Never thin.
+5. **Rhythm via inversion:** hero block → marquee/logos → feature blocks (alternate F-A/F-B) →
+   numbered list → metrics → testimonials → pricing → FAQ → accent CTA block → ink footer.
+6. **Full-bleed blocks, contained content** (`.container` inside each block).
+7. **Reflow:** multi-column → single column by `md`; oversized type clamps; exposed grids
+   collapse to stacked bordered cells; marquees keep scrolling (or pause) but never cause page
+   horizontal scroll of the whole layout.

package/skills/brutalist-tech-design-system/motion-system.md

@@ -0,0 +1,80 @@
+# Motion System — Brutalist Tech
+
+Motion is **snappy and mechanical** — things snap, press, and slide rather than glide. Short
+durations, sharp/linear easing, and the signature **press** (translate + hard-shadow collapse).
+It's deliberate and a little raw, but **never janky** and always reduced-motion-aware.
+
+Distilled from neo-brutalist sites (abrupt, tactile interactions) and OpenAI/Anthropic/
+Perplexity/Cursor (restraint) for structure.
+
+## Tokens
+
+```css
+:root {
+  --dur-snap: 80ms;    --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;
+  --ease-snap: linear;                         /* mechanical, no soft curve */
+  --ease-step: steps(4, end);                  /* stepped/digital feel (optional) */
+  --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);  /* for reveals only */
+}
+```
+
+## Principles
+1. **Snap, don't glide.** Most interactions use `--dur-snap`/`--dur-fast` with `linear` — abrupt
+   and tactile, matching the hard edges.
+2. **The press is the signature.** Buttons/clickable boxes translate `3px,3px` and the hard
+   shadow collapses to `0` on `:active` (and back on release) — like physically pressing a sticker.
+3. **Hard, not soft.** No easing-luxury, no blur transitions, no parallax drift. Movement is
+   small and decisive.
+4. **One loud motion per area.** A marquee or a snappy reveal — not everything moving at once.
+5. **Cheap props + final-state truth.** Animate `transform`/`opacity`/`box-shadow` (offset only);
+   content is fully present with motion off.
+
+## Patterns
+
+- **Button / box press:** `:hover` shadow grows (`--shadow-sm`→`--shadow`); `:active` →
+  `transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink)` over `--dur-snap`.
+- **Hover lift (cards):** small `translate(-2px,-2px)` + shadow grows — the box "pops" off the page.
+- **Reveal:** sections/boxes appear with a quick `opacity` + small `translateY` (or a hard
+  `clip-path` wipe) over `--dur-base`, slight stagger. Snappy, not floaty.
+- **Marquee (logos/words):** an infinite horizontal ticker (`transform: translateX`), linear,
+  **pausable on hover/focus**; duplicate the track for seamlessness; `aria-hidden` decorative copy.
+- **Accordion / toggle:** instant-ish height + `+`/`−` swap; no slow ease.
+- **Nav:** on scroll, the bar's border/shadow snaps in; mobile menu blocks in/out fast.
+- **Typewriter (terminal):** stepped mono typing (`--ease-step`); reduced motion → final text.
+- **Count-up (stats):** quick mono number roll; final value in DOM.
+- **Sticker wobble (optional):** a tiny rotate on a badge on hover — use sparingly.
+
+## Reduced motion (required)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.001ms !important;
+    animation-iteration-count:1 !important; transition-duration:.001ms !important;
+    scroll-behavior:auto !important; }
+}
+```
+Under reduced motion: stop marquees/typewriters/count-ups at final values; reveals show in
+final state; keep the **press** as an instant state change (no transition) — it stays usable
+and tactile without animation.
+
+## Minimal vanilla helpers
+
+```js
+const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;
+// reveal
+const io = new IntersectionObserver((es)=>es.forEach((e,i)=>{ if(e.isIntersecting){
+  e.target.style.transitionDelay = `${Math.min(i*60,240)}ms`;
+  e.target.classList.add('in'); io.unobserve(e.target);
+}}, {threshold:.2});
+document.querySelectorAll('[data-reveal]').forEach(el=>io.observe(el));
+// marquee pause on hover handled in CSS (animation-play-state)
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(14px);
+  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+.marquee { display:flex; gap: var(--space-8); width:max-content;
+  animation: marquee 18s linear infinite; }
+.marquee:hover, .marquee:focus-within { animation-play-state: paused; }
+@keyframes marquee { to { transform: translateX(-50%); } }
+```