---
title: "New Genre design system"
variant: extended
source: https://www.newgenre.studio/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/newgenre-studio)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# New Genre · Design System

> Editorial clarity framed by cinematic colour

**Theme:** light · **Industry:** design · **Source:** https://www.newgenre.studio/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

New Genre pairs a restrained editorial portfolio with immersive, cinematic colour fields. Crisp typography and generous white space let project imagery and a few expansive gradients carry the visual drama.

## North star

Keep the editorial content calm and legible, reserving immersive gradients for moments that mark the beginning, signup, and closing contact.

## Overview

The page alternates between a clean white canvas and a small number of expansive gradient moments. The opening hero moves from deep brown and midnight blue into the studio’s signature muted blue, with pale text layered over it; the long closing contact field shifts through warm cream and orange into near-black. These gradients are defining visual treatments, while the many portfolio and editorial sections stay white. Saans handles compact navigation, supporting copy, and links; the high-contrast serif display face gives the main statements a literary, editorial character. A wide, left-aligned composition keeps headlines and project descriptions readable while image-led case studies occupy a distinct neighboring column. Partner marks form a compact grid, process imagery uses quiet card framing, and news content becomes a tiled feed. Comfortable spacing and minimal decoration keep the long page coherent without making it feel dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white portfolio sections, and high-contrast text over the dark hero and footer gradients. |
| Studio Ink | `#0c1018` | `--color-studio-ink` | neutral | Primary text and headings on the white canvas, including project, editorial, and partner content. |
| Quiet Divider | `#e8eaed` | `--color-quiet-divider` | semantic | Subtle hairlines and light media boundaries; keep separation understated against white. |
| Cloud Surface | `#f9f9fa` | `--color-cloud-surface` | surface | Newsletter section band and softly differentiated link or content surfaces. |
| Soft Slate | `#535a65` | `--color-soft-slate` | semantic | Muted supporting copy and secondary text on pale backgrounds. |
| Warm Porcelain | `#f7f3f0` | `--color-warm-porcelain` | surface | Warm pale endpoint in the broad atmospheric gradient treatments, not a dominant flat section colour. |
| Roasted Umber | `#280e01` | `--color-roasted-umber` | brand | Deep brown opening and closing gradient stop, lending warmth to the cinematic transitions. |
| Midnight Navy | `#182644` | `--color-midnight-navy` | brand | Dark blue gradient stop behind the hero’s opening white serif headline. |
| Horizon Blue | `#5a769f` | `--color-horizon-blue` | accent | Signature mid-gradient blue dominating the first-screen hero field. |
| Mist Blue | `#87a1c4` | `--color-mist-blue` | accent | Lighter blue gradient transition that opens up the hero field toward its lower area. |
| Pale Sky | `#c1d3e6` | `--color-pale-sky` | accent | Soft blue gradient transition used in the atmospheric hero colour field. |
| Vanilla Glow | `#fef9e1` | `--color-vanilla-glow` | accent | Warm cream highlight within the long gradient transition; not a recurring solid UI colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9fa` (Cloud Surface) · `--color-surface-2` → `#e8eaed` (Quiet Divider) · `--color-text` → `#0c1018` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#535a65` (Soft Slate) · `--color-border` → `#e8eaed` (Quiet Divider) · `--color-accent` → `#5a769f` (Horizon Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c1018` | `#ffffff` | 19.04:1 | AAA |
| `#0c1018` | `#f9f9fa` | 18.1:1 | AAA |
| `#0c1018` | `#e8eaed` | 15.8:1 | AAA |
| `#ffffff` | `#f9f9fa` | 1.05:1 | fail |
| `#ffffff` | `#e8eaed` | 1.21:1 | fail |
| `#535a65` | `#ffffff` | 6.96:1 | AA |
| `#535a65` | `#f9f9fa` | 6.61:1 | AA |
| `#535a65` | `#e8eaed` | 5.77:1 | AA |
| `#5a769f` | `#ffffff` | 4.64:1 | AA |
| `#5a769f` | `#f9f9fa` | 4.41:1 | AA-large |

### Gradients

