Bone White
#ffffffPage background, card surfaces, negative space
PLATFORM
platformart.comWebsite preview
The design language
PLATFORM is a monochromatic gallery vitrine: pure white canvas, pure black type, and a single typographic voice that lets the artworks carry all the color. The interface is editorial rather than commercial — generous negative space, hairline borders, and a compact 15px body size that keeps the catalog dense without feeling utilitarian. Every element is reduced to its essential geometric form: no shadows, no rounded corners, no decorative gradients. Visual weight comes from typography alone, with the display size of 72px and a restrained 1.00 line-height creating the slow, deliberate cadence of a printed exhibition catalog.
Color palette
neutral
Lamp Black
#000000Primary text, card and nav borders, link color — the only structural color in the system
Ash Gray
#ddddddHairline dividers, subtle surface separation
Concrete Gray
#ccccccSecondary borders, input outlines, disabled states
Smoke Gray
#b3b3b3Muted helper text, metadata captions, placeholder labels
Graphite
#808080Secondary captions, timestamps, de-emphasized metadata
Iron Gray
#aaaaaaTertiary captions, breadcrumb separators, fine print
Typography
Type scale
Minor Third (1.2) · 12px basedisplay
72px · 500 · 1 · 0.02px trackingThe quick brown fox jumps
heading
48px · 500 · 1.15 · 0.02px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.15 · 0.01px trackingThe quick brown fox jumps
body-sm
15px · 500 · 1.2 · 0.01px trackingThe quick brown fox jumps
caption
12px · 500 · 1.2 · 0.01px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
MediumLLWeb
- Weights
- 400, 500
- Sizes
- 12px, 15px, 20px, 48px, 72px
- Line height
- 1.00, 1.15, 1.20
- Letter spacing
- 0.01em at 20px and below, 0.02em at 48px and above
- Fallback
- Söhne, Inter, Neue Haas Grotesk
- Features
- "tnum" on for price alignment in card metadata
All text across the site — UI, body, and display. A single neo-grotesque custom face from Production Type carrying every typographic role. Weight 400 is the default for body and navigation; weight 500 is reserved for artist names, prices, and emphasis in card metadata. Display sizes (48–72px) use the same 400 weight with tight line-height (1.00–1.15) to create the measured, catalog-page cadence.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1280px
- Section gap
- 72px
- Card padding
- 30px
- Element gap
- 10px
Border radius
tags
0pxcards
0pxbadges
0pxinputs
0pxbuttons
0pxSpacing scale
1px2px3px4px5px6px7px8px9px10px11px13px17px18px20px30px36px48px51px72px122px198px262pxGuidelines
Do
- Use only #000000 for all text, borders, and interactive elements — never introduce chromatic colors for UI purposes
- Set all border-radius to 0px on buttons, cards, inputs, badges, and tags — sharp corners are the signature
- Set MediumLLWeb 400 as the default weight for all body and heading text; reserve 500 exclusively for labels, artist names, and prices
- Use 1px #000000 borders for card outlines, nav separation, and section dividers — never thicker
- Keep the type scale to five sizes: 12, 15, 20, 48, 72px — resist adding intermediate steps
- Use tabular numerals (tnum) for all prices and numeric metadata to ensure column alignment in card grids
- Maintain a max-width of ~1280px with generous side margins so the catalog breathes like a gallery wall
Don’t
- Do not add rounded corners to any element — the sharp-edge aesthetic is load-bearing for the gallery identity
- Do not introduce shadows, glows, or blur effects — depth comes from borders and band color shifts only
- Do not use color for hierarchy — rely solely on weight (400 vs 500) and size (12–72px)
- Do not use gradient backgrounds, even subtle ones — the system is strictly binary black/white
- Do not use 13–17px body sizes — the compact 15px at 1.20 line-height is the intentional rhythm
- Do not center body copy inside cards beyond metadata — long-form text should be left-aligned with a ~640px measure
- Do not add colored badges, tags, or status pills — labels are plain uppercase 12px 500 text only
Components
Top Navigation Bar
Primary site headerHorizontal bar with flat 0px radius. Left: 'PLATFORM:' label in 12px MediumLLWeb 500 uppercase, followed by Shop / Objects / Artists links at 15px weight 400. Right: region selector (US), account icon, saved items, search. 1px solid #000000 bottom border separates nav from content. Padding: 6px vertical, 20–40px horizontal.
Hero Spotlight Banner
Full-width editorial featureFull-bleed dark photographic image filling the viewport. Centered overlay text: 'SPOTLIGHT:' at 48px weight 400 followed by artist name at 72px weight 400, both #ffffff on the darkened photo. Subtext at 15px centered below, plus an '› Explore now' link. No buttons, no card chrome — pure type on image.
Section Header Band
Zone introduction blockHorizontal band with #dddddd background or hairline border. Left column: section title in 12px 500 uppercase tracking 0.02em. Center: descriptive paragraph at 15px weight 400. Right: '› Browse artworks' text link. 1px #000000 bottom border divides band from content grid.
Artwork Card
Individual artwork listingVertical card with 0px radius and no shadow. 1px #000000 border. Artwork image fills the card width with a 1:1 or 3:4 aspect ratio. Below image: artist name at 12px 500 uppercase centered, work title and year at 15px 400, medium description at 15px 400, and price at 12px 500 — all centered. A small star/save icon sits at the bottom. Card padding: ~20px below image.
Artwork Grid
Catalog collection layout4-column grid on desktop, 2-column on tablet, 1-column on mobile. Equal-width columns with 20–30px gutters. Each card occupies one grid cell with consistent image-to-text ratio across the row.
Text Link
Inline navigation and call-to-actionPlain underlined #000000 text at 15px weight 400. Leading chevron '›' character for directional links like 'Explore now', 'Browse artworks', 'View all'. No button background, no color change on hover — underline thickens or weight shifts to 500.
Ghost Icon Button
Utility actions in nav and cardsIcon-only button with 0px radius, no background, no border. Uses #000000 stroke/fill for account, saved items, search, and save-to-collection icons. 4–6px padding around icon.
Body Text Block
Editorial paragraphs and descriptions15px MediumLLWeb weight 400 at 1.20 line-height. #000000 color on #ffffff background. Max-width ~640px for readable measure. Used for feature descriptions, artist bios, and zone intros.
Metadata Caption
Artist, title, year, medium, priceCentered stack under each artwork: artist name in 12px 500 uppercase, title and year in 15px 400, price in 12px 500. Tabular numerals enabled for price alignment. All #000000.
Footer
Site footer with links and infoTop 1px #000000 border, #ffffff background. Multi-column link list at 15px weight 400, grouped by category. Bottom row: copyright and legal links in 12px. Flat, no decoration.
Search Input
Nav search fieldTransparent background, 1px #000000 bottom border only (no full box). Placeholder text at 15px in #b3b3b3. No border-radius. Search icon inline at right.
Surfaces & elevation
Level 1
Bone White
#ffffffBase page canvas and card backgrounds
Level 2
Ash Gray
#ddddddSubtle surface tint for zone bands and dividers
The design system deliberately avoids shadows. All depth and separation is achieved through 1px hairline borders in #000000 or #dddddd, plus background color shifts between white and light gray bands. There is no floating, no blurring, no z-axis — the interface reads as a flat printed page pinned to the wall.
Layout & imagery
Layout
Full-bleed hero section with centered overlay type, followed by a gray zone-band header introducing each content section, then a 4-column card grid of artworks. The page is contained within a ~1280px max-width for the card grid and text blocks, but the hero and section bands stretch edge-to-edge. Section rhythm is consistent: every zone opens with a hairline-bordered header band (gray bg, left-aligned label, centered description, right-aligned link), followed by the card grid. Navigation is a minimal top bar with no sticky behavior. No sidebars, no breadcrumbs within the main flow — the layout is strictly vertical: nav → hero → zone band → grid → zone band → grid → footer.
Imagery
Imagery is exclusively fine-art photography: paintings, sculptures, and mixed-media works presented as straight product crops on white. No lifestyle context, no staged room shots, no human models interacting with the art. Each artwork fills its card frame edge-to-edge, treated as a precious object isolated for inspection. The hero image is a full-bleed atmospheric photograph — dark, slightly blurred, with dramatic light — that functions as an editorial mood-setter rather than a product shot. No illustrations, no icons beyond minimal functional glyphs, no decorative graphics.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #000000 - muted text: #b3b3b3 - divider: #dddddd - primary action: no distinct CTA color **3–5 Example Component Prompts** 1. *Artwork Card*: 0px radius, 1px solid #000000 border, no shadow. Artwork image fills card width edge-to-edge. Below: artist name centered at 12px MediumLLWeb weight 500 uppercase, title and year at 15px weight 400, medium at 15px weight 400, price at 12px weight 500. All text #000000 on #ffffff. 20px padding below image. 2. *Hero Spotlight Banner*: Full-bleed dark photographic image, 100vh. Centered overlay: 'SPOTLIGHT:' at 48px MediumLLWeb 400 #ffffff, artist name at 72px weight 400 #ffffff, line-height 1.00, letter-spacing 0.02em. Below: 15px descriptive subtext #ffffff, then '› Explore now' text link. 3. *Section Header Band*: #dddddd background, 1px solid #000000 bottom border. Left: section label at 12px weight 500 uppercase. Center: description at 15px weight 400. Right: '› Browse all' underlined text link at 15px weight 400. 20px vertical padding. 4. *Artwork Grid*: 4 equal columns, 24px gap, max-width 1280px centered. Each cell is an Artwork Card. Grid sits directly below the Section Header Band with no additional spacing. 5. *Top Navigation*: 0px radius, #ffffff background, 1px solid #000000 bottom border. Left: 'PLATFORM:' at 12px weight 500 uppercase. Nav links (Shop, Objects, Artists) at 15px weight 400 #000000. Right: region selector and icon buttons (account, saved, search) as 0px ghost buttons. 6px vertical padding.
Similar brands
David Zwirner
Same monochrome gallery-catalogue approach with white canvas, black type, and artwork presented as unframed product crops in a dense grid
Hauser & Wirth
Editorial art-world aesthetic with hairline borders, zero shadows, sharp corners, and a single neo-grotesque typeface carrying all hierarchy
The MoMA Store
Minimalist art-retail layout with centered metadata stacks under each artwork, 1px black card borders, and no decorative chrome
Pace Gallery
Full-bleed dark hero photography, restrained black-and-white system, and compact body type that lets the catalog artwork dominate
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
