---
name: Artek
description: "A great example of restrained, premium design where the product photography takes center stage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#919191"
  bg-soft: "#F7F7F7"
  bg-quiet: "#EAEAEA"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading:
    fontFamily: geometric-sans
    fontSize: 26px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 15px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined furniture brand website emphasizing photographic storytelling and restrained, classic typography.

*A clean, high-end furniture catalog*

## Colors

A monochromatic UI palette with strong reliance on high-quality photography to provide warmth and depth.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#919191`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

## Layout

Large, full-width photographic sections interspersed with structured grid layouts for text.

*Rhythm:* Generous whitespace, often defined by padding blocks like 45px.

## Elevation & Depth

- Borders: Minimal, typically 1px solid black for outlines or underlines.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 15px
- `pill`: 999px

## Components

- **button:** Minimalist outline style, often just text with a border or simple fill.
- **card:** Image-driven with clean text overlays.
- **chip:** N/A
- **input:** Clean, underlined or bordered minimal inputs.
- **hero:** Full-bleed photography with prominent, centered or left-aligned typography.

## Do's and Don'ts

**Don't:**
- Don't use high-chroma colors — the screenshot shows a strict monochromatic palette.
- Don't use heavy drop shadows — the screenshot shows flat, clean surfaces.
- Don't use decorative serif fonts — the screenshot shows geometric sans-serif typography.
- Don't clutter the layout with small, dense text blocks — the screenshot shows generous spacing.
- Don't use loud, colorful buttons — the screenshot shows minimal outline buttons.
- Don't use dark mode — the screenshot shows predominantly light backgrounds.

---

## System Prompt (paste into AI agent)

```
Artek is a premium Finnish furniture brand. Its website features a refined, editorial aesthetic with a focus on high-quality photography. The design relies on a clean geometric sans-serif typeface (Artek Futura). The color palette is strictly monochromatic, using black, white, and neutral grays (#F7F7F7, #EAEAEA), allowing the product photography to provide warmth and character. Key hex values include #FFFFFF for main backgrounds and #000000 for primary text. Do not use excessive decoration or bright colors; avoid heavy shadows or playful typography; do not clutter the layout.
```