BUILD
- Build a complete Swiss / International Typographic Style portfolio or studio homepage. Not a card, not an isolated navbar, not a SaaS landing, not tabs.
- Domain from Use on: portfolios and studio sites first; docs landing reuses the grid with a narrower measure. This is a poster, not a product page.
STYLE
- Swiss: strict grid, oversized sans type, one red accent, zero decoration
- Page #FFFFFF. Type #0A0A0A. Accent red #E30613 used once per view. Hairlines 1px #0A0A0A
- border-radius: 0 and box-shadow: 0 everywhere. Depth comes from rules and whitespace only
- One family only: Helvetica Neue, Inter Tight, or Neue Haas Grotesk. Display 64-96px, weight 700, tracking -0.04em. No serif, no Inter
LAYOUT
- Container max-width 1200px on a visible 12-column grid with 24px gutters and a 24px baseline
- Left-aligned throughout. Show the grid: hairlines between bands, no floating cards
- Whitespace is the hierarchy. Nothing is centered, and nothing is rounded
SECTIONS
1. Masthead: wordmark NORTH flush left, Work / Index / Contact on the grid, 1px rule beneath
2. Hero: oversized headline "Grid first. Type second.", kicker PORTFOLIO 2026, one dek line at 18px
3. Selected work: three rows of one line each — year, title, discipline — separated by 1px hairlines
4. Index band: two columns, left a numbered list of six projects, right a short studio statement
5. Numbers band: three figures at 56px with 11px uppercase labels, one figure in #E30613
6. Footer: three columns on the grid — Work / Studio / Contact — with a 1px rule above
INTERACTION
- Hover turns a title or link #E30613. No lift, no shadow, no scale
- Work rows slide their title 4px right on hover and reveal a 1px red rule
- Focus is a 2px solid #E30613 offset outline, never a glow
MOTION
- Motion is minimal and precise: 160ms ease-out for color and the 4px slide, nothing else
- No parallax, no scroll-triggered reveals, no bounce, no spring
- The red rule slides between tab states; that is the only animated element
- prefers-reduced-motion: instant state changes, no slide
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — strip radius and shadows, keep the grid. One homepage route.
DON'Ts
- No border-radius, no box-shadow, no blur, no gradient, no glass
- No second accent color. Red #E30613 appears once or twice, never as a fill for large areas
- No serif type, no Inter, no emoji, no icon set
- Do not center the hero. Do not output only a headline plus two empty cells
- Do not confuse this with Minimal: Minimal is a quiet product surface, Swiss is typography as structure