Inter
The type system.
The most advanced type system in a dashboard UI framework. Specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.
Inter font ProjectHave an Improvement or a suggestion?
goto request box
Consistent across all browsers and all operating systems. Packed with modern features. Works best for dashboard designs.
Pages Type system consist of three(3) font variables. Specifically Base font family - Which can be used for text sizes that are above 12px. Interface font family - text that are 12px and below. Secondary font family - Used for font pairing with base font.
Used for paragraphs and fonts that are above 12px
Inter-font-family
Meet Inter - a consistent, hinted, Screen optimized font family guided by optical balance and packed with modern font features that work widely across all types of Operating Systems and browsers.
"Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
Inter is licensed under the SIL Open Font License. In simple terms Its open source and free to use.
Used for paragraphs and fonts that are below 14px
Inter-font-family
Meet Inter - a consistent, hinted, Screen optimized font family guided by optical balance and packed with modern font features that work widely across all types of Operating Systems and browsers.
"Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
Inter is licensed under the SIL Open Font License. In simple terms Its open source and free to use.
Used for overlines and as a font pair to break the scan.
Montserrat-font-family
Meet Montserrat - a Beautiful Geometric Font designed by Julieta Ulanovsky released and shared with the world through Google Fonts. It looks great in all caps with a long letterspacing.
"montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;
Montserrat is licensed under the SIL Open Font License. In simple terms Its open source and free to use.
Type Scale
Pages type scale includes a range of contrasting styles that support the needs of your product and its content.
The type scale is a combination of 8 styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.
Typography Scale - 1.125
The quick brown fox jumps over the lazy dog
h1
44px/50px Letter-spacing: -0.0141279em
The quick brown fox jumps over the lazy dog
h2
30px/38px Letter-spacing: -0.021em;
Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.
h3
27px/35px Letter-spacing: -0.0114923em
Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.
h4
22px/32px Letter-spacing: -0.00865734em
Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.
h5
18px/26px Letter-spacing: -0.00630069em
We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.
paragraph
44px/52px
We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.
overline
11px/inherit Letter-spacing: 0.06em
We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.
small-text
12px/18px Letter-spacing: 0.00849077em
Color can be a wonderful tool for making your dashboard less stressful and more calming and it can have a significant impact on your mood and well-being, We made it with you in mind
Heading color
.text-black
#2c2c2c
Body text
Default
#626262
Hinted text
.hint-text
#2c2c2c
Primary color
.text-primary
#62549a
Success color
.text-success
#4aa9e9
Complete color
.text-complete
#23b9a9
Danger color
.text-danger
#ce4e4d
Warning color
.text-warning
#eac459
Highlighted Text
For highlighting a run of text due to its relevance in another context
<mark>
Bold Text
For emphasizing a snippet of text with a heavier font-weight.
<strong>
.bold
Ordered List
For highlighting a run of text due to its relevance in another context
<ol></ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Un-Ordered List
For highlighting a run of text due to its relevance in another context
<ul></ul>
For quotes in your document & client reviews
It is during our darkest moments that we must focus to see the light.
Aristotle Onassis
The best and most beautiful things in the world cannot be seen or even touched.
Helen Keller
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890 David Nester
david.nester@revox.io
