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

# Basic.Space · Design System

> Curated objects, framed with editorial restraint

**Theme:** light · **Industry:** fashion · **Source:** https://basic.space/ · **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 fashion and lifestyle storefront pairs a quiet monochrome interface with richly varied product and campaign photography. Its recommendation rail, editorial collection cards, event banner, and persistent advisor panel make browsing feel curated and conversational.

## North star

Keep the interface quiet and sharply legible so curated product photography—not decorative UI—sets the visual tone.

## Overview

Basic.Space uses a predominantly white canvas and black typography to keep attention on merchandise, with pale gray card fields and fine hairlines separating content without heavy containers. A vivid electric blue announcement strip is the strongest interface accent; blue also appears as a small advisor marker, while the larger blue areas in the screenshot belong to that announcement rather than the product palette. FTBasicSpace is used throughout, with compact, closely tracked navigation and product metadata balanced against oversized campaign lettering. The page is image-led: isolated objects sit in a horizontal recommendation rail, while collection cards and the luxury draw campaign use full-bleed photography with text overlaid. The desktop layout leaves generous white intervals between major modules, then tightens information inside product cards and the fixed right-side advisor panel. Borders and pills define controls; the rest stays notably flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Main page canvas, header and advisor panel backgrounds; also used for reversed campaign text and button labels. |
| Display Ink | `#000000` | `--color-display-ink` | neutral | Primary text, product names, links, footer details, black controls, and strong outlines. |
| Stone Gray | `#cecbcb` | `--color-stone-gray` | surface | Frequently measured product-card surface; in the screenshot, gray card fields sit behind merchandise imagery. |
| Soft Concrete | `#d3d3d3` | `--color-soft-concrete` | surface | Secondary card surface, including measured promotional card backgrounds. |
| Hairline Gray | `#ebebeb` | `--color-hairline-gray` | neutral | Fine dividers around navigation, footer regions, cards, and other restrained boundaries. |
| Muted Silver | `#b5b5b5` | `--color-muted-silver` | semantic | Quiet footer and badge text; also the background of the reversed NEW product badge. |
| Cloud Tint | `#f7f7f7` | `--color-cloud-tint` | surface | Very light card and supporting surface, giving image and text modules subtle separation from white. |
| Soft Black | `#1a1a1a` | `--color-soft-black` | neutral | Secondary interface text, outlined announcement pills, and navigation or advisor details. |
| Slate Copy | `#616161` | `--color-slate-copy` | neutral | Low-emphasis footer and navigation copy. |
| Mist Divider | `#e3e3e3` | `--color-mist-divider` | neutral | Subtle footer and supporting borders; retain as a quiet structural line. |
| Electric Signal | `#0700ff` | `--color-electric-signal` | accent | High-visibility app announcement band and small advisor sparkle; keep limited to interface accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#cecbcb` (Stone Gray) · `--color-surface-2` → `#d3d3d3` (Soft Concrete) · `--color-surface-3` → `#f7f7f7` (Cloud Tint) · `--color-text` → `#000000` (Display Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#b5b5b5` (Muted Silver) · `--color-border` → `#ebebeb` (Hairline Gray) · `--color-accent` → `#0700ff` (Electric Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#cecbcb` | 13.03:1 | AAA |
| `#000000` | `#d3d3d3` | 14.03:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#ffffff` | `#cecbcb` | 1.61:1 | fail |
| `#ffffff` | `#d3d3d3` | 1.5:1 | fail |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#b5b5b5` | `#ffffff` | 2.05:1 | fail |
| `#b5b5b5` | `#cecbcb` | 1.27:1 | fail |
| `#b5b5b5` | `#d3d3d3` | 1.37:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FTBasicSpace | `--font-body` | webfont | 500, 400, 600 | Site-wide display, navigation, product information, controls, and supporting copy. | DM Sans |

- **FTBasicSpace:** Use a clean sans; measured weights are 400, 500, and 600. Keep tracking slightly tight, with mostly natural case.

### Type scale — Perfect Fourth (ratio ≈ 1.3, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.13 | -0.022em | — | FTBasicSpace | Large campaign and primary editorial headings. |
| h2 | 38.5px | 500 | 1.12 | -0.022em | — | FTBasicSpace | Secondary campaign or major section headings. |
| h3 | 20px | 400 | 1.2 | -0.01em | — | FTBasicSpace | Collection titles and prominent module headings. |
| h4 | 18px | 500 | 1.22 | -0.01em | — | FTBasicSpace | Product group or supporting section headings. |
| body | 14px | 500 | 1.2 | -0.01em | — | FTBasicSpace | Product details and standard descriptive copy. |
| caption | 11px | 400 | 1.38 | -0.01em | — | FTBasicSpace | Seller labels, badges, and compact metadata. |
| button | 14px | 400 | 1.25 | -0.01em | — | FTBasicSpace | Pill actions and compact CTA labels. |
| nav | 14px | 400 | 1.2 | -0.01em | — | FTBasicSpace | Header links and interface navigation. |
| link | 14px | 500 | 1.2 | -0.01em | — | FTBasicSpace | Account, seller, and inline navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 24, 32, 48, 112 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width —.

