# Norm.ch Design System

> Architectural precision meets Swiss institutional trust through high-contrast typography and a clinical, achromatic canvas.

**Source:** https://norm.ch | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Norm.ch utilizes a sophisticated "monochrome-plus" system where structural integrity is conveyed through a strict achromatic foundation of white (#ffffff), deep charcoal (#030712), and functional grays (#d1d5db, #6b7280). The visual identity is anchored by the pairing of **GT Alpina**, a high-contrast serif used for display headings to evoke institutional authority, and **DM Sans** for utilitarian UI and body copy. Interactive elements are defined by generous pill-shaped geometry (1000px radius) and subtle elevation shadows. A singular blue accent (#286ef0) is reserved for precise textual emphasis, maintaining a professional, data-centric atmosphere.

## Signature DNA
1. **Institutional Serif Display** (GT Alpina at 54px/400 weight provides a "Swiss-architectural" header style that distinguishes the brand from standard SaaS grotesques. Observed on `norm.ch` hero and section heads.)
2. **The "Achromatic Pill"** (Primary actions use a 1000px radius with #030712 backgrounds or #d1d5db borders, creating a high-contrast, physical button feel. Observed across all analyzed pages.)
3. **Data-Grid Spacing** (A rigid 8px base unit drives section verticality, with 112px and 144px gaps creating an expansive, "blueprint" layout feel. Observed on `norm.ch` and `norm.ch/about`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 45 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#030712` | Primary text, dark button backgrounds, footer | 52 | 0.8 | Computed Style |
| `{color.ink.secondary}` | `#4b5563` | Secondary body text, sub-labels | 34 | 0.8 | Computed Style |
| `{color.border.default}` | `#d1d5db` | Button outlines, card borders, dividers | 112 | 0.8 | Computed Style |
| `{color.surface.muted}` | `#f3f4f6` | Secondary section backgrounds, card fills | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.blue}` | `#286ef0` | Text links, subtle emphasis | 6 | 0.6 | Computed Style |
| `{color.accent.gray}` | `#6b7280` | Tertiary text, button labels | 16 | 0.8 | Computed Style |
| `{color.focus.ring}` | `#3788fa` | Interactive focus states | — | 0.9 | `--tw-ring-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| `__gtAlpina_ef9d0e` | 400, 500 | Display, Headings | Libre Baskerville | Licensed |
| `__dmSans_4a1be1` | 400, 500, 700 | Body, UI, Navigation | DM Sans (Google) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display.lg}` | 54px | 60.75px | normal | 400 | Hero H1 | `h1.font-serif` |
| `{type.heading.xl}` | 38px | 48px | normal | 500 | Section H2 | `h2.mt-1` |
| `{type.heading.lg}` | 36px | 40px | normal | 400 | Secondary H2 | `h2.text-gray-900` |
| `{type.heading.md}` | 30px | 36px | normal | 500 | Card Titles | `h3.font-medium` |
| `{type.heading.sm}` | 20px | 30px | normal | 400 | Lead Paragraphs | `p.text-xl` |
| `{type.body.lg}` | 18px | 28px | normal | 500 | Navigation Links | `nav.hidden` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `a.relative` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Captions, Small UI | `p` |

### Principles
1. **Serif for Authority:** All major display moments use GT Alpina to signal institutional trust.
2. **Sans for Utility:** All interactive labels and dense body copy use DM Sans for maximum legibility.
3. **Low Tracking:** Letter spacing remains "normal" or slightly negative (-0.15px) for small body text, avoiding airy or loose typesetting.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 7 |
| `{space.sm}` | 16px | 14 |
| `{space.md}` | 24px | 12 |
| `{space.lg}` | 64px | 7 |
| `{space.xl}` | 112px | 4 |
| `{space.section}` | 144px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Footers, section containers | 275 occurrences |
| `{radius.sm}` | 8px | Form inputs | Text Input component |
| `{radius.lg}` | 16px | Content cards | Card component |
| `{radius.pill}` | 1000px | Primary/Secondary Buttons | Pill Button component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Standard cards, sections | Default state |
| `{shadow.raised}` | `0 1px 2px 0 rgba(0,0,0,0.05)` | Primary buttons | Pill Button component |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main call-to-action (e.g., "Demo buchen")
**Pages observed:** All
**Spec:** Background `{color.ink.primary}` (#030712) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (1000px) / Padding 13px 20px / Typography `{type.body.md}` (16px/500)
**States observed:** Default | Hover: captured | Focus: captured | Active: captured | Disabled: not captured

#### Pill Button (Secondary)
**Role:** Ghost/Outline actions
**Pages observed:** All
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#030712) / Border 1px `{color.border.default}` (#d1d5db) / Radius `{radius.pill}` (1000px) / Padding 13px 20px
**States observed:** Default | Hover: captured | Focus: captured

### Tier 2: Patterns

#### Text Input
**Role:** Form fields and search
**Pages observed:** All
**Spec:** Background `{color.ink.primary}` (#1f2937 variant) / Text `{color.ink.secondary}` (#9ca3af) / Radius `{radius.sm}` (8px) / Padding 13px 16px
**States observed:** Default | Focus: captured

#### Card
**Role:** Feature and news containers
**Pages observed:** `norm.ch`
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px `{color.border.default}` (#e5e7eb) / Radius `{radius.lg}` (16px) / Padding 24px
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** All
**Spec:** Background `{color.ink.primary}` (#030712) / Text `{color.border.default}` (#d1d5db) / Radius `{radius.none}` / Typography `{type.body.md}` (16px)
**States observed:** Default

#### Surface Section
**Role:** Alternating content bands
**Pages observed:** `norm.ch`
**Spec:** Background `{color.surface.muted}` (#f3f4f6) / Padding-top `{space.xl}` (112px)
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px (estimated from 1440px viewport) |
| Section Gutter | 144px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to "Menü" button; H1 downscales; vertical stacking for all 3-up grids. |
| Desktop | 1440px | Horizontal navigation; multi-column feature grids; 144px section spacing. |

## Do's
- Use **GT Alpina** for all headlines above 30px to maintain institutional tone.
- Apply **1000px border-radius** to all interactive buttons.
- Maintain a **144px vertical gap** between major homepage sections.
- Use **#030712** for primary text to ensure high contrast against white.
- Reserve **#286ef0** for inline text links and small UI accents only.

## Don'ts
- **Don't** use sub-brand colors (if any were present) for parent-level primary actions.
- **Don't** use serif fonts for body copy; keep GT Alpina for display only.
- **Don't** apply shadows to standard cards; keep the layout flat and architectural.
- **Don't** use #000000 for text; use the brand-specific **#030712**.
- **Don't** mix border radii; use either 0px (structural), 16px (cards), or 1000px (buttons).

## Quick start

```css
/* CSS Variables */
:root {
  --color-canvas: #ffffff;
  --color-ink-primary: #030712;
  --color-border-default: #d1d5db;
  --font-display: "__gtAlpina_ef9d0e", serif;
  --font-sans: "__dmSans_4a1be1", sans-serif;
  --radius-pill: 1000px;
  --space-section: 144px;
}
```

## Agent prompt examples
- "Generate a hero section with a 54px GT Alpina H1, a 1000px radius black button, and 144px bottom padding."
- "Create a feature grid using 16px rounded cards with 1px #d1d5db borders on a #ffffff background."
- "Design a footer with a #030712 background and #d1d5db text using 16px DM Sans."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Page | https://norm.ch | 1440px | 2026-06-06 |
| Pricing | https://norm.ch/pricing | 1440px | 2026-06-06 |
| Mobile Main | https://norm.ch | 390px | 2026-06-06 |