---
version: alpha
name: Aarke
description: Scandinavian premium-appliance minimalism — a stark off-white canvas, near-black ink, and a cool stainless-steel gray scale rendered in a clean neutral grotesk with tight tracking, square-cornered chrome, and gallery-grade whitespace that lets the products speak.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f4f4f2"        # soft off-white product-stage background
  surface-soft: "#fafafa"
  ink: "#161616"            # near-black, brand text
  ink-pure: "#000000"

  # Cool neutral / steel scale
  gray-900: "#161616"
  gray-700: "#3d3d3d"
  gray-600: "#5c5c5c"
  gray-500: "#7a7a7a"
  gray-400: "#a6a6a6"
  gray-300: "#cfcfcf"
  gray-200: "#e4e4e2"
  gray-100: "#ededeb"
  steel: "#8a9099"          # brushed-stainless accent tone

  # Accent — restrained, used sparingly
  primary: "#161616"        # primary actions inherit the ink (mono identity)
  accent-copper: "#9a6a4f"  # warm copper finish nod, decorative only

  # Interactive
  link: "#161616"
  focus-ring: "#5c5c5c"
  border: "#e4e4e2"
  border-strong: "#161616"

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

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.6px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1.2px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.2px

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

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

components:
  # Primary action — solid ink, square corners
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  # Secondary — outlined, transparent fill
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"

  # Eyebrow label
  eyebrow-label:
    textColor: "{colors.gray-600}"
    typography: "{typography.eyebrow}"

  # Product card — minimal, square, hairline border
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  # Featured / editorial card
  card-featured:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.border}"

  # Price tag
  price-tag:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 0px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.gray-400}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.ink}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 40px
    borderColor: "{colors.border}"

  # Badge / chip
  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Aarke Design System

## Overview

Aarke is a Stockholm-based premium home-appliance brand — sparkling-water carbonators, kettles, and kitchenware finished in brushed stainless steel — and its website is the digital extension of that industrial-design ethos. The interface is overwhelmingly quiet: a pure-white (`{colors.background}`) and soft off-white (`{colors.surface}`) canvas where products are staged like objects in a museum vitrine. Nothing competes with the hardware. Whitespace is the loudest element on the page.

The palette is strictly achromatic — near-black ink (`{colors.ink}`) on white, mediated by a cool, steel-leaning gray scale that echoes the brushed-metal product finishes. There is no decorative color. The only warmth permitted is an occasional copper tone (`{colors.accent-copper}`) nodding to the brand's copper-finish editions, and even that lives in photography, never in UI chrome. This restraint is the brand: Scandinavian, confident, expensive.

Typography is a clean neutral grotesk with tight tracking at display sizes, letting headlines feel precise and architectural rather than loud. The square-cornered chrome reinforces this — buttons, cards, and inputs use near-zero border radius (`{rounded.none}`–`{rounded.sm}`), giving the whole system a crisp, hardware-machined edge. Borders are hairline and quiet; the ink-on-white contrast does the structural work.

**Key Characteristics:**
- Achromatic, steel-toned palette — near-black ink on a white/off-white canvas, no decorative color
- Clean neutral grotesk with tight negative tracking at display sizes (-1.6px at hero)
- Square-cornered chrome (`{rounded.none}`) — crisp, machined, industrial-design edge
- Gallery-grade whitespace; products staged on soft off-white surfaces
- Mono CTA identity — primary actions are solid ink, not a brand color
- Uppercase eyebrows and buttons with positive tracking for a refined editorial voice
- Hairline borders (`{colors.border}`); contrast comes from ink, not boxes

## Colors

### Primary
- **Aarke Ink** (`{colors.ink}`): Primary text, headings, solid CTA fills. Near-black with a touch of softness.
- **White** (`{colors.background}`): Page background, card surfaces, button text on ink.
- **Off-White Stage** (`{colors.surface}`): Soft product-stage and section background.

### Cool Neutral / Steel Scale
- **Gray 900** (`{colors.gray-900}`): Primary ink, equivalent to `{colors.ink}`.
- **Gray 700** (`{colors.gray-700}`): Hover fills, strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Secondary body copy, eyebrows.
- **Gray 500** (`{colors.gray-500}`): Tertiary text, muted labels.
- **Gray 400** (`{colors.gray-400}`): Placeholder text, input borders, disabled.
- **Gray 300** (`{colors.gray-300}`): Subtle dividers.
- **Gray 200** (`{colors.gray-200}`): Hairline borders, card outlines.
- **Gray 100** (`{colors.gray-100}`): Faint surface tint.
- **Steel** (`{colors.steel}`): Brushed-stainless accent tone for specs/finishes.

### Accent (Restrained)
- **Copper** (`{colors.accent-copper}`): Nod to copper-finish product editions. Decorative / photographic only — never UI chrome.

### Interactive
- **Link** (`{colors.link}`): Inline links, inherits ink with underline on hover.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.
- **Border** (`{colors.border}`): Hairline borders, dividers.
- **Border Strong** (`{colors.border-strong}`): Outlined-button and emphasis borders.

## Typography

### Font Family
- **Primary**: A clean neutral grotesk, mapped to `Inter` with fallbacks `Helvetica Neue, Arial, sans-serif`.
- **Tracking**: Tight negative tracking at display sizes (-1.6px hero → -0.2px card title), positive tracking on uppercase eyebrows and buttons (+0.6px to +1.2px).

### 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` | 64px hero — product billboard |
| `section-heading` | Feature/section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Product and feature cards |
| `body-large` | Introductions, editorial lead copy |
| `body` | Standard reading text |
| `body-small` | UI text, captions, price |
| `button-ui` | Buttons (uppercase, tracked) |
| `eyebrow` | Uppercase section labels |
| `caption` | Metadata, fine print |

