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

# Norgram · Design System

> Essential design, presented with quiet confidence.

**Theme:** light · **Industry:** design · **Source:** https://www.norgram.co/ · **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._

Norgram’s homepage pairs a stark black-and-white interface with an irregular editorial portfolio grid. Large project imagery and oversized, restrained typography make the work—not decorative UI—the focal point.

## North star

Keep the interface monochrome and quiet so oversized, carefully cropped project work carries the page.

## Overview

The page uses a deliberately limited monochrome palette: white frames the left-side work, while a near-black project panel dominates the right and carries the studio’s oversized title. Gray supports subdued metadata and secondary copy; small interface controls stay quiet. Helvetica Now Display is used with regular weight, close tracking, and a sharp contrast between very large display text and tiny captions. The composition is an asymmetric, two-column portfolio mosaic with varied image and panel heights rather than a conventional uniform card grid. Photography and rendered project imagery are shown large and cropped boldly, often retaining their own muted or grayscale character. White gutters separate blocks, and generous blank areas let individual projects breathe. The result feels like a curated design publication: high contrast, spacious, image-led, and intentionally sparse.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and bright gutters around the portfolio imagery. |
| Studio Black | `#141414` | `--color-studio-black` | surface | Large inverse project panel and dark card surfaces. |
| Soft Silver | `#cecece` | `--color-soft-silver` | neutral | Muted text in low-priority labels and supporting interface copy. |
| Quiet Gray | `#777777` | `--color-quiet-gray` | neutral | Secondary text and subdued project metadata. |
| Graphite | `#3b3b3b` | `--color-graphite` | surface | Dark button and compact notice control backgrounds. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Small high-contrast text and interface details; not the dominant dark panel tone. |
| Paper Mist | `#efefef` | `--color-paper-mist` | neutral | Minor pale text detail; not a defining canvas or section colour. |
| Slate Gray | `#555555` | `--color-slate-gray` | neutral | Minor supporting interface detail rather than a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#141414` (Studio Black) · `--color-surface-2` → `#3b3b3b` (Graphite) · `--color-text` → `#777777` (Quiet Gray) · `--color-text-muted` → `#cecece` (Soft Silver) · `--color-text-subtle` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#777777` | `#ffffff` | 4.48:1 | AA-large |
| `#777777` | `#141414` | 4.11:1 | AA-large |
| `#777777` | `#3b3b3b` | 2.5:1 | fail |
| `#cecece` | `#ffffff` | 1.57:1 | fail |
| `#cecece` | `#141414` | 11.71:1 | AAA |
| `#cecece` | `#3b3b3b` | 7.12:1 | AAA |
| `#ffffff` | `#141414` | 18.42:1 | AAA |
| `#ffffff` | `#3b3b3b` | 11.2:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Now Display - Regular | `--font-body` | webfont | 400 | Display headlines and compact project labels across the homepage. | Helvetica Neue |

- **Helvetica Now Display - Regular:** Measured regular weight; display text uses slightly tight tracking, with a strong scale contrast against small captions.

### Type scale — Custom (ratio ≈ 8.75, base 10px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 87.5px | 400 | 1.1 | -0.008em | — | Helvetica Now Display - Regular | Oversized project titles on dark portfolio panels. |
| body | 10px | 400 | 1.1 | 0 | — | Helvetica Now Display - Regular | Small project captions, metadata, and interface labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 5, 6, 7, 8, 9, 10, 11, 12, 16, 30, 100 px.
- Section rhythm 100px · element gap 8px · card padding — · max content width —.

Use an asymmetric two-column portfolio grid with white gutters and varied block heights. The first viewport places a large project image on the left and a tall, dark title panel on the right; subsequent work continues as an image-led mosaic. Keep captions aligned close to their project edges and leave substantial blank white areas between some blocks. The measured page feels spacious, but its content remains dense in visual variety. No fixed maximum width is established by the measurements, so preserve the full-width, edge-near composition rather than imposing a narrow centered container.

## Shape & elevation

- Radius: button `7px` · card `4px` · xs `4px` · sm `7px` · md `10px`
- No box shadows measured: the page is flat.

The interface is primarily flat, with no measured shadows or decorative elevation. White gutters define separation more than borders. Project panels sit beside imagery as clean blocks, with modest measured corner rounding on cards and buttons; avoid adding layered effects that compete with the portfolio.

## Imagery

Use large project-led imagery, mixing product photography, architectural or portrait photography, and bold graphic or rendered work. Crop images assertively within their grid cells, letting the subject fill the frame. Keep image treatments muted or grayscale where the work itself calls for it; the screenshot’s tonal image colours belong to portfolio content, not a broader UI palette.

## Components

### Portfolio mosaic

Asymmetric two-column composition of large image and title blocks, separated by white gutters.

### Project image

Large edge-near visual with a modest card radius; cropping and subject matter carry the visual emphasis.

### Project caption

Compact labels for project title, discipline, number, or year, set quietly against the white canvas.

### Inverse project panel

Near-black panel with an oversized white project title anchored low in the block.

### Notice control

Small dark announcement card with compact text and a rounded Close control.

### Gallery controls

Minimal previous/next and add-style controls shown as small, understated interface elements.

### Measured component styles

- **Primary button** (“6 months ago Close Sebastian Gram joins ”): background #3b3b3b · text #000000 · radius 10px · padding 3px · 400 12px Helvetica Now Display - Medium
- **Secondary button** (“Close”): background #3c3c3c · text #f3f3f3 · radius 7px · padding 5px 7px · 400 12px Helvetica Now Display - Medium
- **Card** (“6 months ago Close Sebastian Gram joins ”): background #141414 · text #000000 · radius 4.0678px · padding 0px · 400 16px Times New Roman

## Do

- Use the measured monochrome palette for interface surfaces and text.
- Give portfolio imagery the largest share of visual attention.
- Build an irregular grid instead of uniform repeated cards.
- Keep project captions small and close to their associated work.
- Use oversized regular-weight display type on selected dark panels.
- Separate blocks with clean white space rather than ornament.

## Don't

- Do not add bright interface accent colours.
- Do not force every portfolio tile to the same size.
- Do not add gradients or shadows.
- Do not let navigation or controls overpower the work.
- Do not treat photographic colours as the site’s brand palette.
- Do not add decorative borders where white gutters suffice.

## Agent prompt

Build a new design-studio page in Norgram’s restrained portfolio style. Use Gallery White (#ffffff) as the main canvas, Studio Black (#141414) for an occasional large inverse panel, Quiet Gray (#777777) and Soft Silver (#cecece) for secondary copy, and Graphite (#3b3b3b) only for compact dark controls. Create an asymmetric, spacious two-column work mosaic with varied image and panel heights, edge-near alignment, and visible white gutters. Let large, carefully cropped project imagery dominate. Use Helvetica Now Display or a close free sans-serif substitute; keep display type regular-weight and markedly larger than compact metadata. Keep surfaces flat, controls discreet, and decorative UI to a minimum. Do not introduce bright accents, gradients, or shadows.

## Source CSS custom properties (selected)

```css
--color-foreground: #000;
--color-foreground-faded: #777;
--color-foreground-faded-light: #aaa;
--color-foreground-faded-dark: #909090;
--color-number: #000;
--color-background: #fff;
--color-background-faded: #fff;
--color-card: #f5f5f5;
```

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