The desktop page uses a wide primary storefront column beside a persistent, narrow advisor panel on the right. Within the storefront, navigation spans the top, followed by a horizontal product rail, a broad campaign image, a three-card collection row, a full-width event image, service-benefit notes, and footer. Content aligns to the main column edges; cards form compact horizontal groups while campaign sections expand to fill the available width. Preserve generous white intervals between major sections and tighter spacing within merchandise metadata. Measurements do not establish a fixed maximum width.

## Shape & elevation

- Radius: button `50%` · input `16px` · media `2px` · xs `2px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadows. Separate white modules through whitespace and fine light-gray borders; product and campaign images provide the visual depth. Use black outlines on selected pill controls and a solid black circular submit control rather than floating shadowed cards.

## Imagery

Use real product and lifestyle photography rather than decorative illustration. Product thumbnails show individual objects against simple or softly colored backdrops; collection cards and the campaign banner use larger atmospheric interiors and editorial scenes. Images are rectangular and closely cropped, with minimal interface framing. Overlay concise white or dark text where contrast permits, and keep image color variation as content rather than extending it into the UI palette.

## Components

### Announcement strip

A saturated #0700ff band above the main navigation, carrying a centered, underlined white app-download link.

### Store navigation

Compact black wordmark and category links on white, with search, account, and cart actions; fine gray rules mark boundaries.

### Recommended product rail

A horizontal carousel of rectangular object photos, concise product names and prices, seller labels, and compact uppercase badges.

### Advisor panel

A persistent right-side white panel with advisor identity, a brief greeting, quick-question outline pills, and a message input.

### Campaign banner

A wide editorial photograph with short overlaid draw messaging and a compact pill-shaped shop action.

### Collection cards

Large rectangular image cards with centered collection titles and small pill CTAs, presented as a horizontal browseable row.

### Event feature

A full-bleed event photograph with oversized white Basic.Space lettering, location and date copy, and a small RSVP pill.

### Footer

A restrained white closing area with service-benefit notes, legal and account links, and newsletter signup.

### Measured component styles

- **Primary button** (“What's happening at Basic.Space NY?”): background #ffffff · text #1a1a1a · border 1px solid #000000 · radius 9999px · padding 4px 12px 6px 12px · 400 14px FTBasicSpace
- **Secondary button**: background #000000 · text #ffffff · radius 9999px · padding 0px · 400 16px FTBasicSpace
- **Link** (“Account”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px FTBasicSpace
- **Input**: background #fafafa · text #000000 · radius 16px · padding 0px 80px 0px 40px · 500 14px FTBasicSpace
- **Card** (“UNDER $1000 Daily Objects Shop”): background #cecbcb · text #ffffff · radius 0px · padding 0px · 400 16px FTBasicSpace
- **Badge** (“REGEM”): background #f1f1f1 · text #000000 · radius 0px · padding 2px 6px 4px 6px · 500 14px FTBasicSpace · uppercase
- **Navigation item** (“Amanda Basic.Space VIC advisor”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px FTBasicSpace

## Do

- Keep the main canvas white and let product imagery provide most color.
- Reserve Electric Signal #0700ff for high-attention interface moments.
- Use fine light-gray rules instead of heavy panels.
- Set navigation and merchandise metadata compactly.
- Use strong editorial photography in campaign and collection modules.
- Keep primary controls rounded and plainly outlined or solid black.

## Don't

- Do not apply the blue accent broadly to cards or product imagery.
- Do not add shadows to otherwise flat content modules.
- Do not wrap every section in a visible container.
- Do not crowd major campaign sections together.
- Do not replace product photography with decorative gradients.
- Do not make badges or metadata visually louder than the products.

## Agent prompt

Build a new Basic.Space-style storefront page with a quiet white canvas (#ffffff) and crisp black text (#000000). Use Electric Signal (#0700ff) sparingly for a top announcement or a small interface marker, not as a broad background theme. Set a clean sans-serif close to DM Sans, with compact, slightly tight navigation and product metadata, and larger restrained editorial headings. Organize the page into clear image-led modules: a product rail, campaign feature, collection cards, and a simple footer. Keep merchandise photography rectangular and prominent; use white space and Hairline Gray (#ebebeb) rules for separation. Controls should be simple black or outlined pills. Maintain a persistent advisor or utility area where appropriate, but keep its text and controls secondary to browsing.

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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