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

# PLATFORM · Design System

> Art-led commerce with a quiet gallery sensibility.

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

PLATFORM pairs artist-led releases and collectible goods with a restrained, gallery-like storefront. Large immersive campaign imagery gives way to crisp product grids, a centered artist schedule, and a compact newsletter and footer.

## North star

Keep the interface nearly colorless and let immersive artist imagery and collectible objects carry the visual emphasis.

## Overview

The visual identity rests on a white canvas and black typography, keeping attention on artwork and artist campaigns rather than decorative interface color. The first viewport is an edge-to-edge photographic hero with white campaign lettering and a subtle dark fade at the bottom for legibility; the navigation sits in a compact white floating bar. Below, small editorial headings and explanatory copy introduce a horizontal product feed, followed by a tall, centered season schedule and a collaboration merchandise grid. MediumLLWeb is used consistently across navigation, product metadata, headings, and calls to action, with larger display and heading styles reserved for campaign and section statements. Product imagery supplies the page’s changing color. Whitespace and section breaks keep the long page calm, while thin black outlines distinguish outlined actions and light gray rules organize the closing newsletter and footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, navigation bar, and the clean background around product grids and schedule. |
| Ink | `#000000` | `--color-ink` | brand | Primary typography, navigation, links, icons, and fine outlines on outlined buttons. |
| Fade Charcoal | `#363636` | `--color-fade-charcoal` | semantic | Dark end of the measured hero-section gradient, supporting white campaign copy over photography. |
| Rule Gray | `#dddddd` | `--color-rule-gray` | neutral | Thin footer divider and restrained structural rules near the newsletter and page bottom. |
| Shadow Gray | `#616161` | `--color-shadow-gray` | semantic | Lighter stop in the measured section gradient; use as image-overlay transition, not a standalone brand fill. |
| Caption Gray | `#aaaaaa` | `--color-caption-gray` | neutral | Muted secondary text, such as low-emphasis product or supporting metadata. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#aaaaaa` (Caption Gray) · `--color-border` → `#dddddd` (Rule Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#aaaaaa` | `#ffffff` | 2.32:1 | fail |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.79) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.62) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MediumLLWeb | `--font-body` | webfont | 500, 400 | Single sitewide sans-serif for display, headings, body copy, navigation, captions, links, and buttons. | Inter |

- **MediumLLWeb:** Measured weights 400 and 500. Headings are clean and unembellished; select compact uppercase labels, while small links and captions use subtle positive tracking.

### Type scale — Custom (ratio ≈ 1.897, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | 0 | — | MediumLLWeb | Oversized campaign headline over the full-bleed hero image. |
| h1 | 48px | 500 | 1.2 | 0 | — | MediumLLWeb | Primary section or campaign heading where a prominent standalone title is needed. |
| body | 20px | 500 | 1.2 | 0 | — | MediumLLWeb | Editorial descriptions and concise section introductions. |
| caption | 12px | 500 | 1.2 | 0.02em | — | MediumLLWeb | Product names, artist attribution, dates, and supporting metadata. |
| button | 0px | 400 | normal | 0 | — | MediumLLWeb | Compact action labels, often outlined; some labels use uppercase. |
| nav | 15px | 500 | 1.2 | 0 | — | MediumLLWeb | Top-level shop navigation and account or utility controls. |
| link | 12px | 500 | 1.2 | 0.02em | — | MediumLLWeb | Product links and small secondary navigation actions. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 4, 6, 8, 9, 10, 18, 20, 30, 36, 46, 72 px.
- Section rhythm 36px · element gap 4px · card padding — · max content width 1368px.

A broad, centered desktop storefront with a measured page maximum width of 1368px and a compact density. The opening campaign uses full-bleed media; the navigation floats centered over it. Subsequent sections return to white, with a wide multi-column product feed, a narrow centered season list, then a multi-column collaboration grid. Headings align to the start of their content areas, while the schedule is deliberately centered. Section rhythm uses measured 36px gaps, with a larger visual pause around the schedule.

## Shape & elevation

- Shadow `xl` (nav): `rgba(0, 0, 0, 0.2) 0px 2px 80px 1px`
- Motion: standard transition `0.9s ease-out` on interactive elements.

