
Preview image. Unlock full-res
Typographic Archive on Vellum. A precise, ordered display of form and content, like a beautifully cataloged library of type specimens.
This design system presents as an academic archive: minimal, almost utilitarian, with a relentless focus on content. The stark monochrome palette of pure black and white emphasizes the typographic examples, with subtle gray surfaces providing structure without distraction. Custom fonts (BentonSansRE and RelayCond) lend a distinct, authoritative voice, reinforcing the site's role as a trusted resource. The tight spacing and modest 2px radius on interactive elements communicate efficiency and precision, prioritizing information delivery over decorative flourishes. Use Benton Sans RE for all body, paragraph, and standard heading text, varying weight between 400 and 700, and sizes between 10px and 16px to maintain a dense, readable content block. Apply Relay Cond exclusively for prominent headings, navigation items, and badges, utilizing its 18px and 36px sizes with weights 400 or 700 to create impact. Maintain a strict monochrome palette with Inkwell (#000000) for text, Canvas (#ffffff) for backgrounds, and Mist (#f0f0f0) for subtle section differentiation. Implement 2px border radii for all interactive elements like buttons and input fields to imply functionality without softness. Separate distinct content sections with a 30px vertical gap, fostering a structured yet compact layout. Use 5-10px element spacing to create visual separation between adjacent UI elements without appearing sparse. Do not introduce chromatic colors outside the established monochrome and sponsor-driven accents for any UI elements; reserve color for content itself. Avoid large, rounded corners or fluid, organic shapes; maintain the precise, rectilinear aesthetic with maximum 2px radii. Do not use letter-spacing other than 'normal' for any text, as the custom fonts are designed for specific impact without alteration. Do not deviate from the established 5px vertical and 10px horizontal padding for buttons; consistency reinforces the utilitarian feel. Refrain from using prominent box-shadows or complex elevation patterns; subtle differentiation with gray backgrounds suffices for depth.









