Automatic.com Style Guide

Read on, friend

Typography

Automatic uses Avenir LT in a variety of weights. Standard sizes and leadings vary based on viewport size.

Global Variables

These are set in _variables.scss, and all other typographic styling uses these variables.

$site-base-text-size
16
$site-base-text-size-px
16px
$site-base-text-leading
22
$site-base-text-leading-px
22px
$site-font-stack-light
"Avenir LT W01 35 Light", sans-serif;
$site-font-stack-light-oblique
"AvenirLTW01-35LightObli", sans-serif;
$site-font-stack-book
"Avenir LT W01 45 Book", sans-serif;
$site-font-stack-book-oblique
"AvenirLTW01-45BookObliq", sans-serif;
$site-font-stack-heavy
"Avenir LT W01 85 Heavy", sans-serif;
$site-font-stack-heavy-oblique
"AvenirLTW01-85HeavyObli", sans-serif;

Sizes, Weights, Leading

NameColorStyleMobile
<768px
Tablet
768px - 1023px
Small Desktop
1024px - 1295px
Large Desktop
1296px +
Print
WeightSizeLeadingWeightSizeLeadingWeightSizeLeadingWeightSizeLeadingWeightSizeLeading
Bodyblack regularbook16px22pxbook16px22pxbook16px22pxbook16px22pxinheritsinheritsinherits
Body in Sectionsblack regularbook16px22pxbook18px26pxbook18px26pxbook18px26pxinheritsinheritsinherits
Smallinheritsbook14px18pxbook14px18pxbook14px18pxbook14px18pxinheritsinheritsinherits
Extra-Smallinheritsbook13px16pxbook13px16pxbook13px16pxbook13px16pxinheritsinheritsinherits
Superscriptinheritsweight: book. size: 75% of accompanying text. leading: 0.
Subscriptinheritsweight: book. size: 75% of accompanying text. leading: 0.
H6inheritsuppercasebook16px22pxbook16px22pxbook16px22pxbook16px22pxinheritsinheritsinherits
H5inheritsheavy16px22pxheavy16px22pxheavy16px22pxheavy16px22pxinheritsinheritsinherits
H4inheritsbook18px26pxbook18px26pxbook18px26pxbook18px26pxinheritsinheritsinherits
H3inheritsbook18px26pxbook24px32pxbook24px32pxbook24px32pxinheritsinheritsinherits
H2inheritsbook24px32pxlight36px44pxlight36px44pxlight36px44pxinheritsinheritsinherits
H1inheritslight36px44pxlight48px60pxlight48px60pxlight48px60pxinheritsinheritsinherits

Custom Typography

Your first choice should be to use one of the @u-text-level-X mixins defined in _typography.scss, which were specifically designed to work together in support of visual harmony and hierarchical consistency.

If none of those mixins works for your use case, please specify a font size and leading that are multiples of $base-text-size and $base-text-leading.

Do not:

  • Specify a font size that is not a multiple of $base-text-size.
  • Specify leading that is not a multiple of $base-text-leading.
  • Specify a typeface that is not already defined in one of our $font-stacks.
// Recommended
.my-custom-component {
  @include u-text-level-3;
}

// Okay
.my-custom-component {
  font-size: $base-text-px * 1.4375;
  line-height: $base-test-leading-px * 2;
}

// Not Okay
.my-custom-component {
  font-size: 23px;
  line-height: 44px;
  font-face: Comic Sans, Verdana, sans-serif;
}

Demo

I am an H1. I should be used for only two things: the Automatic logo in the site header, and the title text in the hero section.

I am an H2. I should be used for section headers.

I am an H3. I should be used for module headers within sections.

I am an H4. I should be used for module subheaders within sections.

I am an H5. I should be used for column headers in the site footer, and for HTML table headers.
I am an H6. I'm not sure where I should be used yet.

I am a regular paragraph of text. I contain bolded bits, a few italicized parts, and maybe even an underlined word or two. Here is a link to click on, and I even cite my sourcessource. If we ever talk about H2O, we’d better subscript the 2.

Skateboard viral pop-up, sriracha forage trust fund flannel readymade. Next level put a bird on it banh mi leggings twee PBR&B. Bespoke American Apparel wolf chillwave, try-hard fixie McSweeney's biodiesel food truck. Craft beer occupy lomo meditation, ethical artisan freegan twee VHS 8-bit vegan church-key skateboard literally messenger bag. Ethical squid hella DIY single-origin coffee. Messenger bag Kickstarter farm-to-table keytar swag. Crucifix Banksy stumptown Pitchfork iPhone.

Roof party Tonx meggings, fashion axe fingerstache Schlitz pop-up art party. Photo booth flexitarian freegan meditation. Direct trade pug cred, tattooed drinking vinegar Truffaut seitan polaroid Portland freegan organic. Next level sriracha whatever, vegan deep v biodiesel disrupt. Occupy Portland artisan cliche church-key. You probably haven't heard of them cred tattooed try-hard, Shoreditch pug occupy Vice Brooklyn cray pork belly wolf literally. Photo booth sriracha pug Intelligentsia, Neutra flannel meditation XOXO vinyl post-ironic.

