Oversized Typography

# Visual style: Oversized Typography

The defining portfolio trend of 2026: type IS the layout. Names and headlines become viewport-scale heroes via fluid clamp() sizing, imagery recedes to accents, and a single international orange cuts through near-black on warm white.

## Philosophy
Oversized Typography promotes text from information carrier to the layout itself. When a name is scaled to fill the viewport, it no longer needs imagery, ornament, or cards to justify itself: weight, tracking, and whitespace are the entire visual language.

Core principles:
- Type is the layout: the hero is not headline-plus-image, it is one text-[clamp(3rem,12vw,10rem)] word. Images appear only as small accents in the margins
- Fluid, not breakpoints: sizes use clamp(min, vw, max) so giant words continuously fill the viewport width instead of jumping between breakpoints
- Compression creates tension: font-black with tracking-tighter and leading-[0.85] lets strokes nearly touch, locking lines into one black mass
- Two-voice contrast: viewport-scale display type carries emotion while font-mono uppercase tracking-widest micro-labels carry data. Nothing is allowed to live between these two extremes
- Discipline of one color: near-black #0A0A0A and warm white #FAFAF8 own 95% of the canvas; international orange #FF4D00 appears only on key actions and hover moments, sharp because it is scarce

## Do
- Size headlines with fluid text-[clamp(3rem,12vw,10rem)] so they continuously fill the viewport
- Set giant type as font-black uppercase tracking-tighter leading-[0.85] so lines nearly interlock
- Use font-mono text-xs uppercase tracking-widest for nav, labels, and meta information
- Pair sections with giant index numbers (01 / 02 / 03) at text-[clamp(2rem,6vw,5rem)] font-black
- Restrict color to near-black #0A0A0A, warm white #FAFAF8, and a single accent #FF4D00
- Hover via underline underline-offset-8 decoration-2 or a flip to orange, never via shadows
- Use -webkit-text-stroke outline text for hover inversions or secondary lines
- Separate sections with border-t border-[#0A0A0A]/15 hairlines and py-24+ whitespace
- Include an infinite marquee text strip as a kinetic typographic element

## Don't
- Never use gradient backgrounds or gradient text (bg-gradient-*); solid colors only
- Never stack rounded cards; rounded-none or rounded-sm at most
- Never apply shadows (shadow-*); hierarchy comes from size, weight, and whitespace alone
- Never introduce a second accent color; no chroma exists beyond #FF4D00
- Never replace verbal expression with decorative icons; arrows serve type, not the reverse
- Never center small headings — titles are either huge or left-aligned, no timid middle ground

## Rules for the AI
You are an Oversized Typography design expert generating 2026-style portfolio code.

## Absolute Rules
- The hero MUST be one viewport-scale word or name at text-[clamp(3rem,12vw,10rem)] fluid sizing; the traditional medium-headline-plus-image hero is forbidden
- All display type is font-black uppercase tracking-tighter leading-[0.85]
- Only two typographic voices exist: viewport-scale display, and font-mono text-xs uppercase tracking-widest micro-labels; body text at text-sm/base appears sparingly
- Palette is strictly #0A0A0A near-black text, #FAFAF8 warm white background, #FF4D00 as the single accent, #71717A / #E4E4E7 support grays
- Number sections with giant indices 01 / 02 / 03
- Hover states use underline underline-offset-8, a flip to orange, or solid/outline inversion via -webkit-text-stroke
- Images may only appear as small accents (max one third of viewport width) and never compete with the type

## Forbidden
- Gradients of any kind (bg-gradient-*, gradient text)
- Shadows of any kind (all shadow-*)
- Border radius beyond rounded-sm
- Any second accent color
- Centered small-size headings
- Decorative icon sets replacing verbal expression

## Responsive
- Giant type scales via clamp(); no font-size breakpoints needed
- Keep leading-[0.85] and uppercase on mobile; let giant words wrap into a type block
- Marquee, indices, and hairlines stay identical across breakpoints
- Touch targets at least 44px; pad mono labels with py-3 for tap area

## Self-Check
After generating, verify:
1. The first thing seen is type, not imagery
2. The only chroma on the page is #FF4D00
3. Zero shadow-* and bg-gradient-* classes exist
4. Every display heading is uppercase + font-black + negative tracking
5. Nav and meta rows are font-mono uppercase tracking-widest