### Principles
- **Tight at the top, neutral below**: Negative tracking compresses display headlines; body relaxes to normal tracking for readability.
- **Uppercase, tracked, for chrome**: Eyebrows and button labels use uppercase with positive letter-spacing for a refined, editorial register.
- **Two weights, strict roles**: 400 (reading) and 500 (headings/UI). No heavy weights — restraint is the identity.
- **Let the product lead**: Type supports the imagery; it never shouts over it.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) for the generous section rhythm.

### Grid & Container
- Max content width: approximately 1280px
- Hero: full-bleed product imagery with centered or left-aligned copy
- Product grids: 2–4 columns on soft off-white stages
- Editorial sections: asymmetric two-column splits (image + copy)

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections. Air is the design.
- **Staging**: Products sit on `{colors.surface}` panels with generous internal padding so the object floats.
- **Hairline separation**: Sections divide via thin `{colors.border}` rules or spacing alone, never heavy boxes.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text, most chrome |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, inputs, dividers |
| Emphasis (Level 1b) | `1px solid {colors.border-strong}` | Outlined buttons, active states |
| Focus | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Aarke avoids shadows almost entirely. Depth is communicated through contrast and whitespace, not elevation. When separation is needed, a single hairline border does the work. The flatness reinforces the precise, industrial-product feel.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs — the default square edge |
| `xs` | 2px | Subtle softening where needed |
| `sm` | 4px | Small functional containers |
| `md` | 6px | Larger panels (rare) |
| `pill` | 9999px | Reserved for occasional tags/toggles |

## Components

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

### Buttons
- **`button-primary`** — Solid ink fill, white text, square corners, uppercase tracked label. The default CTA.
- **`button-secondary`** — Transparent fill with a strong ink border; inverts to solid ink on hover.

### Cards
- **`card`** — Off-white stage, square corners, hairline border. Houses product imagery and a price.
- **`card-featured`** — White editorial card with extra padding for longer-form content.

### Inputs
- **`input`** — White surface, square corners, gray-400 border that darkens to ink on focus.

### Navigation
- **`nav-bar`** — Quiet white header, uppercase tracked links, hairline bottom border. Logo swaps black/white per section background.

### Badges & Labels
- **`badge`** — Solid ink chip, white text, square corners — for "New" or finish labels.
- **`eyebrow-label`** — Uppercase, tracked, gray section label above headings.

## Do's and Don'ts

### Do
- Keep chrome achromatic — ink on white/off-white, steel grays for hierarchy
- Use square corners (`{rounded.none}`) on buttons, cards, and inputs
- Stage products on `{colors.surface}` panels with generous padding
- Use uppercase, positively-tracked labels for eyebrows and buttons
- Lean on whitespace and hairline borders instead of shadows
- Keep primary CTAs solid ink — the brand identity is mono, not colorful

### Don't
- Don't introduce decorative brand colors into UI chrome
- Don't add rounded, pill-shaped buttons — the edge is machined and square
- Don't use drop shadows for elevation — contrast and space carry depth
- Don't use heavy font weights — 500 is the ceiling
- Don't let type compete with product photography
- Don't put copper anywhere but photography/finishes

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, full-bleed product imagery, stacked copy |
| Tablet | 600–1024px | 2-column product grids, reduced section padding |
| Desktop | 1024–1280px | Full multi-column grids, asymmetric editorial splits |
| Large Desktop | >1280px | Centered max-width, generous outer margins |

### Touch Targets
- Buttons use comfortable padding (16px vertical) for clear tap areas
- Nav links spaced generously despite small type
- Inputs at 14px padding for accessible touch height

### Collapsing Strategy
- Hero: 64px display → scales down, maintains tight tracking proportionally
- Navigation: horizontal uppercase links → hamburger menu
- Product grids: 4-column → 2-column → single column
- Editorial splits: side-by-side → stacked image-over-copy
- Section spacing: 96–160px → 48–64px on mobile

### Image Behavior
- Product imagery is full-bleed on mobile, staged on `{colors.surface}` on desktop
- Aspect ratios preserved; products always centered in their stage
- Logo swaps black/white versions to maintain contrast on differing backgrounds

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Aarke Ink `{colors.ink}` with white text
- Background: White `{colors.background}` / Off-White `{colors.surface}`
- Heading text: Aarke Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Border: hairline `{colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white. Headline 64px weight 500, line-height 1.05, letter-spacing -1.6px, color `{colors.ink}`. Eyebrow above it: 12px uppercase, letter-spacing 1.2px, `{colors.gray-600}`. Solid-ink CTA (`{colors.ink}`, white text, square corners, 16px 32px padding, 13px uppercase tracked)."
- "Design a product card: off-white `{colors.surface}` stage, square corners, 1px `{colors.border}`, 24px padding. Product image centered, title 20px weight 500, price 14px `{colors.ink}` below."
- "Build a secondary button: transparent fill, 1px `{colors.border-strong}` border, square corners, ink text, inverts to solid ink with white text on hover."
- "Create navigation: quiet white header, uppercase tracked links (13px weight 500), hairline bottom border, logo left, cart right."

### Iteration Guide
1. Square corners everywhere — `{rounded.none}` is the default; rounding breaks the machined feel
2. Keep it achromatic — ink, white, and steel grays; no decorative color in chrome
3. Two weights only: 400 (read), 500 (announce/interact)
4. Uppercase + positive tracking for eyebrows and buttons; tight negative tracking for display headlines
5. Depth comes from whitespace and hairline borders, never shadows
6. Stage products on `{colors.surface}` panels; let the object lead

---

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