
Preview image. Unlock full-res
Type foundry's bold canvas: white pages, dark headers, expressive typography, and soft, rounded containers.
Pangram Pangram champions a stark, high-contrast aesthetic with functional color accents. The UI features a bright, almost white canvas, broken by dark header sections and image-heavy content blocks. Typography is the primary visual element, bold and expansive, with interactions generally expressed through subtle changes in neutral buttons or vivid, distinct status badges. Surfaces are largely flat with soft, large corner radii, avoiding heavy shadows. Use Neue Montreal for all textual content, adjusting weights and sizes from the defined typescale for hierarchy. Apply a 20px border radius to all interactive elements like buttons and input fields, and all elevated cards. Utilize Alert Red (#ff2f00) solely for accenting new features, primary calls-to-action, or important status indicators. Maintain a clear distinction between backgrounds: use Canvas (#fafafa) for general pages and Paper (#ededed) for subtly differentiated card surfaces. Ensure headings use Ink (#000000) for high contrast against light backgrounds, emphasizing typographic expression. Prioritize text and button padding of 7.65px vertical and 22.95px horizontal for a consistent comfortable density. Employ the 999px radius for all badges to achieve a distinct pill-shaped visual for status indicators. Do not use shadows; rely on background color changes, borders, and rounded corners for visual separation and depth. Avoid using Alert Red (#ff2f00) for general body text or non-actionable elements, reserving its impact for specific functions. Do not deviate from the defined 20px or 999px border radii; inconsistent rounding undermines the soft, approachable aesthetic. Do not introduce additional chromatic colors beyond Alert Red, Update Yellow, and Early Access Blue for UI elements. Avoid dense, information-heavy blocks of text without ample vertical spacing, as readability is key with the expansive type. Do not use very thin strokes for borders; a 1px solid stroke in Ink (#000000) or Canvas (#fafafa) is typical for emphasis or separation. Do not use letter-spacing values other than 'normal' for Neue Montreal, as this typeface relies on its natural spacing.









