← back to Small Business Builder
design/figma/website-analysis-brutalist.md
181 lines
# Figma — Website Analysis (Brutalist)
Importable Figma spec for the Website Analysis app inside small-business-builder.
Produced 2026-05-04. Mirrors `src/render/website-analysis.js` exactly so what's in
prod and what's in Figma never drift.
> **Plugin**: Open Figma → Plugins → "html.to.design" or "Builder.io" → paste the
> URL `http://127.0.0.1:9760/website-analysis`. Both plugins reproduce 95%+ of this
> spec automatically. The remaining 5% is the marquee animation (Figma Smart
> Animate on the tape `<span>` between two frames offset by 50%).
---
## 1 · Design tokens
```
COLORS
ink #000000 ─ all body text, all borders
paper #FFFFFF ─ default surface
cream #FEF3C7 ─ alt surface (cards, second row)
yellow #FACC15 ─ accent (★ buttons, CTAs, marquee)
red #DC2626 ─ stamp / error only — never decorative
ash #666666 ─ small caps secondary text
silver #AAAAAA ─ footer text on black
TYPE
display 'Archivo Black' 900 tracking -.04em uppercase
ui 'Space Mono' 700 tracking +.04em uppercase
body 'Space Mono' 400 tracking 0 sentence case
BORDER
hard 4px solid #000 ─ no rounding, no shadows, ever
hairline 1px solid #00000022 ─ for editorial subgrids only
SPACING (px)
4 8 14 16 24 32 48 64 80 96 120
GRID
desktop 1320 / 12 col / 24 gutter / 24 outer
tablet ≤1024 — 2-col stack, gutters collapse to 16
mobile ≤640 — single column, marquee speed halved
```
---
## 2 · Frames
### Frame A · `/website-analysis` — Entry
```
A. Marquee tape 1440 × 36 yellow #FACC15 / black 4px bottom border
Animated text: ★ WEBSITE ANALYSIS ★ POWERED BY 7 SKILLS ★
B. Header 1440 × 64 black bg, 4px black bottom border
├ Logo "WEBSITE / ANALYSIS." Archivo Black 28 / yellow period
└ Nav: [START·active] [SMB BUILDER] [REFERENCE]
12px Space Mono 700, white-bordered tabs, active=yellow bg
C. Hero (light) 1440 × 720 paper, 4px black bottom border
├ Stamp ROTATE -1.5° red bg, white text, "★ ANALYZE ANY SITE ★"
├ H1 Archivo Black 120 / line-height .85
"SEE YOUR
SITE — REBUILT."
Last word inside <mark> = yellow highlight
├ Subhead 18px Space Mono 700, max 60ch
├ Form (4px black border, no rounding)
│ ├ Row 1 [200×80 black/yellow label "★ WEBSITE"] [input flex, 24px Space Mono 700]
│ ├ Row 2 [200×80 black/yellow label "★ INSTAGRAM"] [input optional]
│ └ Submit full-width 96px tall, yellow bg / black 24px Archivo Black, "GET STARTED →"
└ Trust line 12px Space Mono 700 ash
"★ NO ACCOUNT ★ NO STORED PII ★ ANALYSIS RUNS IN ~30 SECONDS"
D. How it works 1440 × 480 cream bg, 4px black bottom border
├ H2 "★ HOW IT WORKS" Archivo Black 40
└ 3-col grid (4px black border around grid + each cell)
├ 01 YOUR SITE yellow tile-numeral on black square
├ 02 3 REBUILDS cell 2 has cream bg as visual rhythm
└ 03 SHIP IT
E. Footer 1440 × 64 black bg, silver text, yellow link
"© 2026 AGENT ABRAMS ★ ALL ANALYSIS RUNS LOCALLY ★ REFERENCE PATTERN"
```
### Frame B · `/wa/:slug` — Result (3-card picker)
```
A. Marquee + Header (identical to Frame A · A+B)
C. Result header 1440 × 200 paper, 4px bottom
├ Eyebrow "★ ANALYZING" small caps ash
├ H1 Archivo Black 56 — the site domain (e.g. "EXAMPLE.COM")
├ IG line 14px Space Mono 700, underlined w/ 2px black border-bottom
└ Right side "← ANALYZE ANOTHER" black button 4px border, inverse on hover
D. "Your site" 1440 × auto cream bg, 4px black borders top+bot
├ H2 "★ YOUR SITE — RIGHT NOW" Archivo Black 32
└ iframe (16:9) paper bg, 4px black border, the live target site
E. "3 new directions" 1440 × auto paper bg
├ H2 "★ 3 NEW DIRECTIONS" Archivo Black 48
├ Subhead "★ SAME CONTENT — THREE COMPLETELY DIFFERENT AESTHETIC SYSTEMS"
└ 3-col card grid gap 24
Each card 416 × 480 (responsive):
├ Strip black bg, yellow Archivo Black 14, "★ OPTION 01" / theme name
├ Preview 4:3 aspect, scaled-down iframe of mockup HTML (transform .5)
└ Caption cream bg, 4px black top, Archivo Black 20 title +
"★ CLICK TO PREVIEW FULL SIZE" ash 11px
F. Footer (identical to Frame A · E)
```
### Frame C · `/wa/:slug/m/:mockup` — Single mockup full page
Three variants, one per theme:
```
THEME 1 · EDITORIAL Cormorant Garamond + Inter ; off-white #FAFAF6 + ink + warm tan accent
THEME 2 · BRUTALIST Archivo Black + Space Mono ; mirror of /website-analysis itself
THEME 3 · MINIMALIST Inter 300 weight ; #FEFEFE bg, narrow 760 column, rounded CTAs
```
These render the user's scraped content (title, tagline, palette, hero) into
three distinct aesthetic systems. Living source: `src/render/website-analysis-themes.js`.
---
## 3 · Components
```
☐ Btn / Yellow Block — full-width, 28 padding, Archivo Black 24, yellow → hover black
☐ Btn / Black Slim — 14×24 padding, Archivo Black 13
☐ Input / Stacked Label — 200px black/yellow label + flex input, 4px black border
☐ Stamp / Red Rotate — -1.5° rotate, red, 8×14 padding, 12px Space Mono 700
☐ Tape / Marquee — yellow, 8px padding, 4px black bottom, 40s linear infinite
☐ Card / Mockup Preview — black strip header + iframe + cream caption + 4px borders
☐ Card / Step (01/02/03) — yellow numeral on black square, Archivo Black 22 title
☐ Eyebrow / Smallcaps Ash — Space Mono 700, 12px, .06em tracking, ash
☐ H1 / Display 120 — Archivo Black 120, lh .85, ls -.05em
☐ H1 / Display 56 (result) — Archivo Black 56, lh .9, ls -.03em
☐ H2 / Display 48 — Archivo Black 48, lh 1, ls -.03em
☐ H2 / Display 40 — same family, smaller
☐ H2 / Display 32 — same
☐ Highlighter / Yellow Mark — <mark> equivalent, yellow bg, 0 8px padding, no rounding
☐ Iframe / Result Embed — 4px black border, no rounding, 16:9 ratio
☐ Iframe / Card Preview — scaled .5 transform, sandboxed allow-same-origin
```
---
## 4 · Plugin import recipe
1. **Run the dev server** — `pm2 restart smb-builder` (port 9760).
2. **Open Figma** — file → "Website Analysis · Brutalist".
3. **Run "html.to.design" plugin** — URL → `http://127.0.0.1:9760/website-analysis`.
Capture the entry frame.
4. **Run again** — URL → `http://127.0.0.1:9760/wa/example-com` (after submitting
form once, that slug exists). Capture the result frame.
5. **Run again × 3** — capture each mockup frame at
`http://127.0.0.1:9760/wa/example-com/m/01-editorial` (and `02-brutalist`,
`03-minimalist`).
6. **Wire interactions** — Prototype → entry button → result frame; result cards →
single-mockup frame; "← Analyze another" → entry frame.
---
## 5 · Source-of-truth links
```
Live entry http://127.0.0.1:9760/website-analysis
Live result example http://127.0.0.1:9760/wa/example-com
Living renderer ~/Projects/small-business-builder/src/render/website-analysis.js
Theme renderer ~/Projects/small-business-builder/src/render/website-analysis-themes.js
Reference site https://sdccanalysis.agentabrams.com (admin / DWSecure2024!)
Skills ~/.claude/skills/{site-audit, peer-survey, competitors,
mockups, tools-pack, info-hub, extension}
Agent ~/.claude/agents/website-analysis.md
```
Whenever the live entry/result pages change, re-import via plugin and overwrite
the Figma frames. The HTML is the source of truth — Figma is the storyboard.