Design System for this website

I pulled together the basic elements that I used on my website, and rewrote the majority of my EJS functions and SASS mixins to deliver consistent application of these elements.

Color Palette

  • $palette--primary-white
    --palette--primary-white
  • $palette--primary-grey
    --palette--primary-grey
  • $palette--secondary-grey
    --palette--secondary-grey
  • $palette--hover-grey
    --palette--hover-grey
  • $palette--divider-color
    --palette--divider-color
  • $palette--error
    --palette--error
  • $palette--primary-color-dark
    --palette--primary-color-dark
  • $palette--primary-color-light
    --palette--primary-color-light
  • $palette--accent-color
    --palette--accent-color

Palette Combinations

  • @include palette--base
  • @include palette--base--inverted
  • @include palette--primary
  • @include palette--header
  • @include orange-gradient

Default Values

  • $base-unit: 6px
  • $transition-speed: 300ms
  • $transition-timing: ease
  • $border-radius: 3px

Spacing Variables

  • $section-spacer: 120px
  • $paragraph-bottom: 36px
$content-max-width: 1,020px
$full-bleed: 1,020px
$full-width-small: 1,008px
$full-width-medium: 960px

Viewports

$small: 320px
$medium: 600px
$large: 960px

Fonts

  • font-family: 'Source Serif Pro', serif;
    font-weight: 300;
  • font-family: 'Source Serif Pro', serif;
    font-weight: 500;
  • font-family: 'Roboto', sans-serif;
    font-weight: 300;
  • font-family: 'Roboto', sans-serif;
    font-weight: 500;

Type Definitions

  • @include type--title
  • @include type--title + @include italic
  • @include type--heading-1
  • @include type--heading-1 + @include italic
  • @include type--heading-2
  • @include type--heading-2 + @include italic
  • @include type--heading-3
  • @include type--heading-3 + @include italic
  • @include type--heading-4
  • @include type--heading-4 + @include italic
  • @include type--heading-5
  • @include type--heading-5 + @include italic
  • @include type--heading-6
  • @include type--heading-6 + @include italic
  • @include type--headings
  • @include type--headings + @include italic
  • @include type--body
  • @include type--body + @include italic
  • @include type--body-small
  • @include type--body-small + @include italic
  • @include type--body-tiny
  • @include type--body-tiny + @include italic

Inline Link

This is what an inline tag looks like

Block Link

This is what a block link tag looks like.

Button Link

This is what a button link tag looks like.

Card Link

Other

Button element without any classes.

Button element with inline-link class.

Button element with block-link class.

Button element with button-link class.

Button element with card-link class.

Other Interactive Elements