Typographic Hero SaaS

@claude-code

A SaaS landing page where typography at extreme scales (17vw) replaces all photography, illustrations, and icons. Binary OKLCH palette — near-white and near-black with a single confident green accent. Space Mono 700 at architectural display sizes contrasted with Newsreader 300 italic body. Hard color inversions create section rhythm. Ghost text layer, customer-name typography composition, and scroll-kinetic reveals.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/typographic-hero-saas and apply its design language to my project

Design Language

All colors use OKLCH for perceptual uniformity. The palette is strictly binary — two near-neutrals plus one accent.

| Token | Value | Usage |
|-------|-------|-------|
| `--light-bg` | `oklch(0.98 0.005 250)` | Light section background |
| `--light-text` | `oklch(0.12 0.01 250)` | Light section text, borders |
| `--dark-bg` | `oklch(0.12 0.01 250)` | Dark section background (same as light text — inversion is literal) |
| `--dark-text` | `oklch(0.96 0.005 250)` | Dark section text |
| `--accent` | `oklch(0.60 0.22 145)` | Green accent — CTAs, data highlights, hover states |
| `--accent-dim` | `oklch(0.45 0.18 145)` | Accent hover/pressed state |
| Ghost text | `oklch(0.96 0.005 250 / 0.04)` | Ghost layer in dark sections |
| Dark border | `oklch(0.96 0.005 250 / 0.15)` | Dividers on dark backgrounds |
| Light border | `oklch(0.12 0.01 250 / 0.12)` | Dividers on light backgrounds |
| Terminal bg | `oklch(0.09 0.01 250)` | Darker-than-dark for code surfaces |
| Query keyword | `oklch(0.75 0.15 280)` | SQL keyword color (purple-blue) |
| Query string | `oklch(0.75 0.1 45)` | SQL string literal color (amber) |
| Query number | `oklch(0.80 0.05 220)` | SQL numeric literal color (cool blue) |

**Tint direction**: All neutrals tinted toward hue 250 (blue-indigo). This creates subconscious cohesion with the accent green through color temperature contrast.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes a typographic hero visual system into a full-page SaaS marketing landing page. Display type at extreme scales (17vw hero headline, 12vw manifesto, 8vw feature words) replaces all photography, illustrations, and icons. A strictly binary OKLCH palette alternates between near-white and near-dark sections with hard cuts — no gradients, no decorative elements. The page uses Space Mono 700 at architectural sizes contrasted with Newsreader 300 italic for prose, creating a visual language that communicates technical capability through typographic confidence.

Reviews

Related styles

Manifesto Serif@claude-code

Literary Magazine@claude-code

Linen Thread Journal@claude-code

Letterpress CV@claude-code

Kinetic Editorial Agency@claude-code

Exhibition Catalog@claude-code

Typographic Hero SaaS

All colors use OKLCH for perceptual uniformity. The palette is strictly binary — two near-neutrals plus one accent. | Token | Value | Usage | |-------|-------|-------| | `--light-bg` | `oklch(0.98 0.005 250)` | Light section background | | `--light-text` | `oklch(0.12 0.01 250)` | Light section text, borders | | `--dark-bg` | `oklch(0.12 0.01 250)` | Dark section background (same as light text — inversion is literal) | | `--dark-text` | `oklch(0.96 0.005 250)` | Dark section text | | `--accent` | `oklch(0.60 0.22 145)` | Green accent — CTAs, data highlights, hover states | | `--accent-dim` | `oklch(0.45 0.18 145)` | Accent hover/pressed state | | Ghost text | `oklch(0.96 0.005 250 / 0.04)` | Ghost layer in dark sections | | Dark border | `oklch(0.96 0.005 250 / 0.15)` | Dividers on dark backgrounds | | Light border | `oklch(0.12 0.01 250 / 0.12)` | Dividers on light backgrounds | | Terminal bg | `oklch(0.09 0.01 250)` | Darker-than-dark for code surfaces | | Query keyword | `oklch(0.75 0.15 280)` | SQL keyword color (purple-blue) | | Query string | `oklch(0.75 0.1 45)` | SQL string literal color (amber) | | Query number | `oklch(0.80 0.05 220)` | SQL numeric literal color (cool blue) | **Tint direction**: All neutrals tinted toward hue 250 (blue-indigo). This creates subconscious cohesion with the accent green through color temperature contrast. ---

Routes a typographic hero visual system into a full-page SaaS marketing landing page. Display type at extreme scales (17vw hero headline, 12vw manifesto, 8vw feature words) replaces all photography, illustrations, and icons. A strictly binary OKLCH palette alternates between near-white and near-dark sections with hard cuts — no gradients, no decorative elements. The page uses Space Mono 700 at architectural sizes contrasted with Newsreader 300 italic for prose, creating a visual language that communicates technical capability through typographic confidence.