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

# Shortverse · Design System

> A cinematic index for discovering short films

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

Shortverse presents short films, filmmaker activity, and new releases in a restrained editorial interface. Monochrome surfaces and oversized film imagery keep attention on the work, while violet marks key actions and platform moments.

## North star

Keep the interface neutral and editorial so film imagery leads; use violet sparingly to signal brand and action.

## Overview

The page uses a mostly white canvas, with black cinematic bands and pale gray panels creating deliberate shifts between discovery content and platform messaging. Deep charcoal carries most text, while bright violet is reserved for the wordmark, selected controls, icons, and a prominent lower-page signup band. Cooper Hewitt gives headlines and film information a sturdy, humanist feel; JetBrains Mono supplies the uppercase, widely tracked navigation, labels, and calls to action. The content is arranged as a broad, horizontally browsable film index: large featured media, compact comment columns, and repeated rows of film thumbnails. Generous white space separates these dense content groups without introducing decorative card chrome. Film stills bring their own varied color and texture, so the surrounding interface remains neutral and lets artwork lead. Borders are light and functional, corners are subtly rounded, and elevation is minimal.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Ink | `#262626` | `--color-charcoal-ink` | neutral | Primary headlines, film titles, body copy, navigation, and footer text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header, content sections, and light button surfaces. |
| Soft Screen | `#f2f2f2` | `--color-soft-screen` | surface | Pale section and link surfaces, including the featured-film text panel. |
| Footer Mist | `#eaeaea` | `--color-footer-mist` | surface | Lower footer background band. |
| Quiet Rule | `#d9d9d9` | `--color-quiet-rule` | neutral | Fine borders and understated button outlines. |
| Muted Graphite | `#999999` | `--color-muted-graphite` | neutral | Secondary links and supporting metadata. |
| Cinema Black | `#000000` | `--color-cinema-black` | semantic | Large dark cinematic section bands; use as a structural block, not ordinary text. |
| Violet Wash | `#a77eff` | `--color-violet-wash` | brand | Solid violet signup section and violet details in the footer illustration. |
| Electric Violet | `#6c00f4` | `--color-electric-violet` | accent | Navigation and button accents, including the primary add-film action. |
| Input Fog | `#e5e5e5` | `--color-input-fog` | neutral | Measured search-input outline; a minor form-control detail. |
| Button Edge | `#cecece` | `--color-button-edge` | neutral | Outline around the watch-film control. |
| Footer Silver | `#b2b2b2` | `--color-footer-silver` | neutral | Minor low-emphasis footer text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f2` (Soft Screen) · `--color-surface-2` → `#eaeaea` (Footer Mist) · `--color-surface-3` → `#000000` (Cinema Black) · `--color-text` → `#262626` (Charcoal Ink) · `--color-text-muted` → `#999999` (Muted Graphite) · `--color-border` → `#d9d9d9` (Quiet Rule) · `--color-accent` → `#a77eff` (Violet Wash) · `--color-accent-2` → `#6c00f4` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262626` | `#ffffff` | 15.13:1 | AAA |
| `#262626` | `#f2f2f2` | 13.52:1 | AAA |
| `#262626` | `#eaeaea` | 12.58:1 | AAA |
| `#262626` | `#000000` | 1.39:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#f2f2f2` | 2.54:1 | fail |
| `#999999` | `#eaeaea` | 2.37:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#a77eff` | `#ffffff` | 2.97:1 | fail |
| `#a77eff` | `#f2f2f2` | 2.65:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CooperHewitt | `--font-body` | webfont | 300, 700, 500, 600, 800 | Headings, film titles, body copy, and editorial links. | Public Sans |
| JetBrainsMono | `--font-mono` | webfont | 300, 700, 400, 800 | Navigation, buttons, metadata labels, captions, and eyebrow text. | JetBrains Mono |

- **CooperHewitt:** Use bold weights for prominent headings and light weights for body copy; keep case natural.
- **JetBrainsMono:** Use uppercase with generous tracking for compact interface labels and calls to action.

### Type scale — Augmented Fourth (ratio ≈ 1.447, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54.5px | 800 | 0.88 | 0 | — | CooperHewitt | Oversized hero or primary page headline. |
| h2 | 32px | 700 | 1.5 | 0.019em | — | CooperHewitt | Major section titles such as discovery headings. |
| h3 | 24px | 700 | 1.3 | 0 | — | CooperHewitt | Film titles and smaller content headings. |
| body | 18px | 300 | 1.3 | 0 | — | CooperHewitt | Film descriptions and editorial supporting copy. |
| caption | 12px | 300 | 1.4 | 0.012em | uppercase | JetBrainsMono | Compact uppercase metadata and film details. |
| button | 14px | 800 | 1.5 | 0.08em | uppercase | JetBrainsMono | Uppercase calls to action, including film and signup controls. |
| nav | 14px | 800 | 1.3 | 0.08em | uppercase | JetBrainsMono | Uppercase, tracked navigation labels. |
| link | 12px | 300 | 1.4 | 0.012em | uppercase | JetBrainsMono | Small uppercase utility and section links. |
| eyebrow | 14px | 700 | 2.44 | 0.088em | uppercase | JetBrainsMono | Uppercase, tracked labels above content headings. |
| code | 12px | 300 | 1.4 | 0.012em | uppercase | JetBrainsMono | Compact uppercase mono-style metadata or utility text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 9, 12, 14, 16, 20, 24, 32, 43, 140 px.
- Section rhythm 64px · element gap 16px · card padding — · max content width —.

