
Preview image. Unlock full-res
Type foundry catalog on stark white
Heavyweight Type embraces a stark, high-contrast aesthetic, juxtaposing crisp black text and borders against expansive white and light gray surfaces. Typography is the undisputed hero, presented in large, impactful custom fonts that demand attention without heavy graphic treatments. The system prioritizes functional clarity and precise visual hierarchy, with minimal use of color, reserving a single vivid green as a subtle 'new' flag, making interactions feel deliberate and highly legible.
Use Heavy Ink (#222222) for all primary text and critical UI borders to maintain high contrast and legibility.
Apply Surface Frost (#f3f5fa) as a default background for interactive components and secondary surfaces to create subtle visual separation.
Utilize rounded corners with an 11px radius for cards and default buttons, and 10px for smaller buttons, to provide a consistent, tempered aesthetic.
Employ the Nuckle website font at 16px with a line height of 1.25 for most body text and navigation, ensuring clear readability.
Reserve Accent Green (#39d17f) exclusively for 'new' markers or similar functional highlights, keeping chromatic color sparse and impactful.
Maintain generous element spacing of 12px and card padding of 12px for comfortable information density.
Structure pages with a clear hierarchy using large custom type for headings and minimal decorative elements.
Do not introduce additional saturated colors; maintain the high-contrast achromatic base with Accent Green as the sole highlight.
Avoid heavy drop shadows or intrusive gradients; rely on crisp borders and distinct surface colors for depth.
Do not use overly dense layouts; leverage comfortable spacing tokens like elementGap (12px) to provide visual breathing room.
Do not deviate from the specified font families; their custom nature is integral to the brand's identity.
Do not use small, indistinct borders; prioritize strong, dark borders around interactive elements and cards for clarity.
Avoid generic, full-bleed imagery without clear product context; imagery should be contained and purposeful.
Do not use animations that distract; keep motion subtle (e.g., opacity, background-color transitions) to enhance interaction without overwhelming.









