Why does The Cut use Canela at weight 300 instead of a heavier weight?

The Cut runs Canela at weight 300 — the lightest common display weight — for all article headlines. This is an editorial positioning decision: weight 300 in a display serif reads as high-fashion restraint, while weight 500 or 700 reads as journalistic authority. Vogue, Condé Nast Traveler, and W Magazine use similar light-serif treatments for cover heds; The Cut's digital implementation carries that print tradition onto the web. The lightness works because the headlines are short (typically under eight words) and large (33–52px), so the thin strokes of the 300 weight remain legible. For body copy inside articles, a heavier text weight applies — the 300 weight is display-only.

What typefaces does The Cut use and what are the best open-source substitutes?

The Cut uses two licensed families in strict division-of-labor. Canela is a variable editorial serif (fallbacks: Georgia, serif) used for all display content — cover headlines, section heds, and article titles — at weight 300. Chap is a geometric grotesque sans (fallbacks: Arial, sans-serif) used for all chrome — navigation, category labels, timestamps, bylines, and buttons — exclusively in uppercase with letter-spacing. The families never trade roles. Open-source substitutes: for Canela, try Cormorant Garamond at weight 300 or light-weight Spectral; the fine hairline serifs and high contrast are close. For Chap, Raleway or Josefin Sans at their uppercase tracked settings approximate the geometric spacing.

Why does The Cut have no CSS custom properties in its design system?

The Cut's extraction returned zero CSS custom property declarations — the system is organized typographically rather than tokenistically. This is consistent with a publication whose design expression lives almost entirely in two typefaces and a black-on-white palette: when there are no brand accent colors to parameterize, no product surface colors to maintain, and no dark-mode to switch, CSS custom properties carry no practical leverage. The Cut's equivalent of a design token is the two-family typographic contract: Canela for editorial, Chap for chrome. The crimson accent on section labels is the only chromatic token worth parameterizing, and at 12 occurrences it appears to be applied as a hard-coded value rather than a variable.

How does The Cut's editorial grid work?

The Cut's front page is organized as a sequence of image clusters separated by generous 50–70px vertical gaps. Each cluster is a standard multi-column editorial grid: a hero image spanning roughly 60% of the viewport width, with 1–3 secondary images in a sidebar column. Story titles in Canela 300 sit below each image with minimal padding. The grid is flat — no cards, no borders, no background surfaces — and the photography runs edge-to-edge in its container. The typographic chrome (category label in uppercase Chap, headline in Canela, byline in smaller Chap) appears below the image rather than overlaid, keeping the photography unobstructed.

Where does The Cut use its crimson accent color?

The deep crimson appears 12 times in the captured page, all as text on section-label elements. It marks specific editorial sections — specifically a recurring 'The Cut' logo-style section label rendered in crimson Chap uppercase. It is not used on navigation links, article titles, or interactive elements. This is a section-identity accent rather than a CTA accent: it identifies a specific page section or content type, not an action. The remaining 11 red-family pixels (a slightly different red-orange on a hover state) bring the total chromatic presence to under 25 elements across a 2,236-element capture — the system is effectively bichromatic.

The Cut Design System

The Cut's fashion-editorial design system.

About The Cut DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source thecut.com

News & Publishing

The Cut's homepage is more fashion editorial than news front. Canela, a variable-weight display serif, runs every headline at weight 300 — a deliberate choice that makes the type feel closer to a Vogue cover hed than to a Times front page. Most editorial serif systems sit at 400 or 500; The Cut's 300 weight is the defining typographic move, producing headlines that feel drawn rather than set. Chap, the geometric grotesque that runs all chrome, amplifies the contrast: where Canela is light and flowing, Chap appears exclusively in uppercase with generous letter-spacing, reading as a category label from a fashion archive rather than a navigation item.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 8 color tokens drawn from a pure black-and-white chromatic system, with a single crimson accent at 12 occurrences for section-specific labels. No CSS custom properties are exposed — the system is typographically rather than tokenistically organized. Ten typography tokens span two families, Canela and Chap, across display sizes from 20px to 52px and label sizes from 10px to 18px. The radius scale has a single entry: 50% for avatar circles. The spacing system is generous, with 50–70px section gaps that give the image grid room to breathe.

Feed this file to Claude or Cursor and it reproduces The Cut's specific moves: Canela weight 300 for display, Chap uppercase for labels, a black-and-white chromatic system that treats photography as the only color event, and generous inter-section spacing that frames each image cluster as its own editorial moment. The principle worth borrowing in any image-forward editorial context: suppress typographic weight until the type feels like a caption for the photography, not a competitor to it.

What makes it distinct

Canela at weight 300display headlines run in an editorial serif at an unusually light weight; the lightness reads high-fashion rather than journalistic authority
All-uppercase Chap everywhereevery navigation link, category label, timestamp, and button runs in uppercase spaced Chap; the grotesque and the serif never share a case convention
Pure black-and-white chromeno CSS custom properties, no tinted surfaces; the entire layout system runs on ink black and page white with a single crimson accent for section labels
Sparse radius scaleone value in the entire system, 50% for avatar circles; every card, image, and layout container is flush-edge
Photography as herothe front page is a grid of editorial images with minimal typographic chrome; the type exists to credit and categorize the images, not to compete with them

Live at thecut.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

thecut.com

Explore The Cut

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

The Cut design system FAQ

Common questions about The Cut's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

The Cut — official site

The Cut's public site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.