Ember Orange
#ff2f00Orange action color for filled buttons, selected navigation states, and focused conversion moments.
Pangram Pangram Foundry
pangrampangram.comWebsite preview
The design language
Pangram Pangram Foundry is a type foundry that lets the typefaces speak: an editorial canvas of near-pure grayscale, with one saturated orange-red acting as a hot accent. Hero sections are full-bleed photographic plates with massive display type overlaid in white — the type IS the product, so the UI recedes. Surfaces stay quiet (#fafafa and #ededed), borders are hairline black at 1px, and the only chromatic punctuation is the single #ff2f00 accent used for status badges, icons, and tag chrome. Components are lightweight: pill-shaped controls, ghost buttons, soft card containers, and almost no elevation. The overall effect is a curatorial print catalogue translated to screen — restrained, confident, type-first.
Color palette
brand
neutral
Marble White
#fafafaPage canvas, card surfaces, input fields, default panel backgrounds. The dominant surface tone, barely off-white for warmth
Stone Gray
#edededSecondary surface for filled buttons, muted card backgrounds, image placeholder fills. One step deeper than Marble White to create gentle separation without contrast
Graphite
#666666Secondary text, link color, subdued metadata, helper text. Reads as muted black — never used for primary text or headings
Ink Black
#000000Primary text, all headings, hairline borders (cards, lists, badges, inputs), icons, navigation. The structural backbone — 1px borders everywhere define the system
semantic
Signal Yellow
#ffb700Yellow state accent for badges, validation surfaces, and short status labels.
Ice Blue
#bfe0ffBlue state accent for badges, validation surfaces, and short status labels.
Typography
Type scale
Major Third (1.25) · 15px basedisplay-xl
145px · 600 · 1The quick brown fox jumps
display
121px · 600 · 1The quick brown fox jumps
text-103
103px · 600 · 1The quick brown fox jumps
heading-lg
48px · 600 · 1.1The quick brown fox jumps
heading
36px · 400 · 1.17The quick brown fox jumps
text-24
24px · 400 · 1.3The quick brown fox jumps
heading-sm
22px · 400 · 1.17The quick brown fox jumps
text-20
20px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neue Montreal
- Weights
- 400, 530, 600
- Sizes
- 12, 14, 16, 18, 20, 22, 24, 36, 48, 121, 145
- Line height
- 1.00, 1.10, 1.17, 1.20, 1.30
- Fallback
- Inter, Söhne, or Neue Haas Grotesk Display Pro
The workhorse and display face. Weight 400 for body, weight 530 for subheads and medium emphasis, weight 600 for headings and display overlays. Used at 145px for hero type, 48px for section headlines, 18-20px for body, 14px for navigation, 12px for badges. The type IS the product — this single family carries the entire brand voice.
Additional typeface
Neue Montreal Semibold
- Weights
- 600
- Sizes
- 103, 121
- Line height
- 1.00
- Fallback
- Inter Tight Bold
Heavy display variant used for the largest typographic moments in specimen cards. Tighter, more compressed than standard weight 600.
Additional typeface
Neue York
- Weights
- 400, 700
- Sizes
- 103, 121
- Line height
- 1.00
Companion serif/contrast face shown in specimen contexts. The 700 weight provides a sharp counterpoint to the geometric Montreal.
Additional typeface
Frama Semibold
- Weights
- 580
- Sizes
- 103
- Line height
- 1.00
Specimen showcase weight — displayed at exact 103px in the grid to demonstrate each family's character at scale.
Additional typeface
Kyoto Semibold
- Weights
- 600
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Neue Gstaad Bold
- Weights
- 700
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Palma Fizzy Heavy
- Weights
- 800
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Mori Bold
- Weights
- 700
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Museum Light
- Weights
- 300
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — the 300 weight in the grid is deliberately whisper-light, making weight 300 headlines read as anti-convention: authority through restraint rather than volume.
Additional typeface
Neue Corp Semibold
- Weights
- 500
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Watch Medium
- Weights
- 485
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Monument Narrow Medium
- Weights
- 525
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
Model Plastic Regular
- Weights
- 500
- Sizes
- 103
- Line height
- 1.00
Specimen showcase — fixed 103px display size in the font grid.
Additional typeface
neue-gstaad-normal-bold
- Weights
- 700
- Sizes
- 103px
- Line height
- 1
neue-gstaad-normal-bold — detected in extracted data but not described by AI
Additional typeface
neue-corp-normal-semibold
- Weights
- 500
- Sizes
- 103px
- Line height
- 1
neue-corp-normal-semibold — detected in extracted data but not described by AI
Additional typeface
neue-york-normal-normal-bold
- Weights
- 400
- Sizes
- 121px
- Line height
- 1
neue-york-normal-normal-bold — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 92px
- Card padding
- 26px
- Element gap
- 8px
Border radius
cards
20pxsmall
20pxbadges
999pxinputs
20pxbuttons
20pxSpacing scale
4px8px12px14px15px20px23px24px26px31px36px83px92px103pxGuidelines
Do
- Use only #ff2f00 as the chromatic accent — it must remain rare enough to register as editorial highlight, not decoration
- Set all borders to 1px solid #000000 for cards, lists, badges, and inputs — the hairline black is the structural skeleton
- Use 20px border-radius for cards, buttons, and inputs; reserve 999px exclusively for badge pills
- Set hero type to Neue Montreal at 121-145px weight 600 with line-height 1.00 — the type should fill the card vertically
- Use status badges (#ff2f00 New, #ffb700 Update, #bfe0ff Early Access) as the only chromatic elements in any view
- Set card padding to 26px and card gaps to 15-23px to maintain the comfortable editorial density
- Let full-bleed photography carry the hero sections — never apply colored backgrounds to hero cards
Don’t
- Do not use #ff2f00 for body text, headings, or large surfaces — its role is badge/punctuation only
- Do not apply box-shadow or heavy elevation — the system relies on 1px borders and whitespace, not depth
- Do not use radius values other than 20px (cards/buttons/inputs) and 999px (badges) — the rounded softness is signature
- Do not use colors other than the defined palette — no decorative blues, greens, or purples for UI chrome
- Do not use multiple type families in the same view — Neue Montreal carries everything except specimen showcases
- Do not set line-height above 1.30 for any size — the tight leading is essential to the editorial feel
- Do not center body text or metadata — only headlines and hero type use center alignment
Components
Hero Font Showcase Card
Full-bleed feature card for a typeface releaseLarge rounded card (20px radius) with photographic background image filling the entire surface, title text in Neue Montreal at 121-145px weight 600 in white overlaid center, subtitle at 18px weight 400, and a small status badge pill floating above the title. The image darkens or uses a gradient overlay to ensure white text contrast.
Status Badge — New
Highlight tag for newly released fontsPill shape (999px radius), #ff2f00 background, white text in Neue Montreal 12px weight 500, padding 4px 12px. The signature accent — appears on most cards in the grid.
Status Badge — Update
Highlight tag for recently updated fontsPill shape (999px radius), #ffb700 background, black text in Neue Montreal 12px weight 500, padding 4px 12px. Yellow variant of the status badge.
Status Badge — Early Access
Highlight tag for preview/beta releasesPill shape (999px radius), #bfe0ff background, black text in Neue Montreal 12px weight 500, padding 4px 12px. Cool blue variant for access-state distinction.
Primary Filled Button
Main call-to-action (Explore font, Try for Free)20px border-radius, white (#fafafa) background, 1px black border, Neue Montreal 14px weight 500, black text, padding 8px 23px. The filled white pill against dark or photographic backgrounds is the signature button form.
Ghost Outlined Button
Secondary action paired with primary button20px border-radius, transparent background, 1px white border, Neue Montreal 14px weight 500, white text, padding 8px 23px. Used alongside filled buttons on dark/image backgrounds for the secondary action.
Font Specimen Card (Grid View)
Card showing one typeface in the font catalog grid#fafafa background, 1px black border, 20px radius, padding 26px. Contains font name at 18px weight 530, metadata (styles count, features) at 14px weight 400 in Graphite, a status badge in the top-right, and a large 'Aa' specimen at ~103px in the displayed font weight, bottom-aligned. Cards in a 4-column grid with 15-23px gaps.
Navigation Bar
Top site navigationFull-width sticky bar, transparent or #fafafa background, height ~60px. Logo 'Pangram Pangram Foundry' in Neue Montreal 14px weight 530 left, nav links in Neue Montreal 14px weight 400 center (23px gap between items), search/cart/menu icons right. No background fill — relies on hairline bottom border.
Section Divider
Visual separator between content sections1px black border-bottom or generous vertical spacing (92px). The system prefers whitespace over rules; dividers are minimal.
Input Field
Text input for search or forms1px black border, 20px radius, padding 24px vertical, #fafafa background, Neue Montreal 16px weight 400, black text. Generous padding makes inputs feel spacious and editorial.
View Toggle (Card View / List View)
Switch between display modes in the font gridInline pill control with two text options separated by a small icon. Active state uses #ff2f00 underline or indicator. Neue Montreal 14px weight 500.
Footer Link Group
Footer navigation clusterStacked links in Neue Montreal 14px weight 400, Graphite color, 4-8px vertical gap. Underline on hover with #666 border-bottom.
Surfaces & elevation
Level 0
Canvas
#fafafaPage background — the base white-marble surface
Level 1
Card
#fafafaFont specimen cards, content panels — same as canvas, separated by 1px black border
Level 2
Secondary Fill
#edededFilled buttons, muted card backgrounds, image placeholders — one step deeper for gentle separation
Level 3
Accent Surface
#bfe0ffInfo badge background for Early Access status
Level 4
Accent Surface
#ffb700Warning badge background for Update status
Level 5
Accent Surface
#ff2f00Primary accent badge background for New status and icon highlights
The design system deliberately avoids box-shadow and elevation. Separation is achieved exclusively through 1px solid #000000 hairline borders and whitespace. The flat, borderless depth creates a print-catalogue feel — surfaces sit on the page like printed sheets rather than floating digital cards. The only 'depth' technique is a subtle dark gradient overlay on hero images to ensure white text contrast.
Layout & imagery
Layout
Max-width 1200px centered content with full-bleed hero cards that break the container. The page model alternates between two primary section types: (1) full-width feature cards with photographic backgrounds and overlaid display type, stacked vertically with generous gaps, and (2) a 4-column grid of font specimen cards on a #fafafa background. The font grid is the workhorse — 4 columns at desktop with 15-23px gaps, 2 columns on tablet, 1 column on mobile. Section rhythm is consistent: each section separated by 92px of vertical whitespace, with 1px hairlines as occasional dividers. Navigation is a single transparent top bar, not sticky, with a centered link cluster and right-aligned utility icons. The hero is never a traditional text+image split — it's always a full-bleed image with centered type overlay.
Imagery
Full-bleed photography dominates the visual language. Each font hero features a high-resolution environmental photograph — cityscapes, food, lifestyle scenes — chosen to evoke the personality of the typeface (Montreal gets brutalist architecture, New York gets a sandwich, Palma gets cocktail citrus). Photos are unmanipulated: no duotone, no color grading, no overlays except a subtle dark gradient for text legibility. The card grid in specimen view contains no photography — just enormous 'Aa' letterforms in each typeface as the visual content. Icons are minimal, line-style, monochrome. No illustrations, no 3D renders, no abstract graphics — the type specimens and curated photography carry all visual weight.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #fafafa - border: #000000 (1px hairline) - secondary surface: #ededed - muted text: #666666 - accent: #ff2f00 (badges, icons, highlights only) - primary action: #ff2f00 (filled action) Example Component Prompts: 1. Create a hero font showcase card: full-bleed background image filling a 20px-radius card. Centered title in Neue Montreal 121px weight 600, color #ffffff, line-height 1.00. Subtitle below in Neue Montreal 18px weight 400, #ffffff. A #ff2f00 status pill badge (999px radius, white text, 12px) floats above the title. A white filled pill button ('Explore font') and a white ghost outlined button ('Try for Free') sit side by side at the bottom center — both 20px radius, padding 8px 23px, 14px weight 500. 2. Create a font specimen grid card: #fafafa background, 1px #000000 border, 20px radius, 26px padding. Font name at top-left in Neue Montreal 18px weight 530, #000000. Metadata below in Neue Montreal 14px weight 400, #666666. A #ff2f00 'New' pill badge (999px radius, 12px weight 500, white text) positioned top-right. A massive 'Aa' at ~103px in the showcased font, bottom-aligned, #000000. Cards arrange in a 4-column grid with 20px gaps. 3. Create a status badge: pill shape (999px radius), 4px 12px padding, Neue Montreal 12px weight 500. Three variants: #ff2f00 bg + white text (New), #ffb700 bg + black text (Update), #bfe0ff bg + black text (Early Access). 4. Create the top navigation bar: full-width, transparent background, ~60px height. 'Pangram Pangram Foundry' logo at far left in Neue Montreal 14px weight 530. Five nav links center-aligned in Neue Montreal 14px weight 400, #000000, with 23px gap between items. Search icon, cart icon, and hamburger menu icon right-aligned, all 1px stroke black. 5. Create a filled action button: 20px border-radius, #fafafa background, 1px #000000 border, Neue Montreal 14px weight 500, #000000 text, padding 8px 23px. Inline display, no shadow. This is the 'Explore font' button — the system's only filled button variant.
Type System Rules
The foundry is a single-family UI system: Neue Montreal carries everything from 12px captions to 145px display. Weight 400 = body, weight 530 = subhead/card titles, weight 600 = headings and display. Line-height tightens with size: 1.30 at 12-14px, 1.20 at 16-20px, 1.10 at 36-48px, 1.00 at 121px+. No letter-spacing adjustment. No italic in the primary face. Specimen pages are the only place secondary typefaces appear, always at fixed 103px for visual comparison.
Similar brands
Dinamo (dinamo.com)
Same type-foundry curatorial aesthetic — large display type over editorial imagery, single accent color, minimal UI chrome, type-as-product approach.
Grilli Type (grillitype.com)
Similar specimen-driven layout with full-bleed feature cards, white-canvas grid of typeface cards, and restrained chromatic palette.
Klim Type Foundry (klim.co.nz)
Editorial type-catalogue feel with hairline borders, generous whitespace, and large-format type specimens dominating the visual hierarchy.
OHno Type (ohnotype.com)
Independent foundry with the same print-catalogue-on-screen treatment: 1px structural borders, pill controls, type-first hierarchy with minimal decorative color.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
