What is SKIMS's primary brand color?

SKIMS has no chromatic brand voltage in the conventional sense. The chromatic identity lives in the editorial photography — models shot in pink-sand, clay-tan, ash-gray, and warm-taupe neutrals against turquoise water or warm-cream studio backdrops. The page chrome between the photographs is reduced to a warm cream canvas at #f6f6f6, a near-black ink at the unusual oklch-warm value #2d2a26, and a single warm-gray hairline at #e8e5df that handles every divider in the system. The skin and fabric tones in the photography do the chromatic work that a brand voltage normally does — there is no orange, no red, no green CTA fill anywhere in the captured page chrome.

What typefaces does SKIMS use, and what should I use as a substitute?

SKIMS runs three typefaces. TSTAR-PRO-Headline carries every uppercase display surface at 16-40px / 400 — the section labels ('NEW DROP JUST LANDED', 'ALL NIGHT COMFORT', 'SHAPEWEAR'), the navigation bar, and the small uppercase metadata strips. Inter carries every running text surface at 11-16px / 400 / 700 — the body paragraphs, the product descriptions, the form inputs, and the underlined CTAs. Assistant is loaded as the Hebrew localization fallback for the captured Israeli market site. TSTAR-PRO-Headline is a licensed Mecanorma display sans (a warm geometric grotesque); the closest open-source substitute is Space Grotesk at weight 400 for the uppercase tier. Inter is open source and needs no substitute.

Why is SKIMS's canvas warm cream instead of pure white?

The captured page canvas is #f6f6f6, a warm-gray cream rather than pure #ffffff — wired in CSS as --vp-background-color. The shift away from pure white is small enough that most viewers won't read it as a separate color, but it matters: pure white against editorial skin-tone photography (sand, clay, ash) creates a cold edge contrast that fights the warmth of the imagery. The warm cream lets the photographs feel continuous with the page surface rather than punched out against a cold backdrop. The same logic governs the ink choice — #2d2a26 is a warm oklch hue (75°, brown-leaning) rather than a neutral or cool black, so the text echoes the warmth of the skin and fabric palette.

Why are SKIMS's CTAs tiny underlined text instead of filled buttons?

Every 'Shop now' call on the captured page renders as a 12px / 400 Inter text label with an underline — never as a filled button with a brand-color background. The reasoning is editorial: SKIMS's value proposition lives in the photography, not in the button. A large filled CTA would force the eye away from the model and toward the button, breaking the editorial reading. The underlined text label is small enough to be unmissable for someone looking to convert (it sits beneath every editorial label) but quiet enough to keep the photograph as the page's primary visual content. This is the move every category-leading apparel brand (The Row, Toteme, Khaite) shares — the photograph sells the product; the button only confirms intent.

What is SKIMS's corner-radius philosophy?

The radius scale is small and split. The dominant value is 20px (24 occurrences), used on the editorial image cards and any large surface that needs to read soft against the cream canvas. Beneath that sit 2-4px values (2 occurrences each) used on small UI surfaces like the cart count badge and the cookie-banner button. A 10px tier exists for medium chips. The system skips the 8-12-16px range entirely, which gives the page a binary feel: either an element is a large soft 20px card or it's a 2-4px sharp utility surface. Image cards lean soft to keep the photography reading warm; buttons and inputs stay sharp to read as utility.

Can I use this DESIGN.md to build my own loungewear or shapewear site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce SKIMS's specific moves: warm cream canvas instead of pure white, warm-oklch ink instead of pure black, photography-as-palette instead of a brand voltage, and microscopic underlined-text CTAs instead of filled buttons. The tokens resolve cleanly — every hex, font name, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the photography-as-palette move only carries if you have the budget for editorial-grade product photography. Without it the page reads as empty rather than as editorial; a brand-color voltage and filled CTAs become necessary instead.

SKIMS Design System

SKIMS's marketing system as a DESIGN.md file — earth-tone photography carries the chromatic identity, with a warm cream canvas, oklch-warm ink at #2d2a26, and a single hairline to…

About SKIMS DESIGN.md

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

E-commerce & Retail

SKIMS's marketing surface does something almost no other commerce brand in the underwear or loungewear category does: it lets editorial photography of skin and fabric carry the entire chromatic system. The captured homepage opens on a full-bleed shot of two models in pink-sand shapewear floating in turquoise water, with a small "NEW DROP JUST LANDED" label in 12px TSTAR-PRO-Headline uppercase pinned to the lower-left and a 12px underlined "Shop now" CTA beneath it. Below the fold, four equal-width swatches alternate between editorial portrait shots (model in clay tan briefs, model in ash-gray bralette) and a single white-canvas product comparison band. The page chrome between photographs is reduced to a `{warm cream} #f6f6f6` canvas, a near-black ink at the unusual oklch-warm value `#2d2a26`, and a single warm-gray hairline at `#e8e5df` that handles every divider in the system. Where Calvin Klein opens with athlete portraiture on a pure-black canvas and Spanx opens with white-canvas product cutouts, SKIMS opens with editorial photography on a warm-neutral page and trusts the skin and fabric tones to do every chromatic job.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens drawn from the captured CSS — a two-tone neutral pair of warm cream canvas (`#f6f6f6`) and warm-oklch ink (`#2d2a26`), a single warm-gray hairline (`#e8e5df`) that carries 100% of border occurrences, a secondary text tier at `#636363`, and the implicit on-image overlays at pure black and white. 20 typography tokens span TSTAR-PRO-Headline for uppercase display at 16-40px / 400, Inter for body at 11-16px / 400 / 700, and Assistant as the Hebrew localization fallback for the Israeli market site captured. 4 corner-radius tokens centered on a 20px default for image cards and a 2-4px sharp tier for buttons and inputs. 24 components cover the editorial photo card, the underlined-text CTA, the cream-canvas product band, the bilingual text input, and the bottom-anchored newsletter footer.

Feed this file to Claude or Cursor and it reproduces SKIMS's specific moves: warm-cream canvas instead of white, oklch-warm ink instead of pure black, photography as chromatic carrier instead of a brand voltage, and microscopic underlined-text CTAs instead of filled buttons. The token references resolve cleanly — `{colors.canvas}` for the cream floor, `{colors.ink}` for the warm-black body text, `{typography.display-md}` for the 40px uppercase TSTAR headline. The one move worth borrowing for any apparel brand built on photography is the chromatic restraint of the chrome: if your editorial shots are the brand voltage, the page around them needs to recede to a single warm neutral and let the imagery be the only color story.

What makes it distinct

Photography as palettethe chromatic identity lives in the editorial shots of models in sand / clay / ash neutrals, not in the CSS tokens themselves
Warm-oklch inkthe body text color is #2d2a26 (oklch hue 75°, a warm brown-black) rather than the conventional pure black or blue-black
Single hairline tone#e8e5df (warm cream-gray) carries 195 of 195 captured border occurrences across every card, divider, and section rule
TSTAR-PRO-Headline uppercase displaysection labels run at 16-40px / 400 uppercase with no second weight, the warm-Helvetica geometric chosen for muted authority
Microscopic CTA treatmentevery shop-now link is a 12px / 400 underlined text label rather than a filled button; the editorial shots replace the call-to-action surface

Live at skims.com

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

skims.com

Explore SKIMS

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

SKIMS design system FAQ

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

SKIMS — official site

SKIMS's public marketing 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.