Pangram Pangram Foundry

Overview

Pangram Pangram Foundry is a world-renowned type foundry design system rooted in Swiss Modernism—a movement emphasizing clarity, precision, and functional beauty. The UI aesthetic is 'Typographic Minimalism': a clean, light canvas (rgb(250, 250, 250) background, rgb(0, 0, 0) text) that allows typefaces to breathe and command attention. The brand serves designers and creatives who demand premium, contemporary fonts that perform flawlessly across print, digital, and hybrid media. The emotional response is one of quiet confidence: the interface steps back, letting the typography shine without distraction.

The voice is authoritative yet approachable—precise without being cold, confident without arrogance. Pangram Pangram speaks in declarative, short sentences: 'Neue Gstaad. Calm. Efficient. Swiss.' The vocabulary favors concrete descriptors (weight, width, performance, legibility) over marketing hyperbole. Brand personality: a curator, not a salesperson. Example sentence in brand voice: 'Every font is free to try—test it at full scale before you commit.'

Colors

The color system balances a neutral, light-dominant surface (rgb(250, 250, 250)) with three strategic accent colors that signal interaction and status. Primary (#0092ff, a vivid cyan-blue) is the signature accent—used exclusively on CTAs ('Try for Free'), links, focus states, and interactive affordances. This color appears sparingly but decisively, creating visual hierarchy through restraint. Secondary (#ff4949, a bold red-orange) marks alerts, new badges, and destructive actions; it appears in the hero 'New' badge and error states. Tertiary (#00d816, a vibrant green) indicates success, availability, and positive confirmation. The surface stack progresses from rgb(250, 250, 250) (surface) through rgb(237, 237, 239) (surface-container) to rgb(208, 213, 219) (surface-container-highest), prov

Typography

The type system is anchored in Neue Montreal, a contemporary sans-serif that embodies Swiss precision with modern warmth. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body text lives at 16px (body-md, 400 weight, 24px line-height) for comfortable reading; body-lg (18px) for emphasis. Labels (14px, 600 weight, 0.01em letter-spacing) are used on buttons and form fields to ensure crisp, scannable UI text. The hierarchy is reinforced through weight (600 for headings, 400 for body) and letter-spacing: negative spacing (-0.04em to -0.02em) on large display text creates visual tension and draws the eye, while positive spacing (0.01em to 0.05em)

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The spacing scale uses semantic tokens: gutter (24px) for horizontal padding on sections, lg (40px) for vertical separation between major sections, md (24px) for card padding and component spacing, sm (12px) for internal component spacing. The hero section spans full-width with a 24px gutter on mobile, expanding to 40px on desktop; the rounded corners (20px, matching {rounded.lg}) create a contained, card-like presence. White-space is generous: sections are separated by 40px vertical rhythm, and cards within sections have 24px padding with 12px gaps between elements. This breathing room reflects the foundry's philosophy—typography needs space to be read and appreciated. Container max-width of 12

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system has three levels: Level 1 (Base, no shadow) for the main surface; Level 2 (Standard cards, 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, inputs, and modals—this shadow is tight and close, suggesting proximity; Level 3 (Elevated, 0 8px 24px rgba(0, 0, 0, 0.12)) for overlays, dropdowns, and focus states—a softer, more diffuse shadow suggesting greater lift. Cards use a 1px solid border at rgba(0, 0, 0, 0.08) (outline-variant) to define edges without relying on shadow alone. On hover, cards tran

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used purposefully to soften hard edges and guide the eye, but never so much that they distract from content. Buttons and inputs use {rounded.lg} (20px), a generous radius that feels modern and approachable while remaining professional. Cards use {rounded.lg} (20px) to match buttons, creating visual cohesion. Small UI elements (badges, tags) use {rounded.full} (9999px) for a pill shape, signaling compactness and status. Dividers and minor elements use {rounded.sm} (3px) or {rounded.DEFAULT} (8px) for subtle definition. The hero s

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses {colors.primary} (#0092ff) background with white text, {rounded.lg} (20px), and 8px 24px padding, resulting in a 40px height. On hover, the background shifts to #0073cc (a 20% darker shade) over 200ms ease-out, signaling state change. button-secondary uses a light gray background ({colors.surface-container}, rgb(233, 236, 239)) with a 1px outline-variant border, maintaining the same dimensions. button-ghost is transparent with a primary-colored border and text; on hover, it fills with {colors.primary-container} (rgb(204, 229, 255)), creating a 'reveal' effect. All buttons use {typography.label-md} (14px, 600 weight, 0.01em letter-spacing) for crisp, scannable text.

Containers & Surfaces Cards are th

Do's and Don'ts

**Do**

• Do use primary (#0092ff) exclusively on CTAs and interactive affordances—it is the brand's signature accent and should never be diluted or overused.
• Do maintain 24px gutter spacing on sections and 12px padding inside components to preserve the breathing room that lets typography shine.
• Do apply {rounded.lg} (20px) consistently on buttons, cards, and inputs to create visual cohesion across the interface.
• Do use Neue Montreal at 14px+ for all UI text; never go below 12px without explicit contrast testing (minimum 4.5:1 WCAG AA).
• Do transition all interactive state changes (hover, focus, active) over 200ms ease-out to signal affordance without jarring the user.
• Do layer elevation through shadows (not color darkening): Level 2 (0 3px 8px) for standard cards, Level 3 (0 8px 24px) for elevated states.

**Don't**

• Don't use secondary (#ff4949) or tertiary (#00d816) as primary accent colors—they are reserved for alerts, badges, and status indicators.
• Don't apply rounded corners smaller than {rounded.sm} (3px) on primary interactive elements; it weakens the visual hierarchy.
• Don't exceed 1280px container width; longer text lines reduce legibility and undermine the foundry's typographic mission.
• Don't use color alone to convey state (e.g., hover)—always pair with shadow elevation or border changes to ensure accessibility.
• Don't nest more than 3 levels of visual hierarchy (display → headline → body); the interface should feel flat and scannable.
• Don't apply text-shadow or blur effects on body text; reserve these for hero headlines overlaid on photography (minimum 0 2px 4px rgba(0, 0, 0, 0.15)).