---
name: Norgram
description: "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."
version: alpha

colors:
  background: "#1a1a1a"
  primary: "#000000"
  neutral: "#777777"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 87px
    lineHeight: 0.95
    fontWeight: 400
    letterSpacing: "-0.72px"
  body:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.17
    fontWeight: 400
    letterSpacing: "-0.065px"

rounded:
  sm: 2px
  md: 4px
  lg: 7px
  pill: 26px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A sophisticated design studio portfolio focusing on essential forms and high-contrast monochromatic presentation.

*A high-end Scandinavian design studio gallery*

## Colors

High-contrast monochromatic palette with deep black backgrounds and stark white typography

- **Background (`#1a1a1a`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#777777`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

Asymmetric masonry grid with large hero imagery and floating text overlays

*Rhythm:* Irregular grid-based rhythm driven by project imagery rather than strict vertical spacing

## Elevation & Depth

- 0 4px 12px rgba(0,0,0,0.15) on floating UI elements
- Borders: 1px solid black borders on primary elements

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 7px
- `pill`: 26px

## Components

- **button:** Small rounded pill buttons for navigation tabs
- **card:** Image-dominant project cards with metadata overlays
- **chip:** Small bordered metadata tags
- **input:** Minimal text inputs with thin borders
- **hero:** Full-width or half-width cinematic project imagery with overlaid metadata

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```