Typography
Font Showcase
Eight typefaces are bundled with the design system - four primary roles and four alternates for extended compatibility and flexibility.
Primary typefaces
Bebas Neue
Alternate display Condensed · All-caps · ImpactBold Ideas. Clear Vision.
400 Regular
Native IT Design System
500 Medium
Native IT Design System
600 SemiBold
Native IT Design System
700 Bold
Native IT Design System
The quick brown fox jumps over the lazy dog. 0123456789 !@#$%&
Inter
Body role Interface · Readable · VersatileHigh-trust digital experiences
High-trust digital experiences
High-trust digital experiences for modern teams
High-trust digital experiences for modern teams and organizations
The design system's foundational typeface for UI text, body copy, labels, and supporting content across every product surface.
The design system's foundational typeface for UI text, body copy, labels, and supporting content across every product surface.
300 Light
The quick brown fox
400 Regular
The quick brown fox
500 Medium
The quick brown fox
600 SemiBold
The quick brown fox
700 Bold
The quick brown fox
Playfair Display
Serif role Editorial · Quotes · Expressive"The best design is design that goes unnoticed - it simply works."
400 Regular
Clarity over complexity
500 Medium
Clarity over complexity
600 SemiBold
Clarity over complexity
700 Bold
Clarity over complexity
Iosevka
Monospace role Code · Technical · Condensed
const system = 'Native IT Design System';
export default { version: 1, tokens, components };
400 Regular
0123 ABCabc !@#
500 Medium
0123 ABCabc !@#
700 Bold
0123 ABCabc !@#
Alternate typefaces
Merriweather
Alternate serif Long-form · Readable at small sizesDesigned for readability on screens.
300 Light
The quick brown fox
400 Regular
The quick brown fox
700 Bold
The quick brown fox
900 Black
The quick brown fox
Source Sans Pro
Alternate sans-serif Adobe · Clean · Wide character supportAdobe's first open-source typeface family.
200 ExtraLight
The quick brown fox
300 Light
The quick brown fox
400 Regular
The quick brown fox
600 SemiBold
The quick brown fox
700 Bold
The quick brown fox
900 Black
The quick brown fox
Roboto Mono
Alternate monospace Technical · Clear · Wide adoption
function render(tokens, theme) {
return tokens.map(t => apply(t, theme));
}
100 Thin
0123 ABCabc !@#
300 Light
0123 ABCabc !@#
400 Regular
0123 ABCabc !@#
500 Medium
0123 ABCabc !@#
700 Bold
0123 ABCabc !@#
Sofia Sans Extra Condensed
Heading role Display · Condensed · UppercaseDesign Once. Ship Everywhere.
400 Regular
Native IT Design System
500 Medium
Native IT Design System
600 SemiBold
Native IT Design System
700 Bold
Native IT Design System
The quick brown fox jumps over the lazy dog. 0123456789 !@#$%&