---
title: "NORNORM design system"
variant: extended
source: https://nornorm.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/nornorm-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# NORNORM · Design System

> Circular furniture, presented with calm clarity

**Theme:** light · **Industry:** ecommerce · **Source:** https://nornorm.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

NORNORM’s homepage pairs a restrained monochrome interface with warm, lived-in office photography and a confident blue accent. Oversized Lunar headings, broad white sections, and concise conversion points make the furniture subscription model feel clear and flexible.

## North star

Keep the interface spacious and monochrome, using blue sparingly for high-priority actions and photography for warmth and context.

## Overview

The page is built on a white canvas with near-black text, muted gray supporting copy, and a concentrated royal-blue accent for the announcement strip and primary actions. The blue is a navigational signal rather than a broad decorative wash. Lunar sans-serif gives the page a consistent voice: large, tightly tracked headings contrast with calm, readable body copy. The first screen layers white navigation and centered messaging over a full-bleed office image; below it, the composition settles into open white bands, logo proof, benefit cards, service imagery, pricing, statistics, and FAQs. Photography supplies the warmth and material character, with plants, furniture, and real workspaces balancing the otherwise minimal interface. Content generally aligns to a broad page grid, alternating centered and left-aligned blocks instead of using a dense, uniform card system. Buttons and controls remain simple, while thin rules and subtle shadows provide just enough separation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white section backgrounds, and light surfaces beneath logos and content. |
| Furniture Ink | `#000000` | `--color-furniture-ink` | neutral | Headings, body copy, dark text, and high-contrast graphic details. |
| Soft Graphite | `#6a6a6a` | `--color-soft-graphite` | neutral | Muted supporting text, subdued navigation states, and thin separators. |
| Signal Cobalt | `#1e37a0` | `--color-signal-cobalt` | accent | Announcement banner and primary booking or service actions; use as a focused interface accent. |
| Quiet Silver | `#b2b2b2` | `--color-quiet-silver` | neutral | Secondary section hairlines and subtle gray details; screenshot surfaces are mostly photographic, not this flat gray. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Furniture Ink) · `--color-text` → `#000000` (Furniture Ink) · `--color-text-muted` → `#6a6a6a` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#6a6a6a` (Soft Graphite) · `--color-accent` → `#1e37a0` (Signal Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#6a6a6a` | `#ffffff` | 5.41:1 | AA |
| `#6a6a6a` | `#000000` | 3.88:1 | AA-large |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#1e37a0` | `#ffffff` | 9.96:1 | AAA |
| `#1e37a0` | `#000000` | 2.11:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lunar | `--font-body` | webfont | 400, 500, 700 | Site-wide headings, body text, navigation, labels, links, and buttons. | Inter |

- **Lunar:** Use measured weights 400, 500, and 700. Large headings use tight negative tracking; body and navigation remain sentence case and untracked.

### Type scale — Perfect Fifth (ratio ≈ 1.476, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 112px | 500 | 1 | -0.03em | — | Lunar | Oversized statement headings for high-impact hero or editorial moments. |
| h1 | 80px | 500 | 1 | -0.03em | — | Lunar | Main hero headline and the strongest page-level heading. |
| h2 | 64px | 500 | 1 | -0.03em | — | Lunar | Major section titles such as benefits and circular furniture. |
| h3 | 48px | 500 | 1.3 | -0.03em | — | Lunar | Subsection headings and prominent feature titles. |
| h4 | 32px | 500 | 1.3 | -0.03em | — | Lunar | Smaller feature headings and supporting content titles. |
| body | 16px | 400 | 1.5 | 0 | — | Lunar | Primary explanatory copy, descriptions, and FAQ answers. |
| caption | 14px | 400 | 1.5 | 0 | — | Lunar | Compact image notes, footnotes, and secondary metadata. |
| nav | 16px | 400 | 1.5 | 0 | — | Lunar | Header links and footer navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | Lunar | Text links and secondary calls to explore or learn more. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48 px.
- Section rhythm 32px · element gap 16px · card padding — · max content width 1344px.