- `linear-gradient(rgb(40, 14, 1) 0%, rgb(24, 38, 68) 12%, rgb(90, 118, 159) 32%, rgb(135, 161, 196) 52%, rgb(193, 211, 230) 68%, rgb(254, 249, 225) 84%, rgb(247, 243, 240) 100%)`
- `linear-gradient(rgb(255, 255, 255) 0%, lab(69.8933 30.2389 47.4789) 45%, lab(37.0314 35.3696 30.6307) 75%, lab(7.21043 5.04068 3.97552) 100%)`
- `linear-gradient(to top, rgba(0, 0, 0, 0) 0%, oklab(0.984998 -0.000765234 -0.00182867 / 0.92) 55%, oklab(0.984998 -0.000765234 -0.00182867 / 0.92) 70%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(lab(7.21043 5.04068 3.97552) 25%, lab(37.0314 35.3696 30.6307) 65%, lab(60.2125 45.9231 45.1049) 85%, lab(69.8933 30.2389 47.4789) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| saans | `--font-body` | webfont | 450, 570 | Navigation, body copy, supporting headings, links, captions, and form controls. | DM Sans |
| serrif | `--font-display` | webfont | 400 | Display statements and large editorial headings, especially the hero and closing message. | Cormorant Garamond |

- **saans:** Use clean, modern sans-serif forms with restrained negative tracking; measured weights center on 450 and 570, with no uppercase transformation.
- **serrif:** Use a refined high-contrast serif at regular weight, with tight tracking and generous line presence.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.05 | -0.02em | — | serrif | Oversized editorial statements and standout closing message. |
| h1 | 64px | 400 | 1.05 | -0.02em | — | serrif | Primary hero statement introducing the studio. |
| h2 | 32px | 450 | 1.1 | -0.01em | — | saans | Section headings for partners, process, and signup. |
| h3 | 24px | 450 | 1.15 | -0.01em | — | saans | Project names and individual content-card titles. |
| body | 20px | 450 | 1.15 | -0.01em | — | saans | Descriptions, supporting statements, and longer explanatory copy. |
| caption | 12px | 450 | 1.4 | -0.01em | — | saans | Compact project labels, image captions, and secondary metadata. |
| button | 16px | 570 | 1 | -0.01em | — | saans | Signup and prominent action labels. |
| nav | 16px | 570 | 1 | -0.01em | — | saans | Header navigation links and work/contact destinations. |
| link | 16px | 570 | 1 | -0.01em | — | saans | Inline editorial links and project or category links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24, 32, 64, 96, 128 px.
- Section rhythm 64px · element gap 4px · card padding — · max content width 1312px.

A wide, left-aligned editorial composition fits within the measured 1312px maximum page width, with a comfortable rather than dense rhythm. The opening hero gives its headline room against a full-field gradient; partner logos sit in a compact multi-column grid. Portfolio entries pair short left-side text with larger right-side media, then process cards and a two-column editorial feed vary the cadence. The newsletter and closing contact area act as distinct end-of-page bands.

## Shape & elevation

- Radius: button `9999px` · input `8px` · nav `8px` · link `16px` · xs `8px` · sm `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: white canvas, restrained pale surfaces, and quiet hairlines separate content rather than heavy shadows. Media cards provide the strongest visual layering through their own imagery and modest rounded framing. Keep buttons pill-shaped and inputs softly rounded, without adding unmeasured shadow treatments.

## Imagery

Use project photography, motion stills, and brand artwork as the main visual material in portfolio and editorial sections. Case-study images are large, rectangular, and neatly framed; news thumbnails form a consistent tile grid. Process imagery includes isolated botanical subjects on pale backgrounds. The coloured hero and contact fields are gradient-led, not photographic.

## Components

### Header navigation

Compact white navigation sits over the hero gradient; labels use measured 16px Saans nav styling with simple text links.

### Hero action

A small pill-shaped work link sits below the large serif statement; white text and a translucent pale treatment keep it integrated with the gradient.

### Partner logo grid

A multi-column cluster of partner marks beneath a short heading; pale surfaces and white space let varied logo artwork remain distinct.

### Project case study

Each portfolio row pairs a left-aligned title, muted description, and compact service labels with large neighboring project media.

### Process cards

A row of pale, image-led cards combines a short process title and description with isolated botanical imagery.

### Newsletter form

A pale newsletter band pairs concise explanatory copy with a soft-filled rounded input and the measured pill CTA style.

### Editorial feed

A two-column news area presents tiled image-led stories with compact titles and understated read-all links.

### Contact footer

A dark-to-warm gradient close contains a prominent work-with-us link and two studio contact blocks.

### Measured component styles

- **Primary button** (“Sign me up”): background #f3f3f5 · text #0c1018 · radius 9999.01px · padding 16px 24px · 570 16px saans
- **Link** (“Venture Capital”): background #f9f9fa · text #0c1018 · radius 16px · padding 24px · 400 16px saans
- **Input**: background #f3f3f5 · text #0c1018 · radius 8px · padding 16px · 570 16px saans
- **Navigation item** (“Work”): transparent background · text #ffffff · radius 0px · padding 0px · 570 16px saans

## Do

- Use white as the default canvas for portfolio and editorial content.
- Reserve large gradients for the hero and closing brand moments.
- Set display statements in the measured serif style.
- Pair concise project details with large neighboring imagery.
- Use muted gray for supporting copy rather than competing black.
- Keep dividers, surfaces, and card framing visually quiet.

## Don't