Build a full-width editorial page with a slim horizontal navigation header, then broad content bands. Film discovery rows use repeated thumbnail-and-caption units that read as horizontal carousels; comments use multiple compact columns. Keep headings and content aligned to a consistent left edge, with centered alignment only in the signup call to action. Preserve visible white space between rows and sections, but keep each media row information-dense. The measured page does not establish a maximum content width, so avoid inventing one.

## Shape & elevation

- Radius: button `5px` · input `5px` · media `50%` · xs `4px` · sm `5px` · md `8px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0.1) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on interactive elements.

The interface is predominantly flat, with no meaningful card shadows. Separate content through whitespace, background bands, and restrained hairlines rather than raised panels. Buttons use subtly rounded corners; outlines are light and functional. Keep images and text aligned directly to the page surface, without unnecessary layered containers.

## Imagery

Film stills and poster-like thumbnails are the main visual material, shown as landscape crops in browsable rows. The featured film pairs a pale text panel with a large monochrome stop-motion image. Most artwork retains its own color and contrast rather than receiving a unified brand filter. A small illustrated accent appears in the violet signup area and should remain secondary to the message.

## Components

### Top navigation

White horizontal header with violet wordmark, film-related navigation, search input, signup link, and a pale-violet add-film button.

### Featured film

Wide editorial feature pairing a light text panel and a large film image, with title, synopsis, metadata, and watch action.

### Comment feed

Compact multi-column recent comments with film titles, short review excerpts, and small commenter details.

### Film carousel rows

Discovery sections show film thumbnails, titles, creator names, genre or year metadata, and a small see-all link.

### Signup band

Centered invitation on a solid #a77eff background, with supporting copy, signup action, and a small illustration.

### Footer

Pale-gray footer with brand artwork, grouped platform links, utility links, and a low-emphasis maker credit.

### Measured component styles

- **Primary button** (“ADD A FILM”): background #ede5ff · text #6c00f4 · radius 5px · padding 4px 24px · 800 13.92px JetBrainsMono · uppercase
- **Secondary button** (“WATCH FILM”): background #ffffff · text #262626 · border 1px solid #cecece · radius 5px · padding 0px 20.9px · 800 13.92px JetBrainsMono · uppercase
- **Link** (“Marc Riba”): transparent background · text #262626 · radius 0px · padding 0px · 300 16px CooperHewitt
- **Input**: transparent background · text #000000 · border 1px solid #e5e5e5 · radius 5px · padding 7.2px 14.4px · 300 14.4px CooperHewitt
- **Navigation item** (“FILMS PEOPLE FESTIVALS”): transparent background · text #262626 · radius 0px · padding 0px · 300 16px CooperHewitt

## Do

- Let film stills carry the strongest visual color.
- Use white space to separate editorial content rows.
- Set headlines and film copy in Cooper Hewitt or a close substitute.
- Use tracked uppercase mono text for navigation and controls.
- Reserve violet for brand marks and important actions.
- Keep buttons and inputs subtly rounded and lightly outlined.

## Don't

- Do not turn every film item into a raised card.
- Do not introduce gradients absent from the measured page.
- Do not use violet as the default background for content sections.
- Do not apply a uniform color filter to film artwork.
- Do not make metadata compete with film titles or imagery.
- Do not add heavy shadows or oversized decorative borders.

## Agent prompt

Create a new page in Shortverse’s editorial film-discovery style. Use Gallery White (#ffffff) as the main canvas, Charcoal Ink (#262626) for text, and restrained gray surfaces such as Soft Screen (#f2f2f2) and Footer Mist (#eaeaea) to distinguish bands. Save Electric Violet (#6c00f4) and Violet Wash (#a77eff) for brand details and meaningful calls to action. Pair confident Cooper Hewitt-style headlines with JetBrains Mono navigation, uppercase labels, and buttons. Organize the content into broad, left-aligned sections with compact film metadata, horizontally browsable thumbnail rows, and generous whitespace between content groups. Let authentic film imagery provide color and texture. Keep components flat, with fine borders, minimal elevation, and subtly rounded controls; avoid gradients and card-heavy layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide featured-film band with a text panel beside prominent media. | Featured content, Watch-film action, Carousel indicators | Film still, Synopsis and metadata, Light text panel |
| 2 | content-feed | Horizontal multi-column feed of film comments and commenter details. | Recent activity, Comment excerpts, Film-title context | Bold section heading, Compact columns, Small user details |
| 3 | recommendations | Left-aligned heading above a horizontal row of film thumbnails. | Curated recommendations, See-all link, Browse film items | Landscape stills, Compact captions, Film metadata |
| 4 | product-grid | Heading and see-all link above a horizontal strip of new-release thumbnails. | Recent releases, See-all link, Browse titles | Film thumbnails, Title and creator, Genre and year details |
| 5 | gallery | Full-width, media-led area with limited visible text. | Visual browsing | Dark band, Large media area |
| 6 | cta | Centered heading and copy within a full-width violet band. | Platform invitation, Learn-more link, Signup action | Solid violet background, Centered content, Small illustration |
| 7 | footer | Pale-gray footer with brand artwork and grouped link columns. | Platform navigation, Utility links, Maker credit | Light gray band, Violet brand illustration, Compact uppercase links |

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