Most of the page is flat: white canvas, black text, and no card shadows or rounded surfaces. Thin black outlines mark selected actions, while a light gray hairline divides the footer. The centered navigation is the notable elevated layer, using a soft, broad shadow; hero text layers directly over its image.

## Imagery

Photography and artwork are the main source of color: the hero shows an artist in a studio, framed as a wide, immersive campaign image with centered white headline and supporting copy. Product cards use isolated artwork or merchandise images against pale backgrounds, with small captions below. Keep imagery crisp and largely untreated; use a subtle dark-to-transparent lower fade only where white hero text needs contrast.

## Components

### Floating navigation

Compact white navigation bar centered over the hero, with black 15px MediumLLWeb labels and utility icons; measured nav shadow adds gentle separation.

### Campaign hero

Full-bleed artist photography with a large white uppercase campaign title, short supporting copy, read-on link, and understated slide progress line.

### Latest artwork feed

Editorial introduction paired with a horizontally arranged product listing; each artwork has an image, compact artist and work details, price, and small actions.

### Season schedule

Single-column centered sequence of season, artist names, and dates, presented as large black text with generous surrounding white space.

### Collaboration product grid

Multi-column merchandise showcase with isolated product imagery, centered captions, artist attribution, material details, and price.

### Newsletter and footer

Compact email signup and outlined SIGN UP action above a thin divider, followed by grouped store, account, and policy links.

### Measured component styles

- **Primary button** (“ADD TO WAITLIST”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px 6px · 500 10px MediumLLWeb · uppercase
- **Link** (“LEON XU It's so easy to love you, 2026 A”): transparent background · text #000000 · radius 0px · padding 0px · 500 12px MediumLLWeb
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 0px 1px 6px · 500 15px MediumLLWeb
- **Navigation item** (“PLATFORM: Shop AURA 04: FRANCISCO TAVONI”): transparent background · text #000000 · radius 0px · padding 0px · 500 15px MediumLLWeb · shadow rgba(0, 0, 0, 0.2) 0px 2px 80px 1px

## Do

- Keep the page canvas white and interface text black.
- Let campaign and product imagery supply most of the color.
- Use full-bleed photography for the lead artist story.
- Keep product metadata small and visually secondary.
- Center the seasonal release list with ample surrounding whitespace.
- Use thin outlines and rules rather than filled decoration.

## Don't

- Do not add a bright brand accent absent from the measured interface.
- Do not place heavy card shadows behind product listings.
- Do not round buttons or cards; measured corners are square.
- Do not let navigation compete with the hero headline.
- Do not crowd the centered schedule with extra interface elements.
- Do not use illustration colors as sitewide interface colors.

## Agent prompt

Build a new PLATFORM-style art commerce page with a gallery-like, editorial restraint. Use Gallery White (#ffffff) as the canvas and Ink (#000000) for type, links, and fine button outlines. Use Rule Gray (#dddddd) only for subtle footer dividers and Caption Gray (#aaaaaa) for low-priority metadata. Keep the navigation compact and centered, floating over a full-bleed artist campaign image; place a large, clean white headline over the image and add a restrained dark fade for contrast. Below, organize artwork and merchandise into spacious multi-column image grids with small, precise captions. Use a centered release schedule as a typographic pause between commerce sections. Apply one consistent sans-serif similar to Inter, mostly regular or medium weight. Favor flat surfaces, square corners, thin rules, and generous white space; let the artwork provide color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign photography with centered floating navigation and centered overlay copy. | campaign link, carousel progress indicator | immersive image, white headline overlay, dark lower fade, floating navigation |
| 2 | product-grid | Editorial intro across the top, followed by a wide horizontal artwork listing. | browse artworks link, save item action, waitlist action | multi-column product cards, artwork thumbnails, compact metadata |
| 3 | timeline | Single centered vertical sequence of season label, artist names, and release dates. | release-date scan | centered typography, large whitespace, black text on white |
| 4 | product-grid | Start-aligned section heading above a multi-column merchandise grid. | product discovery, item detail links | isolated product images, centered product captions, compact metadata |
| 5 | newsletter | Compact two-column signup area followed by divided, horizontally grouped footer links. | email signup, account and policy navigation | email field, outlined signup button, thin divider, small text links |

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