Abacus DesignKit
2.0

Layout & Utilities

Page Wrappers

  • page-wrap
  • main-wrap

Containers

  • container--lg
  • container--md
  • container--sm

Max Widths

  • max-width--full
  • max-width--xxl
  • max-width--xl
  • max-width--lg
  • max-width--md
  • max-width--sm
  • max-width--xs
  • max-width--xxs

Margin

Classes
Spacing Guide

Direction

  • margin--top
  • margin--left
  • margin--right
  • margin--bottom
  • margin--horizontal
  • margin--vertical

Size

  • margin--none
  • margin--xxs
  • margin--xs
  • margin--sm
  • margin--md
  • margin--lg
  • margin--xl
  • margin--xxl

Spacing Guide

There's a bit of math going on here, below is a guide on how spacing works for Abacus.

𝞅 = 1.618 (golden ratio)

𝒙 = largest font size in container (1rem/16px)

𝒉 = line height of 𝒙

Variable
Size
Step
Math
--gap--xxs
0.236em
3.776px
Whole

--gap--xs ÷ 𝞅

--space--xxs
0.3em
4.8px
Half

--gap--xs ÷ √𝞅

--gap--xs
0.382em
6.112px
Whole

--gap--sm ÷ 𝞅

--space--xs
0.486em
7.776px
Half

--gap--sm ÷ √𝞅

--gap--sm
0.618em
9.888px
Whole

--gap--md ÷ 𝞅

--space--sm
0.786em
12.576px
Half

--gap--md ÷ √𝞅

--gap--md
1em
16px
Whole
--font-size--body
--space--md
1.272em
20.352px
Half

--gap--md × √𝞅

--gap--lg
1.618em
25.888px
Whole

--gap--md × 𝞅

--space--lg
2.058em
32.928px
Half

--gap--lg × √𝞅

--gap--xl
2.618em
41.888px
Whole

--gap--lg × 𝞅

--space--xl
3.33em
53.28px
Half

--gap--xl × √𝞅

--gap--xxl
4.236em
67.776px
Whole

--gap--xl × 𝞅

--space--xxl
5.388em
86.208px
Half

--gap--xxl × √𝞅

Padding

Classes
Spacing Guide

Direction

  • padding--top
  • padding--left
  • padding--right
  • padding--bottom
  • padding--horizontal
  • padding--vertical

Size

  • padding--none
  • padding--xxs
  • padding--xs
  • padding--sm
  • padding--md
  • padding--lg
  • padding--xl
  • padding--xxl

Section Padding

  • section-padding--sm
  • section-padding--md
  • section-padding--lg

Spacing Guide

There's a bit of math going on here, below is a guide on how spacing works for Abacus.

𝞅 = 1.618 (golden ratio)

𝒙 = largest font size in container (1rem/16px)

𝒉 = line height of 𝒙

Variable
Size
Step
Math
--gap--xxs
0.236em
3.776px
Whole

--gap--xs ÷ 𝞅

--space--xxs
0.3em
4.8px
Half

--gap--xs ÷ √𝞅

--gap--xs
0.382em
6.112px
Whole

--gap--sm ÷ 𝞅

--space--xs
0.486em
7.776px
Half

--gap--sm ÷ √𝞅

--gap--sm
0.618em
9.888px
Whole

--gap--md ÷ 𝞅

--space--sm
0.786em
12.576px
Half

--gap--md ÷ √𝞅

--gap--md
1em
16px
Whole
--font-size--body
--space--md
1.272em
20.352px
Half

--gap--md × √𝞅

--gap--lg
1.618em
25.888px
Whole

--gap--md × 𝞅

--space--lg
2.058em
32.928px
Half

--gap--lg × √𝞅

--gap--xl
2.618em
41.888px
Whole

--gap--lg × 𝞅

--space--xl
3.33em
53.28px
Half

--gap--xl × √𝞅

--gap--xxl
4.236em
67.776px
Whole

--gap--xl × 𝞅

--space--xxl
5.388em
86.208px
Half

--gap--xxl × √𝞅

Gaps

Classes
Spacing Guide

Direction

  • gap--column
  • gap--row

Size

  • gap--none
  • gap--global
  • gap--xxs
  • gap--xs
  • gap--sm
  • gap--md
  • gap--lg
  • gap--xl
  • gap--xxl

Spacing Guide

There's a bit of math going on here, below is a guide on how spacing works for Abacus.

