Typography
Sizing
We created a system for typography to ensure maximum legibility while maintaining an overarching theme of sophistication and clarity of info.

Moving forward, every page while include these specific sizes and be applied according to their hierarchical value.

Heading 1

H1

Heading 2

H2

Heading 3

H3

Heading 4

H4

Heading 5

H5

Heading 6

H6

Heading 1

H1

Heading 2

H2

Heading 3

H3

Heading 4

H4

Heading 5

H5

Heading 6

H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
p-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
p-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
p-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
p-small
spacing
The spacing was built off of the rule of ‘8px’. This consistency will create a feeling of cohesion throughout the site. The spacing below headings is greater to set up a introduction to the text fields below—which have a smaller gap to show information that is grouped together. Bottom button spacing follows suit to the header to serve as a bookend to the paragraph.

Heading 1

40px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
40px
GET A DEMO
QUOTE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tortor elit, integer massa vitae et nunc fermentum lobortis.
Sasha Remono
distribution coordinator at
dropbox
quotequotearrow-points
ui elements
Button Sizing
Again, we used the rule of ‘8px’ to align the whole site system. The larger sizes will be used according to relative value of the CTA. This will be determined throught future strategy sessions to maintain continuity of usage.
Color
primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
BLUE
#0EC1EC
GREEN
#00B1A0
YELLOW
#FFCC00
RED
#EC563B
PURPLE
#7000C5
SECONDARY
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
BLUE 1
#99E7F9
BLUE 2
#CCF3FC
BLUE 3
#F1FCFE
WHITE
#FFFFFF
BLUE ACCENT
#2463EB
Blue 3c
#DFF5FF
NEUTRAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
GREY 1
#20232F
GREY 2
#3E445D
GREY 3
#535B7C
GREY 4
#9CA3BD
GREY 4c
#D7DAE5
GREY 5
#EFF0F4
GREY 6
#FBFBFC
Additional
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
NAME
#EAE0B7
NAME
#BBE6E1
NAME
#BECBE6
NAAME
#E6C8C3
NAME
#CDB7DE
ICONS
SOCIAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Linkeid
Instagram
Facebook
Twitter
Youtube
NAVIGATION
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Slider
Arrow
No
Check Mark
Open
Big slider
Play
Dropdown
Dropdown filled
Special
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Visibility
Quality
Speed
Innovation
Resiliance
Imagery
Characters
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Typography
HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Classes

heading-1

heading-2

heading-3

heading-4

heading-5

heading-6

Other HTML Tags

All Paragraph (HTML Tag)A 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
Block Quote
  • No bullet list

  • No bullet list

  • No bullet list

  • No bullet list

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes

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

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

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

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

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

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

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

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

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

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

A 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-xbold
text-weight-bold
text-weight-medium
text-weight-normal
text-weight-light
Text Styles
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-quote
text-style-2lines
text-style-3lines
text-style-muted
Text Colours
text-color-black
text-color-blue
text-color-blue2
text-color-blue3
text-color-grey
text-color-grey2
text-color-grey3
text-color-grey4
text-color-white
Text Alignment
text-align-left
text-align-center
text-align-right
Rich Text

We create general richtext and specific ones, track the locations of each classes to know where will be apply the modificactions you made here.

.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
  1. List item
  2. List item
  3. List item
Caption goes here

.event-RT

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

.Text-content-RT

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. https://codesandbox.io/s/copado-sliders-e14h2t?file=/link-styles.css

.Text-content-sm-RT

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

.Text-content-challenge-RT

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Colors
Background Color

.background-color-dark

.background-color-dark-blue

.background-color-dark-blue2

.background-color-dark-blue3

.background-color-grey3

.background-color-grey6

.background-color-blue

.background-color-blue5

.background-color-blue4

.background-color-blue3

.background-color-blue2

.background-color-light-blue

.background-color-lighter-blue

.background-color-light-green

.background-color-wheat

.background-color-white

.background-color-lightgrey

.background-sky-gradient

background-sky-gradient-02

background-sky-gradient-02

background-gradient-blue-dark

UI Elements
Buttons

Use add-on class .inverted-colors when placing button on dark background

Use add-on class .btn-disabled to disable the button pointer and add extra css

Use global class .btn-xs .btn-xxs .btn-medium .btn-large to change size of a button

Use of global class .btn-outline-blue

Use of global class .btn-rounded and btn-with-icon

Slider Components
Lists
  • Your Process: Let’s discuss your current release management process
  • Your Architecture: Let’s document your current tools and environment.
  • Your Needs: Let’s talk timeline, budget and any specific use-cases.
  • Yes! But if you’re still unsure, here is what a Copado Champion looks like:
  • You love Copado and want to help make release days obsolete
  • You are an active community member – answering questions, sharing best practices, and helping your peers
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
  • You’re a Copado ambassador online (and don’t worry, we’ll make sure you have the swag to do it)
Deliver salesforce transformation faster

Automate deployments and quickly resolve conflicts to release 5x more frequency.

Mitigate risk &
improve quality

Set up quality gates and govern processes across teams to reduce bugs and improve compliance.

Harness AI-powered test automation

Automate end-to-end testing across your clouds and put an end to QA bottlenecks, production bugs and panicked release days.

Create more business value

Spend less time deploying and more time innovating. Our users see 46% annual increase in Salesforce ROI.

Others

Use add-on class .box-shadow as global shadow for cards and boxes.

00
DAYS
00
HOURS
00
MINUTES
00
SECONDS
Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
spacer-y
Layout
Container
.container-xlarge
.container-large
.container-medium
.container-small
Max-widths
.max-width-full
.max-width-full-tablet
.max-width-full-mobile-landscape
max-width-full-mobile-portrait
.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge
.max-width-24
.max-width-24
.max-width-30
.max-width-45
Other Classes
Responsiveness
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-mobile-landscape - hide starting from mobile landscape resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.show - display on all devices
.show-tablet - display starting from tablet resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-portrait - display starting from mobile portrait resolution
Utility
.center-everithing - flex vertical, align center, justify center, text center
.z-index-1 - bring an element closer on the z-index, sets z-index to 1
.z-index-2 - bring an element closer on the z-index, sets z-index to 2
.align-center - sets margin left and right to auto, centers an element inside its parent div
.spacing-clean - sets all spacing to 0, including margins and padding
.height-100 - sets height to 100%
.div-square - creates and maintains a 1:1 dimension of a div. CSS magic
.layer - sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element, and make sure the parent div has 'position: relative'
.clickable-off - sets pointer-events to none, prevents all click and hover interaction with an element
.clickable-on - sets pointer-events to auto, enables all click and hover interaction with an element
.overflow-hidden - sets overflow to hidden
.overflow-scroll - sets overflow to scroll
.overflow-auto - sets overflow to auto