# PP Neue Montreal — Design System
> A timeless, versatile neo-grotesque sans-serif typeface designed by Pangram Pangram, celebrating modernist architecture and precision.
- **Canonical:** https://uiuxskills.com/library/pp-neue-montreal
- **Source:** https://neuemontreal.com/
- **Category:** Design & Creative Tools
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-07-20T17:48:43.623Z

---

---
version: alpha
name: PP Neue Montreal
tagline: The Timeless Grotesque Sans Serif by Pangram Pangram
description: >-
  A timeless, versatile neo-grotesque typeface specimen site reflecting modernist architecture and
  Swiss design principles.
tone: Refined, architectural, precise, and modern.
color-scheme: light
colors:
  primary: "#00FF40"
  secondary: "#0099FF"
  neutral: "#1A1A1A"
  surface: "#F0E7D4"
  surface-bright: "#EBEBEB"
  on-primary: "#1A1A1A"
  on-surface: "#1A1A1A"
  outline: "#1A1A1A"
  divider: "#1A1A1A"
  error: "#FF3B30"
typography:
  display-lg:
    fontFamily: "\"PP Neue Montreal\", sans-serif"
    fontSize: 4.5rem
    fontWeight: 900
    lineHeight: "1.0"
    letterSpacing: "-0.07em"
  display-md:
    fontFamily: "\"PP Neue Montreal\", sans-serif"
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.05em"
  headline-lg:
    fontFamily: "\"PP Neue Montreal\", sans-serif"
    fontSize: 2.25rem
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.03em"
  headline-md:
    fontFamily: "\"PP Neue Montreal\", sans-serif"
    fontSize: 1.5rem
    fontWeight: 500
    lineHeight: "1.3"
    letterSpacing: "-0.02em"
  body-lg:
    fontFamily: "\"PP Neue Montreal Text Regular\", sans-serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  body-md:
    fontFamily: "\"PP Neue Montreal Text Regular\", sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  label-md:
    fontFamily: "\"PP Neue Montreal Text Regular\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: "\"PP Neue Montreal Text Regular\", sans-serif"
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: 0.05em
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    width: auto
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 44px
    width: auto
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 44px
    width: 100%
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
    height: 24px
    width: auto
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
    height: 24px
    width: auto
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
    width: 100%
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px rgba(0,0,0,0.05)
  lg: 0 10px 15px rgba(0,0,0,0.05)
---

## Overview

PP Neue Montreal's visual identity is a masterclass in Swiss neo-grotesque design. It balances a warm, architectural cream background with striking neon green and vivid blue accents, reflecting a dual European-North American heritage. The resulting aesthetic is refined, precise, and highly structured, delivering an emotional response of editorial sophistication, clarity, and deliberate spatial rhythm.

## Colors

The color strategy relies on a high-contrast, architectural palette that pairs a warm background with striking, high-visibility accents. The primary background establishes a sophisticated editorial tone, while neon and vivid blue highlights guide user interaction and emphasize key information.