I am a small paragraph of text. I contain bolded bits, a few italicized parts, and maybe even an underlined word or two. Here is a link to click on, and I even cite my sourcessource. If we ever talk about H2O, we’d better subscript the 2.

I am a small paragraph of text. I contain bolded bits, a few italicized parts, and maybe even an underlined word or two. Here is a link to click on, and I even cite my sourcessource. If we ever talk about H2O, we’d better subscript the 2.

I am a block quotation. The @automatic is a pretty awesome little device. Love the app and all the information available. Highly recommend picking one up.

Jane Doe @janedoe
  • I am an unordered list item.
  • I am an unordered list item.
  • I am an unordered list item with children.
    • I am a child unordered list item.
    • I am a child unordered list item.
    • I am an unordered list item with children.
      • I am a child unordered list item.
      • I am a child unordered list item.
    • I am a child unordered list item.
    • I am a child unordered list item.
  • I am an unordered list item.
  • I am an unordered list item.
  1. I am an ordered list item.
  2. I am an ordered list item.
  3. I am an ordered list item.
  4. I am an ordered list item with children.
    1. I am a child unordered list item.
    2. I am a child unordered list item.
    3. I am an unordered list item with children.
      1. I am a child unordered list item.
      2. I am a child unordered list item.
    4. I am a child unordered list item.
    5. I am a child unordered list item.
  5. I am an ordered list item.
  6. I am an ordered list item.
  7. I am an ordered list item.
  8. I am an ordered list item.
  9. I am an ordered list item.
  10. I am an ordered list item.
  11. I am an ordered list item.
  12. I am an ordered list item.
  13. I am an ordered list item.
  14. I am an ordered list item.
  15. I am an ordered list item.
I am a definition list term.
I am a definition list definition.
I am also a definition list definition.
I am a definition list term.
I am a definition list definition.
I am also a definition list definition.
Column HeaderColumn HeaderColumn HeaderColumn Header
cellcellcellcell
cellcellcellcell

Colors

Automatic is standardizing its color palette across client apps and web.

Color Variables & Usage

This color map lives in _variables.scss.

You should only use colors defined in the color map, which you can call via color("tone", "variant");.

You must enclose both the tone and the variant name in double quotation marks (to avoid color parsing bugs)

Do not use colors that aren't specified in the color map.

// Okay
.foo {
  color: color("black", "regular");
  background-color: color("red", "dark");
}

// Not Okay
.foo {
  color: #000;
  background-color: purple;
}

Component: Buttons

Some descriptive text about buttons here.

Code Sample

<a|span class="
     btn
     btn--[sm|md|lg]
     btn--[positive|outline]
     [btn--block]
     btn--[color]-[tone]
   ">
   <span class="icon icon--[name]"></span>
   Button text!
   <span class="aside">Aside</span>
</a|span>

Gray Dark

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Gray Regular

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Gray Light

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Blue Dark

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Blue Regular

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Blue Light

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Teal Dark

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Teal Regular

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Teal Light

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Green Dark

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Green Regular

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Green Light

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

White Regular

Small Positive Small Outline

Medium Positive Medium Outline

Large Positive Large Outline

Default section
Hero section
Section with background video

Marketing Section Title

This is an intro module. Here is one paragraph of copy.

Here is another paragraph of copy. You can have as many paragraphs as you want.

...module contents here...

Section Title

Section subtitle goes here, probably in sentence case. Should not exceed one or two short sentences in length.

Privacy

... section content here ...

Section Title

Module Graphic

Module Title, H3

Here is the first paragraph of copy for this module.

Here is another paragraph of copy for this module. You can have as many paragraphs as you want.

Call To Action Call To Action

Call To Action Call To Action

Module Title, H3

This module has no graphic. Notice how the module title scoots up.

Call To Action

Module Graphic

This module has a graphic but no title.

This module also has a second paragraph, but no calls to action.

Module Graphic

Module Title, H3

Here is the copy associated with this callout.

Here is more copy associated with this callout.

Call To Action

Module Title, H3

Here is a variant with no graphic, and only one paragraph of text.

Call To Action

Module Graphic

Here is a variant with no title.

Here is more copy associated with this callout.

Call To Action

Grid Settings

$grid_direction
$grid_gutter
$grid_max_width
$grid_breakpoint_sm
$grid_breakpoint_md
$grid_breakpoint_lg

Color Key

Light Yellow
Content Foreground Area
Regular Yellow
Content Background Area
Dark Yellow
Section Background

Grid Demo: Constrained (Default), No Bleed (Default)

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

Grid Demo: Constrained (Default), Half Bleed

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

Grid Demo: Constrained (Default), Full Bleed

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

Grid Demo: Fluid, No Bleed (Default)

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

Grid Demo: Fluid, Half Bleed

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

Grid Demo: Fluid, Full Bleed

1/1

Available via .g__unit--1-1 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/2

Available via .g__unit--1-2 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/3

Available via .g__unit--1-3 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/4

Available via .g__unit--1-4 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/5

Available via .g__unit--1-5 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/6

Available via .g__unit--1-6 at all viewport widths

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider

1/12

Available via .g__unit--1-12 at viewports 768px wide and wider