What is SSENSE's primary brand color?

SSENSE does not run a saturated brand voltage. The dominant token is warm graphite #333333 at frequency 720 — 368 occurrences as text and 352 as 1px borders. Pure black #000000 sits underneath at frequency 164 (82 text, 82 border), scoped to product cell labels and primary nav links. The only surfaces in the page are #ffffff (default canvas, 2 occurrences in the extraction because the rest is implicit), #f4f4f4 (chip / editorial band fill, 25 occurrences), and #e8e8e8 (single block surface). There is no brand-saturated voltage in the extracted palette — the photography of designer garments carries every chromatic moment instead.

What typography does SSENSE use, and what should I use if these typefaces are unavailable?

SSENSE runs two custom typefaces. JHA Times Now is the display serif, reserved for the homepage feature headline at 100px / weight 400 / -3.75px letter-spacing — the magazine masthead. It also handles body paragraphs at 20px / weight 100 and meta labels at 15px / weight 100. Favorit SSENSE Inter (a custom Inter variant) handles every grotesque role: h2 at 53.2px / weight 400 / -2px tracking, h4 category caps at 14.25–28.5px uppercase, product cell text at 19px uppercase / -0.25px tracking, and 11px nav links. If JHA Times Now is unavailable, GT Sectra or Tiempos Headline at weight 400 are the closest editorial serifs — preserve the -3.75px tracking exactly. For Favorit SSENSE Inter, plain Inter or Söhne at weight 100/400 substitute well; preserve the uppercase + negative tracking pattern, since the all-caps rhythm depends on it.

Why does SSENSE use 0px corners on the primary chrome?

Every text frame, image cell, category band, and product tile in the homepage extraction renders at 0px borderRadius. The single rounded value in the entire extracted radii list is 10px, scoped to seven occurrences on small avatar / icon chips. The right-angle geometry inherits from print fashion broadsheets and museum-display label typography — softening any product cell to a 4px or 8px corner would push the storefront toward generic e-commerce template territory. The 0px discipline is the system's strongest editorial decision: it lets the designer-garment photography sit inside a hard rectangular frame the way an editorial photograph sits inside a magazine spread.

Why is every label in uppercase?

Lowercase Favorit SSENSE Inter does not appear in the homepage chrome — every grotesque role is uppercase. Top-nav links (Menswear, Womenswear, Editorial), category caps (Visual Arts, April Picks), product cell text, h2 sub-heads, and feature card labels all run uppercase with negative letter-spacing (-0.05px on 14.25px labels, -0.25px on 19px product caps, -2px on the 53.2px h2). The uppercase grotesque chrome reads as fashion-broadsheet voice — it is the typographic counterweight to the JHA Times Now serif masthead. Replace it with sentence case and the page immediately reads as a generic apparel storefront.

Can I use this DESIGN.md to build my own React fashion storefront?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent reproduces SSENSE's editorial discipline (0px corners on every product cell, uppercase Favorit SSENSE Inter grotesque, JHA Times Now serif reserved for the single feature headline, grayscale palette anchored on graphite #333333) rather than a generic apparel theme. Reference tokens directly when you want one specific value — `{colors.ink}` resolves to #333333, `{rounded.none}` to 0px, `{typography.display-serif}` to JHA Times Now 100px / weight 400 / -3.75px tracking, `{typography.product-cell}` to Favorit SSENSE Inter 19px uppercase / -0.25px tracking. The -2px h2 letter-spacing and the 80px outer container padding are preserved as quoted literals you can paste into a Tailwind config or CSS variable file.

What's missing from this DESIGN.md spec?

Several surfaces aren't captured: the PDP product-detail page typography and add-to-bag chrome, the size selector geometry, the slide-in cart drawer and full checkout flow, the SSENSE Editorial long-form article pages, the designer A–Z index, the mobile bottom-bar navigation, the focus-ring color (no input was extracted from the homepage), and hover-state colors per the absent state extraction. The palette is documented as a 7-hex grayscale because the extractor surfaced 7 raw hexes — if SSENSE uses a saturated voltage elsewhere (sale chips, status badges, error states) it is not present on the homepage and the spec does not invent one. JHA Times Now and Favorit SSENSE Inter are custom licensed typefaces; substitutes are listed in the typography section but are approximations.

SSENSE Design System

SSENSE's luxury fashion design system as a DESIGN.md file.

About SSENSE DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source ssense.com

E-commerce & Retail

SSENSE's storefront reads like a fashion broadsheet rendered for the browser. The canvas is near-white with a quiet chip surface (#f4f4f4) breaking it into editorial bands, and the ink is a warm graphite (#333333) used 720 times across text and 1px hairlines — never the pure black that would feel pharmaceutical against designer garment photography. The masthead is a single JHA Times Now serif headline at 100px / weight 400 with -3.75px tracking ("How Brick Became a Status Symbol for the Aspirationally Offline"), and everything else — nav links, category caps, product cells, sub-heads, footer columns — drops to Favorit SSENSE Inter in uppercase. Two type personalities, one across the entire interface: a magazine cover up top, a typewritten archive beneath.

This page packages the storefront into a DESIGN.md file written to the Google Labs open specification. Inside: 19 color tokens grouped into ink, surface, and hairline layers — the palette is genuinely a 7-hex grayscale because the extraction surfaced zero brand-saturated voltage; 12 typography roles built around JHA Times Now serif at 4 sizes (100/20/15px display + body) and Favorit SSENSE Inter grotesque at 7 size/weight pairings (53.2px h2 down to 11px nav link); a 3-step radius vocabulary that's effectively two values (0px almost everywhere, 10px on the small avatar chips); a 7-step spacing scale anchored on the observed 20px, 30px, 40px, 64px, 80px, 120px rhythm; and 21 component entries covering the top nav, hero feature, category cap, product cell, editorial split card, value-prop strip, newsletter input, and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces SSENSE's broadsheet discipline — the JHA Times Now display serif reserved for one editorial moment per page, the Favorit SSENSE Inter uppercase grotesque doing every other label, the graphite-on-near-white grayscale, the 0px corners — instead of inventing a generic luxury-template with rose-gold accents and pillowed cards. Reference tokens directly in Tailwind config or CSS variables. The reason this system rewards study is that most luxury fashion marketplaces ship saturated brand voltages and serif-everywhere display ramps to signal taste — SSENSE inverts the convention, paints the entire page in grayscale, holds the serif to one headline, and lets designer photography carry every chromatic moment.

What makes it distinct

Editorial serif as front coverJHA Times Now at 100px / weight 400 / -3.75px tracking carries the single homepage feature headline; every other text role drops to a grotesque
All-caps grotesque chromeFavorit SSENSE Inter renders every nav link, category cap, product cell, and h2 in uppercase with -0.05px to -2px tracking; lowercase never appears in the page chrome
Zero saturated voltagethe palette resolves to 7 grays (graphite #333333 at 720 hits, pure black #000000 at 164, surface #f4f4f4) with no brand-colored CTA fill, the photography does that work
Weight-100 magazine mastheadbody paragraphs and h4 caps run at weight 100, a hairline grotesque tier that most fashion DTCs would never ship below weight 400
Two-tone ink laddergraphite (#333333) carries 368 text and 352 border occurrences, pure black (#000000) is scoped to 82 text + 82 border slots reserved for product cell text and primary-nav links

Live at ssense.com

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

ssense.com

Explore SSENSE

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.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

SSENSE design system FAQ

Common questions about SSENSE'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.

SSENSE — official site

The SSENSE storefront this DESIGN.md was extracted from on 2026-05-13.

The DESIGN.md specification

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

Use SSENSE in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→