--- version: alpha name: "The Cut" website: "https://www.thecut.com" description: >- A New York Magazine fashion and culture vertical whose editorial design is built entirely from black, white, and a crimson accent — Canela, a variable-weight editorial serif at uncommonly light weight 300, runs all article headlines and cover heds, while Chap, a geometric grotesque, runs every navigation label, category tag, and timestamp in uppercase spaced tracking. The palette has no CSS custom properties exposed: pure black for text and hairlines, pure white for the page floor, and a single deep crimson appearing on 12 elements as a section-accent tone. Large photography is the primary visual event; the typography recedes to frame the image grid. seo: title: "The Cut Design System for React — Canela serif, Chap uppercase, black on white, 13 components" metaDescription: "The Cut's fashion-editorial design system. Canela display serif at weight 300, Chap uppercase grotesque labels, black-and-white palette with a single crimson accent. Tokens for React, Next.js, and AI coding tools." highlights: - "Canela at weight 300 — display headlines run in an editorial serif at an unusually light weight; the lightness reads high-fashion rather than journalistic authority" - "All-uppercase Chap everywhere — every 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 chrome — no 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 scale — one value in the entire system, 50% for avatar circles; every card, image, and layout container is flush-edge" - "Photography as hero — the 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" tags: - "News & Publishing" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.thecut.com" title: "The Cut — official site" description: "The Cut's public site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "canela-weight" title: "Why does The Cut use Canela at weight 300 instead of a heavier weight?" answer: "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." - id: "typography-system" title: "What typefaces does The Cut use and what are the best open-source substitutes?" answer: "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." - id: "no-css-vars" title: "Why does The Cut have no CSS custom properties in its design system?" answer: "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." - id: "photography-grid" title: "How does The Cut's editorial grid work?" answer: "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." - id: "crimson-accent" title: "Where does The Cut use its crimson accent color?" answer: "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." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#000000" ink-soft: "#111111" ink-mid: "#333333" ink-muted: "#4a4a4a" ink-subtle: "#949494" canvas: "#ffffff" surface-light: "#f4f4f4" crimson: "#d0021b" typography: display-xl: fontFamily: "Canela, Georgia, serif" fontSize: 52px fontWeight: 300 lineHeight: 54px letterSpacing: 0 display-lg: fontFamily: "Canela, Georgia, serif" fontSize: 33px fontWeight: 300 lineHeight: 36px letterSpacing: "0.5px" display-md: fontFamily: "Canela, Georgia, serif" fontSize: 30px fontWeight: 400 lineHeight: 34px letterSpacing: 0 display-sm: fontFamily: "Canela, Georgia, serif" fontSize: 24px fontWeight: 300 lineHeight: 26px letterSpacing: 0 display-xs: fontFamily: "Canela, Georgia, serif" fontSize: 20px fontWeight: 300 lineHeight: 23px letterSpacing: "0.5px" nav-label: fontFamily: "Chap, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 18px letterSpacing: "3px" label-lg: fontFamily: "Chap, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 18px letterSpacing: "2px" label-md: fontFamily: "Chap, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 16px letterSpacing: "1px" label-sm: fontFamily: "Chap, Arial, sans-serif" fontSize: 11px fontWeight: 700 lineHeight: 11px letterSpacing: "2px" label-xs: fontFamily: "Chap, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 10px letterSpacing: "1.5px" rounded: none: "0px" full: "50%" spacing: xs: "5px" sm: "6px" md: "10px" base: "15px" lg: "16px" xl: "40px" 2xl: "50px" 3xl: "70px" components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-label}" rounded: "{rounded.none}" padding: "15px 20px" borderColor: "{colors.ink}" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.display-lg}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "0px" category-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-sm}" padding: "0px" section-accent-label: backgroundColor: "transparent" textColor: "{colors.crimson}" typography: "{typography.label-sm}" padding: "0px" byline: backgroundColor: "transparent" textColor: "{colors.ink-subtle}" typography: "{typography.label-xs}" padding: "0px" timestamp: backgroundColor: "transparent" textColor: "{colors.ink-subtle}" typography: "{typography.label-xs}" padding: "0px" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.display-sm}" rounded: "{rounded.none}" padding: "16px 0px 0px" borderColor: "{colors.ink}" card-featured: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-soft}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "16px 0px 0px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-xs}" rounded: "{rounded.none}" padding: "15px 20px" borderColor: "{colors.ink}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.label-md}" padding: "40px 0px" borderColor: "{colors.ink}" --- ## Overview The Cut's editorial design treats typography as fashion rather than as information architecture. **Weight-300 editorial restraint.** Canela, a variable display serif, runs every headline at weight 300 — the lightest common display weight — producing type that looks drawn onto the page rather than set. Where ProPublica uses Feature Headline at weight 500 for journalistic authority and the New York Times uses its namesake serif at weight 700 for density, The Cut deliberately drains typographic weight until the headlines recede behind the photography. Chap, the geometric grotesque that appears in all chrome, appears exclusively uppercase with generous tracking — a fashion-archive label treatment that reads as category taxonomy rather than navigation. The palette is effectively bichromatic. Pure black runs text and hairlines, pure white runs the page floor, and the crimson accent (`{colors.crimson}`) appears on exactly 12 elements — all text, all on section-identity labels. No CSS custom properties are exposed; the system is organized through typographic convention rather than token architecture. The chromatic restraint is not an absence of design intention — it is the design intention. Photography is the color event on this page, and the chrome retreats to let it be. **Key Characteristics:** - Canela weight 300 for all editorial display — the lightest standard display weight, reading as high-fashion rather than journalistic authority. - Chap uppercase with 1.5–5px letter-spacing across every chrome surface — navigation, labels, timestamps, and buttons share one typographic voice. - Pure black-and-white system with zero CSS custom properties — the design token is the typographic contract, not a variable set. - Single crimson accent (`{colors.crimson}`) on section-identity labels — 12 occurrences, all as text, never on CTAs or nav links. - Near-zero radius scale — only 50% for avatar circles; every layout container, card, and image frame is flush-edge. - 50–70px inter-section vertical gaps — the spacing gives each image cluster its own editorial stage rather than compressing stories into a feed. - Photography-as-hero layout: images run edge-to-edge in their containers, with type appearing below rather than overlaid. ## Colors ### Text - **Ink** (`{colors.ink}` — #000000): frequency 1621. Used as text (829), border (790), shadow (2). The dominant system color — pure black at maximum frequency. Every headline, nav link, hairline border, and image frame edge runs in pure black. - **Ink Soft** (`{colors.ink-soft}` — #111111): frequency 408. Used as text (204) and border (204). The near-black used for editorial content display text and content separators. - **Ink Mid** (`{colors.ink-mid}` — #333333): frequency 84. Secondary text tone for less-prominent content labels. - **Ink Muted** (`{colors.ink-muted}` — #4a4a4a): frequency 10. Tertiary text for supplementary body copy. - **Ink Subtle** (`{colors.ink-subtle}` — #949494): frequency 62. Quaternary text for bylines, timestamps, and the least-prominent chrome. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 12. The page floor — 11 as background, 1 as shadow. Pure white with no warmth adjustment. - **Surface Light** (`{colors.surface-light}` — #f4f4f4): frequency 1. A near-white used for a single advertisement or content-well background. ### Accent - **Crimson** (`{colors.crimson}` — #d0021b): frequency 12. Used as text (6) and border (6). Appears on section-identity labels — the "The Cut" section marker rendered in crimson Chap uppercase. Not used on CTAs, nav links, or hover states. ## Typography ### Font Families The system runs two families in strict division-of-labor. **Canela** — a variable editorial serif (fallbacks: Georgia, serif) — handles every display position: cover headlines, section heds, article titles, and pull-quote fragments. It runs exclusively at weight 300 in the captured surface, with one 400-weight instance for a mid-size section hed. **Chap** — a geometric grotesque sans (fallbacks: Arial, sans-serif) — handles all chrome: navigation links, category tags, section labels, timestamps, bylines, and buttons. Chap appears exclusively in uppercase with generous tracking (1–5px). The families never share a role. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 52px | 300 | 54px | 0 | Cover / hero headline | | `{typography.display-lg}` | 33px | 300 | 36px | 0.5px | Section-front headline | | `{typography.display-md}` | 30px | 400 | 34px | 0 | Mid-tier section hed | | `{typography.display-sm}` | 24px | 300 | 26px | 0 | Standard article card title | | `{typography.display-xs}` | 20px | 300 | 23px | 0.5px | Small card / sidebar hed | | `{typography.nav-label}` | 18px | 400 | 18px | 3px | Top-nav section labels (uppercase) | | `{typography.label-lg}` | 15px | 400 | 18px | 2px | Section-header labels (uppercase) | | `{typography.label-md}` | 12px | 400 | 16px | 1px | Standard category labels, bylines | | `{typography.label-sm}` | 11px | 700 | 11px | 2px | Compact category tags (uppercase) | | `{typography.label-xs}` | 10px | 400 | 10px | 1.5px | Timestamps, smallest chrome (uppercase) | ### Principles The Canela display tier runs at weight 300 across every size — a consistent lightness that unifies the headline system regardless of size. The only weight-400 instance is on the 30px section hed tier, which sits between the light 33px and light 24px, suggesting a size-dependent weight nudge to maintain legibility at mid-size. The Chap chrome system uses no weight below 400 and one weight-700 instance for compact category tags; the grotesque thus has two weights (400 and 700), both at very small sizes. ### Note on Font Substitutes Canela is a licensed variable serif from Commercial Type. **Cormorant Garamond** at Light (300 weight) is the closest open-source match for the fine-hairline serif quality and high contrast. **Spectral Light** transfers well at smaller display sizes. For Chap, **Josefin Sans** or **Raleway** at uppercase tracked settings approximate the geometric spacing and proportions. ## Layout ### Spacing System - **Base unit:** 5–6px, with generous 50–70px inter-section gaps. - **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 6px · `{spacing.md}` 10px · `{spacing.base}` 15px · `{spacing.lg}` 16px · `{spacing.xl}` 40px · `{spacing.2xl}` 50px · `{spacing.3xl}` 70px. - **Inter-section gap:** 50–70px — the primary rhythm device. Each image cluster gets its own editorial stage. - **Card top padding:** 16px top-only, zero sides. Cards stack flush to the canvas with the grid itself as the separator. ### Grid & Container - **Hero cluster:** roughly 60% width image + 40% sidebar of 2–3 secondary images. - **Story card:** image fills the full card width edge-to-edge; type (category label, headline, byline) appears below in the card's padding zone. - **Section header:** full-width span in uppercase tracked Chap, either ink-black or crimson. - **Ad placements:** appear as full-width horizontal bands between editorial clusters. ### Rhythm The page alternates between **editorial cluster** and **spacer**. Each cluster is a grid of 2–5 photographs with their associated type. The 50–70px gaps between clusters are the page's most distinctive structural device — they read as ruled white space on a fashion-magazine page rather than the tight feed compression of a news site. The effect is that scrolling The Cut feels like turning pages rather than reading a feed. ## Elevation The system has **no elevation layer**. There are no shadows, no cards with background surfaces distinct from the page floor, and no tonal lifts. Everything sits on the pure white canvas. The two shadow occurrences in the extraction (both in the ink-black color entry) belong to a text shadow on a button hover or overlay text, not to any card or surface elevation. The editorial grid exists entirely in two dimensions — image in a container, text below. ## Shapes The radius scale has **one non-zero entry**: - `{rounded.none}` 0px — every image container, every editorial card, every layout element. The system is flush-edge throughout. - `{rounded.full}` 50% — avatar circles for author photographs only. The system does not acknowledge any intermediate radius value. The editorial-magazine tradition of flush-edge image placement is the convention being honored; rounded image containers would immediately shift the page toward a product-UI aesthetic. ## Components **`top-nav`** — White canvas, 1px ink-black bottom border. Houses "the CUT" wordmark (Canela weight 300 at display size) flush left, with category links in uppercase Chap spaced at 3px to the right. Right-side cluster carries section links to sibling NY Magazine verticals (Vulture, The Strategist, Intelligencer). **`nav-link`** — Pure black text, uppercase Chap 11px with 2px letter-spacing, zero padding, zero background. The nav is entirely undecorated — no hover backgrounds, no active pills. **`hero-heading`** — Ink-soft black text, Canela 52px / 300 / lh 54px. The lead story headline — the system's loudest typographic moment by size, yet visually recessive due to the weight-300 treatment. **`section-heading`** — Ink-soft text, Canela 33px / 300. Used for section-front heds on secondary featured stories. **`body-paragraph`** — Pure ink text, Chap 10px uppercase with 2px spacing. The only "body" text on the homepage is the small-print navigation text and disclaimers — article body copy runs on a different surface. **`category-label`** — Pure ink text, Chap 11px / 700 uppercase with 2px spacing. Appears above each headline to identify section (Fashion, Beauty, Politics, etc.). **`section-accent-label`** — Crimson `{colors.crimson}` text, Chap 11px / 700 uppercase. The section-identity label for The Cut's own branded section markers. **`byline`** — Ink-subtle gray text, Chap 10px uppercase with 1.5px spacing. Author name below each article card headline. **`timestamp`** — Ink-subtle gray text, Chap 10px uppercase. Published date / time beside bylines. **`card`** — Canvas white, flush-edge, 16px top padding only. Image fills card edge-to-edge above the type zone. Standard story card. **`card-featured`** — Same flush-edge treatment at the hero size — Canela 52px / 300 headline below the primary editorial image. **`button-secondary`** — Transparent fill, ink-black 1px border, uppercase Chap 10px at 1.5px spacing, 15px × 20px padding. Used for "See More" and newsletter engagement CTAs. **`footer`** — White canvas, ink-muted text in Chap label-md (12px / 400 / 1px spacing), 40px top padding, 1px top hairline in pure black. ## Do's and Don'ts **Do** run Canela at weight 300 for all display sizes. The lightness is the signature — weight 500 or 700 transforms the system from fashion editorial into news editorial, and the two read as different genre statements. **Do** apply Chap exclusively in uppercase with letter-spacing on every chrome surface. The minimum tracking at any size is 1px; the nav top tier uses 3–5px. Reducing tracking or going mixed-case breaks the fashion-archive label convention. **Do** keep photography flush-edge in every container. Image rounding at any value immediately shifts the visual register from magazine to product UI. The 0px radius is load-bearing. **Do** maintain the 50–70px inter-section gap. Compressing it to 24–32px converts the editorial cluster rhythm into a news feed. The space is how each cluster reads as a page rather than a post. **Don't** apply `{colors.crimson}` (#d0021b) to navigation links, hover states, or CTAs. It appears on section-identity labels only — using it elsewhere introduces an accent logic the system does not have. **Don't** add a background surface to article cards. Every card sits directly on the white canvas floor; adding a card background (even `{colors.surface-light}`) creates a product-card feeling rather than an editorial-grid feeling. **Don't** render Canela at weight 400 or 700 at the hero display size. The weight-300 at 52px is the system's most deliberate move. Heavier weights at that size tip from fashion lightness into journalistic weight. **Don't** add any border-radius between 0px and 50% — the scale has no intermediate value. Introducing a 4px or 8px card radius breaks the binary flush-edge / avatar-circle convention. ## Known Gaps - **Article body typography:** article body copy likely runs in a body text weight of Canela (400+) or a separate body serif at text sizes, but the homepage capture surface has no long-form body paragraphs to extract from. - **Primary button:** no primary CTA button appeared in the captured surface. The Cut's homepage has no donate, sign-up, or subscribe button at the page level. Newsletter and subscription CTAs likely exist deeper in the site. - **Dark mode:** the site is light-mode only on the captured surface; no dark variant was observed. - **Hover and focus states:** only resting states are captured. Interactive states for nav links, image cards (likely a title color shift or underline), and buttons are not documented. - **Advertisement surfaces:** ad placements appear as full-width bands but use externally-sourced creative; the ad container chrome (border treatment, label) is not documented here. - **Video and multimedia players:** The Cut uses embedded video in article pages; the player chrome and overlay typography are not represented in the homepage capture.