v2.0

Styleguide

Typography

Typeface

Feature Deck

Used for Headings

Suisse Intl

Used for Headings, Body & Labels

Font Weights

Aa

Light

Aa

Aa

Aa

Regular, Medium, Semibold

Typescale

Headings & Titles

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-headline-1

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-1

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-2

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-3

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-4

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-5

The ships hung in the sky in much
the same way that bricks don’t.

u-text-style-title-6

Body & Labels

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-1

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-2

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-3

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-4

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-5

Space is big. You just won't believe how vastly, hugely, mind-bogglingly big it is.
I mean, you may think it's a long way down the road to the chemist's,
but that's just peanuts to space.

u-text-style-body-6

Contact Us

u-text-style-label-1

Contact Us

u-text-style-label-2

Contact Us

u-text-style-label-3

Colors

Background

background/default/bg

background/default/1

background/default/2

background/inverted/bg

background/inverted/1

background/inverted/2

Outline

outline/default

outline/inverted

Text

text/default/1

text/default/2

text/default/3

text/inverted/1

text/inverted/2

text/inverted/3

text/brand/1

text/brand/2

text/brand/3

Interactive/Primary

interactive/primary/on

interactive/primary/idle

interactive/primary/hover

interactive/primary/active

interactive/primary/disabled

Interactive/Secondary

interactive/secondary/on

interactive/secondary/idle

interactive/secondary/hover

interactive/secondary/active

interactive/secondary/on-disabled

interactive/secondary/disabled

Interactive/Outline

interactive/outline/on

interactive/outline/idle

interactive/outline/hover

interactive/outline/active

interactive/outline/on-disabled

interactive/outline/disabled

Info

info/success

info/success/outline

info/error

info/error/outline

info/warning

info/warning/outline

Components

Placeholder.
Accent is Bold.

Custom Utilities

Rich Text

u-rich-text

Paragraph before paragraph.

Paragraph before heading.

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

Bold text

Emphasis

^Superscript

_Subscript

Background Color

u-bg-inherit

u-bg-current

u-bg-transparent

u-bg-1

u-bg-2

Color

u-color-inherit

u-color-current

u-color-transparent

u-color-1

u-color-2

Section

u-section-0

u-section-2xs

u-section-xs

u-section-sm

u-section-md

u-section-lg

u-section-xl

u-section-2xl

Container

u-container-0

u-container-xs

u-container-sm

u-container-md

u-container-lg

u-container-xl

Typography Utilities

Line Clamp

u-line-clamp-1

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.

u-line-clamp-2

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.

u-line-clamp-3

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.

u-line-clamp-4

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.

Alignment

u-align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-align-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Transform

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Wrap

u-text-wrap-default

Normal text wrapping. Useful for resetting text wrapping on a child if the parent has balance or pretty.

u-text-wrap-balance

Keeps the line width even and consistent for up to six lines of text. Ideal for short form content.

u-text-wrap-pretty

Ensures there's more than one word on the last line of text. Ideal for long form content.

Typography Elements

u-rich-text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ordered List

Ordered list
when not inside
of rich text

Ordered list
when inside
of rich text

Unordered List

Unordered list
when not inside
of rich text

Unordered list
when inside
of rich text

u-heading-accent

Heading

accent word

Size Utilities

Border Radius

u-radius-0

u-radius-inherit

u-radius-1

u-radius-2

u-radius-4

u-radius-6

u-radius-8

u-radius-10

u-radius-12

u-radius-14

u-radius-16

u-radius-18

u-radius-20

u-radius-24

u-radius-28

u-radius-32

u-radius-full

Section Padding

u-pt-0

u-pt-xxs

u-pt-xs

u-pt-xss

u-pt-s

u-pt-sm

u-pt-m

u-pt-l

u-pt-xl

u-pb-0

u-pb-xxs

u-pb-xs

u-pb-xss

u-pb-s

u-pb-sm

u-pb-m

u-pb-l

u-pb-xl

u-py-0

u-py-xxs

u-py-xs

u-py-xss

u-py-s

u-py-sm

u-py-m

u-py-l

u-py-xl

u-px-0

u-px-xxs

u-px-xs

u-px-xss

u-px-s

u-px-sm

u-px-m

u-px-l

u-px-xl

Miscellaneous Utilities

Display

u-display-block

u-display-inline-block

u-display-inline-flex

u-display-inline-grid

u-display-inline

u-display-contents

u-display-none

u-hide-if-empty

Overflow

u-overflow-visible

u-overflow-hidden

u-overflow-clip

u-overflow-x-auto

u-overflow-y-auto

Position

u-position-static

u-position-relative

u-position-absolute

u-position-fixed

u-position-sticky

Z-Index

u-z-negative

u-z-0

u-z-unset

u-z-1

u-z-2

u-z-3

Max Width

u-max-width-none

u-max-width-10ch

u-max-width-12ch

u-max-width-14ch

u-max-width-16ch

u-max-width-18ch

u-max-width-20ch

u-max-width-30ch

u-max-width-40ch

u-max-width-50ch

u-max-width-60ch

u-max-width-70ch

u-max-width-80ch

u-max-width-full

Other

u-m-inline-auto

u-pointer-on

u-pointer-off

u-object-fit-cover

u-object-fit-contain

u-w-full

u-h-full

u-cover

u-cover-absolute

u-sr-only

Horizontal Flex Utilities

u-hflex-left-top

u-hflex-left-center

u-hflex-left-bottom

u-hflex-left-stretch

u-hflex-center-top

u-hflex-center-center

u-hflex-center-bottom

u-hflex-center-stretch

u-hflex-right-top

u-hflex-right-center

u-hflex-right-bottom

u-hflex-right-stretch

u-hflex-between-top

u-hflex-between-center

u-hflex-between-bottom

u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top

u-vflex-left-center

u-vflex-left-bottom

u-vflex-left-between

u-vflex-center-top

u-vflex-center-center

u-vflex-center-bottom

u-vflex-center-between

u-vflex-right-top

u-vflex-right-center

u-vflex-right-bottom

u-vflex-right-between

u-vflex-stretch-top

u-vflex-stretch-center

u-vflex-stretch-bottom

u-vflex-stretch-between

Flex Wrap Utilities

u-hflex-wrap

u-hflex-nowrap

u-vflex-wrap

u-vflex-nowrap

Flex Gap Utilities

u-gap-0

u-gap-xxxs

u-gap-xxs

u-gap-xs

u-gap-s

u-gap-sm

u-gap-m

u-gap-ml

u-gap-lg

u-gap-xl

u-gap-xxl

Flex Basis Utilities

u-flex-shrink

u-flex-grow

u-flex-noshrink