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

# DICE · Design System

> Monochrome clarity meets the energy of live music.

**Theme:** light · **Industry:** entertainment · **Source:** https://dice.fm/ · **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._

DICE pairs a restrained monochrome interface with oversized editorial type and candid live-event imagery. Its generous whitespace and compact pill-shaped controls make event discovery feel direct and effortless.

## North star

Keep the interface monochrome and spacious, then let oversized type and real live-event imagery deliver the energy.

## Overview

The page uses a quiet white canvas to keep attention on its stark black typography, controls, and saturated concert photography. Black is the functional anchor: it defines the wordmark, navigation text, oversized hero headline, and compact pill CTAs. The opening layout is deliberately asymmetric, placing the headline and concise supporting copy opposite a large, rounded-corner event photograph. Favorit supplies the interface and reading text, while the display headline uses a separate, condensed, heavy-looking face that gives the brand its poster-like character. Broad gaps separate the hero, event discovery, dark feature band, and product-led content, keeping the long homepage airy rather than card-dense. Images carry the page’s colour and personality; the interface itself remains nearly monochrome. Thin neutral dividers and restrained gray details support structure without competing with the photography or headline.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Show Ink | `#000000` | `--color-show-ink` | brand | Primary text, wordmark, navigation, hero headline, inverse feature band, and black pill-shaped calls to action. |
| Soft Fog | `#eeeeee` | `--color-soft-fog` | surface | Measured light canvas tone and media-area neutral; the visible page is predominantly white. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light content sections, and reversed text on dark controls or bands. |
| Divider Gray | `#d9d9d9` | `--color-divider-gray` | semantic | Subtle borders and footer separators, with a limited role in light surfaces. |
| Button Edge | `#333333` | `--color-button-edge` | neutral | Measured button-border detail; keep it subordinate to the dominant black button treatment. |
| Footer Gray | `#7f7f7f` | `--color-footer-gray` | neutral | Muted footer text and secondary legal details. |

### Semantic aliases

