# 03 · Brutalist Raw — Design System

> Raw brutalism — swiss-punk zine meets early-2000s hacker site and anti-design manifesto: thick black borders, harsh uppercase type, and hard colour hits.
> **All content is placeholder** — the persona ("Jinyu Chen") and every project/link are samples; replace them with your own. Single self-contained HTML file (inline CSS + JS).

---

## 1. Website Goal
Broadcast confidence and speed, not polish. The page hits with a marching marquee and a giant outline/solid headline, then lists work as bordered rows and ends on a full-orange contact block. Primary outcome: an unmistakable, memorable impression that drives a mailto click.

## 2. Target Audience
Engineers and designers who want to signal that they ship — people comfortable with a blunt, high-contrast look. It flatters those whose brand is directness and craft over decorative "portfolio" polish.

## 3. Brand Personality
Loud, blunt, high-contrast, unpolished-on-purpose, fast. Voice is terse and all-caps — "NO FLUFF", "SHIP THE WHOLE THING" — declarative and unhedged.

## 4. Visual Direction
Off-white paper against true black, structured entirely by 3px solid borders and full-bleed inversion — no shadows, no tints. Signature moves: a giant headline mixing an outline-only word (`-webkit-text-stroke`) with a solid-orange word, an infinitely marching marquee strip, and hover states that hard-invert (background ↔ ink) rather than fade.

## 5. Color System
Off-white paper + true black + two hard accent hits. No gradients, no tints.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#eae7df` | page background |
| `--ink` | `#0a0a0a` | text, borders, inverted section/footer backgrounds |
| `--accent` | `#ff3b00` | orange — contact section fill, "hit" headline word, marks/tags |
| `--blue` | `#1500ff` | electric blue — rare secondary hit (borders/links only, never a full section) |

**Rule:** flat colour blocks only — max ~3 colours visible at once. No gradients, no opacity tricks, no soft shadows; contrast comes from 3px borders and inversion (`hover { background: ink; color: paper }`), not tint.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Archivo** | weight 800–900, uppercase, tight tracking (`-0.02em` to `-0.04em`) |
| Mono / labels / body accents | **Space Mono** | weight 400–700, uppercase — nav, tags, marquee, meta, footer |

- Type scale (real `clamp()`): hero `h1` `clamp(3.4rem, 17vw, 15rem)` / line-height `0.84`; about `h2` `clamp(1.8rem, 5vw, 3.6rem)`; work title `clamp(1.6rem, 4.5vw, 3rem)`; contact `h2` `clamp(2.6rem, 12vw, 10rem)` / line-height `0.86`; hero sub paragraph `clamp(1rem, 2vw, 1.3rem)`.
- Weights: display 800–900; never a serif, never a light weight.
- Signature type move: hero `h1` pairs an outline-only word (`.out`, `-webkit-text-stroke: 2px var(--ink)`, transparent fill) with a solid orange word (`.hit`). The one normal-case moment is `.hero .sub p` (Archivo, weight 600).

## 7. Layout Principles
- Spacing base 8px, but 3px borders (not padding) do the structural work; sections `padding: clamp(40px, 7vw, 90px) clamp(20px, 4vw, 56px)`.
- Radius `0` everywhere — no exceptions.
- Elevation none — every seam is a `3px solid var(--ink)` (or `2px` on `.w-tag`) border; no shadows.
- Grids: `.w-item` becomes `90px 1fr auto auto` at ≥720px; `.grid2` becomes `1fr 1fr` at ≥760px with a split rule between columns.

## 8. Homepage Sections
1. **Bar** (fixed, 3px bottom border) — name / "WORK" link / spacer / EN·中文 toggle / inverted-orange "● AVAILABLE 2026" tag.
2. **Hero** (`#top`) — marching marquee strip (DESIGN★FRONTEND★BACKEND★CLOUD), giant outline+solid headline, sub-row with description + "[ SCROLL ↓ ]".
3. **About** — black label chip + big statement headline with an orange `<mark>`.
4. **Work** — full-bleed bordered rows: `[01]` number / uppercase title / mono tag / bordered year chip; invert on hover.
5. **Experience** — 2-column bordered grid (`.grid2`), 4 cells with a split rule.
6. **Contact** (`#contact`, full orange fill) — black label chip, giant headline, bordered mail button, bordered link row.
7. **Footer** — inverted ink background, split brand / template name.

