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

---

# Oversized Typography Design System

> 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.

## Design 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

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#0A0A0A]/15
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:text-[#FF4D00]
Transition: transition-colors duration-200
Active: active:text-[#FF4D00]
```

### Typefaces
```
Heading: font-black uppercase tracking-tighter leading-[0.85]
Body: font-sans text-sm leading-relaxed
Mono: font-mono uppercase tracking-widest
```

### Type scale
```
Hero: text-[clamp(3rem,12vw,10rem)]
H1: text-[clamp(2.5rem,8vw,6rem)]
H2: text-[clamp(2rem,5vw,4rem)]
H3: text-[clamp(1.5rem,3vw,2.5rem)]
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-16 md:py-24 lg:py-32
Container: px-4 md:px-8 lg:px-12
Card: py-8 md:py-10
Gap sm: gap-4
Gap md: gap-8
Gap lg: gap-16
```

### Color roles
```
Background primary: bg-[#FAFAF8]
Background secondary: bg-[#0A0A0A]
Background accent: bg-[#FF4D00], bg-[#18181B]
Text primary: text-[#0A0A0A]
Text secondary: text-[#71717A]
Text muted: text-[#71717A]/70
Button primary: bg-[#0A0A0A] text-[#FAFAF8] hover:bg-[#FF4D00]
Button secondary: bg-transparent text-[#0A0A0A] border border-[#0A0A0A]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-br`
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `text-center`

### Banned patterns
- matches `^shadow-(?!none)`
- matches `^bg-gradient-`
- matches `^rounded-(md|lg|xl|2xl|3xl|full)`
- matches `^drop-shadow-`

### Why they are banned
- `shadow-md`: Oversized Typography builds hierarchy with size and whitespace, never shadows
- `bg-gradient-to-r`: Solid #0A0A0A / #FAFAF8 / #FF4D00 only; gradients dilute the type
- `rounded-lg`: Corners stay sharp: rounded-none or rounded-sm at most
- `rounded-full`: Pill shapes soften the layout; keep everything rectangular
- `text-center`: Display type is left-aligned; centering is reserved for marquee strips

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-mono
uppercase
tracking-widest
rounded-none
transition-colors duration-200
```

### Every card must include
```
border-t border-[#0A0A0A]/15
rounded-none
bg-transparent
```

### Every input must include
```
bg-transparent
border-0 border-b border-[#0A0A0A]/30
rounded-none
font-mono uppercase tracking-widest
focus:border-[#FF4D00]
```

---

## [COMPARE] Oversized Typography wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-mono uppercase tracking-widest rounded-none transition-colors duration-200 bg-[#0A0A0A] text-[#FAFAF8] hover:bg-[#FF4D00]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="border-t border-[#0A0A0A]/15 rounded-none bg-transparent py-8 md:py-10">
 <h3 class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(1.5rem,3vw,2.5rem)]">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-transparent border-0 border-b border-[#0A0A0A]/30 rounded-none font-mono uppercase tracking-widest focus:border-[#FF4D00]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Oversized Typography page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#FAFAF8] text-[#0A0A0A] border border-[#0A0A0A]/15 px-4 md:px-8 lg:px-12">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-8">
 <a href="/" class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(1.5rem,3vw,2.5rem)]">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-8 font-sans text-sm leading-relaxed text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#FF4D00] text-[#0A0A0A] py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-12">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(3rem,12vw,10rem)]">
 {HEADLINE}
 </h1>
 <p class="font-sans text-sm leading-relaxed text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="font-mono uppercase tracking-widest rounded-none transition-colors duration-200 bg-[#0A0A0A] text-[#FAFAF8] hover:bg-[#FF4D00]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#FAFAF8] text-[#0A0A0A] py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(2rem,5vw,4rem)]">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Card template - repeat for each card -->
 <div class="border-t border-[#0A0A0A]/15 rounded-none bg-transparent py-8 md:py-10">
 <h3 class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(1.5rem,3vw,2.5rem)]">{CARD_TITLE}</h3>
 <p class="font-sans text-sm leading-relaxed text-sm md:text-base text-[#71717A]/70">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-transparent border-0 border-b border-[#0A0A0A]/30 rounded-none font-mono uppercase tracking-widest focus:border-[#FF4D00]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#0A0A0A] text-[#71717A] py-16 md:py-24 lg:py-32 px-4 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
 <div>
 <span class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(1.5rem,3vw,2.5rem)]">{LOGO_TEXT}</span>
 <p class="font-sans text-sm leading-relaxed text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-black uppercase tracking-tighter leading-[0.85] text-[clamp(1.5rem,3vw,2.5rem)]">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-sm leading-relaxed text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Oversized Typography post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-mono uppercase tracking-widest rounded-none transition-colors duration-200`
- [ ] Card includes: `border-t border-[#0A0A0A]/15 rounded-none bg-transparent`
- [ ] Input includes: `bg-transparent border-0 border-b border-[#0A0A0A]/30 rounded-none font-mono uppercase tracking-widest focus:border-[#FF4D00]`

### Forbidden check
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `shadow-2xl`
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-br`
- [ ] Not using `rounded-md`

### Style rule check
- [ ] 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

### Style drift check
- [ ] Does not violate: Never use gradient backgrounds or gradient text (bg-gradient-*); solid colors only
- [ ] Does not violate: Never stack rounded cards; rounded-none or rounded-sm at most
- [ ] Does not violate: Never apply shadows (shadow-*); hierarchy comes from size, weight, and whitespace alone
- [ ] Does not violate: Never introduce a second accent color; no chroma exists beyond #FF4D00
- [ ] Does not violate: Never replace verbal expression with decorative icons; arrows serve type, not the reverse

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Oversized Typography

---

## [EXAMPLES] Example prompts

### 1. 

 hero + + marquee 

```
Build a 2026 oversized-typography portfolio homepage: the designer's name fills the viewport at text-[clamp(4rem,15vw,12rem)] font-black uppercase tracking-tighter leading-[0.85] (second line as -webkit-text-stroke outline), a font-mono uppercase tracking-widest micro-nav, an infinite marquee strip reading AVAILABLE FOR WORK, a numbered works index (01-04) with hairline dividers where titles flip to #FF4D00 on hover, and a giant LET'S TALK footer CTA. Colors: #0A0A0A on #FAFAF8 with #FF4D00 as the only accent. No gradients, no shadows, no rounded corners.
```

### 2. 

：

```
Design a design-conference event page in oversized-typography style: TYPO26 as a text-[clamp(4rem,16vw,13rem)] hero, the date 14-16 MAY set as a second giant outline line, a marquee strip listing speaker names in font-mono uppercase, a schedule table with hairline row dividers and mono time labels, and a rounded-none black register button that turns #FF4D00 on hover. Left-aligned everything, massive py-24 whitespace, near-black #0A0A0A on warm white #FAFAF8, no imagery except one small venue photo thumbnail.
```

## 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