- Do not turn gradient colours into a full-site UI palette.
- Do not crowd the page with dense card chrome or heavy shadows.
- Do not replace the editorial serif headlines with generic sans typography.
- Do not make every section a coloured band.
- Do not overpower project imagery with decorative borders.
- Do not add bright accents that compete with the muted blue hero.

## Agent prompt

Build a new page in New Genre’s restrained editorial studio style. Use Gallery White (#ffffff) as the main canvas, Studio Ink (#0c1018) for primary text, and Soft Slate (#535a65) for supporting copy. Set major statements in an elegant serif similar to Cormorant Garamond, with DM Sans-like sans-serif for navigation, body text, and controls. Keep the layout wide, left-aligned, and comfortably spaced; pair concise project descriptions with large image-led case studies. Use Quiet Divider (#e8eaed) sparingly. Reserve the cinematic gradient palette—Roasted Umber (#280e01), Midnight Navy (#182644), Horizon Blue (#5a769f), and its pale transitions—for a hero or closing moment. Avoid heavy shadows and excessive card decoration; let typography, imagery, and whitespace establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large left-aligned serif statement over a full-field blue gradient, with compact top navigation. | Primary work link, Top-level navigation | Serif display text, Blue gradient canvas, White navigation |
| 2 | other | Tall atmospheric colour transition with no visible copy or controls. | Visual pause | Full-width gradient, Soft colour fade |
| 3 | logo-cloud | Short heading above a multi-column grid of partner marks. | Partner discovery | Logo grid, White canvas |
| 4 | product-showcase | Project text in one column beside a larger image or video. | Case-study link, Service labels | Split layout, Large project media |
| 5 | product-showcase | Project text in one column beside a larger image or video. | Case-study link, Service label | Split layout, Large project media |
| 6 | product-showcase | Project text in one column beside a larger image or video. | Case-study link, Service labels | Split layout, Large project media |
| 7 | product-showcase | Project text in one column beside a larger image or video. | Case-study link, Service labels | Split layout, Large project media |
| 8 | how-it-works | Section heading above a row of process cards with concise copy and botanical imagery. | Sequential process overview | Pale cards, Isolated imagery |
| 9 | content-feed | Editorial heading and read-all link above a two-column feed of image-led tiles. | Read-all link, Story discovery | Editorial tile grid, Image thumbnails |
| 10 | newsletter | Pale section band with copy and signup form arranged in two columns. | Email signup, Privacy reassurance | Rounded input, Pill CTA |
| 11 | cta | Wide gradient field with a large left-aligned serif statement and a secondary approach link. | Approach link, Brand transition | Warm gradient, Editorial headline |
| 12 | contact | Two contact columns for London and San Francisco within the dark end of the closing field. | Email contact, Phone and address details | Two-column contact details, Light text on dark gradient |
| 13 | footer | Compact final strip with media and a small set of links. | Footer navigation | Minimal footer content, Dark gradient continuation |

## Source CSS custom properties (selected)

```css
--semantic-bg-page: lab(100% 0 0);
--semantic-bg-card: lab(98.2596% -.247478 -.70653);
--semantic-text-primary: lab(4.51926% .0305548 -5.74853);
--semantic-text-secondary: lab(37.8757% -1.10608 -7.31522);
--semantic-text-tertiary: lab(68.9711% -.574887 -5.60483);
--semantic-text-contrast: lab(100% 0 0);
--semantic-fill-primary: lab(96.1596% -.0830591 -1.13571);
--semantic-fill-secondary: lab(91.6229% -.160158 -2.26784);
--c15t-primary: hsl(228, 100%, 60%);
--c15t-primary-hover: hsl(228, 100%, 55%);
--c15t-surface: hsl(0, 0%, 100%);
--c15t-surface-hover: hsl(0, 0%, 98%);
--c15t-border: hsl(0, 0%, 90%);
--c15t-border-hover: hsl(0, 0%, 85%);
--c15t-text: hsl(0, 0%, 10%);
--c15t-text-muted: hsl(0, 0%, 40%);
--c15t-text-on-primary: hsl(0, 0%, 100%);
--c15t-font-family: system-ui, -apple-system, sans-serif;
--c15t-font-size-sm: 0.875rem;
--c15t-font-size-base: 1rem;
--c15t-font-size-lg: 1.125rem;
--c15t-font-weight-normal: 400;
--c15t-font-weight-medium: 500;
--c15t-font-weight-semibold: 600;
--c15t-space-xs: 0.25rem;
--c15t-space-sm: 0.5rem;
--c15t-space-md: 1rem;
--c15t-space-lg: 1.5rem;
--c15t-space-xl: 2rem;
--c15t-radius-sm: 0.25rem;
--c15t-radius-md: 0.5rem;
--c15t-radius-lg: 0.75rem;
--c15t-radius-full: 9999px;
--c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
--c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
--c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);
--c15t-duration-fast: 80ms;
--c15t-duration-normal: 150ms;
--c15t-duration-slow: 200ms;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/newgenre-studio