Typography
Typeface
Inter
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Desktop
Font size: 88px / 5.5rem | Line height: 120%
Heading 1
Font size: 80px / 5rem | Line height: 120%
Heading 2
Font size: 64px / 4rem | Line height: 120%
Heading 3
Font size: 56px / 3.5rem | Line height: 120%
Heading 4
Font size: 32px / 2rem | Line height: 140%
Heading 5
Font size: 24px / 1.5rem | Line height: 140%
Heading 6
Font size: 32px / 2rem
Line height: 160%
Text extra large
Normal
Font size: 24px / 1.5rem
Line height: 160%
Text large
Normal
Font size: 20px / 1.25rem
Line height: 160%
Text medium
Normal
Font size: 18px / 1.125rem
Line height: 160%
Text regular
Semi Bold
Text regular
Medium
Text regular
Normal
Font size: 16px / 1rem
Line height: 160%
Text small
Semi Bold
Text small
Medium
Text small
Normal
Font size: 14px / 0.875rem
Line height: 140%
Text tiny
Semi Bold
Text tiny
Medium
Text tiny
Normal
Font size: 12px / 0.75rem
Line height: 140%
Text extra tiny
Medium
Colour Variables
Edit the variables within the variables panel to the change affect the entire Relume library. Here you can also gain a quick overview of all the variables you are currently using in your project.
Primitive
Primitive colors are the foundational building blocks of a design system's color palette. They serve as the base for more specific design decisions.
Color Base
black
#1F1F1F
white
#FFFFFF
Color Brand
brand-100
#E5E1E5
brand-200
#D7C6DD
brand-300
#C198D1
brand-400
#9C65B6
brand-500
#8240A3
brand-600
#6C298D
brand-700
#55226F
brand-800
#3B1E4A
brand-900
#17164A
Semantic
Semantic colors are variables where the names describes the purpose or meaning of the color within the design rather than describing the color itself. Reading the name of a semantic token will give us a clear understanding of what that token is used for.
Background Color
primary
color/brand/brand-200
color/base/black
primary-hover
color/brand/brand-100
color/grey/800
invert
color/base/black
color/brand/brand-100
brand
color/brand/brand-300
color/brand/brand-800
brand-hover
color/base/black
color/brand/brand-100
brand-invert
color/base/black
color/brand/brand-100
Border Color
primary
color/base/black
color/brand/brand-100
secondary
component colors/shades-primary/50%
component colors/shades-primary/50%
tertiary
component colors/shades-primary/10%
component colors/shades-primary/10%
brand
color/brand/brand-700
color/brand/brand-700
Text Color
primary
Aa
color/base/black
Aa
color/brand/brand-100
secondary
Aa
color/grey/600
Aa
color/grey/400
invert
Aa
color/base/white
Aa
color/base/black