Scandinavian Functional

---
name: scandinavian-functional
description: Apply the Scandinavian Functional visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Scandinavian Functional, mentions nordic design, scandi minimalism, nordic functionalism, or describes cool crisp whites, pale birch and ash wood tones, soft muted blue accents — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Scandinavian Functional Design System

Nordic functionalism on the web: cool crisp whites, pale birch-wood tones, soft muted blues, airy structured grids, and honest unadorned type. Democratic design — nothing decorative that doesn't also work for a living.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Scandinavian Functional.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (nordic design, scandi minimalism, nordic functionalism, scandinavian modern, hygge web), or describes its traits: cool crisp whites; pale birch and ash wood tones; soft muted blue accents; airy structured grids; honest functional type; flat-lay product photography.

## Design tokens

### Color palette

- Cool crisp near-white ground: `#fbfbf9` (--color-bg)
- Tiles, bands, and input fills: `#f2f3f1` (--color-surface)
- Primary text, cool near-black: `#26292b` (--color-text)
- Secondary text: `#5c6469` (--color-text-muted)
- Muted Nordic blue — links, buttons, focus states: `#3d6e99` (--color-accent)
- Pale wood tone for section bands and image grounds: `#e3d5bd` (--color-birch)
- Soft blue tint for info surfaces and tags: `#dce7ee` (--color-sky)
- Hairline dividers and tile edges: `#e4e6e3` (--color-border)

### Typography

- Display / headings: Schibsted Grotesk (fallback: Helvetica Neue, Arial, sans-serif) (ideal: Circular Std, premium — use Schibsted Grotesk as the free substitute)
- Body: Inter (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96 — Airy and even: consistent generous gutters everywhere. The page breathes uniformly rather than alternating tight and loose passages.
- Border radius: sm 4px, md 10px — Gently softened corners — practical rather than playful.
- Border treatment: 1px solid #e4e6e3 — Hairlines define tiles and inputs; heavier borders read as un-Nordic clutter.

### Shadows

- soft: `0 1px 3px rgba(38, 41, 43, 0.06)` — Default tile and card lift
- raised: `0 10px 30px rgba(38, 41, 43, 0.10)` — Modals, popovers, and hover lift

### Layout

- Max content width: 1360px
- Even modular grid — 2/3/4-column tile rows with identical gutters
- Function-first ordering: navigation, product, specification, purchase — no theatrical interludes
- Pale birch or sky bands separate functional zones
- Photography is bright, evenly lit, and set on white or pale wood

### Effects

- Occasional soft sky-blue tinted panels for informational callouts
- Thin progress and step indicators styled like assembly instructions

### Motion

- Easing: cubic-bezier(0.2, 0, 0, 1); durations 120ms / 220ms / 400ms
- Quick practical transitions — motion serves feedback, never decoration
- Hover lifts tiles 2px with the raised shadow
- Accordions and drawers slide with restrained easing

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fbfbf9;
  --color-surface: #f2f3f1;
  --color-text: #26292b;
  --color-text-muted: #5c6469;
  --color-accent: #3d6e99;
  --color-birch: #e3d5bd;
  --color-sky: #dce7ee;
  --color-border: #e4e6e3;
  --radius-sm: 4px;
  --radius-md: 10px;
  --shadow-soft: 0 1px 3px rgba(38, 41, 43, 0.06);
  --shadow-raised: 0 10px 30px rgba(38, 41, 43, 0.10);
  --border-default: 1px solid #e4e6e3;
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Clean white bar, Schibsted Grotesk logotype, functional link list, search field prominent — utility over branding
- **Hero:** Medium-weight headline, short benefit-oriented subline, one blue primary action, bright product photo on pale wood ground
- **Card:** White tile, hairline border, soft shadow, 4px radius; image, name, price, availability — nothing else
- **Button (primary):** Nordic blue fill, white text, 8px radius, quick hover darken
- **Button (secondary):** White fill, hairline border, dark text; hover tints the surface gray-green
- **Form fields:** Surface-fill input with hairline border and clear visible label above; focus ring in the accent blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The airy functional grid: generous white gutters between clean-lined product tiles on cool white, with a single muted Nordic blue reserved for links and actions — a page organized like well-designed flat-pack furniture. Spend boldness here; keep everything else quiet.

## Do

- Keep the grid modular and the gutters identical — evenness is the aesthetic
- Reserve the blue strictly for interactive elements so affordances stay obvious
- Write labels and microcopy in plain declarative language; the tone is part of the style
- Use bright, evenly lit photography with pale wood or white backdrops

## Don't

- Don't warm the palette toward greige and black — that's japandi, not Nordic functionalism
- Don't add decorative flourishes that carry no function
- Don't use more than one accent hue; multi-color palettes break the democratic calm
- Don't crowd tiles — if it doesn't fit the grid, it gets its own row

## Accessibility notes

- The accent blue (#3d6e99) sits near the 4.5:1 threshold on the near-white ground — verify at final sizes and darken to #35618a for small text if needed
- Cool gray text-muted must not be used below 14px on the surface tint

## Reference sites

- IKEA: https://www.ikea.com
- Artek: https://www.artek.fi
- HAY: https://hay.dk

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip scandinavian-functional.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/scandinavian-functional.json

Settings → Capabilities → Skills → Upload skill → scandinavian-functional.zip