Universal Sans
A technical, CAD-like typographic workbench. Monochromatic dark panels frame an oversized real-time variable specimen with precise sliders and modular inspectors, treating typeface selection as an engineering workflow.
Visit siteColour
Background#000000
Text#ffffff
Accent#0000ff
Surface#191919
Muted#dad6d1
Typefaces
- Display
- Universal Sans
- Body
- Universal Sans
- Mono
- —
- Source
- self_hosted
- Scale
- 10 · 12 · 13 · 15 · 16 · 21
Layout
- Grid
- —
- Container
- —
- Spacing base
- 5px
- Radius
- 4px
Capture
- Category
- foundry
- Sections
- 1
- Captured
- 2026-08-30
- Rhythm
- dark
Type rules
- display type showcases dynamic variable axis adjustments in sentence case
- body text rendered at 16px with tight 57 character measure for tool documentation
- control labels and metadata set in all-caps micro typography
Colour rules
- deep black background dominates the entire workspace
- subtle dark grey surfaces (#191919 and #292929) delineate inspection panels and control rails
- high-contrast white type for active glyph rendering
Voice rules
- use software-like technical descriptions
- label UI controls with numeric coordinates and build IDs
Holds it together
- place primary generative canvas on the left with dense parameter controls stacked on the right rail
- render UI controls in minimal dark pill containers with micro hairline borders
- display technical build metadata and version parameters continuously across the viewport perimeter
Contrast
text on background21.0:1 AAA
muted text on background14.5:1 AAA
text on surface17.6:1 AAA
accent on background2.4:1 fail
background on accent2.4:1 fail
Type, measured
- Body
- 16px / 1.4
- Measure
- 57 characters
- Display
- 202px / 1.04
- Tracking
- -0.008em display
- Scale ratio
- 1.88
Voice
- Tone
- technical, declarative, precise
- Sentences
- medium
- Person
- second
- Vocabulary
- technical
- Calls to action
- customise, download, licence
Built with
- Builder
- —
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- —
- Length
- 1 screens
Sections in page order
1 marked strong · 1- 00
hero
StrongDark, clinical typography workbench pairing a giant variable specimen with intricate CAD-like customisation sliders.
- Mood
- clinical + bold
- Layout
- 2 col · split · dense
