Colors

Manage recurring text and background colors. Color guides from your designs are updated here. Add or remove color variables accordingly.

Color Palette
primary-400
primary-500
primary-600
primary-700
secondary-400
secondary-500
secondary-600
secondary-700
light/text-secondary
dark/text-secondary
dark/text-tertiary
Text Colors
u-text-x
u-text-black
sample text to see how it looks
u-text-grey
sample text to see how it looks
u-text-white
sample text to see how it looks
Background Colors
u-bg-x
u-bg-black
u-bg-grey
u-bg-white
u-bg-dark
u-bg-light
Typography

Primary Font for the website. Updating  font-primary variable reflect changes in H1-H6 Headings classes here.

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

HTML Headings

HTML tags define default Heading styles. Updating  H1-H6 variables reflect changes in H1-H6 Headings classes here. Use hs-hx classes when typography style doesn't match the default HTML tag.

H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-hs-h1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-hs-h2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-hs-h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-hs-h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-hs-h5

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

H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
u-hs-h6

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

Other Text Styles

HTML tags define default text styles. Update text styles from your designs here.

All paragraphs

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

text-sm

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

text-md

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

text-lg

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

All links
All Links
All quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
All Ordered Lists
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
All Unordered Lists
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Buttons
button cc-x

Button combo class system. Update styles from your design system here.

Component
button
cc-dark
button
cc-sm
button
cc-sec
button
cc-text
button
cc-icon