Design Tokens
Colors
Primary
--color-primary
Dark
--color-dark
Medium
--color-medium
Light
--color-light
Orange
--color-orange
Purple
--color-purple
Pink
--color-pink
Green
--color-green
Blue
--color-blue
Teal
--color-teal
Yellow
--color-yellow
Red
--color-red
Burnt
--color-burnt
Typography
Body font: var(--font-body) Heading font: var(--font-heading)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text: Lorem ipsum dolor sit amet, link example, consectetur adipiscing elit. Strong and emphasis.
Blockquote example showing default styles.
— Citation
- Unordered list item
- Another item
- Ordered list item
- Another item
Layout + Rhythm
| Token | CSS Variable |
|---|---|
| Spacing base | --default-spacing |
| Container spacing | --default-container-spacing |
| Border radius | --default-border-radius |
| Box shadow | --default-box-shadow |
| Grid gap | --grid-gap |
| Breakpoints | --breakpoint-sm / md / lg / xl / 2xl |
| Container widths | --container-small-width … --container-xl-width |
Components
Alerts
Neutral alert
Success alert
Warning alert
Error alert
Card Containers (set-2 / set-3 / set-4)
Grid containers
Flex containers
Section Blocks
This renders all combinations of Section block options: section width × background × content width (and contained section width when applicable). Use the disclosure toggles below to keep the page readable.
Section width: Contained
Background: Transparent
Contained section width: Small
Small content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-small | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-small | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-small | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-small | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-small | content: section-block__content--large
Contained section width: Medium
Small content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-medium | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-medium | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-medium | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-medium | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-medium | content: section-block__content--large
Contained section width: Default
Small content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-default | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-default | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-default | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-default | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-default | content: section-block__content--large
Contained section width: Standard
Small content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-standard | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-standard | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-standard | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-standard | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-standard | content: section-block__content--large
Contained section width: Large
Small content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-large | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-large | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-large | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-large | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-transparent section-block--maxwidth-large | content: section-block__content--large
Background: White
Contained section width: Small
Small content
section-block section-block--contained section-block--bg-white section-block--maxwidth-small | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-white section-block--maxwidth-small | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-white section-block--maxwidth-small | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-white section-block--maxwidth-small | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-white section-block--maxwidth-small | content: section-block__content--large
Contained section width: Medium
Small content
section-block section-block--contained section-block--bg-white section-block--maxwidth-medium | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-white section-block--maxwidth-medium | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-white section-block--maxwidth-medium | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-white section-block--maxwidth-medium | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-white section-block--maxwidth-medium | content: section-block__content--large
Contained section width: Default
Small content
section-block section-block--contained section-block--bg-white section-block--maxwidth-default | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-white section-block--maxwidth-default | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-white section-block--maxwidth-default | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-white section-block--maxwidth-default | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-white section-block--maxwidth-default | content: section-block__content--large
Contained section width: Standard
Small content
section-block section-block--contained section-block--bg-white section-block--maxwidth-standard | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-white section-block--maxwidth-standard | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-white section-block--maxwidth-standard | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-white section-block--maxwidth-standard | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-white section-block--maxwidth-standard | content: section-block__content--large
Contained section width: Large
Small content
section-block section-block--contained section-block--bg-white section-block--maxwidth-large | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-white section-block--maxwidth-large | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-white section-block--maxwidth-large | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-white section-block--maxwidth-large | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-white section-block--maxwidth-large | content: section-block__content--large
Background: Light
Contained section width: Small
Small content
section-block section-block--contained section-block--bg-light section-block--maxwidth-small | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-light section-block--maxwidth-small | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-light section-block--maxwidth-small | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-light section-block--maxwidth-small | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-light section-block--maxwidth-small | content: section-block__content--large
Contained section width: Medium
Small content
section-block section-block--contained section-block--bg-light section-block--maxwidth-medium | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-light section-block--maxwidth-medium | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-light section-block--maxwidth-medium | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-light section-block--maxwidth-medium | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-light section-block--maxwidth-medium | content: section-block__content--large
Contained section width: Default
Small content
section-block section-block--contained section-block--bg-light section-block--maxwidth-default | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-light section-block--maxwidth-default | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-light section-block--maxwidth-default | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-light section-block--maxwidth-default | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-light section-block--maxwidth-default | content: section-block__content--large
Contained section width: Standard
Small content
section-block section-block--contained section-block--bg-light section-block--maxwidth-standard | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-light section-block--maxwidth-standard | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-light section-block--maxwidth-standard | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-light section-block--maxwidth-standard | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-light section-block--maxwidth-standard | content: section-block__content--large
Contained section width: Large
Small content
section-block section-block--contained section-block--bg-light section-block--maxwidth-large | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-light section-block--maxwidth-large | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-light section-block--maxwidth-large | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-light section-block--maxwidth-large | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-light section-block--maxwidth-large | content: section-block__content--large
Background: Dark
Contained section width: Small
Small content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-small | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-small | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-small | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-small | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-small | content: section-block__content--large
Contained section width: Medium
Small content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-medium | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-medium | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-medium | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-medium | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-medium | content: section-block__content--large
Contained section width: Default
Small content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-default | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-default | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-default | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-default | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-default | content: section-block__content--large
Contained section width: Standard
Small content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-standard | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-standard | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-standard | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-standard | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-standard | content: section-block__content--large
Contained section width: Large
Small content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-large | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-large | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-large | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-large | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-dark section-block--maxwidth-large | content: section-block__content--large
Background: Image
Contained section width: Small
Small content
section-block section-block--contained section-block--bg-image section-block--maxwidth-small | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-image section-block--maxwidth-small | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-image section-block--maxwidth-small | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-image section-block--maxwidth-small | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-image section-block--maxwidth-small | content: section-block__content--large
Contained section width: Medium
Small content
section-block section-block--contained section-block--bg-image section-block--maxwidth-medium | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-image section-block--maxwidth-medium | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-image section-block--maxwidth-medium | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-image section-block--maxwidth-medium | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-image section-block--maxwidth-medium | content: section-block__content--large
Contained section width: Default
Small content
section-block section-block--contained section-block--bg-image section-block--maxwidth-default | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-image section-block--maxwidth-default | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-image section-block--maxwidth-default | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-image section-block--maxwidth-default | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-image section-block--maxwidth-default | content: section-block__content--large
Contained section width: Standard
Small content
section-block section-block--contained section-block--bg-image section-block--maxwidth-standard | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-image section-block--maxwidth-standard | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-image section-block--maxwidth-standard | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-image section-block--maxwidth-standard | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-image section-block--maxwidth-standard | content: section-block__content--large
Contained section width: Large
Small content
section-block section-block--contained section-block--bg-image section-block--maxwidth-large | content: section-block__content--small
Medium content
section-block section-block--contained section-block--bg-image section-block--maxwidth-large | content: section-block__content--medium
Default content
section-block section-block--contained section-block--bg-image section-block--maxwidth-large | content: section-block__content--default
Standard content
section-block section-block--contained section-block--bg-image section-block--maxwidth-large | content: section-block__content--standard
Large content
section-block section-block--contained section-block--bg-image section-block--maxwidth-large | content: section-block__content--large
Section width: Full width
Background: Transparent
Small content
section-block section-block--full section-block--bg-transparent | content: section-block__content--small
Medium content
section-block section-block--full section-block--bg-transparent | content: section-block__content--medium
Default content
section-block section-block--full section-block--bg-transparent | content: section-block__content--default
Standard content
section-block section-block--full section-block--bg-transparent | content: section-block__content--standard
Large content
section-block section-block--full section-block--bg-transparent | content: section-block__content--large
Background: White
Small content
section-block section-block--full section-block--bg-white | content: section-block__content--small
Medium content
section-block section-block--full section-block--bg-white | content: section-block__content--medium
Default content
section-block section-block--full section-block--bg-white | content: section-block__content--default
Standard content
section-block section-block--full section-block--bg-white | content: section-block__content--standard
Large content
section-block section-block--full section-block--bg-white | content: section-block__content--large
Background: Light
Small content
section-block section-block--full section-block--bg-light | content: section-block__content--small
Medium content
section-block section-block--full section-block--bg-light | content: section-block__content--medium
Default content
section-block section-block--full section-block--bg-light | content: section-block__content--default
Standard content
section-block section-block--full section-block--bg-light | content: section-block__content--standard
Large content
section-block section-block--full section-block--bg-light | content: section-block__content--large
Background: Dark
Small content
section-block section-block--full section-block--bg-dark | content: section-block__content--small
Medium content
section-block section-block--full section-block--bg-dark | content: section-block__content--medium
Default content
section-block section-block--full section-block--bg-dark | content: section-block__content--default
Standard content
section-block section-block--full section-block--bg-dark | content: section-block__content--standard
Large content
section-block section-block--full section-block--bg-dark | content: section-block__content--large
Background: Image
Small content
section-block section-block--full section-block--bg-image | content: section-block__content--small
Medium content
section-block section-block--full section-block--bg-image | content: section-block__content--medium
Default content
section-block section-block--full section-block--bg-image | content: section-block__content--default
Standard content
section-block section-block--full section-block--bg-image | content: section-block__content--standard
Large content
section-block section-block--full section-block--bg-image | content: section-block__content--large
Section width: Floating full width
Background: Transparent
Small content
section-block section-block--floating-full section-block--bg-transparent | content: section-block__content--small
Medium content
section-block section-block--floating-full section-block--bg-transparent | content: section-block__content--medium
Default content
section-block section-block--floating-full section-block--bg-transparent | content: section-block__content--default
Standard content
section-block section-block--floating-full section-block--bg-transparent | content: section-block__content--standard
Large content
section-block section-block--floating-full section-block--bg-transparent | content: section-block__content--large
Background: White
Small content
section-block section-block--floating-full section-block--bg-white | content: section-block__content--small
Medium content
section-block section-block--floating-full section-block--bg-white | content: section-block__content--medium
Default content
section-block section-block--floating-full section-block--bg-white | content: section-block__content--default
Standard content
section-block section-block--floating-full section-block--bg-white | content: section-block__content--standard
Large content
section-block section-block--floating-full section-block--bg-white | content: section-block__content--large
Background: Light
Small content
section-block section-block--floating-full section-block--bg-light | content: section-block__content--small
Medium content
section-block section-block--floating-full section-block--bg-light | content: section-block__content--medium
Default content
section-block section-block--floating-full section-block--bg-light | content: section-block__content--default
Standard content
section-block section-block--floating-full section-block--bg-light | content: section-block__content--standard
Large content
section-block section-block--floating-full section-block--bg-light | content: section-block__content--large
Background: Dark
Small content
section-block section-block--floating-full section-block--bg-dark | content: section-block__content--small
Medium content
section-block section-block--floating-full section-block--bg-dark | content: section-block__content--medium
Default content
section-block section-block--floating-full section-block--bg-dark | content: section-block__content--default
Standard content
section-block section-block--floating-full section-block--bg-dark | content: section-block__content--standard
Large content
section-block section-block--floating-full section-block--bg-dark | content: section-block__content--large
Background: Image
Small content
section-block section-block--floating-full section-block--bg-image | content: section-block__content--small
Medium content
section-block section-block--floating-full section-block--bg-image | content: section-block__content--medium
Default content
section-block section-block--floating-full section-block--bg-image | content: section-block__content--default
Standard content
section-block section-block--floating-full section-block--bg-image | content: section-block__content--standard
Large content
section-block section-block--floating-full section-block--bg-image | content: section-block__content--large
Tables
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 | Cell B1 | Cell C1 |
| Cell A2 | Cell B2 | Cell C2 |
| Cell A3 | Cell B3 | Cell C3 |
Forms (Gravity Forms)
[gravityform id="1" title="true" description="true" ajax="true"]
Utilities
Backgrounds
.bg-primary
.bg-secondary
.bg-tertiary
.bg-light
.bg-dark
Spacing
.mt-0 + .mb-xl
.p-sm
.p-md
.p-lg
.p-xl