*   `colors.primary` (#00FF40): Vibrant neon green used for high-impact accents and primary interactive highlights.
*   `colors.secondary` (#0099FF): Vivid blue used for links and secondary interactive states.
*   `colors.neutral` (#1A1A1A): Dark charcoal used for primary text, borders, and structural elements.
*   `colors.surface` (#F0E7D4): Warm cream background that gives the system its sophisticated, editorial feel.
*   `colors.surface-bright` (#EBEBEB): Light grey used for secondary containers and structural blocks.
*   `colors.on-primary` (inferred) (#1A1A1A): Dark charcoal used for high-contrast text on top of the neon green primary color.
*   `colors.on-surface` (#1A1A1A): Dark charcoal used for body copy and headlines on top of the cream surface.
*   `colors.outline` (#1A1A1A): Dark charcoal used for crisp, 1px borders around cards and inputs.
*   `colors.divider` (#1A1A1A): Dark charcoal used for structural layout dividers.
*   `colors.error` (inferred) (#FF3B30): Standard high-contrast red used for error states and badges.

## Typography

The typography system is built entirely around the PP Neue Montreal family, celebrating the clean lines and geometric precision of Swiss neo-grotesque type design. High-impact display styles feature tight tracking and heavy weights, while body styles transition to the highly legible PP Neue Montreal Text variant to maintain readability across dense layouts.

*   `typography.display-lg` ("PP Neue Montreal"): Massive, high-impact display size with tight letter-spacing for hero statements and section headers.
*   `typography.display-md` ("PP Neue Montreal"): Medium display size for secondary hero elements and large callouts.
*   `typography.headline-lg` ("PP Neue Montreal"): Large headline size for major section titles.
*   `typography.headline-md` ("PP Neue Montreal"): Standard headline size for sub-sections and story headers.
*   `typography.body-lg` ("PP Neue Montreal Text Regular"): Large body copy size for introductory paragraphs and editorial stories.
*   `typography.body-md` ("PP Neue Montreal Text Regular"): Standard body copy size for descriptions and technical details.
*   `typography.label-md` ("PP Neue Montreal Text Regular"): Label size for buttons, navigation links, and metadata.
*   `typography.label-sm` ("PP Neue Montreal Text Regular"): Small label size for badges, micro-copy, and timeline dates.

## Layout

*   The layout relies on a strict, high-contrast grid system inspired by the International Typographic Style, utilizing generous spacing like `spacing.2xl` to prevent crowding and maintain editorial breathing room.
*   Sections are cleanly separated by 1px solid borders using `colors.divider` instead of relying on depth or shadow.
*   The observed top-to-bottom section order is: `nav` → `hero` → `story` → `specimen-grid` → `evolution-timeline` → `editorial-feature` → `footer`.
*   The hero composition pattern features a bold, high-contrast typographic statement in `typography.display-lg` paired with minimalist specimen images.
*   Responsive behavior relies on fluid typography that scales down gracefully on smaller viewports while maintaining tight line heights.

## Elevation & Depth

This brand is fundamentally flat, prioritizing structural layout and color contrast over depth, meaning shadows are avoided in favor of solid borders and background fills. The elevation tokens represent subtle, single-layer shadows that are inferred for fallback states where physical separation is absolutely required:

*   `elevation.sm` (inferred) — Subtle card lift or minor element separation.
*   `elevation.md` (inferred) — Dropdowns, popovers, or floating navigation elements.
*   `elevation.lg` (inferred) — Modals, drawer overlays, or high-priority dialogs.

## Shapes

Embracing architectural principles, the shape language is sharp, geometric, and highly structured. Rounded corners are kept to a bare minimum to preserve the clean, editorial aesthetic of Swiss design.

The system primarily utilizes `rounded.sm` (0px) and `rounded.md` (2px) to maintain crisp, block-like structures for cards, buttons, and input fields. The only departure from this rigid geometry is the use of `rounded.full` for badges, creating a deliberate, high-contrast shape distinction for micro-metadata.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### Button Primary

The primary button is a high-visibility interactive element filled with `colors.primary` and styled with `typography.label-md` text in `colors.on-primary`. It uses a sharp `rounded.md` corner radius and transitions to `colors.secondary` with `colors.surface` text during its hover state (`button-primary-hover`). Use this component exclusively for the main call-to-action on a page.

### Button Secondary

The secondary button features a transparent background with a solid border styled in `colors.outline` and text in `colors.neutral`. It shares the same `rounded.md` geometry and `typography.label-md` as the primary button. Use this for secondary actions or alternative paths that should not compete visually with the primary highlight.

### Card

The standard card component uses a flat background of `colors.surface-bright` with a crisp 1px border in `colors.outline` and a subtle `rounded.md` corner radius. It is padded internally with `spacing.lg` (24px) to house structured content, metadata, and body text. Use this to group related information in a grid or list layout.

### Card Elevated

The elevated card variant shifts its background to `colors.surface` and text to `colors.on-surface` while maintaining the same `rounded.md` shape and `colors.outline` border. This component is used to highlight featured content or editorial stories that require subtle visual distinction from the standard grid.

### Input Field

The input field is built with a `colors.surface` background, a solid `colors.outline` border, and standard body text in `typography.body-md`. Upon receiving focus (`input-field-focus`), the border color transitions to `colors.primary` to provide a clear, high-contrast interactive indicator. Use this for all text inputs, search bars, and form fields.

### Link

Text links are styled in `colors.secondary` using `typography.body-md` to stand out clearly within blocks of body copy. When hovered (`link-hover`), the link transitions to `colors.primary` to signal interactivity. Use this for inline text redirections and secondary navigation elements.

### Badge

The badge is a compact, pill-shaped container utilizing `rounded.full` and filled with `colors.primary` to display high-contrast text in `colors.on-primary` using `typography.label-sm`. For destructive or critical alerts, the `badge-error` variant applies a background of `colors.error` with `colors.surface` text. Use badges for status indicators, category tags, and micro-metadata.

### Divider

The divider is a minimal, 1px tall structural element filled with `colors.divider` that spans the full width of its container. It is used to separate distinct layout sections, grid columns, or editorial blocks without introducing visual clutter.

### Swatch Outline

The swatch outline is a small, geometric block of `colors.outline` with a sharp `rounded.sm` corner radius. It is used in technical specimens and color grids to showcase the system's structural boundaries and color values.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Set primary backgrounds to `{colors.surface}` to maintain the warm, sophisticated editorial aesthetic. | Do not use pure white backgrounds; avoid overriding `{colors.surface}` with unapproved bright neutrals. |
| Set large hero headlines in `{typography.display-lg}` with tight letter-spacing to respect the Swiss design style. | Do not apply loose letter-spacing or tracking to `{typography.display-lg}` or `{typography.display-md}`. |
| Use `{colors.primary}` for high-impact accents, active badges, and primary interactive button states. | Do not use `{colors.secondary}` as the default primary action background when `{colors.primary}` is available. |
| Separate major layout sections using a 1px solid line styled with `{colors.divider}`. | Do not use heavy drop shadows or complex gradients; avoid overriding flat layouts with `{elevation.lg}`. |
| Maintain a sharp, architectural shape language by using `{rounded.sm}` or `{rounded.md}` for cards and buttons. | Do not introduce highly rounded or organic shapes that conflict with `{rounded.md}` boundaries. |
| Ensure standard body text is set in `{typography.body-md}` using the PP Neue Montreal Text Regular family for legibility. | Do not use display families like `{typography.display-lg}` for long-form paragraphs or technical descriptions. |
| Apply `{colors.outline}` to define crisp, visible boundaries for input fields and standard cards. | Do not remove borders from `{components.input-field}` or `{components.card}` to ensure structural clarity. |
| Use `{spacing.2xl}` to create generous whitespace between editorial sections and prevent crowded layouts. | Do not pack elements tightly; avoid reducing margins below `{spacing.md}` for major structural blocks. |

## Content Style

*   **CTA Style:** Call-to-action labels are direct, minimal, and typically written in lowercase or sentence case. They favor single words or short, functional phrases (e.g., "download", "try", "view specimen") to maintain a clean, unembellished interface.
*   **Heading Tone:** Headlines are refined, historical, and architectural. Phrasing focuses on the structural beauty, evolution, and versatility of the typeface, avoiding aggressive marketing jargon in favor of objective, design-focused statements.
*   **Copy Density:** The copy layout is sparse, highly scannable, and editorial. Text is broken into short paragraphs or structured lists detailing font weights, history, and technical updates, surrounded by generous whitespace to emphasize typographic hierarchy.

## Imagery & Icons

The imagery style combines high-contrast typeface specimen graphics, architectural photography, and abstract vector glyphs. Photographic assets should feature clean lines, brutalist or structural forms, and a desaturated or high-contrast color treatment that complements the warm cream background. Icons must be highly geometric, sharp, stroke-based, and aligned to a strict grid, avoiding organic curves or playful illustrations to respect the Swiss design heritage.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for PP Neue Montreal, a refined, architectural typeface brand rooted in Swiss neo-grotesque modernism. Match its precise, minimal, and editorially bold tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.display-lg}`, `{spacing.2xl}` — never hardcode hex values, font sizes, or pixel radii.
2. Respect only the components listed under `components:` — `button-primary`, `card`, `input-field`, `badge`, etc. Do not invent variants or states the spec does not define.
3. Follow the Layout and Shapes narrative: strict grid, generous whitespace, 1px `{colors.divider}` borders between sections, and corners held to `{rounded.sm}` (0px) or `{rounded.md}` (2px) as the default — never exceed `{rounded.lg}` unless the spec explicitly permits it for the component.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts (e.g., adding drop shadows, rounding cards heavily, using `{colors.secondary}` as a primary CTA), surface the conflict before proceeding.
5. Apply voice rules from `voiceAndContent`: CTAs are direct, lowercase or sentence case, and short. Do not expand or rewrite copy beyond what the product team supplies.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for any interactive component the spec defines them for.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Render hero and section headlines in `{typography.display-lg}` with tight letter-spacing per the Do's.
- Maintain `{colors.surface}` as the default page background; use `{colors.on-surface}` for body text.

**Must NOT:**
- Introduce colors, radii, or font families absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add drop shadows, gradients, organic shapes, or decorative flourishes.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite page copy, button labels, or navigation items, or alter information architecture as a side effect of token application.

## When in doubt
- If a value is unspecified, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for ambiguous text, default to `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px, consistent with the grid-column structure in the Layout notes.
- Tokens marked "(inferred)" in any spec prose are approximations; defer to authoritative theme files if available.