NewGenre
A cinematic studio portfolio landing built on a full-bleed vertical gradient that runs from near-black navy-espresso at the top down to a warm off-white floor. The system is editorial and near-monochrome — a large condensed serif display headline over a light-on-dark hero, quiet Saans-grotesque supporting type, and a single soft gray pill CTA. Voltage comes from the gradient canvas and the oversized serif headline rather than from color accents.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
72px · 400 · 1.05
The quick brown fox jumps
heading
32px · 400 · 1.1
The quick brown fox jumps
body
16px · 400 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 6px | |
| sm | 8px | |
| base | 10px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 48px | |
| section | 64px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| none | 0px | |
| sm | 8px | |
| lg | 16px | |
| pill | 50px | |
| pill-xl | 90px |
FAQ
- What colors does NewGenre use?
- NewGenre's core palette includes #000000, #0000ee, #ffffff, #f9fafb, #99a1af. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the NewGenre DESIGN.md.
- What font does NewGenre use?
- NewGenre's primary typeface is Serrif Condensed. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the NewGenre design system?
- A cinematic studio portfolio landing built on a full-bleed vertical gradient that runs from near-black navy-espresso at the top down to a warm off-white floor. The system is editorial and near-monoch…