Design System

Visual Variables Reference

Font Families

Base ships with body, h1, h2, h3, h4, h5, h6, p, button, input, and select set to --font-body in core-styles.css.

--font-body

The quick brown fox jumps over the lazy dog.

--font-display

The quick brown fox jumps over the lazy dog.

Font Sizes

Font variables are done in rems so will scale according to set root (body) font size. Base ships with body set to 1rem (16px) in reboot.css.

--text-xs

The quick brown fox jumps over the lazy dog.

--text-sm

The quick brown fox jumps over the lazy dog.

--text-base

The quick brown fox jumps over the lazy dog.

--text-lg

The quick brown fox jumps over the lazy dog.

--text-xl

The quick brown fox jumps over the lazy dog.

--text-2xl

The quick brown fox jumps over the lazy dog.

--text-3xl

The quick brown fox jumps over the lazy dog.

--text-4xl

The quick brown fox jumps over the lazy dog.

--text-5xl

The quick brown fox jumps over the lazy dog.

--text-6xl

The quick brown fox jumps over the lazy dog.

Letter Spacing

--tracking-tighter

The quick brown fox jumps over the lazy dog.

--tracking-tight

The quick brown fox jumps over the lazy dog.

--tracking-normal

The quick brown fox jumps over the lazy dog.

--tracking-wide

The quick brown fox jumps over the lazy dog.

--tracking-wider

The quick brown fox jumps over the lazy dog.

--tracking-widest

The quick brown fox jumps over the lazy dog.

Line Heights

Base ships with body set to 1.5 (24px) in reboot.css.

--leading-none

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

--leading-tight

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

--leading-snug

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

--leading-normal

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

--leading-relaxed

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

--leading-loose

The quick brown fox jumps over the lazy dog.
The five boxing wizards jump quickly.

Spacing

Standard base page gutters use --space-5 padding.

--space-px (1px)

--space-1 (4px)

--space-2 (8px)

--space-3 (12px)

--space-4 (16px)

--space-5 (20px)

--space-6 (24px)

--space-8 (32px)

--space-10 (40px)

--space-12 (48px)

--space-16 (64px)

--space-20 (80px)

--space-24 (96px)

--space-32 (128px)

--space-40 (160px)

--space-48 (192px)

--space-56 (224px)

--space-64 (256px)

Colors

--black

#000000

--white

#ffffff

--gray-xxx

100

#f8fafc

200

#edf1f7

300

#e1e7ef

400

#ccd4e0

500

#a0adc0

600

#728297

700

#4a5768

800

#2d3848

900

#1a222d

--primary-color-xxx

100

#ebf5ff

200

#bedbf8

300

#90c2f4

400

#64a8ed

500

#4191e1

600

#3080cf

700

#2b6eb1

800

#2c5781

900

#1e3852

--secondary-color-xxx

100

#fff7f0

200

#fee2c8

300

#fbc38e

400

#f6a355

500

#ed8e35

600

#df7c20

700

#c06e21

800

#9c5c21

900

#7b4b1e

--tertiary-color-xxx

100

#fee1e1

200

#fec8c8

300

#fca6a6

400

#f87272

500

#ef4343

600

#dc2828

700

#ba1c1c

800

#981b1b

900

#811d1d

Shadows

Examples of box-shadow property with shadow variables.

--shadow-xs

--shadow-sm

--shadow

--shadow-md

--shadow-lg

--shadow-xl

--shadow-2xl

--shadow-inner

--shadow-outline

Border Radii

Examples of border-radius property with border radii variables.

--rounded-none

--rounded

--rounded-md

--rounded-lg

--rounded-xl

--rounded-2xl

--rounded-3xl

--rounded-full

--rounded-circle

Widths

Standard practice is to match --width-base to standard comped text content width and --width-feature to a comped widget that is larger than --width-base but not full screen if available.

--width-compact

--width-comfortable

--width-double

--width-base

--width-feature

--width-fullscreen

Core Styles

This is an example of some text that is surrounded by an H1 tag.

Search engines look for H1s to determine a page's title and use that in the weighting of the page in their rankings. Consequently, you never want to actually use the H1 in the content of a page because we automatically generate the H1 from the Page Name and Google would ding you for trying to game their algorithm if you had more than one on a page.

This is an example of an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

This is an example of an H3

This is an example of an H4

This is an example of an H5

This is an example of an H6

This is what a bunch of text looks like without the "p tag". If you were to look at the HTML version of this page, you would notice that this grouping of text does not have any sort of tag (denoted by <> preceding it and following it to close the tag). That is why this text is pretty generic and lacking any style. Chances are that the leading between the lines is a lot closer than the ideal as well.

This, on the other hand is what text looks like when it is surrounded by "p tags". In case it is not apparent at this point, "p" stands for paragraph. It is the p tags that alert the CMS to the fact that this text needs to have certain styling applied to it. That is why this text probably looks a good deal different than the paragraph above. If you were to look at this text in the HTML, you would see a

just before the first word to open the tag and a just after this sentence to close it.

And now for some lists...we'll start with bullets

First bullet
Second bullet
Third bullet
- Indented bullet
  - Twice indented bullet

Or if you prefer an ordered lis, as opposed to an unorded bullet list:

First item
Second item
Third item
1. Once indented
  1. Twice indented

And finally, we'll wrap this page up with some common text styling:

Here's an example of what bold text looks like

And here's italicized text

How about some underlining?

~~I can't imagine why you'd use strikethrough on a website, but here you go.~~

Here's and example of _subscript

Or how about some ^superscript?

And last but certainly not least, here's what a hyperlink looks like on this site.

odd - 1	odd - 2
even - 1	even - 2
odd - 3	odd - 4