Style Guide

Color and typography tokens for the UXDivers design system. Single source of truth for every interface we build.

style guide · UXDivers

Typography

HTML Tags

Headings

HTML tags define default Heading styles.

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
HTML Tags

Other HTML Tags

HTML tags define default text styles.

All Paragraphs

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.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists

  • No bullet list

  • No bullet list

  • No bullet list

All Unordered Lists

  • Bullet list

  • Bullet list

  • Bullet list

All Unordered Lists

  1. Orderer list

  2. Orderer list

  3. Orderer list

uxd · Headings

Heading Classes

Heading classes when typography style doesn't match the default HTML tag.

uxd-text--h1

Heading 1

uxd-text--h2

Heading 2

uxd-text--h3

Heading 3

uxd-text--h4

Heading 4

uxd-text--h5
Heading 5
uxd-text--h6
Heading 6
uxd · texts

Text Sizes

Text sizes classes when typography size doesn't match the default HTML tag.

uxd-text--large

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.

uxd-text--large_text-block
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.
uxd-text--medium

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.

uxd-text--medium_text-block
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.
uxd-text--small

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.

uxd-text--small_text-block
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.
uxd-text--tiny

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.

uxd-text--tiny_text-block
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.
uxd-text--eyebrow

Lorem ipsum dolor sit amet

uxd-text--eyebrow_text-block
Lorem ipsum dolor sit amet
uxd-text--link
Lorem ipsum dolor sit amet
uxd · texts · children classes

Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

uxd-text--weight-xbold
text-weight-xbold (800)
uxd-text--weight-bold
text-weight-bold (700)
uxd-text--weight-semibold
text-weight-semibold (600)
uxd-text--weight-medium
text-weight-medium (500)
uxd-text--weight-normal
text-weight-normal (400)
uxd-text--weight-light
text-weight-light (300)
uxd · texts · children classes

Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

uxd-text--align-left
text-align-left
uxd-text--align-center
text-align-center
uxd-text--align-right
text-align-right
uxd · texts · children classes

Text Color

Manage recurring text colors.

uxd-text--color-primary
text-color--primary
uxd-text--color-secondary
text-color--secondary
uxd-text--color-tertiary
text-color--tertiary
uxd-text--color-brand
text-color--brand
uxd-text--color-muted
text-color--black
uxd-text--color-black
text-color--black

Colors

uxd · colors

Brand

brand-base
brand-600
brand-400
brand-300
brand-200
brand-100
uxd · colors

Background

background-primary
background-secondary
background-tertiary
background-black
background-inverted
uxd · colors

Stroke

stroke-primary
stroke-secondary
stroke-tertiary
uxd · colors

Text

text-primary
text-secondary
text-tertiary
text-muted
text-primary-dark
text-secondary-dark
text-tertiary-dark

Shadows

uxd · shadows

Shadows with hover effect

uxd-shadow-hover_ON-large
uxd-shadow-hover_ON-medium
uxd · shadows

Shadows without-hover effect

uxd-shadow-hover_OFF-large
uxd-shadow-hover_OFF-medium

Structure

uxd · Structure

Structure Classes

uxd-padding-section-small
uxd-padding-section-medium
uxd-padding-section-large
uxd-button-group
uxd · Structure

Space Classes

uxd-space-tiny
uxd-space-xxsmall
uxd-space-xsmall
uxd-space-small
uxd-space-medium
uxd-space-large
uxd-space-xlarge
uxd-space-xxlarge
uxd-space-huge
uxd-space-xhuge
uxd-space-xxhuge