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

# It's Nice That · Design System

> Creative stories, framed by colour and generous space

**Theme:** light · **Industry:** media · **Source:** https://www.itsnicethat.com/ · **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._

It's Nice That's homepage pairs an airy editorial canvas with vivid creative work and softly coloured content bands. Carefully varied story layouts and restrained interface details keep the focus on discovery.

## North star

Let each story's artwork lead, using generous white space and restrained, category-specific colour to organize discovery.

## Overview

The page uses a white canvas as its visual anchor, with dark charcoal typography and occasional pale grey panels for quiet editorial structure. Colour becomes more expressive in section bands: lime, lavender, yellow, pink and warm orange distinguish recurring content categories rather than competing with them. Purple is reserved for small navigational or action accents. Labil Variable provides the clean, lightly tracked sans-serif voice for headings and interface labels, while Bradford adds a more literary contrast to selected story titles and descriptions. The centered masthead and feed give way to an asymmetric, image-led editorial layout; some stories sit in deliberately open space, while category sections use white cards against full-width colour. Photography and graphic artwork retain their own palettes and treatments, so the page feels like a curated creative publication rather than a uniform product catalogue. Large vertical gaps separate editorial sequences and preserve a calm browsing rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, masthead, story cards, and white panels within colour bands. |
| Editorial Ink | `#2b2b2b` | `--color-editorial-ink` | neutral | Main headings, navigation labels, story text, and standard link text. |
| Soft Divider | `#e5e5e5` | `--color-soft-divider` | neutral | Subtle gradient and interface detail; not a defining section or brand colour. |
| Signal Violet | `#8147ff` | `--color-signal-violet` | accent | Search action background and prominent small interface accents. |
| Link Violet | `#6219ff` | `--color-link-violet` | accent | Purple link and navigation text accents. |
| Caption Grey | `#676767` | `--color-caption-grey` | neutral | Muted supporting text and secondary metadata. |
| Feed Mist | `#f4f4f4` | `--color-feed-mist` | surface | The Nice Feed panel and pale grey link or button surfaces. |
| Lilac Band | `#bc94fb` | `--color-lilac-band` | semantic | Lavender content-section colour, visible behind Projects + Creatives. |
| Marigold Band | `#f3b444` | `--color-marigold-band` | semantic | Warm yellow-orange section colour used for category content. |
| Near-Black Panel | `#080707` | `--color-near-black-panel` | surface | Dark inverse surface appearing in measured section styling, not the main canvas. |
| Lemon Band | `#f4ec64` | `--color-lemon-band` | semantic | Pale yellow category band, visible behind Insight + Opinion content. |
| Rose Band | `#f4a3c3` | `--color-rose-band` | semantic | Pink category band used behind Resources + Advice. |
| Soft Lilac | `#bba8ff` | `--color-soft-lilac` | accent | Explore call-to-action surface with dark text. |
| Fresh Lime | `#d3f6a8` | `--color-fresh-lime` | semantic | Light green band behind the Ones to Watch feature. |
| Deep Ink | `#090404` | `--color-deep-ink` | neutral | Near-black sampled in supporting page details; not a dominant interface surface. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional dark heading or link detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Feed Mist) · `--color-surface-2` → `#080707` (Near-Black Panel) · `--color-surface-3` → `#f4a3c3` (Rose Band) · `--color-surface-4` → `#d3f6a8` (Fresh Lime) · `--color-text` → `#2b2b2b` (Editorial Ink) · `--color-text-muted` → `#676767` (Caption Grey) · `--color-accent` → `#8147ff` (Signal Violet) · `--color-accent-2` → `#6219ff` (Link Violet) · `--color-accent-3` → `#bc94fb` (Lilac Band) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2b2b2b` | `#ffffff` | 14.16:1 | AAA |
| `#2b2b2b` | `#f4f4f4` | 12.87:1 | AAA |
| `#2b2b2b` | `#080707` | 1.42:1 | fail |
| `#2b2b2b` | `#f4a3c3` | 7.33:1 | AAA |
| `#676767` | `#ffffff` | 5.66:1 | AA |
| `#676767` | `#f4f4f4` | 5.14:1 | AA |
| `#676767` | `#080707` | 3.56:1 | AA-large |
| `#676767` | `#f4a3c3` | 2.93:1 | fail |
| `#8147ff` | `#ffffff` | 4.91:1 | AA |
| `#8147ff` | `#f4f4f4` | 4.46:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 20%, rgba(0, 0, 0, 0.1) 20%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Labil | `--font-labil` | webfont | 500, 400 | Compact captions, metadata, and selected interface labels. | DM Sans |
| LabilVariable | `--font-body` | webfont | 400 | Primary headings, body copy, navigation, and buttons. | DM Sans |
| Bradford | `--font-bradford` | webfont | 400 | Literary story headlines and selected editorial card copy. | Cormorant Garamond |

