Obsidian
#000000Primary text, dominant border ink, iconography, link default
Norgram
norgram.co
Website preview
The design language
Norgram operates as an editorial design studio: a pristine white canvas, zero chromatic color, and typography as the sole protagonist. The system is ruthlessly monochrome — every screen reads as a black-on-white publication layout, with imagery providing the only relief. Helvetica Now Display carries the entire voice: whisper-tight tracking at headline sizes (87px at -0.02em), compact 12px metadata, and generous line-height restraint (1.0–1.17). Components are flat, borderless or hairline-bordered, and reduced to their typographic skeleton. There are no fills, no accents, no shadows of consequence — the discipline is in what is omitted. Page rhythm comes from alternating hero-sized image plates against dense text columns, and a persistent bottom info bar that anchors every section like a museum placard.
Color palette
neutral
Charcoal
#141414Body text, card surface, dark UI block on white canvas
Paper White
#ffffffPage canvas, card surface, inverse text on dark blocks
Bone
#efefefHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Smoke
#cececeLight dividers, secondary borders on cards
Ash
#b2b2b2Disabled button fill, inactive controls
Pewter
#999999Muted link surface, inactive background
Iron
#777777Secondary body text, metadata, muted links, supporting borders
Graphite
#5e5e5eTertiary text, micro-copy
Onyx
#1f1f1fDark mode surface (project case blocks), inverse hero panel
Typography
Type scale
Major Third (1.25) · 12px basedisplay
87px · 400 · 1.1 · -0.02px trackingThe quick brown fox jumps
subheading
36px · 400 · 1.17 · -0.008px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
caption
12px · 400 · 1.17 · -0.006px trackingThe quick brown fox jumps
micro
10px · 400 · 1.1 · -0.02px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Helvetica Now Display
- Weights
- 400, 500
- Sizes
- 10, 12, 36, 87
- Line height
- 1.00–1.17
- Letter spacing
- -0.0200em at 87px, -0.0080em at 36px, -0.0050em at 12px, -0.0060em at 12px (Medium)
- Fallback
- Inter (variable), Neue Haas Grotesk Display, Helvetica Neue
- Features
- No detected font-feature-settings; rely on tight default tracking
Display and primary voice — used at all scales from 10px micro-labels through 87px hero headlines. The custom geometric sans is the entire typographic identity.
Additional typeface
Times
- Weights
- 400
- Sizes
- 14, 16
- Line height
- 1.43–1.50
- Fallback
- Times New Roman, EB Garamond, Source Serif Pro
Secondary serif for card descriptions, footer text, editorial body copy — a deliberate contrast voice to the sans display
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 68px
- Card padding
- 12px
- Element gap
- 8px
Border radius
tags
10pxcards
4pxlarge
26pxbuttons
7pxSpacing scale
1px2px3px5px6px7px8px9px10px11px12px16px25px30px34px50px68px100pxGuidelines
Do
- Use Helvetica Now Display 400 at 87px for display headlines with letter-spacing -0.02em — this is the only acceptable display size
- Keep all UI strictly monochrome: use only #000, #141414, #777, #efefef, and #fff
- Set border-radius to 4px on cards, 7px on buttons, 10px on tag/toast surfaces
- Maintain 8px element gap and 68px section gap as the spatial rhythm
- Place full-bleed product photography on the white canvas with no border, overlay, or shadow
- Use Times 14–16px for any prose longer than a single line (footer, card descriptions, credits)
- Anchor every section with the top-left 'Norgram®' wordmark and a bottom metadata strip
Don’t
- Do not introduce any chromatic color — no blue, green, red, or brand hue in the interface
- Do not use shadows on cards, images, or buttons; reserve the drop shadow for the system toast only
- Do not use weights above 500 in Helvetica Now Display — 400 carries the voice
- Do not exceed 4px radius on cards or fall below 7px on buttons; the flatness is intentional
- Do not use bordered buttons — all actions are ghost text links or underline-on-hover
- Do not add background fills behind text blocks; let type sit directly on the canvas
- Do not mix the serif Times into headlines or navigation — confine it to editorial body copy
Components
Hero Display Headline
Page-defining typographic statementHelvetica Now Display 400 at 87px, line-height 1.10, letter-spacing -0.02em, color #141414. Left-aligned, sits directly on white canvas with no decorative chrome.
Project Image Plate
Full-bleed case study imageLarge photographic surface with no border and no radius. Bleeds to canvas edges, 1:1 or generous aspect ratio. No overlay, no caption inside the image.
Museum Placard
Section metadata stripCompact bar below each image: 12px Helvetica Now Display, 1.17 line-height, color #141414 for project name, #777777 for category. Padded 8px top/bottom, no border above, a thin 1px #000 divider in some contexts.
Dark Info Block
Inverse panel for project intro and creditingBackground #1f1f1f, padding ~40–60px. Text in #ffffff (Helvetica Now Display 36–87px) for statement, 12px #777 or #efefef for credits. Includes a 3D-styled camera icon rendered in #ff2a2a red/black in the corner — the only chromatic moment.
Top-left Brand Mark
Persistent identity anchor'Norgram®' in Helvetica Now Display 400, 12–14px, #ffffff on dark blocks / #141414 on light. Top-left of every section, never repeated elsewhere.
Secondary Text Button
Quiet action control12px Helvetica Now Display Medium, 1.67 line-height, 7px horizontal padding, 5px vertical padding. Color #000 with no background, underline on hover only.
Link Row
Inline text navigation between sections12px Helvetica Now Display, 8–12px row gap, color #141414 default / #777 muted. No bullets, no separators — just stacked text rows.
Case Study Card
Index entry for projectsFlat tile with 4px radius. Image area is borderless and full-bleed. Below the image: project name in 12px Helvetica Now Display Medium, year right-aligned in same weight.
Footer Colophon
Bottom-of-page attributionTimes 14–16px, 1.43–1.50 line-height, color #141414. Centered or left-aligned, generous breathing room above.
Push Notification Toast
System overlay for product updatesDark rounded surface (#000 or #1f1f1f), ~10px radius, white text in Helvetica Now Display 12px. 2-line layout: timestamp + headline / body. Sits top-right with minimal padding.
Index Grid
Multi-project overviewTwo-column asymmetric grid mixing tall and short project plates. 8–12px gutter, 68px vertical section gap. No card chrome around images — they touch directly.
Surfaces & elevation
Level 0
Paper White
#ffffffDefault page canvas and most section backgrounds
Level 1
Bone
#efefefSecondary surface wash, subtle differentiation within light sections
Level 2
Onyx
#1f1f1fDark hero block for project statements and credited context
Level 3
Charcoal
#141414Card surface, dense text block background
Elevation is suppressed almost entirely — pages are flat compositions of type and photography. The single exception is the system toast, which uses a soft black drop shadow to lift it off the canvas. Cards and images sit directly on the page with no shadow, no border, no rounding beyond 4px.
Toast
0 8px 24px rgba(0,0,0,0.12)
Layout & imagery
Layout
Full-bleed page model with content anchored to a 1440px max-width column. Each section is an alternating image plate: a large photograph on one side, a tight text block on the other, with the museum placard strip running the full width below. The dark Onyx hero block breaks the white rhythm and houses the case study's display headline in 87px type. Navigation is minimized to a top-left wordmark and right-aligned section text links — no menu bar, no sidebar, no footer chrome. Vertical rhythm is established by 68px section gaps and 8px micro-gaps between text lines, creating the tight editorial density of a printed catalog.
Imagery
Photography is the system's only color. Full-bleed, high-resolution, product-focused crops — eyewear, pianos, wood grain, paint swatches — treated like museum objects on a white wall. No lifestyle staging, no people, no decorative gradients. Images are unmasked, sharp-cornered, and touch each other directly in the grid with no gutter styling. The dark Onyx block introduces the only 3D-rendered object: a glossy red-and-black camera icon that breaks the photographic rule to act as a brand signature. Iconography elsewhere is line-art monochrome in #000 or #fff.
Design notes
Agent Guide
**Quick Color Reference** - text: #141414 - background: #ffffff - border: #000000 - muted text: #777777 - surface wash: #efefef - dark block: #1f1f1f - primary action: no distinct CTA color **Example Component Prompts** 1. Create a hero section: white (#ffffff) canvas. Display headline at 87px Helvetica Now Display weight 400, color #141414, letter-spacing -0.02em, line-height 1.10. No background, no border, no button — type only. 2. Create a project image plate: full-bleed photograph with 0px radius and no border. Below, a 12px Helvetica Now Display Medium placard strip with project name in #141414 left-aligned and year in #777777 right-aligned, 8px top/bottom padding. 3. Create a dark intro block: background #1f1f1f, padding 60px. 36px Helvetica Now Display 400 headline in #ffffff, letter-spacing -0.008em. Below at 12px: credit line in #efefef, line-height 1.17. 4. Create a case study index card: 4px radius, no shadow, no border. Image fills the card with no padding. Caption below in 12px Helvetica Now Display Medium #141414 with 12px padding around it. 5. Create a ghost navigation link: 12px Helvetica Now Display Medium #000, 7px horizontal padding, 5px vertical padding, no background, underline appears on hover. Inline with 12px row gap between siblings.
Chromatic Punctuation
The only color in the entire system is the glossy red-and-black 3D camera icon used in the corner of the dark Onyx block. Treat it as a brand mark, not a UI element — do not replicate its red elsewhere, and do not use it as a button fill or accent. It is a signature object, not a palette.
Editorial Density
Norgram reads like a printed art catalog: compact line-height (1.0 at display, 1.43–1.50 at body), tight tracking on all sans-serif sizes, and 8px gaps between metadata rows. Resist the urge to add breathing room — the density is the discipline.
Similar brands
Pentagram
Same wordmark-in-corner identity, black-on-white editorial layout, and zero-chromatic restraint for a design agency
Manual (manualcreative.com)
Identical Swiss-grid approach: full-bleed monochrome photography, hairline metadata strips, and Helvetica display at extreme sizes
Studio Dumbar
Same flat, borderless, image-first composition with type doing all the structural work
Bureau Cool
Editorial design agency aesthetic with white canvas, single-serif voice, and project plates that hang like gallery prints
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
