Uppercase Library Style Guide

2022 New Site Roll Out

Client-First Docs

Colors

UC-BLACK
#0A070D

UC-WHITE
#EEEDF4

UC-MINT
#00FFB7

UC-LEMON
#F2EB00

UC-LIME
#9FFF61

REAL-WHITE
#FFFFFF

UC-GRAPE
#9901EB

UC-PINK
#F100D6

UC-BLUE
#3900FF

Tag-colors

Sprint

Workshop

uc-tag

is-uc-purple

UC-GRAPE
#9901EB

UC-MINT
#00FFB7

Product

Sprint

Workshop

uc-tag

is-uc-pink

UC-PINK
#F100D6

UC-LEMON
#F2EB00

Marketing

Sprint

Workshop

uc-tag

is-uc-blue

UC-BLUE
#3900FF

UC-MINT
#00FFB7

Disruption

Sprint

Workshop

uc-tag

is-uc-mint

UC-MINT
#00FFB7

UC-GRAPE
#9901EB

Superpowers

Background Color

background-color-black

background-color-white

background-color-lightgrey

Add pre-made Background Colors
Get access to pre-made Color Palettes and paste them below.

View Background Colors

Click and paste Color Palette

Text Colors

text-color-black

text-color-black

text-color-white

text-color-white

Typography

HTML Headings

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

Heading Classes

h1-heading

h1-heading

h2-headline

h2-headline

h2-subhead

heading-medium

h3-headline

h3-headline

heading-xxlarge

heading-xlarge

heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

sub-heading-small

heading-small

heading-xsmall

heading-xsmall

Heading Classes

highlight-uc-mint

Don’t just think of ideas,
actually build them.

highlight-uc-purple

Don’t just think of ideas, actually build them.

highlight-uc-pink

Don’t just think of ideas, actually build them.

Other HTML Tags

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 Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

Text Sizes

body-ivt-regular

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.

body-arial-regular

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.

body-ivt-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.

body-ivt-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.

text-size-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.

text-size-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.

text-size-regular

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.

text-size-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.

text-size-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.

Text Weights

text-weight-bold

text-weight-bold (700)

text-weight-normal

text-weight-normal (400)

Text Letter Spacings

text-letterspacing-xwide

A Lorem ipsum dolor sit amet

text-letterspacing-wide

A Lorem ipsum dolor sit amet

text-letterspacing-normal

A Lorem ipsum dolor sit amet

text-letterspacing-tight

A Lorem ipsum dolor sit amet

text-letterspacing-xtight

A Lorem ipsum dolor sit amet

Text Line Heights

text-lineheight-xtall

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.

text-lineheight-tall

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.

text-lineheight-normal

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.

text-lineheight-short

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.

text-lineheight-xshort

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.

text-lineheight-none

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.

Text Styles

text-style-italic

text-style-italic

text-style-strikethrough

text-style-strikethrough

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-quote

text-style-quote

text-style-link

text-style-link

text-style-2lines

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.

text-style-3lines

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. 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.

text-style-muted

text-style-muted

Text Alignment

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Rich Text

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Caption goes here

Blog text - post-body-rich-text

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

List item
List item
List item

List item
List item
List item

Caption goes here

Blog text - blog-summary-rich-text

text-rich-text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

‍

UI Elements

Buttons-contained (Large)

button-contained-large

button-contained-large

is-uc-lime

button-contained-large

is-uc-white

button-contained-large

is-uc-black

button-contained-large

with-icon

is-uc-lime

button-contained-large

with-icon

is-uc-white

button-contained-large

with-icon

is-uc-black

Buttons-contained (Medium)

button-contained-medium

button-contained-medium

is-uc-lime

button-contained-medium

is-uc-white

button-contained-medium

is-uc-black

button-contained-medium

with-icon

is-uc-lime

button-contained-medium

with-icon

is-uc-white

button-contained-medium

with-icon

is-uc-black

Buttons-contained (Small)

button-contained-small

button-contained-small

is-uc-lime

button-contained-small

is-uc-white

button-contained-small

is-uc-black

button-contained-small

with-icon

is-uc-lime

button-contained-small

with-icon

is-uc-white

button-contained-small

with-icon

is-uc-black

Buttons-Outlined (Large)

button-outlined-large

button-outlined-large

is-uc-lime