𝞅 = 1.618 (golden ratio)

𝒙 = largest font size in container (1rem/16px)

𝒉 = line height of 𝒙

Variable
Size
Step
Math
--gap--xxs
0.236em
3.776px
Whole

--gap--xs ÷ 𝞅

--space--xxs
0.3em
4.8px
Half

--gap--xs ÷ √𝞅

--gap--xs
0.382em
6.112px
Whole

--gap--sm ÷ 𝞅

--space--xs
0.486em
7.776px
Half

--gap--sm ÷ √𝞅

--gap--sm
0.618em
9.888px
Whole

--gap--md ÷ 𝞅

--space--sm
0.786em
12.576px
Half

--gap--md ÷ √𝞅

--gap--md
1em
16px
Whole
--font-size--body
--space--md
1.272em
20.352px
Half

--gap--md × √𝞅

--gap--lg
1.618em
25.888px
Whole

--gap--md × 𝞅

--space--lg
2.058em
32.928px
Half

--gap--lg × √𝞅

--gap--xl
2.618em
41.888px
Whole

--gap--lg × 𝞅

--space--xl
3.33em
53.28px
Half

--gap--xl × √𝞅

--gap--xxl
4.236em
67.776px
Whole

--gap--xl × 𝞅

--space--xxl
5.388em
86.208px
Half

--gap--xxl × √𝞅

Border Radius

Direction

  • radius--inherit
     
  • radius--top
     
  • radius--top-left
     
  • radius--top-right
     
  • radius--left
     
  • radius--right
     
  • radius--bottom
     
  • radius--bottom-left
     
  • radius--bottom-right
     

Size

  • radius--none
     
  • radius--xxs
     
  • radius--xs
     
  • radius--sm
     
  • radius--md
     
  • radius--lg
     
  • radius--xl
     
  • radius--xxl
     
  • radius--full
     

Flexbox

Horizontal Flex

  • flex-h--left-top
  • flex-h--left-center
  • flex-h--left-bottom
  • flex-h--left-stretch
  • flex-h--center-top
  • flex-h--center-center
  • flex-h--center-bottom
  • flex-h--center-stretch
  • flex-h--right-top
  • flex-h--right-center
  • flex-h--right-bottom
  • flex-h--right-stretch
  • flex-h--between-top
  • flex-h--between-center
  • flex-h--between-bottom
  • flex-h--between-stretch

Vertical Flex

  • flex-v--left-top
  • flex-v--left-center
  • flex-v--left-bottom
  • flex-v--left-between
  • flex-v--center-top
  • flex-v--center-center
  • flex-v--center-bottom
  • flex-v--center-between
  • flex-v--right-top
  • flex-v--right-center
  • flex-v--right-bottom
  • flex-v--right-between
  • flex-v--stretch-top
  • flex-v--stretch-center
  • flex-v--stretch-bottom
  • flex-v--stretch-between

Other Flex Utilities

  • flex-h--wrap
  • flex-v--wrap
  • flex--shrink
  • flex--grow
  • flex--no-shrink

Grid

  • grid--global
  • grid--1
  • grid--2
  • grid--3
  • grid--4
  • grid--5
  • grid--6
  • grid--custom
  • grid--breakout
  • grid--autofit
  • grid--subgrid

Grid Columns

  • column--1
  • column--2
  • column--3
  • column--4
  • column--5
  • column--6
  • column--7
  • column--8
  • column--9
  • column--10
  • column--11
  • column--12
  • column--custom
  • column--full
  • column--indent

Typography

Font Family

  • font--display
    Inter 4.0
    Download
  • font--body
    Inter 4.0

Text Sizes

  • font-size-display
    Display
    "Display work refers to words or type matter which is made to stand out from the rest of the text by specially striking arrangement or by the use of larger, bold, or italic faces."
    - Josef Müller-Brockmann
  • font-size--title-1
    Title 1
  • font-size--title-2
    Title 2
  • font-size--title-3
    Title 3
  • font-size--headline
    Headline
  • font-size--body
    Body
  • font-size--callout
    Callout
  • font-size--subhead
    Subhead
  • font-size--footnote
    Footnote
  • font-size--caption
    Caption
  • All Links
    Link
  • All Ordered Lists
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
  • All Unordered Lists
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • All Quote Blocks
    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