- **Labil:** Measured weights 400 and 500; use restrained emphasis and preserve the small, clean editorial-label feel.
- **LabilVariable:** Mostly regular weight; measured headings use modest positive tracking and sentence case.
- **Bradford:** Regular serif used selectively for contrast; keep it editorial and avoid applying it to all interface text.

### Type scale — Perfect Fifth (ratio ≈ 1.491, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0.025em | — | LabilVariable | Lead editorial headlines and prominent feature titles. |
| h2 | 25px | 400 | 1.28 | 0.032em | — | LabilVariable | Category headings and secondary story titles. |
| body | 18px | 400 | 1.28 | 0.056em | — | LabilVariable | Story descriptions and longer editorial copy. |
| caption | 13px | 500 | 1.4 | 0 | — | Labil | Dates, labels, and compact supporting metadata. |
| button | 13px | 400 | 1.46 | 0.077em | — | LabilVariable | Search and Explore action labels. |
| nav | 11px | 400 | 1.45 | 0.091em | — | LabilVariable | Small utility and primary navigation labels. |
| link | 13px | 500 | 1.4 | 0 | — | Labil | Story-category links and compact editorial links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 5, 8, 10, 16, 20, 40, 60 px.
- Section rhythm 60px · element gap 8px · card padding 10px · max content width 1080px.