## 9. Component Style
- **Nav bar:** cells divided by 3px borders; links are mono uppercase; availability tag is orange-filled inverted.
- **Work rows:** full-bleed, 3px top borders; hover hard-inverts to `background: var(--ink); color: var(--paper)` (`.1s`); year sits in a 2px-bordered chip.
- **Label chips (`.lbl`):** solid `--ink` block with `--paper` text (inverted to paper-on-orange inside the contact section).
- **Buttons/links (contact):** 3px `--paper` borders, negative margins so borders collapse into a grid; hover swaps to paper fill + orange text.
- **Bilingual EN/中文 toggle:** a bordered 2-button group inside the top bar (between "WORK" and the availability tag; active = `--ink` fill); every string carries `data-en` / `data-zh`, swapped via `apply(lang)` (sets `innerHTML`, `<html lang>` → `zh-Hant`, toggles `aria-pressed`), persisted in `localStorage` under **`sp03_lang`**; placeholders use `data-en-ph` / `data-zh-ph`.

## 10. Motion / Animation
- Marquee: `.strip .run` marches with `@keyframes march` (`22s linear infinite`), content duplicated for a seamless loop.
- Scroll reveals: `.reveal` (opacity 0 + `translateY(20px)`) → `.in` via `IntersectionObserver` (threshold `0.12`), transition `0.5s cubic-bezier(.2,.7,.2,1)` (fast/snappy), staggered `(i % 3) * 70ms`.
- Hover: hard colour inversion, not opacity fades.
- `@media (prefers-reduced-motion: reduce)` disables `.reveal` transforms and the marquee.

## 11. Responsive Design
- **≥720px:** `.w-item` becomes a `90px 1fr auto auto` row (number / title / tag / year); below, it stacks to one column.
- **≥760px:** `.grid2` becomes `1fr 1fr` with a 3px split rule (odd cells border-right + right padding, even cells left padding); below, cells stack full-width.
- Fluid `clamp()` on type + section padding covers the rest; hero holds `min-height: 100vh`; the sub-row and contact links wrap.

## 12. Things to Avoid
- Never round a corner (`border-radius: 0` is absolute).
- No drop shadows, tints, gradients, or opacity tricks — contrast is borders + inversion.
- No serif or thin/light weights anywhere.
- Don't soften the palette or "elegant-ify" the motion (that's templates 01/06/07); keep orange dominant and blue a rare secondary hit.

---

## Rebuild prompt (copy-paste)

> Build a single-page personal site in one self-contained HTML file (inline CSS + JS, no build step). Aesthetic: raw brutalism — swiss-punk zine meets early hacker-site anti-design. Off-white paper background `#eae7df`, true black `#0a0a0a` for text/borders/inverted sections, a hard orange accent `#ff3b00` (contact section, highlighted words, tags) and a rare electric-blue hit `#1500ff` used only for a secondary border/link — no gradients, no tints, no soft shadows, zero border-radius anywhere. Typography: Archivo at weight 800–900 uppercase for all display/heading text with tight negative letter-spacing, Space Mono uppercase for nav/labels/tags/marquee/footer — never a serif, never a light weight. Structure: a fixed top bar with 3px bottom border containing the name, a "WORK" link, an EN/中文 toggle, and an inverted-orange availability tag; a hero with an infinitely marching marquee strip of skill words, then a giant headline mixing an outline-only word (text-stroke, no fill) with a solid-orange word, followed by a description line and "[ SCROLL ↓ ]"; an About section with a black label chip and a big statement headline containing one orange-marked phrase; a Work section of full-bleed bordered rows (numbered, title, mono tag, bordered year chip) that hard-invert colour on hover; an Experience section as a 2-column bordered grid of 4 role cells; and a full orange-background Contact section with a black label chip, a giant headline, a bordered mailto button, and a bordered link row, ending in an inverted black footer. Hover states should invert background/text colour, not fade. Respect prefers-reduced-motion by disabling the marquee and reveal transforms. Add a bilingual EN/中文 toggle using data-en/data-zh attributes on every string, persisted to localStorage under the key `sp03_lang`, switching `<html lang>` to `zh-Hant` when Chinese is active. Replace all placeholder persona and project content with: [USER DETAILS].