button-outlined-large

is-uc-white

button-outlined-large

is-uc-black

button-outlined-large

with-icon

is-uc-lime

button-outlined-large

with-icon

is-uc-white

button-outlined-large

with-icon

is-uc-black

Buttons-Outlined (Medium)

button-outlined-medium

button-outlined-medium

is-uc-lime

button-outlined-medium

is-uc-white

button-outlined-medium

is-uc-black

button-outlined-medium

with-icon

is-uc-lime

button-outlined-medium

with-icon

is-uc-white

button-outlined-medium

with-icon

is-uc-black

Buttons-Outlined (Small)

button-outlined-small

button-outlined-small

is-uc-lime

button-outlined-small

is-uc-white

button-outlined-small

is-uc-black

button-outlined-small

with-icon

is-uc-lime

button-outlined-small

with-icon

is-uc-white

button-outlined-small

with-icon

is-uc-black

Buttons-text (Large)

button-text-large

button-text-large

is-uc-lime

button-text-large

is-uc-white

button-text-large

is-uc-black

button-text-large

with-icon

is-uc-lime

button-text-large

with-icon

is-uc-white

button-text-large

with-icon

is-uc-black

Buttons-Text (Medium)

button-text-medium

button-text-medium

is-uc-lime

button-text-medium

is-uc-white

button-text-medium

is-uc-black

button-text-medium

with-icon

is-uc-lime

button-text-medium

with-icon

is-uc-white

button-text-medium

with-icon

is-uc-black

Buttons-Text (Small)

button-text-small

button-text-small

is-uc-lime

button-text-small

is-uc-white

button-text-small

is-uc-black

button-text-small

with-icon

is-uc-lime

button-text-small

with-icon

is-uc-white

button-text-small

with-icon

is-uc-black

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons (Image)

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-custom

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Images

image-wrapper-1:1

image-wrapper-4:3

image-wrapper-3:2

image-wrapper-16:9

Effects

Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

shadow-xxsmall

shadow-xsmall

shadow-small

shadow-medium

shadow-large

shadow-xlarge

shadow-xxlarge

Additional Classes from latest style guide update (v1.2)

Text Letter Spacings

text-letterspacing-xwide

A Lorem ipsum dolor sit amet

text-letterspacing-wide

A Lorem ipsum dolor sit amet

text-letterspacing-normal

A Lorem ipsum dolor sit amet

text-letterspacing-tight

A Lorem ipsum dolor sit amet

text-letterspacing-xtight

A Lorem ipsum dolor sit amet

Text Line Heights

text-lineheight-xtall

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.

text-lineheight-tall

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.

text-lineheight-normal

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.

text-lineheight-short

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.

text-lineheight-xshort

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.

text-lineheight-none

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.

Color Samples
Used to create color swatches

Add pre-made Color Samples
Get access to pre-made Color Samples and paste them below.

View Color Samples

Click and paste Color Palette

Background Color

Add pre-made Background Colors
Get access to pre-made Color Palettes and paste them below.

View Background Colors

Click and paste Color Palette

Text Colors

Add pre-made Text Colors
Get access to pre-made Text Colors and paste them below.

View Text Colors

Click and paste Color Palette

Box Shadows
‍Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

shadow-xxsmall

shadow-xsmall

shadow-small

shadow-medium

shadow-large

shadow-xlarge

shadow-xxlarge

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Hero Examples

Example #1

Business education worth learning using

Hands-on experience taught by top professors

Become a member

Example #2

Business education worth learning using

Hands-on experience taught by top professors

Become a member

Loremmm

Example #3

Earn certificates that show your status work

Man in a blazer sitting on a bench outdoors, focused on using a tablet with a coffee cup beside him.

Marketing
Strategist

15,000

STUDENTS

15,000

STUDENTS

Learn about business.
use it immediately

Learn proven strategies from leaders who have been there

Become a member Watch Lessons For Free

This is a wrong sentence

This is a wrong sentence

This is a sentence in which we'd like to cross out a word

Learn about business.
Use it immediately.

Learn proven strategies from leaders who have been there

$83 per month (billed annually)

Become a member Watch Lessons For Free

The Public Speaking Sprint with Marcus Collins

Business education built for real work

Not an MBA. Not an endless video library. Just the courses you need to do better work right now.

No items found.

