---
version: alpha
name: "Artek"
description: "Finnish modernist restraint — pure black-on-white binary with a proprietary Futura variant, hard-edged geometry, and furniture photography as the sole visual flourish"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f7f7"              # near-white used in button and section backgrounds
  surface-hover: "#e3e2e1"        # button hover state from extracted interaction data /* was rgb(227,226,225) — Google format requires hex */

  # Text / ink
  ink: "#000000"
  ink-muted: "#919191"            # secondary text, captions, muted link states
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent — Artek is binary; black carries all primary roles
  primary: "#000000"
  on-primary: "#ffffff"

  # Borders
  border: "#000000"               # 1px solid bottom border on nav, inputs, lists

  # Focus
  focus-ring: "#000000"

  # Shadow tints — no shadows extracted; Artek is fully flat
  shadow-soft: "#000000"          # /* estimated — fallback; site extracts no box-shadows */

typography:
  display-hero:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sub:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "artek-futura, Futura, Futura PT, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 35px
  2xl: 50px
  3xl: 70px

rounded:
  none: 0px
  pill: 15px                      # used sparingly on badge/tag spans only

components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 20px 5px
  button-primary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 20px 5px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 20px 5px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 6px 20px 5px
    border: "1px solid {colors.border}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    border: "0px 0px 1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-item-hover:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "2px solid {colors.border}"
  link-default:
    textColor: "{colors.ink}"
    textDecoration: "underline"
  link-hover:
    textColor: "{colors.ink}"
    textDecoration: "underline 2px"
  link-muted:
    textColor: "{colors.ink-muted}"
    textDecoration: "none"
  link-muted-hover:
    textColor: "{colors.ink-muted}"
    textDecoration: "underline 2px"
---

# Artek Design System

## Overview

Artek's digital presence is a direct translation of its 90-year-old brand philosophy: modernism without ornamentation, function as its own beauty. The canvas is absolute white (`{colors.background}`) — not a warm cream or editorial off-white, but the hard, cold white of a Finnish winter light falling on birch. Against it, everything resolves into a single binary: `{colors.ink}` pure black for type, borders, and interactivity, with `{colors.surface}` near-white providing the only tonal relief on buttons and tinted panels. There is no brand color in the conventional sense. Artek's identity is expressed entirely through restraint: what is withheld is as deliberate as what is present.

The proprietary `artek-futura` typeface extends the Aalto lineage. Alvar Aalto was a geometer by training and a humanist by instinct, and this custom Futura variant carries both qualities — the geometric discipline of Paul Renner's 1927 original, tempered by the warmth that distinguishes Finnish modernism from its colder German counterpart. Weight 400 carries the entire typographic system without exception. There is no bold in the hierarchy, no italic for emphasis. Differentiation comes exclusively through size and spacing. The display scale opens at 50px with a 1.1 line-height, stepping down through 26–27px section heads and settling into a 14px body that inherits the same even weight. The result is a typographic voice that is neither urgent nor precious — it simply states things at the appropriate scale and trusts the reader.

The interaction vocabulary is minimal to the point of ceremony. Buttons are `{colors.surface}` rectangles with zero radius and a 2px hover-to-underline on links; interactive states are communicated through a near-imperceptible background shift from `{colors.surface}` to `{colors.surface-hover}`. No drop shadows exist anywhere in the extracted data. Borders are single-pixel bottom rules in `{colors.border}` black — the same rule appears under navigation items, below form inputs, and as a structural divider across the page. This insistence on a single decorative device, deployed consistently, creates a visual rhythm that feels like a Aalto building: rational, serene, and quietly confident.