A broad, responsive content frame uses a measured maximum width of 1344px, with full-bleed photography reserved for the hero and mission statement. Sections alternate between centered introductions, left-aligned editorial content, two-column splits, and card or gallery grids. The page feels comfortable rather than dense, with a measured 8px base spacing unit and generous section breathing room. Use the measured 4–48px spacing scale for component rhythm; keep content hierarchy clear across long white bands.

## Shape & elevation

- Radius: button `50%` · nav `8px` · link `8px` · xs `8px` · pill `9999px`
- Shadow `md` (section): `rgba(0, 0, 0, 0.15) 0px 0px 15px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections sit flat on white, with separation created by whitespace rather than containers or heavy shadows. The logo panel overlaps the hero edge and uses a subtle measured shadow. Keep outlines and hairlines restrained; buttons and links are mostly clean shapes, with rounded navigation and pill-like controls where the interface uses them.

## Imagery

Use photographic office interiors as the emotional anchor: warm timber, plants, furniture, and people at work. The hero image fills the background behind white copy, while later sections use rectangular workspace and service photographs in tidy grids. Sustainability messaging receives a full-bleed ocean image. Small conceptual illustrations appear in feature cards, but they are supporting material, not the brand’s main visual language.

## Components

### Announcement bar

A narrow Signal Cobalt (#1e37a0) strip at the top with centered white promotional copy, a directional cue, and a close control.

### Overlay navigation

White NORNORM wordmark and Lunar navigation sit over the hero image; include locale, a prominent blue booking action, and login.

### Hero actions

Centered white headline and supporting copy over full-bleed photography, followed by a blue primary action and a light secondary action.

### Customer logo panel

A white, subtly elevated panel overlaps the hero boundary, with a centered sentence and a single horizontal row of customer logos.

### Benefit cards

A four-column benefit section uses image-led cards, numbered titles, compact gray descriptions, and a centered blue service link.

### FAQ accordion

A two-column FAQ block pairs a large left heading with right-side question rows, thin gray rules, and disclosure chevrons.

### Primary action button

Use a cobalt-filled, white-text CTA for key actions; secondary actions are light or text-led. Measured button radius values vary by component.

### Measured component styles

- **Primary button**: background #ececec · text #000000 · radius 1440px · padding 0px · 400 16px Lunar
- **Link** (“Polaroid”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Lunar
- **Navigation item** (“Service Furniture Pricing Showcase Circu”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Lunar

## Do

- Use white as the default section canvas.
- Reserve cobalt for primary actions and announcements.
- Set headings in Lunar with tight tracking.
- Use real office photography to add warmth.
- Let whitespace separate long page sections.
- Keep supporting copy muted and concise.

## Don't

- Do not invent extra brand colors.
- Do not turn every section into a card.
- Do not use gradients as a recurring surface.
- Do not overuse cobalt for decoration.
- Do not add heavy shadows or thick borders.
- Do not crowd the page with dense copy.

## Agent prompt

Create a new NORNORM-style page with a calm, editorial furniture-subscription aesthetic. Use Gallery White (#ffffff) for the main canvas, Furniture Ink (#000000) for primary text, and Soft Graphite (#6a6a6a) for secondary copy and rules. Apply Signal Cobalt (#1e37a0) sparingly to key actions and announcement details; Quiet Silver (#b2b2b2) may appear only as a subtle divider. Use Lunar or a close sans-serif substitute, with large tightly tracked headings and readable, untracked body copy. Build a broad responsive grid with generous whitespace, alternating centered and left-aligned sections, and selective two-column layouts. Use warm, realistic workspace photography for hero and feature content; keep controls simple and use shadows only for meaningful overlap. Preserve clear CTA hierarchy and avoid decorative gradients or dense card framing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with overlaid navigation, centered copy, and paired actions. | Primary and secondary CTA, Overlay navigation | Full-bleed image, White type, Cobalt CTA |
| 2 | logo-cloud | Centered statement above one horizontal row of customer logos in an overlapping white panel. | Social proof | White panel, Subtle shadow, Logo row |
| 3 | feature-grid | Centered section heading followed by four image-led benefit columns and a centered action. | Scannable benefits, Service CTA | Four-column grid, Numbered headings, Compact descriptions |
| 4 | product-showcase | Left-aligned title above a two-column image composition with service labels. | Service overview, Explore links | Editorial image grid, Short labels, White canvas |
| 5 | cta | Centered heading with two compact actions beneath. | Explore service, Book meeting | Open white space, Paired buttons |
| 6 | gallery | Left-aligned heading and supporting line above a wide multi-image carousel. | Browse client examples, Carousel navigation | Workspace photography, Image strip, Arrow controls |
| 7 | pricing | Two-column pricing statement with supporting copy, price graphic, and one action. | Pricing CTA, Per-area price cue | Large price figure, Open layout, Cobalt graphic detail |
| 8 | other | Single open band between pricing and performance statistics. | Visual pause | White space |
| 9 | stats | Three evenly spaced metric columns with centered figures, labels, and brief context. | Impact proof | Large metrics, Centered alignment, Minimal dividers |
| 10 | faq | Two-column layout with a large section heading and stacked accordion rows. | Expandable answers, Contact follow-up | Thin row rules, Disclosure chevrons |
| 11 | feature-split | Full-bleed photographic section with left-aligned white copy and a single action. | Mission statement, Learn more | Ocean photography, White text, Image overlay |
| 12 | footer | Three link columns with a large brand mark aligned on the right. | Grouped navigation | White background, Column headings, Brand graphic |
| 13 | footer | Single horizontal legal row with copyright, social icons, and privacy link. | Legal navigation, Social links | Thin top rule, Compact footer row |

## Source CSS custom properties (selected)

```css
--_text-style---font-size: 1rem;
--all-headings--heading-font-family: Lunar,sans-serif;
--h1--font-size: clamp(3rem, 2.4285714285714284rem + 2.857142857142857vw, 5rem);
--h1--letter-spacing: -.03em;
--h3--font-family: Lunar,sans-serif;
--h2--font-size: clamp(2.5rem, 2.0714285714285716rem + 2.142857142857143vw, 4rem);
--h3--letter-spacing: -.03em;
--h1--font-family: Lunar,sans-serif;
--font--primary-family: Lunar,sans-serif;
--h3--font-size: clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);
--text-main--font-size: 1.5rem;
--text-main--line-height: clamp(1.75rem, 1.6785714285714286rem + 0.35714285714285715vw, 2rem);
--text-large--letter-spacing: 0em;
--h2--letter-spacing: -.03em;
--text-small--font-size: 1.25rem;
--text-small--line-height: 1.5em;
--text-small--letter-spacing: 0em;
--text-xx-small--font-family: Lunar,sans-serif;
--text-xx-small--font-size: .75rem;
--text-xx-small--line-height: 1rem;
--text-xx-small--letter-spacing: .01em;
--space--xx-large: clamp(4.5rem, 3.5rem + 5vw, 8rem);
--space--large: clamp(2.5rem, 2.0714285714285716rem + 2.142857142857143vw, 4rem);
--space--x-large: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
--space--xxx-large: clamp(6rem, 4.285714285714286rem + 8.571428571428571vw, 12rem);
--space--x-small: 1rem;
--space--small: 1.5rem;
--_spacing---space--5: clamp(1.75rem, 1.6785714285714286rem + 0.35714285714285715vw, 2rem);
--text-x-small--font-size: 1rem;
--text-x-small--line-height: 1.5rem;
--h2--font-family: Lunar,sans-serif;
--text-x-small--letter-spacing: .01em;
--color--black-600: #0009;
--color--primary: white;
--space--medium: clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);
--border-6<deleted|variable-5920ee37-5b61-6cb2-9950-d7eeea587742>: 6px;
--color--grey: #e6e6e6;
--color--black-300: #0000004d;
--border-8<deleted|variable-c9aab26a-a293-62bf-7715-e2526d49632c>: 8px;
--color--accent: #1e37a0;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/nornorm-com