A Brutalist Portfolio in Next.js 16

This site you are reading is the system I want to walk through. Not because it is unique — brutalist portfolios are everywhere in 2026 — but because the constraints I chose made the build three weeks faster than the previous version, which had a "proper" design system.

The constraints

• Zero rounded corners. Every element is a sharp rectangle. --radius: 0px globally.
• One accent color. #ff4d1c. Used for active states, hover reveals, and exactly one word per heading.
• Three typefaces, no more. Space Grotesk for display, Inter for body, JetBrains Mono for metadata. That is the entire type system.
• No shadows. Borders instead. Every box-shadow becomes a 1px solid border in --line.
• No emoji. SVG icons only, all stroked at 2px.

These rules sound restrictive. In practice, they eliminated 90% of the design decisions that slow down a build. There is no "what radius should this card be?" debate. There is no "should we use a soft shadow or a hard one?" discussion. The answer is always: zero radius, no shadow, one border.

The color system

Two themes, light and dark. #f5f5f0 paper / #0a0a0a ink, with #ff4d1c as the accent in both. I deliberately picked an off-white instead of pure white — pure white at full screen brightness reads as "Apple Store", not "designer's site".

The muted foreground is #5a5a5a in light mode and #888888 in dark mode. Both are deliberately not pure grey — they have a touch of warmth so they feel like a printed page, not a terminal.

The generative background

Behind everything is a flow field rendered on a <canvas>. It updates with mouse position and respects prefers-reduced-motion. I will not pretend this is performance-neutral — it costs ~2ms per frame on a mid-range laptop — but it gives the site a sense of being alive without any images or video.

The lesson

The previous version of this portfolio had 14 Tailwind colors, three font weights per element, soft shadows on cards, and 4px radius on buttons. I shipped it in eight weeks. This version, with stricter constraints, shipped in three. Same content. Same person building it.

Constraints are not aesthetic. They are a delivery mechanism.