---
version: alpha
name: Wall of Art
description: Scandinavian gallery minimalism — a stark white canvas where curated art prints carry the color. Near-black ink, an understated grotesque sans, generous editorial whitespace, hairline neutral borders, and a single restrained beige warmth that lets the artwork speak.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#faf8f4"
  surface-sand: "#f4efe7"
  ink: "#1a1a1a"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#5c5650"
  ink-muted: "#8a847c"

  # Warm neutral accents (the lone color move)
  warm-beige: "#e7ddcf"
  warm-clay: "#c9b9a3"

  # Interactive / primary
  primary: "#1a1a1a"
  primary-hover: "#000000"
  link: "#1a1a1a"
  sale: "#9a3b2e"

  # Borders + dividers
  border: "#e6e2db"
  border-strong: "#cfc9bf"
  border-input: "#d4cfc6"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1.0px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.6px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.3px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.1px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  price:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.4px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.4px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  # Primary CTA — solid near-black
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — outlined
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Add-to-cart on product card (full width)
  button-cart:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  # Product card — image-forward, minimal chrome
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Soft sand feature card
  card-feature:
    backgroundColor: "{colors.surface-sand}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 40px
    borderColor: "{colors.border}"

  # Size selector chip
  chip-size:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 8px 14px
    borderColor: "{colors.border-strong}"
  chip-size-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 8px 14px
    borderColor: "{colors.ink}"

  # Sale price badge
  badge-sale:
    backgroundColor: "{colors.surface-sand}"
    textColor: "{colors.sale}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 8px

  # Eyebrow / collection label
  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow}"

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.border-input}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 18px 32px
    borderColor: "{colors.border}"
---

# Wall of Art Design System

## Overview

Wall of Art is a Swedish art-print retailer whose interface follows one governing instinct: the screen is a gallery wall, and the art is the only thing allowed to shout. Everything else recedes. The canvas is pure white (`{colors.background}`), the type is a quiet grotesque sans in near-black (`{colors.ink}`), and the chrome is built from hairline neutral borders rather than color. The result is the digital equivalent of a well-lit Scandinavian gallery — empty space, careful framing, and prints that carry every drop of warmth and color.

The palette is almost entirely achromatic. The one indulgence is a family of warm, sandy neutrals (`{colors.surface-sand}`, `{colors.warm-beige}`, `{colors.warm-clay}`) borrowed from the paper-and-plaster tones of a curated room. These appear only as occasional soft-fill feature panels — never on functional chrome — keeping the warmth atmospheric. The tagline "Genomtänkt design för kreativa rum" (considered design for creative spaces) is the design philosophy applied to itself: nothing is accidental, nothing is loud.

Typographically the system is restrained to the point of severity. A single grotesque sans runs the whole hierarchy at modest weights — 400 for reading, 500 for emphasis — with gently negative tracking on large headings and a wide, letter-spaced uppercase eyebrow as the only typographic flourish. There is no display drama; the editorial tone comes from scale and air, not from font personality.

Geometry is squared-off. Buttons, product cards, and size chips are right-angled (`{rounded.none}`) — the hard rectangle of a framed print and a gallery label. The only softening appears at small radii on sand-tinted panels. Borders are 1px and quiet; interaction is communicated by fill inversion (a chip or button flips to solid ink when active) rather than by shadow or color.

**Key Characteristics:**
- Pure white gallery canvas with near-black ink — color comes from the artwork, not the UI
- A single grotesque sans across the whole hierarchy, weights 400/500 only
- Warm sandy neutrals (`{colors.surface-sand}`) as occasional atmospheric fills, never on chrome
- Squared-off geometry (`{rounded.none}`) — framed-print rectangles, gallery-label chips
- Hairline neutral borders instead of shadows for structure
- Interaction by fill inversion (chip/button flips to solid ink when active)
- Wide letter-spaced uppercase eyebrows as the lone typographic flourish
- Generous editorial whitespace and large vertical rhythm between sections

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page background, product surfaces, card fills — the gallery wall.
- **Soft White** (`{colors.surface-soft}`): Barely-warm section tint for subtle separation.
- **Sand** (`{colors.surface-sand}`): Warm fill for feature panels and editorial blocks.
- **Ink** (`{colors.ink}`): Primary text, headings, buttons. Near-black, never pure for a softer gallery feel.
- **Pure Black** (`{colors.ink-pure}`): Logo and maximum-contrast hover states.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrows, captions, metadata, placeholders.

### Warm Neutrals
- **Warm Beige** (`{colors.warm-beige}`): Atmospheric accent on soft panels.
- **Warm Clay** (`{colors.warm-clay}`): Deeper warm neutral for divider rules and details.

### Interactive
- **Primary** (`{colors.primary}`): Solid CTA / add-to-cart fill.
- **Primary Hover** (`{colors.primary-hover}`): Pure black on hover.
- **Link** (`{colors.link}`): Inline links — ink with underline on hover.
- **Sale** (`{colors.sale}`): Muted terracotta for reduced prices.

