# Norm Store · Design system migration spec

> Source: https://norm.store  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of premium, restrained hardware branding that uses typography and whitespace to convey high quality without relying on visual clutter.

## 1. Identity DNA

The identity of Norm Store is one of concealed engineering, a design language where every surface is stripped to its essential function. It operates on the analogy of architectural hardware disguised as furniture, a system that prioritizes the product's form above all else.

**One-liner:** A premium smart desk that blends industrial minimalism with high-tech functionality.
**Keywords:** Minimalist · Industrial · Functional · Smart · Monochrome
**Analogy:** A piece of architectural hardware disguised as furniture

## 2. Color

The color system is a study in restraint, relying on a strict monochrome palette of pure white and near-black to create a high-contrast stage. This approach ensures that the product itself remains the sole chromatic focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#282828` | body text |
| `--ink-soft` | `#282828` | secondary text |
| `--muted` | `#282828` | placeholder |
| `--line` | `rgba(40,40,40,0.1)` | divider |

**Color principle:** Strict monochrome palette relying on pure black, white, and near-black text to emphasize product form.

The principle is absolute: color exists only to define form and hierarchy, never to decorate.

## 3. Typography

Typography is treated as a structural element, with a scale built for dense, architectural headlines and generous negative space. The system uses sans-serif fonts, leveraging tight line-heights and negative tracking to create a confident, compact typographic presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -0.4px | Hero headlines and section statements |
| body | 16px | 1.5 | 400 | -0.04px | General body text and navigation |

**Type rules:**
- Typography relies heavily on generous negative space rather than weight contrast
- Headlines use a tight line-height of 1.0 for a dense, architectural feel
- Letter spacing is slightly negative to maintain a tight, premium appearance

## 4. Spacing

Spacing follows a generous, asymmetric rhythm designed to create breathing room and frame the product photography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous, asymmetric spacing that prioritizes breathing room for the product photography

## 5. Surfaces

Surfaces are deliberately flat and borderless, rejecting decorative shadows in favor of a single, precise rule for interactive elements. The 1px border on buttons and dialogs is a functional delineator, not a stylistic flourish.

- **Radius:** sm 0px · md 12px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(40,40,40,1) for interactive elements like the 'Get now' button and cookie consent

## 6. Layout

The layout skeleton is a vertical, centered single-column structure that leverages whitespace as its primary compositional tool. This centered column acts as a clean plinth, presenting product imagery and massive typography without the distraction of multi-column grids.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A vertical, centered single-column layout that heavily utilizes whitespace to frame the product

## 7. Motion & Interaction

Motion philosophy is one of quiet utility, concerned only with communicating state changes clearly. Transitions are brief and uniform, applied to opacity and background-color to provide feedback without drawing attention to themselves.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity and background-color transitions on interactive elements
  - Visibility toggles for state changes

- **Hover:** Subtle background-color shifts on buttons
- **Click:** Immediate visual feedback via standard pointer events
- **Transition:** All 0.2s ease for micro-interactions, background-color 0.3s for state changes
- **Keyboard:** Standard focus states implied by semantic HTML

## 8. Voice & Don'ts

The editorial voice is confident and minimalist, delivering short, punchy feature statements with the cadence of architectural specifications. It avoids marketing noise, letting the product's engineering speak through clean, transactional language.

- **Tone:** Confident, minimalist, and slightly quirky (e.g., the cookie consent)
- **Headline style:** Short, punchy, and feature-focused statements that read like architectural specs
- **CTA style:** Direct and transactional, using standard pill buttons
- **Avoid:** Avoid loud marketing jargon or excessive exclamation points / Avoid cluttering the interface with multiple competing calls to action / Avoid using secondary colors or gradients that distract from the product form

### Don'ts
- ❌ don't use drop shadows — screenshot shows perfectly flat product photography with no UI shadows
- ❌ don't use bold or heavy font weights — screenshot shows exclusively regular (400) weight typography
- ❌ don't use colorful accents — screenshot shows a strictly monochrome palette of black, white, and near-black
- ❌ don't clutter with multiple columns — screenshot shows a strictly centered, single-column layout
- ❌ don't use sharp rectangular buttons — screenshot shows a pill-shaped 'Get now' button with a 999px radius
- ❌ don't use justified text alignment — screenshot shows all text centered or left-aligned within its container

What this system deliberately omits—bold weights, colorful accents, drop shadows, and multiple CTAs—is as defining as what it contains.

## System Prompt (paste into AI tool)

```
This design DNA describes a premium, minimalist product site for a smart desk. It utilizes a strictly monochrome palette of pure white (#ffffff), near-black text (#282828), and a secondary off-black for borders. Typography is exclusively sans-serif, relying on geometric and humanist-sans categories with a tight letter spacing of -0.4px and a massive display scale of 48px+ to create a confident, architectural feel. Key critical donts: never use bold font weights (everything is regular 400), never introduce colorful accents or gradients, and never use drop shadows or heavy UI chrome that would distract from the product photography. The layout is a spacious, centered single-column structure that prioritizes whitespace and large product cutouts over traditional grid-based card UI.
```