Signal Red
#ff2936Sparingly-applied accent for active states, marquee highlights, and high-emphasis punctuation — used as a single saturated note against the monochrome system
Freshman
freshman.tvWebsite preview
The design language
Freshman runs a near-black canvas with almost no color noise — the white type and the lone red accent do all the heavy lifting. The visual language borrows from high-end print and cinema: a massive italicized wordmark anchors every screen, type is set ultra-light (weight 200) in Editorial New and tight in Altform, and a thin horizontal project ticker acts as the page's spine. Surfaces are flat with no shadows or gradients; hierarchy comes from scale and weight contrast, not elevation. Interaction is restrained — a single + MENU trigger, bracket-wrapped editorial labels, and a project reel that feels like a film festival credit roll rather than a SaaS nav.
Color palette
accent
neutral
Pure White
#ffffffPrimary text, logotype fill, border strokes, and the dominant foreground on the dark canvas — carries 92% of all color instances
Carbon Black
#000000Base canvas and primary background — the default surface for every page
Charcoal Shale
#101010Secondary surface for icon wells, sub-panels, and slight tonal lift above the pure-black canvas
Typography
Type scale
Minor Second (1.067) · 16px basebody-lg
20px · 400 · 1The quick brown fox jumps
body
17px · 400 · 1The quick brown fox jumps
text-16
16px · 200 · 1The quick brown fox jumps
body-sm
14px · 400 · 1The quick brown fox jumps
caption
12px · 400 · 1The quick brown fox jumps
text-1
1px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Editorial New
- Weights
- 200
- Sizes
- 16px, 20px
- Line height
- 1.00, 1.25
- Letter spacing
- -0.01em
- Fallback
- Cormorant Garamond, Playfair Display
Hero and headline display — the ultralight weight 200 is anti-convention; combined with the 20px breakpoint it reads as editorial print rather than web UI
Additional typeface
TT Firs Neue
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.00
- Fallback
- Inter, Neue Haas Grotesk, Söhne
Workhorse UI and body sans — the only geometric grotesque in the system, anchors the project ticker labels, menu trigger, and utility text
Additional typeface
Altform
- Weights
- 400, 700
- Sizes
- 14px, 16px
- Line height
- 0.86, 0.88
- Letter spacing
- -0.03em
- Fallback
- Druk, Tungsten, Bebas Neue
Compact meta and condensed labels — tight 0.86–0.88 line-height and -0.03em tracking make it read like a festival credit roll
Additional typeface
Wasted Year
- Weights
- 400
- Sizes
- 12px, 14px, 17px, 20px
- Line height
- 0.86, 0.94, 1.00, 1.25
- Letter spacing
- -0.0100em
- Fallback
- Caveat, Reenie Beanie
Signature editorial flourishes — bracket-wrapped taglines and small accent phrases; its hand-set quality is used for personality, not information density
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Section gap
- 48-80px
- Card padding
- 12-20px
- Element gap
- 12px
Border radius
tags
0pxcards
0pxinputs
0pxbuttons
0pxSpacing scale
4px5px7px8px12px20pxGuidelines
Do
- Set the wordmark at 200 weight italic in Editorial New — never bold, never regular; the ultralight is the signature
- Use only #ffffff text on #000000 canvas; treat the 1px white hairline as the only structural divider allowed
- Anchor the project reel to the viewport bottom on every page — it functions as the site's navigation spine
- Pair the body description (TT Firs Neue 16px) with a bracket-wrapped Wasted Year tagline directly beneath it; the handwriting-font punctuation is non-optional
- Use #ff2936 for at most one element per viewport — it is punctuation, not paint
- Set compact UI labels (reel items, counters) in Altform with 0.86-0.88 line-height and -0.03em tracking for the festival-credit-roll rhythm
- Keep the MENU trigger as a bare typographic label — no border, no background, no icon button chrome
Don’t
- Do not introduce shadows, gradients, or elevation of any kind — flatness is the system
- Do not add card backgrounds or rounded corners; all surfaces are 0px radius on the black canvas
- Do not use bold or semibold weights for headlines — the weight 200 Editorial New is the anti-convention that defines the brand
- Do not use #ff2936 as a button fill or large background block — it loses all impact if used at scale
- Do not add a secondary navigation, breadcrumbs, or page tabs — the MENU trigger and the reel are the entire IA
- Do not set body copy above 16px or below 14px — the type scale is deliberately tight
- Do not alternate between light and dark sections; the page is uniformly dark, depth comes from type scale not surface color
Components
Hero Wordmark
Brand identity anchor — the primary visual element on the dark canvasFull-bleed 'freshman' logotype, set ultra-large in italic Editorial New weight 200, white (#ffffff) fill on Carbon Black (#000000). Letter-spacing -0.01em. A small registered-trademark ® sits at the upper-right of the mark. No background, no border, no shadow — the wordmark is the only object on screen.
Project Reel Ticker
Persistent bottom band showcasing latest work like a film festival credit rollFull-bleed horizontal bar anchored to the viewport bottom. Pure Black (#000000) background with a 1px top hairline in White (#ffffff). Items arranged in a single row with 12px column gaps; each item pairs a small thumbnail (Altform, condensed, weight 700) with a project title (TT Firs Neue, 14-16px, weight 400) and a secondary label (TT Firs Neue, 12px, 0.86 line-height, uppercase). 20px vertical padding, zero radius.
Menu Trigger
Primary navigation entry pointTop-right 'MENU' label prefixed by a + glyph, set in TT Firs Neue 16px weight 400 in White (#ffffff). No background, no border — a bare typographic control. Inherits the 'all type, no chrome' philosophy of the system.
Brand Glyph
Persistent mark in the upper-left cornerA small hash/cross-like symbol in White (#ffffff) on the Black canvas. Sits at the same cap height as the MENU trigger, anchoring the top bar in quiet symmetry. Likely set in TT Firs Neue or a custom icon font, ~16px.
Year Counter
Cinematic page-position indicatorCentered '2025' string set in Altform weight 400 at 14px with 0.88 line-height and -0.03em tracking in White (#ffffff). Reads as a chapter marker; updates per scroll position to mimic a film leader countdown.
Editorial Tagline Block
Voice/mission statement with typographic personalityTwo stacked lines of body text in TT Firs Neue 16px weight 400, White (#ffffff), centered, max-width ~600px. Followed by a bracket-wrapped Wasted Year phrase at 14–17px — the handwritten font transforms the tagline into a signed autograph.
Cookie Consent Strip
Bottom-right regulatory noticeMinimal pill-less bar in Charcoal Shale (#101010) with 1px White (#ffffff) hairline border, ~12px text in TT Firs Neue, uppercase tracking. Rounded zero. Sits flush to the viewport edge, never centered — treated as utility, not design.
Project Item Cell
Individual entry inside the project reelThree-line vertical stack: uppercase project name (TT Firs Neue 16px, weight 400, White), short sub-label (TT Firs Neue 12px, Altform 0.88 line-height, White at ~70% perceived opacity), and optional thumbnail to the left at ~80px tall. No border, no background tile — text sits directly on the Black bar.
Thin Hairline Divider
Section separator — the only structural chrome in the system1px horizontal line in White (#ffffff) at 70-100% opacity. Used between the hero and ticker, and between any stacked zones. Zero radius, zero shadow.
Surfaces & elevation
Level 1
Carbon Black
#000000Primary page canvas — the dominant surface covering the viewport
Level 2
Charcoal Shale
#101010Subtle elevation for utility elements like the cookie consent bar; barely perceptible shift above the canvas
The system intentionally avoids shadows and gradients. Depth is communicated exclusively through type scale, weight contrast, and the two-step surface stack (#000000 → #101010). This is a deliberate editorial-print decision — shadows would make the screen feel like software; flatness makes it feel like cinema.
Layout & imagery
Imagery
Imagery is almost absent from the main canvas. Photography appears only as small horizontal thumbnails inside the project reel ticker — tight, cinematic crops around 80px tall with no rounded corners and no overlay treatments. The visual identity is driven entirely by the oversized italic wordmark, ultra-light editorial type, and the vertical rhythm of bracketed handwritten flourishes. No illustration, no 3D, no decorative gradients — the wordmark IS the imagery.
Design notes
Agent Guide
**Quick Color Reference** - canvas/background: #000000 - primary text: #ffffff - secondary surface: #101010 - hairline border: #ffffff (1px) - accent / active state: #ff2936 - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. *Hero wordmark screen*: full-viewport Carbon Black (#000000) background. Center a single italic 'freshman' logotype in Editorial New weight 200, white (#ffffff), sized to fill ~60% of the viewport width, letter-spacing -0.01em. Below it, a two-line description in TT Firs Neue 16px weight 400 white, centered, max-width 600px. Beneath that, a bracket-wrapped tagline in Wasted Year 14px white. 2. *Project reel ticker*: pinned bar at the viewport bottom, Carbon Black (#000000) background, 1px white (#ffffff) top border. Single row of project items, 12px column gaps, 20px vertical padding. Each item = uppercase project name (TT Firs Neue 16px weight 400 white) stacked over a sub-label (TT Firs Neue 12px, line-height 0.88, white at 70% perceived opacity). Zero radius on all elements. 3. *Year counter*: centered horizontally, positioned in the lower third of the viewport. Set '2025' in Altform 14px weight 400 white, line-height 0.88, letter-spacing -0.03em. No background, no border. 4. *Top navigation bar*: full-width, Carbon Black background, 20px vertical padding. Left: a small 16px white hash/cross glyph. Right: '+ MENU' in TT Firs Neue 16px weight 400 white. No borders, no background fills, no separators between left and right. 5. *Cookie consent strip*: bottom-right corner, Charcoal Shale (#101010) background, 1px white (#ffffff) border, 12px text in TT Firs Neue weight 400, uppercase, white. ~12px padding. Zero radius. Flush to the viewport edge, never centered.
Similar brands
Hypebeast
Same editorial-meets-streetwear sensibility with oversized italic wordmarks on a near-black canvas and a ticker-like feed of content at the bottom
A24 Films
Cinema-title-card aesthetic — white type on pure black, ultralight editorial headlines, minimal chrome, and the feeling that the brand IS the logotype
Bureau Cool
Indie creative agencies that use editorial type, custom serifs at weight 200, and near-zero decoration; both treat the homepage as a statement rather than a product page
Buck (studio)
Production/creative studios with full-bleed dark canvases, restrained type, and project reels that double as the primary navigation rhythm
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
