Typography
Gilroy
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
Blacker
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
DM Sans Semibold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
Heading 1
Color Secondary
Heading 1
Color text link
Heading 1
Custom Color Picker
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Eyebrow
Eyebrow large
Default Paragraph
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Large
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph X-Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Buttons
Forms
Heading 1
Color Secondary
Heading 1
Color text link
Heading 1
Custom Color Picker
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Eyebrow
Eyebrow large
Default Paragraph
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Large
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph X-Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Buttons
Forms
Heading 1
Color Secondary
Heading 1
Color text link
Heading 1
Custom Color Picker
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Eyebrow
Eyebrow large
Default Paragraph
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Large
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph X-Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Buttons
Forms
Heading 1
Color Secondary
Heading 1
Color text link
Heading 1
Custom Color Picker
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Eyebrow
Eyebrow large
Default Paragraph
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Large
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph X-Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Buttons
Forms
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Eyebrow
Eyebrow large
Default Paragraph
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Large
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Paragraph X-Small
We make things that work better and last longer. Our products solve real problems with clean design and honest materials.
Buttons
Color
Neutral / Gray Scale
Black
var(--color-black)
Neutral 900
var(--color-neutral-900)
Neutral 800
var(--color-neutral-800)
Neutral 700
var(--color-neutral-700)
Neutral 600
var(--color-neutral-600)
Neutral 500
var(--color-neutral-500)
Neutral 400
var(--color-neutral-400)
Neutral 300
var(--color-neutral-300)
Neutral 200
var(--color-neutral-200)
Neutral 100
var(--color-neutral-100)
White
var(--color-white)
Primary Colors
Color Primary 100
var(--color-primary-100)
Color Primary 200
var(--color-primary-200)
Color Primary 300
var(--color-primary-300)
Color Primary 400
var(--color-primary-400)
Color Primary 500
var(--color-primary)
Secondary Colors
Color Secondary 100
var(--color-secondary-100)
Color Secondary 200
var(--color-secondary-200)
Color Secondary 300
var(--color-secondary-300)
Color Secondary 400
var(--color-secondary-400)
Color Secondary 500
var(--color-secondary-500)
Color Secondary 600
var(--color-secondary-600)
Support + Utility Colors
Success 400
var(--color-success-400)
Success 300
var(--color-success-300)
var(--color-success)
Success 200
var(--color-success-200)
Success 100
var(--color-success-100)
Error 400
var(--color-error-400)
Error 300
var(--color-error-300)
var(--color-error)
Error 200
var(--color-error-200)
Error 100
var(--color-error-100)
.color-scheme-1
Text Primary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text Secondary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Link.color-scheme-2
Text Primary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text Secondary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Link.color-scheme-3
Text Primary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text Secondary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Link.color-scheme-4
Text Primary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Text Secondary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Link