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

# Pangram Pangram Foundry · Design System

> A quiet canvas for expressive type.

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

Pangram Pangram’s homepage pairs a restrained neutral interface with oversized, expressive type and immersive campaign imagery. A spacious catalog and editorial modules make the foundry’s fonts the clear focus.

## North star

Keep the interface quiet and spacious so expressive type specimens and campaign imagery carry the visual emphasis.

## Overview

The page is built on a pale, near-white canvas, with black typography and restrained vivid orange reserved for new badges, selected links, and standout actions. Rounded cards and broad, image-led banners create a soft framework without competing with the fonts. Neue Montreal carries most interface and reading text, while large centered specimen headlines demonstrate each featured family directly. The result is editorial rather than conventionally transactional: typography acts as both product and visual identity. Layout alternates full-width campaign panels with dense but airy font grids, project imagery, brand logos, and educational articles. Large gaps separate major chapters, while compact card labels and navigation keep scanning efficient. Campaign photographs are often darkened behind white type for contrast; catalog specimens return to a light neutral ground so letterforms remain easy to compare. The palette measured for interface chrome is distinct from photographic colors inside campaign artwork.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Ember | `#ff2f00` | `--color-foundry-ember` | accent | Orange accent for new badges, highlighted links, selected actions, and footer details. |
| Soft Graphite Mist | `#ededed` | `--color-soft-graphite-mist` | surface | Muted card and button surface, including the font specimen grid. |
| Typeface Ink | `#000000` | `--color-typeface-ink` | brand | Primary text, navigation, dark CTA surfaces, and strong contrast on pale backgrounds. |
| Paper Light | `#fafafa` | `--color-paper-light` | surface | Main page and section background, supporting clean typography and campaign blocks. |
| Caption Gray | `#666666` | `--color-caption-gray` | neutral | Muted supporting and footer text; secondary information beneath stronger headings. |
| Specimen Gold | `#ffb700` | `--color-specimen-gold` | semantic | Minor badge color observed in catalog UI; keep it secondary to the orange accent. |

### Semantic aliases

`--color-canvas` → `#ededed` (Soft Graphite Mist) · `--color-surface` → `#fafafa` (Paper Light) · `--color-surface-2` → `#000000` (Typeface Ink) · `--color-text` → `#000000` (Typeface Ink) · `--color-text-muted` → `#666666` (Caption Gray) · `--color-text-subtle` → `#fafafa` (Paper Light) · `--color-border` → `#ff2f00` (Foundry Ember) · `--color-accent` → `#ff2f00` (Foundry Ember)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ededed` | 17.94:1 | AAA |
| `#000000` | `#fafafa` | 20.12:1 | AAA |
| `#666666` | `#ededed` | 4.9:1 | AA |
| `#666666` | `#fafafa` | 5.5:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#fafafa` | `#ededed` | 1.12:1 | fail |
| `#fafafa` | `#000000` | 20.12:1 | AAA |
| `#ff2f00` | `#ededed` | 3.17:1 | AA-large |
| `#ff2f00` | `#fafafa` | 3.56:1 | AA-large |
| `#ff2f00` | `#000000` | 5.66:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 400, 600, 530 | Primary interface, navigation, body copy, and most display headings | Inter |
| neue-york-normal-bold | `--font-neue-york-normal-bold` | webfont | 700 | Occasional bold editorial heading and font-specific display specimen | DM Serif Display |
| neue-gstaad-normal-bold | `--font-neue-gstaad-normal-bold` | webfont | 700 | Font-specific specimen display | Inter |
| neue-montreal-semibold | `--font-neue-montreal-semibold` | webfont | 600 | Emphasized Neue Montreal headings and interface labels | Inter |
| palma-fizzy-heavy | `--font-palma-fizzy-heavy` | webfont | 800, 400 | Palma font specimen and campaign display | Nunito Sans |
| altera-carve-semibold | `--font-altera-carve-semibold` | webfont | 600, 400 | Altera specimen display | Cormorant Garamond |

- **Neue Montreal:** Predominantly regular with measured semibold and intermediate nav weight; natural case, neutral tracking.
- **neue-york-normal-bold:** Bold serif contrast against the dominant sans; use selectively for expressive specimen moments.
- **neue-gstaad-normal-bold:** Bold display treatment used to demonstrate the featured family; preserve its typographic character where available.
- **neue-montreal-semibold:** Semibold emphasis within the otherwise restrained sans-serif hierarchy.
- **palma-fizzy-heavy:** Heavy display face for showcasing Palma; allow its distinctive forms to lead rather than adding decoration.
- **altera-carve-semibold:** Semibold display specimen with a distinctive carved character; use in product-led typography moments.