No items found.

No items found.

No items found.

Enrolling now

Enrolling now sticky

Workshop

AI for PR and Communications

Break through the noise, without breaking your bandwidth

All Courses

Workshop

AI

Enrolling now sticky

Workshop

AI Crash Course

Get confident on generative AI in one day

All Courses

Workshop

AI

Crash Course

AI Course

Enrolling now sticky

Workshop

AI for Strategic Decision Making

Make AI your strategic copilot

All Courses

Workshop

AI

Enrolling now sticky

Workshop

Intro to AI Prompt Writing

Become an AI power user

All Courses

Workshop

AI

AI Prompting

Prompt Writing

View all courses

A learning experience you won’t tune out

Don’t take classes that make you want to check your email within 20 seconds. Our head of community explains what makes learning with Section so magical.

“Section will be an accelerant in your personal life and your professional career."

- Adam Deif, Google

Earn certificates that show your status work

status

Leave with a project plan and a LinkedIn badge

Build deep expertise

Get live feedback and coaching

Earn badges and certificates as you learn

Certificate Tag

Marketing Strategist

Learn the strategies and skills to build markets and generate demand

Certificate Tag

Product Strategist

Learn to plan, experiment, launch, and monetize winning products

Certificate Tag

Strategic Leader

Learn to drive outsized impact and influence inside your organization

Certificate Tag

Digital Strategist

Learn to transform your business and unlock growth in the digital age

Certificate Tag

Business Core

Learn essential business skills to accelerate your career quickly

Certificate Tag

AI Class Member

Make AI your competitive advantage

AI Class Member

Certificate Tag

Strategic Communicator

Learn to drive action when you speak, write, and present

View All Programs

Taught by leaders who have done it
(and won’t put you to sleep)

We’re picky. Everyone on our faculty is smart, experienced, and charming as hell.

Ted Souder

Gibson Biddle

Nicole Alexander

Jennie Tung

Sarah Norman

Mita Mallick

Eric Kim

Marcus Collins

Fast, live, and with real people

Because learning is best with other humans

Meet great people and
grow together challenge each other

grow together

pink crossout

Discuss, debate, and learn with a diverse community

Carlo Vesentini

Account Executive, Professional Services

Collette Logan

Product owner

Bhavin Patel

Director, Analytics & Innovation

Federica Cascia

Brand Strategist X-Portfolio Reality Labs

Isaiah Green

Associate Product Manager/Merchandiser

Mariana Tinoco Rivera

Product Experience Strategist

Colin Parajon

Global Brand Strategy Manager

Adena Jones

Marketing Lead

Carlo Vesentini

Account Executive, Professional Services

Collette Logan

Product owner

Bhavin Patel

Director, Analytics & Innovation

Federica Cascia

Brand Strategist X-Portfolio Reality Labs

Isaiah Green

Associate Product Manager/Merchandiser

Mariana Tinoco Rivera

Product Experience Strategist

Colin Parajon

Global Brand Strategy Manager

Adena Jones

Marketing Lead

Carlo Vesentini

Account Executive, Professional Services

Collette Logan

Product owner

Bhavin Patel

Director, Analytics & Innovation

Federica Cascia

Brand Strategist X-Portfolio Reality Labs

Isaiah Green

Associate Product Manager/Merchandiser

Mariana Tinoco Rivera

Product Experience Strategist

Colin Parajon

Global Brand Strategy Manager

Adena Jones

Marketing Lead

coworkers at a desk

Want a more strategic team?

Don’t we all. Check out Section for Companies.

Section for companies

Our Promise

Unboring business education you can use immediately

No bad PowerPoints, cheesy ukulele music, mandatory quizzes to prove you were watching, smart-but-super-boring professors, or un-diverse panels. Ever.

100 sticky

Join our ProfAI demo

Join our ProfAI demo on March 18 at 1 p.m. ET

Thanks for your interest! At this time, ProfAI is only available to organizations over 500 people. Please stay tuned for our small teams and consumer launch in Q2.

I'm interested in working with Section to make my team AI-powered

By signing up you agree to receive Section marketing communications. Please visit our Privacy Policy for more information.

See you at the demo! Head to your email for the Zoom link.

Want to check out more courses while you wait?

Set up a free account

Log back into your free account

Oops! Something went wrong while submitting the form.