**Key Characteristics:**
- Proprietary `artek-futura` at weight 400 for every size level — uniformity of weight as a design statement
- Absolute binary palette: `{colors.ink}` pure black and `{colors.background}` pure white, with `{colors.surface}` as the single tonal intermediary
- Zero border-radius across all interactive and structural elements — hard geometry throughout
- 1px solid bottom border (`{colors.border}`) as the system's only decorative device: nav, inputs, dividers
- No shadows, no gradients, no chromatic accent — the flattest possible elevation model
- Spacing scale anchored at 5px/10px, scaling in non-uniform increments (10, 20, 30, 35, 50, 70px) that echo Aalto's free-form geometric sensibility
- Button hover shifts background from `{colors.surface}` (#f7f7f7) to `{colors.surface-hover}` (#e3e2e1) — ultra-subtle, tactile, Nordic
- Link hover thickens underline from 1px to 2px — interaction acknowledged, not celebrated
- Breakpoints at 320, 600, 750, 800, 1200px: granular mobile-first staircase
- Muted secondary voice through `{colors.ink-muted}` (#919191) — captions, secondary labels, supporting navigation
- Photography is the only decoration: Aalto furniture, Rope Chair, Stool 60 in white or natural settings
- Self-hosted `artek-futura.woff2` — no Google Fonts, no CDN dependence, full typographic sovereignty

## Colors

### Primary

- **White** (`{colors.background}`): The dominant canvas. Used for page backgrounds, card surfaces, and all content areas. Pure #ffffff — not cream, not paper, not warm. A deliberate rejection of warmth as decoration.
- **Near-white** (`{colors.surface}`): Deployed on button fills and tinted panel backgrounds. Provides the only tonal relief in the system without introducing a second color family.
- **Hover surface** (`{colors.surface-hover}`): The button and interactive element hover state. A barely-perceptible step from surface to `#e3e2e1`. The restraint in this shift communicates confidence: Artek does not need to shout at you to click something.

### Ink

- **Black** (`{colors.ink}`): Carries every text, border, icon, and interactive element. Pure #000000.
- **Muted grey** (`{colors.ink-muted}`): Secondary text, captions, and muted link states. #919191 — a neutral mid-grey at the exact luminance midpoint between white and black.

### Borders and Focus

- **Border** (`{colors.border}`): The 1px solid black rule that appears at the bottom of navigation items, beneath form inputs, and as horizontal dividers. The system's one structural pattern.
- **Focus ring** (`{colors.focus-ring}`): Black focus treatment — consistent with the monochromatic system. No chromatic color assigned to focus states.

### No Chromatic Accent

Artek's extracted palette contains zero chromatic colors. No brand orange, no heritage red, no warm birch-tone amber. This is a considered position, not an omission: the furniture itself carries all the color in Artek's visual world.

## Typography

### Font Family

- **Primary**: `artek-futura`, a self-hosted custom Futura variant. Fallback stack: `Futura, Futura PT, Arial, sans-serif`. The `artek-futura.woff2` file is served directly — no third-party font loading.
- **No monospace**: The system does not define a monospace face.
- **No variable font**: Standard weight file; no `font-variation-settings` or `font-feature-settings` extracted.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines, product launch headers |
| `display` | Section leads, editorial pull-quotes, H2 equivalents |
| `heading-section` | Product category titles, content section headers |
| `heading-sub` | Product names, feature headers, H3–H4 equivalents |
| `body-large` | Lead paragraphs, emphasized body copy, navigation primary items |
| `body` | General body text, product descriptions, navigation secondary |
| `nav-link` | Navigation items, footer links, utility text |
| `button-ui` | All button labels, form submit text |
| `caption` | Price labels, metadata, product tags, form labels |

### Principles

- Single weight throughout: `fontWeight: 400` at every scale level. No bold, no semibold, no italic voice. Hierarchy is purely dimensional.
- `artek-futura` is geometric but not cold — the custom digitization retains a slightly humanist quality that Helvetica or DM Sans would erase.
- Letter-spacing is consistently `0px`: no tracking, no tightening. The characters are set as the designer intended them.
- Line-heights tighten from 1.5 at body to 1.1 at display — a standard editorial compression that Artek uses without deviation.
- No font-size below 14px anywhere in the extracted corpus. The smallest voice in the system is still legible.

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 5px.

Artek's spacing is not a strict 8-point grid. The most-used value in the extracted data is 10px (64 instances), followed by 5px, 20px, and 35px. The scale steps somewhat irregularly — 5, 10, 20, 30, 35, 50, 70px — echoing the free-form geometry Aalto applied to his buildings and furniture: proportional rather than mechanical.

### Grid & Container

- Max content width: 1200px (inferred from top breakpoint)
- Grid structure: multi-column product grid collapsing to single column on mobile
- Hero sections span full-width; content panels maintain generous horizontal margins
- Photography crops are handled server-side via Cloudinary (2:1 aspect ratio fills)

### Whitespace Philosophy

- Artek's whitespace is structural, not luxurious. Space is used to let the objects breathe, not to signal price.
- The 70px top-level spacing token (`{spacing.3xl}`) creates the generous sectional rhythm; the 10px (`{spacing.sm}`) grid handles product tile density.
- Padding is consistently asymmetric at the micro level: `6px 20px 5px` on buttons suggests hand-tuned optical balance over rigid system math.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All surfaces — the entire site is flat |
| Subtle (Level 1) | No shadow | No extracted depth layer at this level |
| Card (Level 2) | No shadow | Product cards are distinguished by background tint, not elevation |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard navigation focus indicator |

**Shadow Philosophy**: Artek does not use drop shadows. This is architecturally coherent with the brand's Bauhaus lineage and Aalto's own rejection of ornament. Depth is achieved exclusively through layout — proximity, whitespace, and the edge of the `{colors.border}` 1px rule. In a world where nearly every e-commerce site uses layered card shadows to communicate hierarchy, Artek's flat model reads as a statement of confidence: the furniture does not need a pedestal.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements: buttons, inputs, cards, containers, navigation |
| `pill` | 15px | Badge and tag elements only — the sole exception in an otherwise angular system |

The system is almost entirely `{rounded.none}`. Every button, every product card, every form input is a hard rectangle. The 15px `{rounded.pill}` value appears only on small `<span>` badge elements — a practical concession to legibility at small sizes, not a design choice that propagates upward. If you are building a new component, default to `{rounded.none}` and question any deviation.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — `{colors.surface}` background, `{colors.ink}` text, zero radius, `6px 20px 5px` padding. The asymmetric vertical padding (top 6px, bottom 5px) suggests optical baseline alignment. Appears on CTAs, "Add to cart", and primary navigation actions.
- **`button-primary-hover`** — Background shifts to `{colors.surface-hover}`, everything else unchanged. The hover is intentionally imperceptible to casual observation — it rewards attention without demanding it.
- **`button-secondary`** — White background with a 1px `{colors.border}` outline, same typography and radius as primary. Used for secondary actions and filter toggles.
- **`button-secondary-hover`** — Fills to `{colors.surface}` on hover, retaining the border. The hover restores the primary button's resting state — a clever circularity.

### Cards

Product cards use zero radius and no shadows. The `card-product` variant sets padding to `10px 0px` — edge-to-edge photography with a bottom-margin label block. Category cards and editorial panels use `card` with `20px` padding. No elevation treatment distinguishes card states; selection is communicated through border or background.

### Inputs

Form inputs use a bottom-border-only pattern: `0px 0px 1px solid {colors.border}`. This matches the navigation divider treatment exactly — the same 1px rule. Focus state thickens to a `2px solid {colors.focus-ring}` outline. No fill change on focus. This is the Aalto solution: the simplest intervention that communicates state clearly.

### Badges / Tags

Badges use `{rounded.pill}` — the one place in the system where a radius appears. Background `{colors.surface}`, text `{colors.ink-muted}`, caption-scale typography. Used for product tags, category labels, and availability indicators.

### Navigation

The primary navigation uses 14px `artek-futura` with no weight differentiation between items. Active or hovered items gain a `2px solid {colors.border}` bottom rule — consistent with the system's single structural device. Navigation sits behind a sticky header on scroll. Secondary navigation and footer links use `{colors.ink-muted}` at the same scale.

## Do's and Don'ts

### Do

- Use `{colors.ink}` pure black and `{colors.background}` pure white as the default for all new components
- Apply the 1px solid bottom border (`{colors.border}`) as the primary structural divider — it is the system's signature device
- Set all border-radius to `{rounded.none}` for any structural or interactive element
- Reference `artek-futura` with the full fallback stack: `Futura, Futura PT, Arial, sans-serif`
- Set all typographic weights to 400 — create hierarchy through size, not weight
- Use `{colors.surface}` (#f7f7f7) as the button resting state and `{colors.surface-hover}` (#e3e2e1) as the hover, not a color shift
- Let photography carry the visual weight; the interface should recede
- Use the 10px/20px spacing units (`{spacing.sm}` / `{spacing.md}`) for component-level density and `{spacing.3xl}` (70px) for sectional rhythm

### Don't

- Don't introduce any chromatic color — no brand ambers, heritage yellows, or accent tones. The palette is intentionally achromatic.
- Don't use `font-weight` above 400 anywhere in the system, including button labels or headings
- Don't add drop shadows, box shadows, or elevation layers — the system is flat by design philosophy, not omission
- Don't use `{rounded.pill}` on anything larger than a badge/tag span — it is a contained exception
- Don't vary letter-spacing from `0px` for body or display text — the typeface is set as designed
- Don't substitute a system font for `artek-futura` without defining `font-face` — falling through to Arial loses the geometric character
- Don't introduce a secondary typeface — `artek-futura` carries the entire system, and mixing would undercut the typographic clarity
- Don't over-animate hover states — the 1-step background shift is the full extent of interactive feedback; adding color or shadow undermines the restraint

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <320px | Minimum supported viewport; full-width single column |
| Mobile | 320–599px | Single column layout, collapsed navigation, full-width product tiles |
| Mobile Large | 600–749px | Two-column product grid begins, navigation remains hamburger |
| Tablet | 750–799px | Transitional range; some layouts shift from stacked to side-by-side |
| Tablet Wide | 800–1199px | Multi-column grid, persistent navigation, editorial sections unlock |
| Desktop | ≥1200px | Full layout; max-width container; photography at full scale |

### Touch Targets

- Buttons use `6px 20px 5px` padding — at 14px font-size, this produces approximately 27px tap height. May require augmentation for accessibility on mobile; Artek's design language resists adding artificial height padding.
- Navigation items at 14px body with no minimum height specified. Bottom-border hover state not applicable on touch.

### Collapsing Strategy

- Navigation collapses to hamburger below 800px.
- Product grids collapse: 4-column → 2-column → 1-column across breakpoints.
- Hero sections maintain full-width photography at all sizes; text overlays reflow to single column.
- Sectional spacing scales down: 70px (`{spacing.3xl}`) section margins compress toward 30–35px (`{spacing.lg}` / `{spacing.xl}`) at mobile widths.

### Image Behavior

- All product photography served via Cloudinary with `ar_2:1,c_fill,f_auto,w_2400` transformation — responsive fills with automatic format and width optimisation.
- Images are always full-bleed within their grid column; no rounded corners.

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#000000)
- Brand accent: `{colors.primary}` (#000000 — monochromatic, no chromatic accent)
- Secondary text: `{colors.ink-muted}` (#919191)
- Border: `{colors.border}` (#000000, 1px solid bottom)
- CTA background: `{colors.surface}` (#f7f7f7)
- CTA hover: `{colors.surface-hover}` (#e3e2e1)

### Example Component Prompts

- "Build an Artek-style product card using `{colors.background}` canvas, full-bleed product photography at 2:1 ratio, `{typography.heading-sub}` product name in `artek-futura` weight 400 below the image, `{typography.caption}` price in `{colors.ink-muted}`, zero border-radius (`{rounded.none}`), and a 1px solid `{colors.border}` bottom rule as the only structural divider."
- "Create an Artek navigation bar: white background, `artek-futura` 14px weight 400 all items, `{colors.ink}` text, bottom border `1px solid {colors.border}` on hover/active states, sticky on scroll, hamburger collapse below 800px."
- "Design an Artek primary button: `{colors.surface}` background, `{colors.ink}` text, `{typography.button-ui}` typography, `{rounded.none}` zero radius, `6px 20px 5px` padding, hover shifts background to `{colors.surface-hover}` — no color change, no shadow, no transform."
- "Build an Artek hero section: full-viewport-width photography (2:1 or 16:9 crop), overlay with `{colors.ink}` text in `{typography.display-hero}` at 50px weight 400, centered or left-aligned, no drop shadow on text, white background below the image, 70px (`{spacing.3xl}`) vertical margin before next section."
- "Create an Artek filter/badge tag: `{colors.surface}` background, `{colors.ink-muted}` text, `{typography.caption}` 14px, `{rounded.pill}` 15px radius, `4px 10px` padding — the only rounded element in the system."
- "Implement an Artek form input: no background fill (inherits `{colors.background}`), `{typography.body}` 14px text, `0px 0px 1px solid {colors.border}` bottom-border-only treatment, focus state adds `outline: 2px solid {colors.focus-ring}`, zero border-radius, `10px 0px` padding."

### Iteration Guide

1. Start with a pure `{colors.background}` (#ffffff) canvas — no surface tints, no gradients, nothing added until content demands it.
2. Set all type in `artek-futura` weight 400. Scale determines hierarchy; weight never does.
3. Apply `{colors.border}` 1px solid bottom rules wherever structural separation is needed — treat this as the system's only decorative device.
4. Buttons and interactive elements: `{colors.surface}` resting, `{colors.surface-hover}` on hover, zero radius, asymmetric optical padding.
5. Resist adding any chromatic color. If something feels missing, the answer is usually more generous whitespace or larger photography.
6. Maintain `{rounded.none}` everywhere except small badge spans where `{rounded.pill}` is permitted.
7. For any editorial or marketing page: let the Aalto furniture photography carry the visual weight. The interface should be a white frame around the objects, not a competitor to them.

---

## 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 Artek. Brand names and trademarks belong to their respective owners.