`--color-canvas` → `#eeeeee` (Soft Fog) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Show Ink) · `--color-surface-3` → `#d9d9d9` (Divider Gray) · `--color-text` → `#000000` (Show Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d9d9d9` (Divider Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#eeeeee` | 18.1:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#d9d9d9` | 14.88:1 | AAA |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#d9d9d9` | 1.41:1 | fail |

### Gradients

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Favorit | `--font-body` | webfont | 400, 350, 700 | Site-wide interface, navigation, body copy, headings, captions, and buttons. | Inter |

- **Favorit:** Use mostly regular and light weights; reserve bold for compact uppercase captions and button labels. Navigation and body remain sentence case.

### Type scale — Custom (ratio ≈ 1.964, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 106px | 400 | 0.83 | 0 | — | Foggy | Oversized condensed hero headline, arranged as emphatic stacked lines. |
| h1 | 28px | 350 | 1.21 | 0 | — | Favorit | Primary page or section heading in the lighter interface typeface. |
| h2 | 18px | 350 | 1.22 | 0 | — | Favorit | Secondary feature and content-section headings. |
| body | 14px | 400 | 1.25 | 0 | — | Favorit | Supporting descriptions, event information, and editorial copy. |
| caption | 12px | 700 | 1.33 | 0.06em | uppercase | Favorit | Small uppercase metadata and compact labels. |
| button | 16px | 400 | 1.15 | 0 | — | Favorit | CTA and search-control text. |
| nav | 16px | 350 | 1.5 | 0 | — | Favorit | Header links and primary site navigation. |
| eyebrow | 12px | 700 | 1.33 | 0.06em | uppercase | Favorit | Short uppercase introductory labels above content. |

OpenType features in use: `"ss02", "ss03", "ss05", "ss06", "ss08"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 8, 16, 22, 24, 25 px.
- Section rhythm 120px · element gap 25px · card padding — · max content width 968px.

Use a centered content frame with a measured maximum width of 968px and a spacious, editorial rhythm. The hero is a two-column composition: left-aligned headline and copy beside a large media block, with the page navigation arranged across the top. Subsequent content alternates compact text-led discovery, a full-width black feature band, and image-and-copy splits. Preserve generous section gaps, clear alignment, and low content density; avoid turning the page into a tight card grid.

## Shape & elevation

- Radius: button `50%` · media `8px` · link `5px` · xs `4px` · sm `5px` · md `8px` · pill `9999px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The design is primarily flat, with no prominent card shadows or stacked surfaces. Separate content through whitespace, image blocks, and the occasional dark full-width band. Use fine light-gray hairlines sparingly in the footer and related utility areas; keep borders from outlining every content block.

## Imagery

Use candid live-music photography as the main source of colour and emotion: crowded venues, performers, and fans, framed as large rectangular media with softly rounded corners. Product sections can use phone-screen imagery and partner marks as supporting proof. Keep the imagery authentic and documentary rather than glossy; allow occasional graphic or video assets to retain their own visual character without changing the monochrome interface.

## Components

### Header navigation

A compact horizontal header with black wordmark, pale rounded search field, text links, and a black pill-shaped GET THE APP control.

### Hero split

Large stacked display headline and short body copy sit opposite a dominant live-event image; align both sides cleanly on the white canvas.

### Primary CTA

Black pill-shaped button with white uppercase Favorit text; keep the label short and the treatment visually compact.

### Event discovery

A concise location-specific heading and descriptive text pair with a separate browse-events CTA, leaving substantial breathing room.

### Dark feature band

A full-width black section reverses to white text and presents a simple heading above a small set of ticketing benefits.

### Image-and-copy feature

Alternate product or venue imagery with short copy in an airy split layout; avoid enclosing each side in a bordered card.

### Footer

Sparse multi-column utility links and muted legal details on white, with a thin divider and restrained gray text.

### Measured component styles

- **Primary button** (“GET THE APP”): background #000000 · text #ffffff · border 2px solid · radius 20px · padding 0px 22px · 700 12px Favorit · uppercase
- **Secondary button** (“Search by event, venue or city”): background #f2f2f2 · text #595959 · radius 100px · padding 12px 16px · 400 16px Favorit
- **Link**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px Favorit
- **Navigation item** (“Search by event, venue or city Browse ev”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Favorit

## Do

- Use white space as a defining structural element.
- Keep interface text and controls black, white, or muted gray.
- Make the hero headline oversized, condensed, and editorial.
- Pair short copy with authentic live-event imagery.
- Use black pill buttons with clear uppercase labels.
- Alternate light sections with occasional full-width black bands.

## Don't

- Do not introduce unmeasured accent colours into the interface.
- Do not use gradients as a defining background treatment.
- Do not crowd the page with dense cards or decorative borders.
- Do not make product photography feel glossy or staged.
- Do not use rounded cards as the default section container.
- Do not let secondary copy compete with the display headline.

## Agent prompt

Build a new DICE-style page with a spacious white canvas (#ffffff, Gallery White) and a restrained monochrome interface. Use #000000 (Show Ink) for headings, navigation, and compact pill-shaped CTAs; reserve #d9d9d9 (Divider Gray) and #7f7f7f (Footer Gray) for subtle separators and muted utility text. Set interface copy in Favorit or a close sans-serif such as Inter, and give the hero a very large, tightly led condensed display headline. Compose the opening section asymmetrically, pairing stacked text with a dominant candid live-event image. Keep supporting copy concise. Create a clear section rhythm with generous whitespace, occasional full-width black bands, and alternating image-and-copy features. Use rounded corners selectively on media and controls; avoid dense grids, heavy shadows, and extra interface colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top navigation above an asymmetric two-column hero with stacked text at left and a large live-event image at right. | event-and-city search, browse and account navigation, app-download CTA | oversized condensed headline, white canvas, black pill buttons, rounded-corner photography |

## Source CSS custom properties (selected)

```css
--brand-yellow: #f2ef1d;
--brand-green: #4BFA94;
--ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
```

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