# Norgram · Design system migration spec

> Source: https://www.norgram.co  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a high-end studio portfolio that derives its premium feel from extreme restraint, typographic control, and photographic focus.

## 1. Identity DNA

Norgram’s design system operates like a high-end Scandinavian gallery, where the architecture recedes to let the work command the space. Its identity is built on essential forms and extreme restraint, a digital environment that feels less decorated than distilled.

**One-liner:** A sophisticated design studio portfolio focusing on essential forms and high-contrast monochromatic presentation.
**Keywords:** Premium · Minimalist · Essential · Modern
**Analogy:** A high-end Scandinavian design studio gallery

## 2. Color

The palette is a strict monochromatic study, using deep blacks and stark whites as its primary materials, with mid-tone grays reserved for supporting metadata. This is a system built on contrast and absence, where color serves hierarchy, not expression.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1a1a1a` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#777777` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochromatic palette with deep black backgrounds and stark white typography

The principle is absolute: chromatic neutrality ensures photographic work remains the sole source of color and narrative.

## 3. Typography

The typographic voice is geometric and monumental, delivered entirely by Helvetica Now Display. Tight letter-spacing and minimal scale contrast create a singular, authoritative presence that bridges massive headlines and fine-print metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 87px | 0.95 | 400 | -0.72px | Primary hero headlines |
| body | 12px | 1.17 | 400 | -0.065px | Default UI text and metadata |

**Type rules:**
- Tight letter-spacing for large display headlines
- Heavy reliance on Helvetica Now Display for both headlines and body
- Minimal typographic hierarchy primarily driven by scale contrast

## 4. Spacing

Spacing follows the irregular rhythm of project imagery, not a strict vertical baseline, allowing the grid to flex around photographic composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular grid-based rhythm driven by project imagery rather than strict vertical spacing

## 5. Surfaces

Depth is communicated through minimal, deliberate means: subtle box shadows on floating panels and a single-pixel black border on primary interactive elements. The surface is otherwise flat, prioritizing content over skeuomorphic decoration.

- **Radius:** sm 2px · md 4px · lg 7px · pill 26px
- **Shadows:**
  - 0 4px 12px rgba(0,0,0,0.15) on floating UI elements
- **Borders:** 1px solid black borders on primary elements

## 6. Layout

The structural skeleton is an asymmetric masonry grid, built to accommodate large, cinematic project imagery. Floating text overlays and varied image dimensions create a dynamic, yet controlled, spatial dialogue.

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

**Skeleton:** Asymmetric masonry grid with large hero imagery and floating text overlays

## 7. Motion & Interaction

Motion is functional and refined, defined by smooth panel slides and deliberate opacity fades. A consistent 0.4-second ease-in-out timing governs standard state changes, creating a rhythm that is perceptible but never performative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.87, 0, 0.13, 1)`
- **Patterns:**
  - Smooth entrance transitions for sliding UI panels
  - Opacity fades for overlay elements
  - Subtle hover state transitions on interactive elements

- **Hover:** Subtle opacity or transform shifts on interactive elements
- **Click:** Smooth panel transitions
- **Transition:** Opacity 0.4s ease-in-out for standard state changes
- **Keyboard:** Standard focus visibility on interactive elements

## 8. Voice & Don'ts

The editorial voice is minimalist and confident, matching the geometric sans-serif headlines with understated, functional navigation. Every element, from button labels to metadata chips, speaks with the same quiet authority.

- **Tone:** Minimalist, confident, and authoritative
- **Headline style:** Large, tight-tracked geometric sans-serif statements
- **CTA style:** Understated, functional navigation
- **Avoid:** Decorative elements / Busy layouts / Bright accent colors

### Don'ts
- ❌ Don't use bright accent colors — the screenshot shows a strict monochromatic palette
- ❌ Don't use serif fonts — the screenshot shows Helvetica Now Display throughout
- ❌ Don't use wide letter-spacing — the screenshot shows tight letter-spacing even at large scales
- ❌ Don't use small border-radii for everything — the screenshot shows pill-shaped buttons alongside square corners
- ❌ Don't use heavy drop shadows — the screenshot shows minimal, subtle shadows
- ❌ Don't use complex grid lines — the screenshot shows a clean, borderless layout except for specific UI elements

The system deliberately avoids decorative elements, busy layouts, and bright accents, understanding that true premium is defined as much by what is omitted as by what is present.

## System Prompt (paste into AI tool)

```
Norgram is a premium design studio portfolio characterized by a stark monochromatic palette and geometric sans-serif typography. The primary background is deep charcoal #1a1a1a with stark white #ffffff or solid black #000000 text. Key font category is geometric-sans, specifically Helvetica Now Display, used for both massive display headlines and tiny metadata. The layout relies on an asymmetric grid with large, cinematic project imagery and floating text overlays. Critical donts: Do not introduce bright accent colors; maintain the strict monochrome aesthetic. Do not use serif typefaces; the identity is built on geometric sans. Do not apply wide letter-spacing; the design uses tight tracking even at display sizes. The motion is subtle, using ease-in-out and cubic-bezier transitions for panel slides and opacity fades. The overall feel is refined, essential, and highly controlled.
```