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

# Freshman · Design System

> Cinematic work, unmistakable presence

**Theme:** dark · **Industry:** agency · **Source:** https://freshman.tv/ · **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._

Freshman pairs a nearly black canvas with immersive film footage and an oversized white wordmark. Editorial copy and a compact, filmstrip-like project ticker keep the first screen focused on the work.

## North star

Let full-bleed moving imagery and oversized white typography command a dark, uncluttered stage.

## Overview

The homepage is built around a near-black stage, with white typography providing crisp contrast and the moving footage supplying most of the screen’s changing colour. The measured red accent is part of the palette, but it is not a defining feature of the captured first viewport; avoid forcing it into prominent UI. An oversized, bold Freshman wordmark dominates the hero, while a smaller, delicate serif-like statement sits centered below it. A hand-drawn caption adds a rough, human counterpoint. Navigation stays discreet at the top edge. At the bottom, a narrow horizontal project strip combines small video stills with concise client and project labels, separated by fine dashed rules. The composition favors full-bleed media and generous open dark space over boxed content. Keep additional elements restrained so the footage, wordmark, and project reel carry the identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Wordmark, headings, navigation, and project labels stand out sharply against dark backgrounds. |
| Night Canvas | `#101010` | `--color-night-canvas` | brand | Primary dark page canvas and section background. |
| Signal Red | `#ff2936` | `--color-signal-red` | accent | Measured brand accent; use sparingly, as it is not prominent in the captured hero. |
| Warm Parchment | `#f3f1e7` | `--color-warm-parchment` | semantic | Appears in a measured gradient and outline variable; not a defining visible hero color. |
| Black Stage | `#000000` | `--color-black-stage` | surface | Hero and deep media-stage surface, helping white typography read clearly. |

### Semantic aliases

`--color-canvas` → `#101010` (Night Canvas) · `--color-surface` → `#000000` (Black Stage) · `--color-text` → `#ffffff` (Studio White) · `--color-accent` → `#ff2936` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101010` | 19.03:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ff2936` | `#101010` | 5.09:1 | AA |
| `#ff2936` | `#000000` | 5.62:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(243, 241, 231) 50%, rgba(255, 255, 255, 0) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Editorial New | `--font-body` | webfont | 200 | Light editorial display and uppercase navigation or body labels. | Cormorant Garamond |
| Altform | `--font-altform` | webfont | 700 | Heavy display wordmark and emphatic brand lettering. | Archivo Black |
| Wasted Year | `--font-wasted-year` | webfont | 400 | Handwritten-style caption and rough-edged supporting notes. | Caveat |

- **Editorial New:** Measured at weight 200; uppercase body and nav, with subtly tight tracking.
- **Altform:** Measured at weight 700; use broad, assertive lettering for the dominant wordmark.
- **Wasted Year:** Measured at weight 400; reserve for brief informal annotations.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 200 | 1.25 | -0.01em | — | Editorial New | Primary hero statement and oversized brand presence. |
| body | 16px | 200 | 1 | -0.01em | uppercase | Editorial New | Uppercase supporting copy and compact editorial text. |
| caption | 14px | 400 | 0.86 | 0 | — | Wasted Year | Short handwritten-style slogan or annotation. |
| nav | 16px | 200 | 1 | -0.01em | uppercase | Editorial New | Small uppercase menu label at the top edge. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 12, 20 px.
- Section rhythm — · element gap 12px · card padding — · max content width 1400px.

The measured page uses a 12-column structure and a maximum width of 1400px, while the hero media runs full bleed. The central wordmark and supporting statement anchor the viewport; the menu sits near the upper-right edge and a small mark near the upper-left. A compact project reel spans the lower edge, with thumbnail-and-label pairs arranged horizontally. Keep alignment deliberate and the overall density comfortable, leaving substantial open dark space around the central content.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s ease` on interactive elements.

The page reads as a flat, dark film stage rather than a stack of cards. No measured shadows or radius scale define the interface. Use fine dashed horizontal separators around the project reel, and rely on contrast and media layering—not raised panels—to distinguish content.

## Imagery

Use full-bleed cinematic video rather than decorative illustration as the main visual. The captured first viewport shows dark, teal-tinged footage behind the white wordmark; the scaled full-page view shows a brighter, warm-toned shot, indicating the background can change. Keep footage immersive and allow its natural colors to vary. Project stills appear as small, horizontal thumbnails in the bottom reel.

## Components

### Corner navigation

A compact white “+ MENU” label sits at the top-right over the media, with no filled button treatment.

### Hero wordmark

A very large, bold white Freshman wordmark is centered over full-bleed footage and dominates the opening view.

### Editorial statement

A small, centered two-line company introduction sits directly below the wordmark in a light editorial face.

### Handwritten slogan

A brief informal caption follows the statement, adding a hand-drawn texture without competing with the main headline.

### Project reel

A narrow horizontal strip pairs small film stills with concise client and project names; dashed hairlines bound the strip.

### Brand mark

A small white graphic mark occupies the upper-left corner, balanced against the menu on the opposite side.

### Measured component styles

- **Primary button** (“+ MENU”): transparent background · text #ffffff · radius 0px · padding 0px · 200 16px Editorial New · uppercase
- **Link** (“AUDI ALL YOU ARE”): transparent background · text #ffffff · radius 0px · padding 0px · 400 1px TT Firs Neue
- **Navigation item** (“+ MENU”): transparent background · text #ffffff · radius 0px · padding 0px · 200 16px Editorial New · uppercase

## Do

- Use near-black surfaces as the dominant stage.
- Keep primary display lettering white and visually forceful.
- Place concise editorial copy close to the hero wordmark.
- Let cinematic video occupy the full hero canvas.
- Keep navigation small and positioned at the edge.
- Use a restrained horizontal reel for featured projects.

## Don't

- Do not turn the hero into a conventional card layout.
- Do not add prominent UI colors absent from the captured viewport.
- Do not let body copy compete with the brand wordmark.
- Do not add heavy shadows or rounded-card styling.
- Do not crowd the open space around the central hero.
- Do not treat video colors as fixed brand palette colors.

## Agent prompt

Build a new Freshman-style agency page as a cinematic stage, not a conventional dashboard. Use Night Canvas (#101010) and Black Stage (#000000) for the dark foundation, with Studio White (#ffffff) for key typography and navigation. Signal Red (#ff2936) is a measured accent but should remain restrained; Warm Parchment (#f3f1e7) is not a defining hero color. Make full-bleed video the primary visual layer, then place a bold oversized wordmark and concise light editorial copy over it. Keep the menu discreet near the top edge. Use a short handwritten caption as a secondary texture, and present selected work in a compact horizontal strip with small stills and fine dashed separators. Favor open space, sharp contrast, and flat surfaces; avoid cards, heavy shadows, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video stage with centered wordmark and copy; corner navigation and a horizontal project reel at the bottom. | Edge-positioned menu, Featured-work ticker, Brand-first introduction | Oversized white wordmark, Dark cinematic background, Small handwritten caption, Dashed reel separators |

## Source CSS custom properties (selected)

```css
--color-red: #ff2936;
--color-sand: #f3f1e7;
--color-gray: #a4a49c;
--color-white: #ffffff;
--color-black: #101010;
--color-green: #264b48;
--color-salmon: #f5e1e2;
--color-outline: #f3f1e7;
--header-color: #ffffff;
```

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