Oversized Typography

STYLEKIT_STYLE_REFERENCE
style_name: Oversized Typography
style_slug: oversized-typography
style_source: /styles/oversized-typography

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

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

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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