### Type scale — Augmented Fourth (ratio ≈ 1.389, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72.5px | 600 | 1 | 0 | — | Neue Montreal | Oversized featured font names and campaign specimen headlines. |
| h1 | 48.5px | 600 | 1 | 0 | — | Neue Montreal | Primary page or major section headings. |
| h2 | 36px | 400 | 1 | 0 | — | Neue Montreal | Section titles and prominent editorial statements. |
| h3 | 29.5px | 700 | 1.1 | 0 | — | neue-york-normal-bold | Card headlines and selected serif editorial titles. |
| h4 | 22px | 400 | 1.3 | 0 | — | Neue Montreal | Supporting headings and secondary feature titles. |
| body | 14px | 400 | 1.3 | 0 | — | Neue Montreal | Descriptions, explanatory copy, and card details. |
| caption | 12.5px | 400 | 1.17 | 0 | — | Neue Montreal | Compact metadata, labels, and specimen annotations. |
| button | 12.5px | 400 | normal | 0 | — | Neue Montreal | Action labels in pill-shaped CTA controls. |
| nav | 14px | 530 | 1.3 | 0 | — | Neue Montreal | Header navigation and prominent menu links. |
| link | 14px | 400 | normal | 0 | — | Neue Montreal | Inline actions and catalog or editorial links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 15, 23, 26, 31 px.
- Section rhythm 367px · element gap 8px · card padding 26px · max content width 1260px.

A centered, spacious desktop composition uses a measured maximum content width of 1260px. The header is a slim horizontal row with the wordmark, centered navigation, and utility icons. Long single-column campaign panels lead into four-column specimen cards, followed by wider image carousels and mixed editorial grids. Major sections have generous separation; card interiors remain compact and consistently padded. Headings are often centered in hero panels and left-aligned in catalog or content sections. Keep the overall density low while allowing catalog grids to become information-rich.

## Shape & elevation