### Borders
- **Border** (`{colors.border}`): Default hairline divider and card outline.
- **Border Strong** (`{colors.border-strong}`): Size chips, emphasized rules.
- **Border Input** (`{colors.border-input}`): Form field outlines.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif` — a neutral grotesque standing in for the site's clean Scandinavian sans.
- **OpenType Features**: tabular numbers on prices for aligned krona figures.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Homepage hero statement |
| `section-heading` | Collection / section titles |
| `sub-heading` | Sub-sections, product titles on PDP |
| `card-title` | Product card name |
| `body-large` | Editorial intro copy |
| `body` | Standard reading text |
| `body-small` | Size labels, secondary UI |
| `price` | Price figures |
| `button-ui` | Buttons, CTAs |
| `nav-link` | Top navigation |
| `eyebrow` | Wide uppercase collection labels |
| `caption` | Metadata, fine print |

### Principles
- **Two weights, strict roles**: 400 for reading, 500 for emphasis and interactive labels. No bold — heaviness would compete with the art.
- **Air over ornament**: Editorial feel comes from scale and whitespace, not from font character.
- **Letter-spaced eyebrows**: Uppercase eyebrows at +1.4px tracking are the single deliberate typographic gesture.
- **Negative tracking scales with size**: -1.0px at hero, easing to 0 by body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. Generous large-end steps (`{spacing.4xl}`, `{spacing.5xl}`) drive the gallery whitespace between sections.

### Grid & Container
- Max content width: approximately 1440px with comfortable side gutters
- Hero: full-bleed imagery or centered single statement over white
- Product grids: 2–4 column, edge-to-edge images with minimal gutters
- Editorial blocks: asymmetric image + text pairings on sand panels

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical padding (`{spacing.4xl}`–`{spacing.5xl}`) frames each section like a hung work.
- **Image-forward**: Product imagery sits nearly flush; chrome is whisper-thin so nothing crowds the art.
- **Quiet separation**: Sections divide by whitespace and hairline borders, not by background color shifts.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page, text, product imagery |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, inputs |
| Strong Rule (Level 1b) | `1px solid {colors.border-strong}` | Size chips, emphasized rules |
| Inverted (Active) | Solid `{colors.ink}` fill | Active chips, hovered buttons |

**Depth Philosophy**: Wall of Art uses essentially no shadow. Structure is communicated through 1px borders and fill inversion. This keeps the interface flat and print-like — depth is reserved for the photographs of framed art themselves, not the UI around them.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, chips — the framed-print rectangle |
| `xs` | 2px | Sale badges, tiny tags |
| `sm` | 4px | Sand feature panels |
| `md` | 6px | Occasional soft containers |
| `lg` | 10px | Large soft surfaces (rare) |
| `pill` | 9999px | Reserved — round tags / avatars only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid near-black, white text, squared corners. The default CTA.
- **`button-secondary`** — Outlined; inverts to solid ink on hover.
- **`button-cart`** — Full-width add-to-cart in solid ink on the product page.

### Cards
- **`card`** — Product card: image-forward, no fill, hairline border, squared. Title + price below.
- **`card-feature`** — Sand-filled editorial panel with generous padding.

### Selectors & Badges
- **`chip-size`** — Squared size selector (21×30 → 100×140 cm); inverts to solid ink when active.
- **`badge-sale`** — Sand background, terracotta text for reduced prices.

### Inputs & Navigation
- **`input`** — Squared, hairline border, white fill.
- **`nav-bar`** — White header, quiet nav links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas pure white — let the artwork carry the color
- Use squared corners (`{rounded.none}`) on buttons, cards, and chips
- Communicate active/hover state by inverting to solid ink fill
- Use hairline borders for structure instead of shadows
- Reserve warm sand tones for atmospheric feature panels only
- Keep type to weights 400 and 500
- Use letter-spaced uppercase eyebrows for collection labels

### Don't
- Don't add colored UI chrome that competes with the prints
- Don't use heavy shadows or elevation — the system is flat
- Don't round button or card corners — they are framed-print rectangles
- Don't use bold (700) weights anywhere
- Don't put the warm beige/clay tones on functional buttons or links
- Don't crowd product imagery with borders or labels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column products, stacked nav (hamburger) |
| Tablet | 600–1024px | 2-column product grid |
| Desktop | 1024–1440px | 3–4 column grid, full nav |
| Large | >1440px | Centered, generous gutters |

### Touch Targets
- Buttons use comfortable vertical padding (12–14px)
- Size chips sized for tap with 8×14px padding
- Nav links spaced for touch on collapse

### Collapsing Strategy
- Product grid: 4-column → 2-column → single column
- Navigation: horizontal links → hamburger drawer
- Hero: side-by-side image+text → stacked
- Section spacing: 140px → ~64px on mobile

### Image Behavior
- Product images maintain aspect ratio and near-flush framing at all sizes
- Editorial imagery scales full-bleed on mobile
- Borders stay 1px regardless of viewport

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wall of Art. Brand names and trademarks belong to their respective owners.