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

# entire studios · Design System

> Quiet utility, framed like a fashion editorial

**Theme:** light · **Industry:** fashion · **Source:** https://www.entirestudios.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._

A restrained fashion storefront pairs a pale, cool canvas with cinematic campaign imagery and tightly edited product rows. Monospaced typography, centered overlays, and outlined pill CTAs keep the presentation direct and editorial.

## North star

Keep the interface quiet and flat so cinematic fashion imagery and clean product cutouts carry the visual emphasis.

## Overview

The page’s visual identity rests on a cool pale green-gray canvas (#e7ecea), used consistently behind navigation and product displays. Near-black (#000000) provides the primary text and dark outlined controls, while white (#ffffff) is reserved for light text and borders over dark campaign footage; the measured screenshot’s other dark and earthy tones belong to photography, not the interface palette. Space Mono gives navigation, product links, captions, and oversized campaign headings a precise, utilitarian voice. Full-bleed video heroes alternate with compact two-column lifestyle imagery and horizontal product showcases, producing a fashion-editorial rhythm without decorative section cards. Campaign titles and CTAs sit centered over image, while product imagery stays cleanly isolated against the pale canvas. Spacing is compact and the page is intentionally flat: thin outlines, pill-shaped campaign buttons, and little to no elevation keep attention on garments and motion.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#e7ecea` | `--color-gallery-mist` | surface | Persistent page canvas and pale backdrop for navigation and isolated product showcases. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary text, product links, and dark outlined controls against the pale canvas. |
| Film White | `#ffffff` | `--color-film-white` | neutral | Light campaign-overlay text and thin CTA borders over dark imagery. |

### Semantic aliases

`--color-canvas` → `#e7ecea` (Gallery Mist) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Film White) · `--color-text-subtle` → `#e7ecea` (Gallery Mist) · `--color-border` → `#ffffff` (Film White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e7ecea` | 17.58:1 | AAA |
| `#ffffff` | `#e7ecea` | 1.19:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Space Mono | `--font-mono` | webfont | 400, 300 | Site-wide navigation, links, captions, buttons, and campaign display headings. | IBM Plex Mono |

- **Space Mono:** Use measured light 300 for display headings and 400 for interface text; display headings are uppercase, while captions and buttons are lowercase with subtly expanded tracking.

### Type scale — Custom (ratio ≈ 4.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | 0 | uppercase | Space Mono | Large uppercase campaign titles centered over full-bleed video. |
| body | 16px | 400 | 1.5 | 0 | — | Space Mono | General interface and supporting text, including product and navigation links. |
| caption | 12px | 400 | 1.33 | 0.05em | lowercase | Space Mono | Small lowercase labels and compact utility text. |
| button | 12px | 400 | 1.33 | 0.05em | lowercase | Space Mono | Lowercase labels inside outlined campaign CTA pills. |
| code | 16px | 400 | 1.5 | 0 | — | Space Mono | Monospaced text style; no distinct code block is evident. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 6, 8, 10, 12, 14, 16, 20, 36, 40 px.
- Section rhythm 36px · element gap 12px · card padding — · max content width 648px.

The page is a full-width vertical sequence, with a slim announcement strip and navigation above broad campaign panels. Full-bleed video heroes alternate with two-column lifestyle imagery and horizontal product showcases, some arranged as dense multi-item rows. Hero titles and CTAs are centered; product labels sit close to the imagery. The measured content max width is 648px, with compact spacing and a recurring section gap. Keep the interface sparse and let image panels span the available viewport rather than enclosing them in cards.

## Shape & elevation

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

The interface is predominantly flat, with no measured shadows or gradients. Separate regions through changes in imagery and the pale canvas rather than elevated cards. Campaign CTAs use thin outlines and fully rounded ends; dark text and borders provide definition on the light background, with white outlines over dark footage.

## Imagery

Fashion photography and campaign video dominate the page: close-up product details, models in motion, and editorial scenes with dark, cinematic grading. Hero footage fills the width with centered white text, while lifestyle photos appear side by side. Product cutouts are isolated against the pale canvas in horizontal showcases. Colors such as orange, denim blue, and olive appear within the imagery, not as added UI palette colors.

## Components

### Announcement strip

A narrow black top band carries a centered, small white lowercase campaign link.

### Utility navigation

Pale canvas bar with shop at left, centered wordmark, and compact search, info, currency, and bag links at right.

### Campaign hero

Full-bleed video with a centered uppercase Space Mono title and a thin white outlined pill CTA.

### Category image pair

Two adjacent lifestyle images with small lowercase category links positioned close to their respective panels.

### Product showcase

A horizontal row of isolated garment or accessory cutouts on the pale canvas, followed by a centered outlined shop CTA.

### Campaign CTA pill

Lowercase 12px Space Mono text in a transparent pill with 1px outline, 24px radius, and 14px 20px padding.

### Measured component styles

- **Primary button** (“shop the new collection”): transparent background · text #ffffff · border 1px solid #ffffff · radius 24px · padding 14px 20px · 400 12px Space Mono · lowercase
- **Link** (“FW26. shop the new collection”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Space Mono

## Do

- Use #e7ecea as the consistent interface and product-display canvas.
- Keep black interface text and links crisp against the pale background.
- Use white overlay text and outlines only where dark imagery supports contrast.
- Set navigation, labels, and CTAs in Space Mono or a close monospace substitute.
- Alternate full-bleed campaign footage with clean product showcases.
- Center campaign titles and their primary CTAs over hero media.

## Don't

- Do not introduce extra interface colors from the photographs.
- Do not add gradients, shadows, or raised card treatments.
- Do not place product cutouts inside decorative card containers.
- Do not use oversized rounded panels; reserve pill rounding for campaign CTAs.
- Do not crowd campaign imagery with extra copy or controls.
- Do not replace the compact editorial rhythm with generous, generic landing-page spacing.

## Agent prompt

Build a fashion-store page with the restrained editorial treatment of entire studios. Use Gallery Mist (#e7ecea) as the persistent canvas, Studio Ink (#000000) for interface text and dark outlines, and Film White (#ffffff) for readable overlays on dark photography. Set the interface in Space Mono or IBM Plex Mono; keep utility labels and CTA text lowercase, and campaign titles uppercase. Place a compact announcement strip above a slim navigation bar. Alternate full-bleed, cinematic video heroes with side-by-side lifestyle imagery and horizontal product cutouts on the pale canvas. Center hero titles and outlined pill CTAs over media. Keep the layout flat, compact, and full-width; avoid shadows, gradients, and extra colors outside the photography. Let the garments and campaign footage provide the visual richness.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign video with centered heading and CTA. | campaign link, primary shop CTA | uppercase overlay title, white outlined pill |
| 2 | feature-split | Two side-by-side lifestyle image panels. | category links | paired photography, small lowercase labels |
| 3 | product-showcase | Horizontal multi-item product row on the pale canvas. | browse collaboration products | isolated product cutouts, centered outlined CTA |
| 4 | hero | Full-bleed video with centered campaign title and CTA. | explore seasonal collection | uppercase title, white outlined pill |
| 5 | product-showcase | Horizontal row of isolated looks on the pale canvas. | browse seasonal products | model cutouts, centered outlined CTA |
| 6 | feature-split | Two adjacent image-led category panels. | category links | split photography, small lowercase labels |
| 7 | hero | Full-bleed video with centered title and shop CTA. | shop new arrivals | uppercase title, white outlined pill |
| 8 | product-showcase | Horizontal product row on the pale canvas. | browse category products | isolated garment cutouts, centered outlined CTA |

## Source CSS custom properties (selected)

```css
--section-bg: #e7ecea;
--swiper-theme-color: #007aff;
```

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