- Radius: button `9999px` · input `20px` · card `20px` · badge `9999px` · link `20px` · xs `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface reads as mostly flat: no measured shadows or gradients define its hierarchy. Rounded card surfaces sit directly on the pale canvas, with spacing doing more work than elevation. Use occasional fine borders for controls or image edges, and rely on dark overlays within campaign imagery to support text contrast rather than floating UI layers.

## Imagery

Use large campaign photography as full-bleed or generously framed panels, with rounded corners and centered type overlays. Featured imagery ranges from mountain landscapes and citrus imagery to product and print compositions. Darken or choose images with sufficient contrast behind white specimen text. Catalog cards favor simple letterform samples on quiet neutral grounds. Keep photographic palette variation inside the artwork rather than treating it as the site’s core UI palette.

## Components

### Campaign hero

Large rounded photographic panel with centered font name, short descriptor, a small accent badge, and paired pill-shaped actions.

### Font specimen card

Rounded #ededed card with black font-family metadata, compact labels, and a large Aa sample.

### Pill CTA

Compact rounded action, commonly white with black text, neutral with black text, or black with white text.

### Accent badge

Small fully rounded status pill; use #ff2f00 for New and reserve alternate badge colors for rare status variations.

### Project carousel card

Wide rounded visual card with imagery, small category badges, a project title, and a concise Read More action.

### Newsletter field

Broad light input with rounded corners, black text, and a simple email-entry prompt.

### Catalog action

Prominent full-width #ff2f00 link button with black text that closes the specimen grid.

### Measured component styles

- **Primary button** (“Read More”): background #ffffff · text #000000 · radius 20px · padding 7.7px 23px · 400 14px Neue Montreal
- **Secondary button** (“Explore font”): background #ededed · text #000000 · radius 20px · padding 7.7px 23px · 400 14px Neue Montreal
- **Link** (“Neue Gstaad Collection 112 styles + Vari”): background #ededed · text #000000 · radius 20px · padding 25.7px · 400 14px Neue Montreal
- **Input**: background #ffffff · text #000000 · radius 20px · padding 24px 45.9px 24px 24px · 400 14px Neue Montreal
- **Card** (“Branding Digital Mori GSAP Read More”): background #ededed · text #000000 · radius 20px · padding 25.7px · 400 14px Neue Montreal
- **Badge** (“New”): background #ff2f00 · text #000000 · radius 999px · padding 4px 11.7px · 400 12.4448px Neue Montreal
- **Navigation item** (“Pangram Pangram Foundry All fonts Font s”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Neue Montreal

## Do

- Keep the page canvas pale and visually quiet.
- Let oversized font specimens lead each featured panel.
- Use orange sparingly for badges and high-priority actions.
- Give campaign photography generous rounded framing.
- Use whitespace to separate major content chapters.
- Keep catalog labels compact and easy to scan.

## Don't

- Do not add decorative gradients or heavy shadows.
- Do not let interface chrome compete with the type.
- Do not apply the orange accent to every link or card.
- Do not use tight, crowded spacing between major sections.
- Do not treat photography colors as the core UI palette.
- Do not replace specimen-focused layouts with generic product tiles.

## Agent prompt

Build a new page in Pangram Pangram Foundry’s editorial font-foundry style. Use Paper Light (#fafafa) as the quiet canvas, Typeface Ink (#000000) for core text, and Soft Graphite Mist (#ededed) for specimen cards. Reserve Foundry Ember (#ff2f00) for selected badges and standout actions; Caption Gray (#666666) is for secondary copy. Structure the page with a restrained header, spacious campaign panels, and specimen-led grids. Use Neue Montreal or a close sans substitute such as Inter for interface and body text, then feature expressive, large type samples as the content itself. Frame photography in rounded panels and ensure overlay text remains legible. Keep surfaces flat, use whitespace rather than shadows for hierarchy, and make actions compact pill shapes.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width rounded campaign image with centered specimen heading and paired actions. | Explore font, Try for Free | New badge, white headline overlay, pill CTAs |
| 2 | hero | Single image-led campaign panel with centered display title and actions. | Explore font, Try for Free | orange status badge, rounded image, centered white type |
| 3 | hero | Rounded photographic panel with centered display text and short supporting line. | Explore font, Try for Free | Early access badge, dark image overlay, paired pill CTAs |
| 4 | product-grid | Four-column catalog grid with compact controls and a full-width catalog action. | Grid or list view, View all fonts | neutral specimen cards, Aa previews, status badges |
| 5 | gallery | Wide multi-column visual cards with project details and carousel navigation. | Browse projects, Read More | image cards, category badges, carousel dots |
| 6 | cta | Centered statement and supporting copy inside a contrasting dark rounded block. | Learn more about us | black panel, white heading, small orange detail |
| 7 | logo-cloud | Compact horizontal row of brand marks beneath a left-aligned heading. | View All | logo tiles, light neutral surfaces |
| 8 | feature-split | Single rounded image-led feature with centered copy and a microsite action. | Experience the microsite | photographic background, centered overlay, rounded panel |
| 9 | feature-grid | Two-column grid of image-based promotional cards with concise centered copy. | Get it now, Try Spaceship now | two-up cards, dark and light imagery, pill actions |
| 10 | feature-grid | Two side-by-side editorial cards combining product imagery and short calls to action. | Buy now, Explore now | editorial artwork, rounded cards, centered copy |
| 11 | content-feed | Editorial card carousel with left-aligned section heading and wide article previews. | View all, Read More | article imagery, topic badges, carousel pagination |
| 12 | footer | Broad pale footer with multi-column link lists, newsletter field, payment marks, and legal details. | Browse categories, Subscribe, Back to top | script wordmark, dense link columns, rounded email field |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--swiper-navigation-color: hsl(0 0 100%);
--swiper-pagination-bullet-inactive-color: hsl(0 0 0%);
--swiper-pagination-color: hsl(0 0 0%);
--color-black: 0 0 0%;
--color-white: 0 0 100%;
--color-offwhite: 0 0 98%;
--color-gray: 0 0 93%;
--color-gray-medium: 0 0 85%;
--color-gray-dark: 0 0 67%;
--color-gray-darker: 0 0 40%;
--color-red: 11 100% 50%;
--color-yellow: 43 100% 50%;
--color-green: 148 100% 68%;
--color-blue: 209 100% 87.5%;
--color-orange: 24.9 100% 48.6%;
--color-primary: 11 100% 50%;
--color-foreground: 0 0 0%;
--color-background: 0 0 98%;
--color-link: 0 0 0%;
--color-link-hover: 11 100% 50%;
--space-3xs: clamp(.25rem, .25rem + 0vw, .25rem);
--space-2xs: clamp(.4375rem, .4259rem + .0581vw, .5rem);
--space-xs: clamp(.6875rem, .6759rem + .0581vw, .75rem);
--space-s: clamp(.875rem, .8517rem + .1163vw, 1rem);
--space-m: clamp(1.3125rem, 1.2776rem + .1744vw, 1.5rem);
--space-l: clamp(1.75rem, 1.7035rem + .2326vw, 2rem);
--space-xl: clamp(2.625rem, 2.5552rem + .3488vw, 3rem);
--space-2xl: clamp(3.5rem, 3.407rem + .4651vw, 4rem);
--space-3xl: clamp(5.25rem, 5.1105rem + .6977vw, 6rem);
--space-4xl: clamp(7rem, 6.814rem + .9302vw, 8rem);
--space-5xl: clamp(8.75rem, 8.5174rem + 1.1628vw, 10rem);
--space-3xs-2xs: clamp(.25rem, .2035rem + .2326vw, .5rem);
--space-2xs-xs: clamp(.4375rem, .3794rem + .2907vw, .75rem);
--space-xs-s: clamp(.6875rem, .6294rem + .2907vw, 1rem);
--space-s-m: clamp(.875rem, .7587rem + .5814vw, 1.5rem);
--space-m-l: clamp(1.3125rem, 1.1846rem + .6395vw, 2rem);
--space-l-xl: clamp(1.75rem, 1.5174rem + 1.1628vw, 3rem);
--space-xl-2xl: clamp(2.625rem, 2.3692rem + 1.2791vw, 4rem);
--space-2xl-3xl: clamp(3.5rem, 3.0349rem + 2.3256vw, 6rem);
```

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