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

# NEON · Design System

> Cinema-first storytelling, framed in stark black and white.

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

NEON’s homepage pairs immersive film imagery and oversized condensed titles with an otherwise restrained black-and-white storefront. Spacious film and merchandise carousels make the studio’s releases, awards, and products easy to scan.

## North star

Keep the interface quiet, typographic, and monochrome so cinematic imagery and condensed film titles command attention.

## Overview

The page uses a restrained neutral interface so film stills carry most of the colour and emotional weight. Black (#000000) and white (#ffffff) define the hero overlay, wordmark, headings, and footer, while the soft grey canvas (#f3f3f3) appears on merchandise cards and subtle interface areas. Focal handles small uppercase navigation, labels, and product copy; Girott gives film titles and section headings their tall, compressed display character. A full-bleed cinematic hero opens the page, followed by white-background sections for theatrical releases, coming-soon titles, watch-now films, merchandise, and award winners. The content stays aligned to a shared wide page frame and is arranged in horizontal image-led rows or compact product grids. Large gaps between sections keep this dense catalogue from feeling crowded. Borders are faint, surfaces mostly flat, and dark gradients are reserved for readability over photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cinema Ink | `#000000` | `--color-cinema-ink` | brand | Wordmark, headings, body text, black announcement strip, hero overlay, and newsletter band. |
| Screen White | `#ffffff` | `--color-screen-white` | surface | Main content backgrounds, compact navigation panel, pale card areas, and text over dark film imagery. |
| Gallery Grey | `#f3f3f3` | `--color-gallery-grey` | neutral | Measured page canvas and merchandise card backgrounds; a quiet neutral behind product photography. |
| Soft Concrete | `#c2c2c2` | `--color-soft-concrete` | neutral | Secondary neutral surface in measured interface areas; not a dominant defining brand colour in the screenshots. |
| Fade Grey | `#929292` | `--color-fade-grey` | semantic | Measured gradient-related neutral; use only as tonal transition support, not a core interface colour. |
| Quiet Rule | `#e5e5e5` | `--color-quiet-rule` | neutral | Subtle footer separators and other low-contrast hairlines. |
| Footer Slate | `#666666` | `--color-footer-slate` | neutral | Sparse footer border detail; subordinate to the black-and-white navigation and text. |
| Near Ink | `#1a1a1a` | `--color-near-ink` | neutral | Occasional measured link treatment, close to black and visually secondary to the main text. |

### Semantic aliases

`--color-canvas` → `#f3f3f3` (Gallery Grey) · `--color-surface` → `#ffffff` (Screen White) · `--color-surface-2` → `#c2c2c2` (Soft Concrete) · `--color-surface-3` → `#000000` (Cinema Ink) · `--color-text` → `#000000` (Cinema Ink) · `--color-text-muted` → `#ffffff` (Screen White) · `--color-border` → `#e5e5e5` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#c2c2c2` | 11.79:1 | AAA |
| `#ffffff` | `#f3f3f3` | 1.11:1 | fail |
| `#ffffff` | `#c2c2c2` | 1.78:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(191deg, rgba(0, 0, 0, 0) 65.48%, rgba(0, 0, 0, 0.4) 86.5%)`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Focal | `--font-body` | webfont | 400, 700, 500 | Navigation, labels, body copy, captions, and merchandise information. | Barlow Condensed |
| Girott | `--font-display` | webfont | 700, 400 | Oversized film titles and prominent section headings. | Oswald |

- **Focal:** Mostly uppercase; compact, restrained supporting text. Measured weights include regular, medium, and bold.
- **Girott:** Tall condensed display lettering, uppercase, tightly tracked; headlines alternate regular and bold weights.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 700 | 0.9 | -0.03em | uppercase | Girott | Oversized film title over the full-bleed hero image. |
| h1 | 42px | 400 | 0.8 | -0.03em | uppercase | Girott | Primary film or feature title in condensed uppercase. |
| h2 | 41px | 700 | 0.8 | -0.031em | uppercase | Girott | Prominent section headings such as Coming Soon. |
| h3 | 36px | 400 | 0.8 | -0.03em | uppercase | Girott | Secondary film titles and smaller feature headings. |
| body | 14px | 400 | 1 | -0.01em | uppercase | Focal | Uppercase navigation, film labels, descriptions, and product details. |
| caption | 12px | 700 | 1.17 | -0.01em | uppercase | Focal | Small bold uppercase metadata and compact image captions. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 7, 8, 10, 15, 16, 20, 30, 31 px.
- Section rhythm 140px · element gap 10px · card padding — · max content width 1290px.

A wide, spacious page frame supports a full-bleed hero followed by stacked white catalogue sections. The measured maximum content width is 1290px; headings align to the start of each content region. Sections mix horizontal film carousels, multi-column poster rows, and merchandise grids, with a spacious measured section rhythm. Dense imagery is balanced by generous white space. The compact centered header overlays the hero, while footer navigation and social links resolve into grouped columns.

## Shape & elevation

- Radius: button `4px` · card `8px` · nav `4px` · link `4px` · xs `4px` · sm `8px` · md `80px`
- Shadow `hairline` (link, other): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: white sections and pale product cards sit without noticeable drop shadows. Use thin light-grey separators in the footer and subtle outlines for compact controls. Layer the hero title and navigation over photography, relying on the measured dark image gradient for contrast rather than floating panels.

## Imagery

Use cinematic film stills and release artwork as the primary visual material, not decorative illustration. The hero fills the viewport with a family portrait and dark readability treatment; title cards and carousels use wide or poster-like crops. Merchandise photography sits on pale grey or white product fields. Keep imagery edge-to-edge where it introduces a film, then use orderly crops and restrained captions in catalogue rows.

## Components

### Compact floating header

Centered white navigation bar over the hero, with a NEON wordmark and simple utility icons; a black ticket strip sits directly beneath it.

### Full-bleed film hero

Large cinematic image with a small uppercase release label, oversized white condensed title, dark lower-image treatment, and carousel indicators.

### Film carousel cards

Wide image-led film cards grouped under uppercase section headings, with compact title and release metadata.

### Merchandise grid

Four-column product presentation with pale grey card fields, product imagery, and concise uppercase availability, name, and price labels.

### Newsletter banner

Wide, dark cinematic image panel with a white condensed heading and a bottom-aligned email entry prompt and arrow.

### Grouped footer navigation

White footer organized into film, shop, and NEON link columns alongside a compact social icon grid and oversized brand imagery.

### Measured component styles

- **Primary button** (“PLAY TRAILER”): transparent background · text #ffffff · radius 4px · padding 0px · 400 14px Focal
- **Link** (“IN THEATERS”): transparent background · text #ffffff · radius 8px · padding 0px · 400 14px Focal
- **Card** (“IN THEATERS”): background #f3f3f3 · text #000000 · radius 8px · padding 0px · 400 14px Focal
- **Navigation item**: transparent background · text #000000 · radius 0px · padding 0px · 400 14px Focal

## Do

- Let film photography dominate the hero and release features.
- Use Girott-style condensed uppercase display titles.
- Keep interface chrome black, white, and soft grey.
- Align catalogue headings and cards consistently.
- Use Focal-style uppercase labels for navigation and metadata.
- Preserve generous gaps between content bands.

## Don't

- Do not introduce bright interface accents without measured evidence.
- Do not place heavy cards or shadows around film artwork.
- Do not shrink the hero title into ordinary body typography.
- Do not crowd merchandise cards with extra copy.
- Do not use gradients as a substitute for cinematic imagery.
- Do not apply display type to every small label.

## Agent prompt

Build a new entertainment homepage in NEON’s restrained cinematic style. Use Cinema Ink (#000000), Screen White (#ffffff), and Gallery Grey (#f3f3f3) for the interface; keep other colour largely inside film photography. Start with a full-bleed image feature, overlaying a small uppercase release label and a very large condensed title. Use Girott or a close condensed display substitute for titles and Focal or a compact sans-serif for navigation, captions, and product details. Below the hero, create spacious white catalogue bands with image-led horizontal film rows and orderly merchandise grids. Keep card treatment flat, corners restrained, and dividers faint. Use a compact centered header and finish with grouped footer links. Make imagery, not decoration, supply the page’s mood.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic hero with left-aligned title and centered compact header. | Film carousel indicators, Ticket purchase shortcut, Play trailer action | Large white condensed title, Dark image gradient, Floating white navigation, Black ticket strip |
| 2 | gallery | Two-column row of wide film image cards on white. | Browse current releases, Open film detail | Uppercase section heading, Image-led cards, Compact captions |
| 3 | gallery | Horizontal featured-film carousel with large image panels. | Browse upcoming releases, View release dates, Play trailer | Oversized condensed film titles, Full-width artwork, Small release metadata |
| 4 | content-feed | Tight horizontal strip of small film thumbnails. | Browse available titles, Select a film | Small image cards, Uppercase captions, Carousel controls |
| 5 | product-grid | Four-column merchandise grid with pale product fields. | View product details, Check stock status, Pre-order items | Light grey cards, Centered product images, Compact price labels |
| 6 | gallery | Horizontal row of award-winning film image cards. | Browse award winners, Open film detail | Film still thumbnails, Compact titles, Small award markers |
| 7 | product-grid | Four-column product row with pale backgrounds. | Browse best sellers, Pre-order products, View prices | Product photography, Availability labels, Compact item captions |
| 8 | newsletter | Wide dark cinematic image banner before the footer. | Email signup, Submit with arrow control | White condensed heading, Image overlay, Bottom-aligned email prompt |
| 9 | footer | White footer with three link columns and a social icon block. | Browse film categories, Navigate shop links, Open social channels | Grouped text links, Light separators, Social icon grid |
| 10 | footer | White closing panel with oversized brand imagery and small legal details. | View studio credits, Access legal links | Large NEON wordmark, Small copyright text, Film artwork accents |

## Source CSS custom properties (selected)

```css
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-anticipate: cubic-bezier(1,-0.4,0.35,0.95);
--ease-snappy: cubic-bezier(0.19,1,0.22,1);
--page-gap-x: 3rem;
--page-gap-y: 14rem;
--card-gap: 3.2rem;
--background: #fff;
--foreground: #000;
--theme-primary: #ffffff;
--theme-secondary: black;
--color-grey: #f3f3f3;
--color-green: #aeff00;
--color-red: #d50000;
--color-pink: #ec71da;
--color-blue: #2195d8;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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