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

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 H4

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 H5

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 H6

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

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

  1. First item
  2. Second item
  3. 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