# Platformart · Design system migration spec

> Source: https://www.platformart.com  ·  Curated by OpenDesign  ·  en

> A sophisticated example of a premium art gallery site, using a restrained visual language to let the curated photography take center stage.

## 1. Identity DNA

Platformart is designed with the restraint and precision of a **minimalist gallery**. Its system is a framework for presentation, where the architecture of the interface recedes to let the curated content take the foreground.

**One-liner:** A premium art platform showcasing curated objects and artists with a clean, editorial design.
**Keywords:** art · curation · objects · gallery · luxury
**Analogy:** A minimalist, high-end art gallery website

## 2. Color

The palette is a strict, high-contrast monochrome. This chromatic discipline ensures that color is reserved for the artwork itself, never the display.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#AAAAAA` | secondary text |
| `--muted` | `#AAAAAA` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast, monochromatic palette that lets photography dominate.

The governing principle is subtractive: every color choice must serve the content's clarity, not compete with it.

## 3. Typography

The typographic voice is clean and authoritative, anchored by the grotesque-sans **MediumLLWeb**. Uppercase transformation for navigation and labels creates a formal, architectural structure, while generous letter-spacing in the body ensures readability within a wide, open canvas.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -1px | Large hero headlines |
| h1 | 48px | 1.1 | 500 | -0.5px | Section headings |
| body | 15px | 1.2 | 400 | 0.24px | Body text and navigation |

**Type rules:**
- Use MediumLLWeb (grotesque-sans) as the primary typeface
- Apply uppercase transformation to navigation and labels
- Maintain a consistent, wide letter-spacing for body text

## 4. Spacing

All spacing and sizing derive from a consistent 4px base unit, creating a steady, reliable visual rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit for all spacing and sizing

## 5. Surfaces

Depth is suggested through a singular, large-scale shadow, not a hierarchy of subtle elevations. Borders are definitive, 1px solid black lines that frame elements with finality.

- **Radius:** sm 0px · md 4px · lg 0px · pill 999px
- **Shadows:**
  - 0px 2px 80px 1px rgba(0,0,0,0.2)
- **Borders:** 1px solid #000000

## 6. Layout

The layout skeleton is built for imagery. Full-width photography is paired with centered content blocks, creating a clear, focused viewing corridor. A top-aligned navigation bar establishes a constant, unobtrusive anchor.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width imagery with centered content blocks and a top-aligned navigation bar.

## 7. Motion & Interaction

Motion is employed for functional clarity, not decoration. Content arrives with a deliberate fade-in and slide-up, while interactive elements respond with smooth, understated state transitions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fade-in and slide-up for content loading
  - Smooth transitions for hover states on navigation and buttons

- **Hover:** Subtle color change or opacity shift on interactive elements.
- **Click:** Immediate visual feedback with no significant animation.
- **Transition:** Ease-in-out transitions for most state changes.
- **Keyboard:** Standard focus indicators on interactive elements.

## 8. Voice & Don'ts

The editorial voice is sophisticated, understated, and direct. Headlines are short and impactful, and calls to action are concise and action-oriented.

- **Tone:** Sophisticated, understated, and authoritative.
- **Headline style:** Short, impactful, and often uppercase.
- **CTA style:** Direct and action-oriented (e.g., '→ DISCOVER NOW').
- **Avoid:** Don't use excessive exclamation points / Don't use overly casual or slang language / Don't clutter the interface with unnecessary elements

### Don'ts
- ❌ Don't use rounded corners on containers or buttons — screenshot shows sharp, square edges.
- ❌ Don't use multiple brand colors — screenshot shows a strictly monochromatic black/white palette.
- ❌ Don't use serif fonts — screenshot shows a consistent use of MediumLLWeb (grotesque-sans).
- ❌ Don't use drop shadows on all elements — screenshot shows a single, very large shadow on the cookie modal.
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and clear visual hierarchy.
- ❌ Don't use lowercase for navigation — screenshot shows 'PLATFORM:', 'Shop', 'Objects', 'Artists' in a specific mixed-case/uppercase style.

The system deliberately excludes rounded corners, multiple brand colors, and decorative serif typography to maintain its focused, editorial rigor.

## System Prompt (paste into AI tool)

```
This is a premium art platform (platformart.com) with a minimalist, editorial design. The site uses a strict monochromatic palette of black (#000000) and white (#FFFFFF), with a secondary gray (#AAAAAA) for muted text. The primary font is a grotesque sans-serif (MediumLLWeb). Navigation is top-aligned with uppercase labels. The layout is centered on large-scale photography with generous spacing (4px base unit). Key features include full-screen hero images, a sharp-cornered cookie settings modal with a distinct drop shadow, and minimal UI components. Avoid rounded corners, multiple colors, or serif typography. The voice is sophisticated and understated, with direct calls to action.
```