The measured content width is capped at 1080px, centered within a broad white canvas. A slim promotional strip sits above a centered masthead and compact feed panel; the lead feature then receives substantial breathing room. Editorial lists mix columns and staggered cards instead of forcing every story into an identical grid. Full-width pastel category bands interrupt long white stretches, with inset white cards and aligned content. Measured section spacing is generous, while card padding and gaps stay comparatively compact.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `xl` (button): `rgba(0, 0, 0, 0.08) 0px 24px 38px 0px, rgba(0, 0, 0, 0.08) 0px 9px 46px 0px, rgba(0, 0, 0, 0.08) 0px 11px 15px 0px`
- Shadow `xl-2` (other): `rgba(0, 0, 0, 0.08) 0px -11px 15px 0px, rgba(0, 0, 0, 0.08) 0px 24px 38px 0px, rgba(0, 0, 0, 0.08) 0px 9px 46px 0px, rgba(0, 0, 0, 0.08) 0px 11px 15px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: white cards and coloured section bands are separated by space and contrast rather than visible outlines. Avoid adding decorative borders or heavy shadows to story grids. The measured large shadow belongs to a button-level sample and is not a defining page-wide treatment; keep layering subtle and reserve floating appearance for specific controls.

## Imagery

The homepage foregrounds varied creative work: editorial photography, graphic design, illustration, book and identity projects, and visually distinctive campaign artwork. Images sit directly in story cards or dominate the lead feature, with no single uniform colour treatment imposed across them. Preserve each artwork's original palette and crop confidently; the surrounding white canvas and pastel bands provide the framing.

## Components

### Promotional navigation strip

Four adjacent promotional links occupy a pale warm-toned band above the masthead, using compact brand marks and short descriptors.

### Centered masthead

Place the publication wordmark and short tagline centrally on white, with a simple menu icon aligned to the right.

### The Nice Feed

A pale grey horizontal panel presents a refresh note, several compact story previews, thumbnails, and an Explore All link.

### Lead story feature

Give the lead article a large artwork area, followed by a title, concise description, date, and editorial category links.

### Editorial story cards

Combine artwork and concise headlines in varied column layouts, using white surfaces and restrained metadata.

### Colour-band category section

Use a full-width pastel band with an inset category heading, see-more link, and white story cards.

### Explore CTA

Show a compact white content card with a short introduction and a soft lilac Explore button.

### Measured component styles

- **Primary button** (“Search”): background #8147ff · text #ffffff · radius 75px · padding 0px 20px · 400 13px Labil
- **Secondary button** (“Explore”): background #bba8ff · text #2b2b2b · radius 0px · padding 15px 20px 16px 20px · 400 13px LabilVariable
- **Link** (“Studio Dumbar celebrates the NY Times tu”): background #f4f4f4 · text #0000ee · radius 0px · padding 0px · 400 17px Bradford
- **Card** (“The next generation of creative talent: ”): background #ffffff · text #2b2b2b · radius 0px · padding 20px 10px 0px 10px · 400 17px Bradford
- **Navigation item** (“Advertising”): transparent background · text #ffffff · radius 0px · padding 0px · 400 11px LabilVariable

## Do

- Keep the page canvas bright white and spacious.
- Use pastel bands to identify editorial categories.
- Let artwork retain its own palette and visual character.
- Mix image-led grids with staggered editorial cards.
- Use Labil for interface text and Bradford selectively for editorial contrast.
- Keep metadata small, muted, and close to its story.

## Don't

- Don't turn every section into the same rigid card grid.
- Don't use purple as a large page background.
- Don't add heavy borders or broad shadows to editorial cards.
- Don't force a uniform colour filter onto varied artwork.
- Don't crowd the page with dense controls or oversized navigation.
- Don't apply the serif face to all interface and body copy.

## Agent prompt

Build a creative editorial homepage with a quiet white canvas (#ffffff), dark editorial text (#2b2b2b), and compact muted metadata (#676767). Use Labil-style sans-serif for navigation, headings, and controls, with selective Bradford-like serif headlines for editorial contrast. Start with a slim promotional strip, centered masthead, and pale feed panel (#f4f4f4); give the lead story generous space and prominent artwork. Mix editorial grid and staggered card layouts rather than repeating one template. Separate category feeds with pastel bands such as Fresh Lime (#d3f6a8), Lilac Band (#bc94fb), Lemon Band (#f4ec64), Rose Band (#f4a3c3), and Marigold Band (#f3b444). Use Signal Violet (#8147ff) sparingly for actions. Preserve artwork palettes, keep cards flat, and prioritize whitespace and story discovery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Promotional links in a narrow top band, followed by centered masthead, menu control, and a compact horizontal feed. | Promotional destinations, Menu access, Recent story discovery | Pale top strip, Centered wordmark, Grey feed panel, Compact thumbnails |
| 2 | hero | Large centered lead artwork followed by a title and concise supporting story information. | Lead story entry point, Story category links | Large artwork, Editorial headline, Compact metadata |
| 3 | content-feed | Broad white editorial area with multiple image-and-text stories arranged across varied columns. | Browse related stories, Open individual articles | Editorial image cards, Mixed column placement, Compact labels |
| 4 | feature-split | Light green feature band containing an inset white text panel with headline and supporting copy. | Explore an annual feature, Read supporting introduction | Fresh Lime band, Inset white panel, Split text content |
| 5 | content-feed | Lavender full-width band with a heading and a wide white editorial card arrangement. | Browse projects, See more from category | Lilac Band background, White story cards, Editorial images |
| 6 | content-feed | Pale yellow band framing asymmetrically positioned white article cards. | Browse viewpoints, Open featured articles | Lemon Band background, Offset white cards, Story artwork |
| 7 | feature-split | An open white feature section with a text-led article treatment and substantial surrounding space. | Read a long-form feature, Follow article topics | Large editorial title, Open white canvas, Small category links |
| 8 | content-feed | Pink category band with a heading and a horizontal row of white cards. | Browse practical advice, See more from category | Rose Band background, Three-column card row, Compact metadata |
| 9 | content-feed | Warm orange category band with editorial cards arranged in an offset row. | Browse culture stories, Open article cards | Marigold Band background, White cards, Asymmetric placement |
| 10 | cta | A broad dark grey field contains a compact white promotional card and a lilac action button. | Discover talks, Follow Explore action | Dark neutral backdrop, White text card, Soft Lilac button |
| 11 | content-feed | Return to a white editorial canvas with widely spaced, staggered story entries. | Browse must-read articles, Open selected archive stories | White background, Loose story placement, Minimal metadata |

## Source CSS custom properties (selected)

```css
--border-width: 1px;
--space-1: 0.05555555556rem;
--space-2: 0.2777777778rem;
--space-3: 0.5555555556rem;
--space-4: 1.1111111111rem;
--space-5: 1.6666666667rem;
--space-6: 2.2222222222rem;
--space-7: 3.3333333333rem;
--space-8: 4.4444444444rem;
--font-family: "Helvetica",sans-serif;
--body-font-size: 1rem;
--letter-spacing-0: 0;
--letter-spacing-1: 0.04em;
--letter-spacing-2: 0.06em;
--caps-letter-spacing: 0.1em;
--body-font-weight: normal;
--regular-font-weight: normal;
--bold-font-weight: bold;
--heading-font-weight: normal;
--sm-body-font-size: 1rem;
--md-body-font-size: 1rem;
--lg-body-font-size: 1rem;
--outer-space: #1d2728;
--body-letter-spacing: 0.006rem;
--h1-letter-spacing: 0.02333333333rem;
--h2-letter-spacing: 0.02333333333rem;
--h3-letter-spacing: 0.02333333333rem;
--h4-letter-spacing: 0.006rem;
--h5-letter-spacing: 0.02222222222rem;
--h6-letter-spacing: 0.02222222222rem;
--body-sans-letter-spacing: 0.05555555556rem;
--h1-sans-letter-spacing: 0.04444444444rem;
--h2-sans-letter-spacing: 0.05555555556rem;
--h3-sans-letter-spacing: 0.05555555556rem;
--h4-sans-letter-spacing: 0.05555555556rem;
--h5-sans-letter-spacing: 0.05555555556rem;
--h6-sans-letter-spacing: 0.05555555556rem;
--sm-body-letter-spacing: 0.005rem;
--sm-h1-letter-spacing: 0.02222222222rem;
--sm-h2-letter-spacing: 0.02222222222rem;
```

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