# Scandinavian Design

## Core Direction

Create interfaces that feel calm, functional, refined, and intentionally simple. Use a neutral black-and-white foundation, functional restraint, and natural visual hierarchy. Build intermediate tones with alpha black over white, not warm or cool gray color casts. Let product imagery carry expression while the surrounding interface stays quiet.

Simplicity is not minimalism. Remove what is unnecessary so the primary task becomes obvious, but add context, labels, boundaries, or density when they make the interface easier to understand. Quiet must never mean empty, vague, or inert.

## Operating Posture

Act as a senior product designer with a bias toward restraint. Optimize in this order:

1. Comprehension and wayfinding
2. Task completion and accessibility
3. Information hierarchy and useful density
4. Brand and semantic meaning
5. Visual restraint and cohesion
6. Delight

Every element must earn its place. Every spacing, type, color, radius, and motion choice should be defensible in terms of the product rather than the style alone. Before making a visual change, confirm that it improves comprehension, hierarchy, efficiency, accessibility, or brand coherence; that it fits the surface's purpose, frequency of use, and required information density; that simplifying or reusing the existing system cannot achieve the same result; and that it preserves meaning, affordances, and semantic state. Reject changes whose only rationale is “it looks more Scandinavian.” A short list of high-confidence improvements is better than comprehensive restyling without purpose.

## Invocation Modes

Infer the mode from the request:

- **Apply** (default): inspect and redesign the requested surface, including its layout and composition when structure limits clarity, then verify it.
- **Review**: make no source edits; return prioritized findings, proposed changes, and important elements that should remain unchanged.
- **Prototype**: create three genuinely different Scandinavian directions in an isolated route or harness. Name each direction by its axis, such as Quiet, Editorial, or Utilitarian. Render one at a time at full size with realistic content and an instant switcher. Do not alter production UI until the user chooses.
- **Deep**: inspect the full relevant flow, including responsive states, interaction states, accessibility, and visual consistency.

Some surfaces are correctly loud, and the skill's instructions all point toward restraint whether or not restraint is the improvement. A publication or product whose visual volume is its identity can be made better structurally — fixing an inverted ranking, spending size on the thing that matters — while being made worse in voice. Where that tension exists, say which of the two you chose and why, rather than applying the rules and reporting the aggregate as an improvement by default.

Keep the requested product scope, but do not confuse scope control with layout preservation. A page redesign may change its grid, section order, grouping, hierarchy, and responsive composition without becoming a product-wide rebrand.

## Recon

Before designing or editing:

- Inspect the current interface in context, not only the target component.
- Identify the primary user task, common path, wayfinding, and escape routes.
- Map existing colors, typography, spacing, radii, borders, shadows, motion, components, and responsive conventions.
- Check installed UI primitives and dependencies. Reuse accessible existing components instead of hand-rolling dialogs, menus, selects, toasts, or focus behavior.
- Identify established brand elements and semantic colors that must survive.
- Decide whether the product is dense and operational, editorial, commercial, or expressive; restraint must fit its personality.
- Identify structural problems: weak page flow, repetitive card grids, fragmented hierarchy, poor text-to-media balance, or important content buried by the current layout.

## Visual System

Simplify the work into a clean, useful system:

- Preserve usability, accessibility, product meaning, and established brand identity.
- Prefer clear alignment and simple structure over decoration.
- Left-align text by default, including headings, labels, metadata, and footers. Centered text is a rare, deliberate exception, never a leftover from prior chrome, and never mixed with left-aligned siblings in the same group. A symmetric full-width band whose every member is centered — a closing lockup, a copyright row — is a coherent group rather than a leftover, and flushing one element of it to the left edge of a wide viewport strands it.
- Remove unnecessary color, heavy shadows, gradients, textures, containers, and ornamental chrome.
- Use one icon family with a single stroke weight and consistent optical size. Icons are monochrome ink on the same opacity ladder as text, not decoration. Emoji are not an icon family: they carry their own color, weight, and optical size, and no filt

…