Tipography Intro

Text elements and classes are used strictly for sizing, not styling.
Usually these elements are wrapped with a block-wrapper to have access to frequently used modifiers as combo classes.

Headings

HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.

Heading 1

text-h1

HTML tag h1

Heading 1

Heading 2

text-h2

HTML tag h2

Heading 2

Heading 3

text-h3

HTML tag h3

Heading 3

Heading 4

text-h4

HTML tag h4

Heading 4

Heading 5

text-h5

HTML tag h5

Heading 5

Heading 6

text-h6

HTML tag h6

Heading 6

Text

Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.

text-xl

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

text-md

(Base)

text-sm

text-xs

paragraph

Rich Text

This is the styles of the Rich Text element and its nested elements. Use this class to add spacing between elements and to style any Rich Text nested element to match the brand styles.

rich-text

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

Text link

Bold text

Emphasis

^Superscript

_Subscript

Other Text Elements

This is a list of other HTML elements that need styling like link , quote , list , etc.

links

Text Link

block quotes

Block Quote

unordered lists

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

ordered lists

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Color Intro

This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.

Theme Colors

This is the list of colors and their usage.

Surface Color

HEX

#F9F4EE

Used as the main background color.

Surface Secondary

HEX

#F5EEE4

Used as the secondary dark background color.

Surface Inverse

HEX

#0A2447

Used as the inverse background color.

Text Primary

HEX

#0A2447

Used as the main text color.

Text Secondary

HEX

#067CC2

Used as the secondary text color.

Text Muted

HEX

#4ED9FF

Used as the muted text color.

Text Inverse

HEX

#F9F4EE

Used as the inverse text color.

Border Default

HEX

#0A2447

Used as the default border color.

Border Subtle

HEX

#067CC2

Used as the subtle border color.

Border Strong

HEX

#0A2447

Used as the strong border color.

Shadows

Shadows are set in the global CSS embed block to make it easier to copy layered shadows from Figma and avoid adding an extra combo-class to your elements by assigning them to attributes.

shadow

Or:

shadow

Small

Used in UI elements.

shadow-lg

Or:

shadow="large"

Large

Used in small components like cards.

shadow-xl

Or:

shadow="extra-large"

Extra Large

Used in larger components.

section

cc-bottom-large

Heading

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
‍
A default container acts as "12 columns" width marker, as it takes up the full design width (usually 1440px). That's why combo class names mention columns.

container

Heading

container

cc-10cols

Heading

container

cc-8cols

Heading

container

cc-6cols

Heading

Layouts

Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.

As a starting point we have the following default layouts that cover the basic design styles: layout-grid, laylayout-vertical, laayout-horizontal. Each of them has combo classes to change their default properties. But you can add more as you need.

Grid Layout

layout-grid

Heading

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

layout-grid defaults to 12 even columns. You can then play with the children column and row stack to distribute them as per your designs. This will give you full control on the position and size of each element in the grid.
There are also some combo classes to help modify the amount of columns and other styles like gap size, etc.

layout-grid

column

Heading

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

column is just a div that is used inside a grid column. The reason it exists is to have some reusable combo classes for alignment, padding, etc

layout-grid

cc-2cols

Lorem ipsum dolor

Modifies the grid to have only 2 column. Very useful for a repo grids!

layout-grid

cc-3cols

Lorem ipsum dolor

Modifies the grid to have only 3 column. Very useful for a repo grids!

layout-grid

cc-4cols

Lorem ipsum dolor

Modifies the grid to have only 4 columns. Useful for tighter card or logo grids.

layout-vertical

Combo classes:

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

Default Layout Vertical

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

Left Aligned Layout Vertical

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

Centred Layout Vertical

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

Use cc-x-* to align children on the cross-axis (horizontal) and cc-y-* to align them on the main-axis (vertical) of a layout-vertical. cc-centre applies both at once. Real button elements make the alignment differences obvious, since their widths differ.

layout-horizontal

Combo classes:

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

cc-x-left

cc-x-centre

cc-x-right

cc-y-top

cc-y-centre

cc-y-bottom

cc-centre

Same combo classes as layout-vertical, but the axes are swapped: cc-x-* controls the main-axis and cc-y-* the cross-axis, since layout-horizontal runs left to right.

layout-vertical

layout-horizontal

layout-grid

Combo classes:

cc-gap-2xs

cc-gap-xs

cc-gap-sm

cc-gap-md

cc-gap-lg

cc-gap-xl

cc-gap-2xl

cc-gap-2xs

cc-gap-xs

cc-gap-sm

cc-gap-md

cc-gap-lg

cc-gap-xl

cc-gap-2xl

Available on layout-vertical, layout-horizontal, and layout-grid. Sets both grid-column-gap and grid-row-gap using the Spacer scale. The wider boxes on the larger sizes make room for the increased spacing between the buttons.

layout-grid

cc-horizontal

This modifier is useful for button groups, logos, or any time you want extra items to stack in one line. Columns are automatically generated

image-wrapper

Combo classes:

cc-1x1

cc-16x9

cc-4x3

image-wrapper is a generic base class that has overflow hidden, position relative, and width 100%. This is useful to avoid creating a new class for standard-sized images in columns. It is also aligned top to avoid stretching for the whole column (you can change that by placing it in a flex parent). Use a combo class to give it full height.

image

Combo classes:

cc-contain

image is set to cover by default, and full width & height. You can use the combo class cc-contain for object-fit: contain

block-wrapper

Combo classes:

cc-mb-sm

cc-mb-md

cc-mb-lg

cc-gap-sm

cc-gap-md

cc-gap-lg

Default

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

Margin Small

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

Margin Medium

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

Margin Large

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

Gap Small

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

Gap Medium

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

Gap Large

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

This element has the purpose of controlling content spacing. Put here all your Headings, Paragraphs, Images and Buttons and use the combo classes to work the spacing between them.

Pro Tip: You can always wrap a block-wrapper inside another block-wrapper to manage different spacing props!!

Nested Block

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

Button Text

Flex Layouts

Utilities

Utilities have a u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a block-wrapper.
‍
On sections, avoid them as much as possible since you usually apply paddings on them, but background changes are fine.
‍
Things like text alignment should be on the layout layer.

Text Color Modifiers

These can be added to any element, although it's recommended to place it as high as possible according to your needs.
‍
For example, if you want a two text blocks to have this color and they are sibling elements, you could apply it to their parent element.
‍
If you have a lot of colored headings, it is a good idea to apply it on the element instead of the parent or in a span, to make it easier to access next time.

u-color-primary