---
title: "SKIMS design system"
variant: extended
source: https://skims.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/skims-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SKIMS · Design System

> Bold fashion imagery, clean commerce

**Theme:** light · **Industry:** fashion · **Source:** https://skims.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SKIMS pairs oversized fashion photography with restrained typography and a mostly white canvas. The homepage moves from seasonal campaigns to shoppable categories, then closes with brand messaging and a compact, information-rich footer.

## North star

Let large, art-directed fashion photography lead, while typography and commerce controls stay crisp, restrained, and easy to scan.

## Overview

The visual system is built around a white canvas (#ffffff) and warm, deep brown-black text (#2d2a26), with pale gray (#f6f6f6) reserved for subtle rules and quiet secondary details. The measured palette is intentionally restrained; the muted taupe (#e8e5df) and pure black (#000000) appear sparingly, so treat them as supporting tones rather than broad brand surfaces. Inter handles navigation, body copy, and utility information, while heavy, uppercase T-Star headlines give campaign sections a distinct fashion-editorial voice. Large, edge-to-edge photographs carry most of the visual color and emotional impact. Text overlays sit directly on the imagery, with white headings and links chosen for contrast. The page alternates immersive single-image campaigns with a four-column category row and paired promotional tiles, then opens into a spacious centered brand statement and a three-column footer. Keep surfaces flat, align content cleanly, and use generous section separation without introducing decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and header; also provides high-contrast text and links over dark campaign photography. |
| Warm Ink | `#2d2a26` | `--color-warm-ink` | brand | Primary text, footer content, navigation details, and outlined form controls. |
| Quiet Gray | `#f6f6f6` | `--color-quiet-gray` | neutral | Subtle hairlines and low-emphasis text details; keep it secondary to the white canvas. |
| Soft Taupe | `#e8e5df` | `--color-soft-taupe` | neutral | A faint footer border tone in the measured data, not a dominant section background. |
| True Black | `#000000` | `--color-true-black` | semantic | Limited dark link-text occurrence; do not treat as a broad background or primary text color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#2d2a26` (Warm Ink) · `--color-text-muted` → `#f6f6f6` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f6f6f6` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2a26` | `#ffffff` | 14.28:1 | AAA |
| `#f6f6f6` | `#ffffff` | 1.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700 | Navigation, body copy, captions, links, forms, and footer details. | Inter |
| T-Star | `--font-display` | webfont | 900 | Large campaign and section headings. | Barlow Condensed |

- **Inter:** Mostly regular weight; navigation and links use bold. Keep utility copy compact and sentence case.
- **T-Star:** Heavy 900 weight, uppercase, with measured positive tracking; use for emphatic editorial headlines.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 900 | 1.17 | 0.025em | uppercase | T-Star | Primary campaign headline over the hero photograph. |
| h2 | 36px | 900 | 1.33 | 0.025em | uppercase | T-Star | Major promotional and brand-statement headings. |
| h3 | 30px | 900 | 1.2 | 0.025em | uppercase | T-Star | Secondary campaign or section headings. |
| h4 | 24px | 900 | 1.25 | 0.025em | uppercase | T-Star | Compact editorial headings and smaller content titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Supporting campaign descriptions and standard page copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Small utility, category, and footer details. |
| nav | 14px | 700 | 1.43 | 0 | — | Inter | Header navigation and compact utility navigation. |
| link | 14px | 700 | 1.43 | 0 | — | Inter | Calls to action and prominent text links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 8, 12, 16, 20, 24, 28, 40, 44, 48, 50, 56, 80 px.
- Section rhythm 56px · element gap 8px · card padding — · max content width 1344px.

Use a full-width page canvas with a measured maximum content width of 1344px where content is constrained. The homepage alternates full-bleed, single-column campaign imagery with four-column category cards and a two-column underwear/bras feature. Keep the brand statement centered and the footer in three columns. The measured spacing system has an 8px base unit, a 56px section gap, and comfortable density; preserve generous breathing room while keeping category labels and footer links compact.

## Shape & elevation

- Radius: nav `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The measured page has no defining shadow system and is predominantly flat. Separate content through image boundaries, white space, and subtle hairlines rather than raised cards. Keep navigation visually light; its measured pill-like radius should not be generalized to unrelated components. Maintain clear text contrast over photographs without adding ornamental effects.

## Imagery

Use polished, realistic fashion photography as the primary visual material; the supplied page features seasonal styling, models, and apparel in lifestyle settings. Campaign images fill broad horizontal sections, while category photography is cropped into a four-card row. Keep photographic color and texture natural, and place concise, high-contrast copy directly over campaign imagery where shown. Illustration and 3D are not defining elements.

## Components

### Utility header

A narrow white top strip pairs the SKIMS wordmark with centered signup utility text and compact currency controls.

### Overlay navigation

Place compact Inter navigation over the hero image, with shopping links and search/account icons rendered for contrast.

### Campaign hero

Use a full-bleed fashion image with a left-aligned uppercase T-Star headline, short supporting copy, and a simple Shop Now link.

### Category image grid

Show four adjacent apparel photographs with short uppercase category labels beneath each image.

### Promotional feature

Combine broad campaign photography and overlay copy for matching sets or men's arrivals; use paired image tiles for underwear and bras.

### Brand statement

Center the uppercase brand message on white space, using bold display type without additional decorative treatment.

### Information footer

Organize help, newsletter signup, and more links into three columns, followed by social links and a compact legal row.

### Measured component styles

- **Primary button**: background #2d2a26 · text #2d2a26 · radius 0px · padding 0px · 400 12px Inter
- **Secondary button** (“SWEATERS”): transparent background · text #2d2a26 · border 1px solid #ffffff · radius 0px · padding 0px · 900 16px T-Star · uppercase
- **Link** (“Shop Now”): transparent background · text #ffffff · radius 0px · padding 0px · 700 14px Inter
- **Input**: transparent background · text #2d2a26 · border 1px solid #2d2a26 · radius 0px · padding 12px · 400 12px Inter
- **Navigation item** (“New Best Sellers Clothing Bras Underwear”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter

## Do

- Lead with large, editorial fashion photography.
- Keep the canvas predominantly white.
- Use T-Star for bold uppercase campaign headlines.
- Use Inter for navigation, body, and utility copy.
- Make category photography easy to scan in a clear grid.
- Keep calls to action concise and high contrast.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce unmeasured colors as brand colors.
- Do not use rounded cards as the default container style.
- Do not let utility text compete with campaign headlines.
- Do not replace the photography-led layout with illustration.
- Do not crowd the brand statement or footer columns.

## Agent prompt

Build a new SKIMS-style fashion commerce page with a predominantly white canvas (#ffffff) and warm dark text (#2d2a26). Let large, carefully art-directed fashion photographs lead each major section, using short white overlay copy when needed for contrast. Set campaign headings in a heavy, uppercase display face similar to T-Star; use Inter for navigation, body copy, links, and footer details. Favor full-width campaign sections, crisp category image grids, restrained text links, and a centered brand statement. Use #f6f6f6 only for quiet separators, with #e8e5df and #000000 remaining sparse supporting tones. Keep surfaces flat and avoid decorative shadows or gradients. Give content comfortable breathing room, then make category labels, newsletter controls, and footer links compact and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with left-aligned text overlay and top navigation. | Shop Now link, image-led campaign | uppercase display headline, white overlay text, transparent navigation |
| 2 | category-nav | Four-image category row with labels beneath each image. | visual category browsing, direct category links | four-column image grid, compact uppercase labels |
| 3 | product-showcase | Full-width campaign image with copy aligned over the image. | Shop Now link, campaign discovery | edge-to-edge photography, lower-left text overlay |
| 4 | feature-grid | Two side-by-side promotional image tiles. | separate category paths, Shop Now links | paired image cards, overlay text |
| 5 | product-showcase | Full-bleed product photography with a lower-left text overlay. | Shop Now link, men's collection entry | wide image, uppercase headline, white supporting text |
| 6 | other | Centered, single-column statement on a white background. | brand positioning | center alignment, bold uppercase text |
| 7 | footer | Three-column footer with help, newsletter, and more links; legal row below. | email signup, support links, social links | compact link lists, newsletter input, small legal text |

## Source CSS custom properties (selected)

```css
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #f7f7f8;
--oke-button-backgroundColorHover: #f4f4f6;
--oke-button-backgroundColorActive: #676986;
--oke-button-textColor: #272d45;
--oke-button-textColorHover: #272d45;
--oke-button-textColorActive: #fff;
--oke-button-borderColor: #dbdde4;
--oke-button-borderColorHover: #dbdde4;
--oke-button-borderColorActive: #676986;
--oke-button-borderRadius: 4px;
--oke-button-borderWidth: 1px;
--oke-button-fontWeight: 700;
--oke-button-fontSize: 14px;
--oke-button-fontFamily: inherit;
--oke-border-color: #e5e5eb;
--oke-border-width: 1px;
--oke-text-primaryColor: #2d2a26;
--oke-text-secondaryColor: #676986;
--oke-text-small: 12px;
--oke-text-regular: 14px;
--oke-text-large: 20px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: #e5e5eb;
--oke-avatar-placeholderTextColor: #2c3e50;
--oke-highlightColor: #0e7a82;
--oke-shadingColor: #f7f7f8;
--oke-attributeBar-shadingColor: #9a9db1;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #d3d4dd;
--oke-attributeBar-markerColor: #00caaa;
--oke-filter-backgroundColor: #fff;
--oke-filter-backgroundColorActive: #676986;
--oke-filter-borderColor: #dbdde4;
--oke-filter-borderColorActive: #676986;
--oke-filter-textColor: #2c3e50;
--oke-filter-textColorActive: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/skims-com