Typography

Semantic Headings

Typography

Semantic H1

Progress and possibility

Semantic H2

Progress and possibility

Semantic H3

Progress and possibility

Semantic H4

Progress and possibility

Semantic H5

Progress and possibility

Semantic H6

Progress and possibility

Heading Styles

Typography

heading

heading="display"

Progress and possibility

heading

heading="4xl"

Progress and possibility

heading

heading="3xl"

Progress and possibility

heading

heading="2xl"

Progress and possibility

heading

heading="xl"

Progress and possibility

heading

heading="lg"

Progress and possibility

heading

heading="md"

Progress and possibility

heading

heading="sm"

Progress and possibility

heading

heading="xs"

Progress and possibility

Paragraph Styles

Typography

paragraph

paragraph="lg"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph

paragraph="md"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph

paragraph="sm"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text

Typography

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

All Block Quotes

Block Quote

All Unordered Lists

All List Items

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Text Links

Typography

All Links

Text Link

Color

Primary

Color

Var:

--swatch--primary-xdark

Prop:

xdark

Value:

#02031C

Var:

--swatch--primary-dark

Prop:

dark

Value:

#1B1339

Var:

--swatch--primary-core

Prop:

core

Value:

#602AF8

Var:

--swatch--primary-med-purple

Prop:

med-purple

Value:

#BD95FF

Var:

--swatch--primary-lpurple

Prop:

lpurple

Value:

#CECEFB

Var:

--swatch--primary-pink

Prop:

pink

Value:

#E3BFFF

Shades

Color

Var:

--secondary-orange

Prop:

orange

Value:

#72F0E9

Var:

--secondary-teal

Prop:

teal

Value:

#72F0E9

Var:

--secondary-yellow

Prop:

yellow

Value:

#72F0E9

Var:

--secondary-blue

Prop:

blue

Value:

#72F0E9

Utility

Color

Var:

--utility-error

Prop:

error

Value:

#72F0E9

Var:

--utility-focus

Prop:

focus

Value:

#72F0E9

Var:

--utility-default

Prop:

default

Value:

#72F0E9

Elements

Element / Heading

Elements

Progress and possibility

Heading:

h1

h2

h3

h4

h5

h6

Heading Size:

xs

sm

md

lg

xl

2xl

3xl

4xl

display

Element / Icon

Elements

Icon Select:

#youtube

#twitter

#linkedin

#twitch

#instagram

#facebook

Icon Size:

sm

md

lg

Element / Text Button

Elements

Download from GitHub

Element / Button

Elements

Call to Action

Element / Toggle

Elements

Element / CTA Pill

Elements

Benchmark your ML Team

Stop losing your ML insights. Try our python package

Element / Dropdown

Elements

Element / Field

Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Components

Section / Empty

Components

A test headline that will line wrap to display how the lines slide in function will work.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.