Text Weight

  • font-weight--100
    100 - Thin
  • font-weight--200
    200 - Extra Light
  • font-weight--300
    300 - Light
  • font-weight--400
    400 - Normal
  • font-weight--500
    500 - Medium
  • font-weight--600
    600 - Semi Bold
  • font-weight--700
    700 - Bold
  • font-weight--800
    800 - Extra Bold
  • font-weight--900
    900 - Black

Text Alignment

  • text-align--left

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

  • text-align--center

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

  • text-align--right

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

  • text-align--justify

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

Text Styling

  • text-decoration--none
    Lorem ipsum dolor sit amet
  • text-decoration--strikethrough
    Lorem ipsum dolor sit amet
  • text-decoration--underline
    Lorem ipsum dolor sit amet
  • text-decoration--overline
    Lorem ipsum dolor sit amet
  • text-style--uppercase
    Lorem ipsum dolor sit amet
  • text-style--lowercase
    Lorem ipsum dolor sit amet
  • text-style--capitalize
    Lorem ipsum dolor sit amet
  • text-wrap--balance
    Lorem ipsum dolor sit amet
  • text-wrap--pretty
    Lorem ipsum dolor sit amet
  • text-wrap--none
    Lorem ipsum dolor sit amet
  • 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.
  • 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.
  • 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.
  • 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.

Rich Text

rich-text

Heading 1

Link inside the rich text element

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

Heading 3

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 4

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading 5
Blockquote: 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
Heading 6
Image Caption

Color

  • background--base
     
  • background--selected
     
  • background--layer-1
     
  • background--layer-2
     
  • background--layer-3
     

Section Header

  • shadow--none
     
  • shadow--in-1
     
  • shadow--in-2
     
  • shadow--in-3
     
  • shadow--in-4
     
  • shadow--out-1
     
  • shadow--out-2
     
  • shadow--out-3
     
  • shadow--out-4
     

Text Color

  • text-color--black
    This is some text
  • text-color--white
    This is some text
  • text-color--primary
    This is some text
  • text-color--secondary
    This is some text
  • text-color--brand
    This is some text
  • text-color--info
    This is some text
  • text-color--success
    This is some text
  • text-color--warning
    This is some text
  • text-color--error
    This is some text

Gradients

  • gradient--1
     
  • gradient--2
     
  • gradient--3
     
  • gradient--4
     
  • clip--text
    Text Clip
  • gradient--1
    Text Clip
  • gradient--2
    Text Clip
  • gradient--3
    Text Clip
  • gradient--4
    Text Clip

Iconography

These are useful wether you are adding icons as images or as SVGs inside embeds. When adding as HTML embed, change the SVG's height and width properties to 100%, and the fill/stroke to currentColor (if you needed)

You can find the Icon library by visiting the Phosphor icons website.

Size

  • icon--display
  • icon--title-1
  • icon--title-2
  • icon--title-3
  • icon--headline
  • icon--body
  • icon--callout
  • icon--subhead
  • icon--footnote
  • icon--caption

Utilities

  • data-icon-fill="true"

Components

  • Icon

Images

Image Wrap

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

If you have images with unique sizes and positioning, create a new class for it.

  • image-wrap

Aspect Ratio

All Images are set to cover by default and has combo classes to control it's aspect ratio or set it to contain. You can add more or modify them.

  • aspect-ratio--auto
  • aspect-ratio--2x1
  • aspect-ratio--16x9
  • aspect-ratio--3x2
  • aspect-ratio--4x3
  • aspect-ratio--5x4
  • aspect-ratio--1x1
  • aspect-ratio--5x6
  • aspect-ratio--3x4
  • aspect-ratio--2x3

Object Fit

  • object-fit--none
  • object-fit--fill
  • object-fit--contain
  • object-fit--cover

Other Utilities

Display

  • hide
  • hide--tablet
  • hide--mobile

Order

  • order--first
  • order--first-desktop
  • order--first-tablet
  • order--last
  • order--last-desktop
  • order--last-tablet

Overflow

  • overflow--visible
  • overflow--hidden
  • overflow--clip
  • overflow--scroll
  • overflow--auto

Opacity

  • opacity--muted
  • opacity--disabled

Z-Index

  • z-index--auto
  • z-index--1
  • z-index--2
  • z-index--level-1
  • z-index--level-2
  • z-index--level-3

Miscellaneous

  • border--none
  • pointer-events--auto
  • pointer-events--off
  • clean-spacing
  • align--left
  • align--center
  • align--right