Hello, beautiful!

spec tool

{{styleGuideTool.h1.text}}

{{styleGuideTool.p.text}}

{{styleGuideTool.btn.text}}

h1 classes

  • Font-color

  • Font-weight

  • Font-family

  • Text-transform

  • Underline

  • Text-align

  • Hide

  • Mobile font-size

  • Tablet font-size

  • Desktop md font-size

  • Desktop font-size

p classes

  • Font-color

  • Font-weight

  • Font-family

  • Text-transform

  • Underline

  • Text-align

  • Hide

  • Mobile font-size

  • Tablet font-size

  • Desktop md font size

  • Desktop font-size

button classes

  • Button width

  • Disabled state

  • Button type

  • Hide

container classes

  • Background-color

  • Text-align

  • Mobile aspect ratios

  • Tablet aspect ratios

  • Desktop md aspect ratios

  • Desktop aspect ratios

color palette

primary color

Luxe

The Madison Reed purple is a warm plum purple; it's used for links, buttons, and calls to action.

color-mr-purple

#600057

color-mr-purple-dark

20% darker

secondary color

Joy

The Madison Reed blue is used for information links, backgrounds and nav elements.

color-mr-blue

#7ca3dc

accent colors

Metallics

The Madison Reed Accent colors are only used in decorative fonts as textures.

platinum

platinum

gold

gold

grayscale

Black to White

The grayscale colors are used for text and background colors.

color-black

#000

color-slate

#55565a

color-fog

#cac8c7

color-fog-light

#ebebeb

color-white

#fff

typography

To optimize for ease of reading, we want the maximum line length of any text block to be 600px (optimal line length for a 14px font is 400px). Our line height is 1.5em for font sizes below 20px, 1.3em for font sizes 20px - 32px, and 1.1em for font sizes 36px/above.

headings

hello beautiful

subhead

welcome to madison reed

body

Luxe permanent at-home hair color with gorgeous, salon-quality, natural-looking results...that's the beauty of Madison Reed.

primary font

Averta

Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

SemiBold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

secondary font

Didot

Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

decorative font

quickpen

regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

font colors

Color-font (#000000)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color-slate (#55565a)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color-purple (#600057)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color-blue (#7ca3dc)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color-white (#ffffff)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

icons

 .icon-neg

 .icon-caret-up

 .icon-caret-right-circle

 .icon-heart-half

 .icon-facebook

 .icon-heart

 .icon-person

 .icon-star

 .icon-heart-full

 .icon-caret-down

 .icon-thumb-up

 .icon-heart-x

 .icon-pinterest

 .icon-truck-move

 .icon-download

 .icon-caret-right

 .icon-x-full

 .icon-tube

 .icon-card-break

 .icon-question

 .icon-check

 .icon-protip

 .icon-arrow-up

 .icon-heart-break

 .icon-heart-refresh

 .icon-subscription

 .icon-edit

 .icon-bag-plus

 .icon-truck

 .icon-instagram

 .icon-pos-full

 .icon-twitter

 .icon-menu

 .icon-googleplus

 .icon-caret-left

 .icon-lock

 .icon-pos

 .icon-email

 .icon-check-nobox

 .icon-star-half

 .icon-phone

 .icon-heart-leaf

 .icon-bag

 .icon-star-full

 .icon-quote

 .icon-arrow-down

 .icon-protips

 .icon-camera

 .icon-key

 .icon-x

 .icon-youtube

 .icon-magnify

 .icon-process

 .icon-play

 .icon-thumb-down

 .icon-user

 .icon-info

 .icon-chat

 .icon-love-banner

 .icon-pdf

 .icon-calendar

 .icon-truck-left

 .icon-infinity

 .icon-leaf

 .icon-tag

Grid System

Our responsive Grid System has 12 fluid columns. Padding can be added to columns to create custom gutters. There are also special columns for multiples of 10% and special classes for mantaining aspect-ratios for custom layout.

.xs-12

.xs-12.sm-12.md-6.lg-6

.xs-12.sm-12.md-6.lg-6

.xs-12.sm-6.md-6.lg-4

.xs-12.sm-6.md-6.lg-4

.xs-12.sm-6.md-12.lg-4

.xs-12.sm-6.md-4.lg-3

.xs-12.sm-6.md-4.lg-3

.xs-12.sm-6.md-4.lg-3

.xs-12.sm-6.md-4.lg-3

.xs-6.sm-4.md-3.lg-2

.xs-6.sm-4.md-3.lg-2

.xs-6.sm-4.md-3.lg-2

.xs-6.sm-4.md-3.lg-2

.xs-6.sm-4.md-3.lg-2

.xs-6.sm-4.md-3.lg-2

.xs-12
  .dark-box.b-2.p-5.text-center
    p .xs-12
 
.xs-12.sm-12.md-6.lg-6
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-12.md-6.lg-6
.xs-12.sm-12.md-6.lg-6
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-12.md-6.lg-6
 
.xs-12.sm-6.md-6.lg-4
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-6.lg-4
.xs-12.sm-6.md-6.lg-4
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-6.lg-4
.xs-12.sm-6.md-12.lg-4
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-12.lg-4
 
.xs-12.sm-6.md-4.lg-3
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-4.lg-3
.xs-12.sm-6.md-4.lg-3
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-4.lg-3
.xs-12.sm-6.md-4.lg-3
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-4.lg-3
.xs-12.sm-12.md-4.lg-3
  .dark-box.b-2.p-5.text-center
    p .xs-12.sm-6.md-4.lg-3
 
.xs-6.sm-4.md-4.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2
.xs-6.sm-4.md-4.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2
.xs-6.sm-4.md-3.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2
.xs-6.sm-4.md-3.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2
.xs-6.sm-4.md-3.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2
.xs-6.sm-4.md-3.lg-2
  .dark-box.b-2.p-5.text-center
    p .xs-6.sm-4.md-3.lg-2

Aspect Boxes

Ratio

  • 1x1
  • 1x2
  • 1x3
  • 1x4
  • 2x1
  • 2x3
  • 3x1
  • 4x1
  • 4x3
  • 4x5
  • 7x2
  • 8x5
  • 10x9
  • 12x5
  • 16x9

desktop 960 (px)

  • 960 x 960
  • 960 x 1920
  • 960 x 2880
  • 960 x 3840
  • 960 x 480
  • 960 x 1440
  • 960 x 320
  • 960 x 240
  • 960 x 720
  • 960 x 1200
  • 960 x 274
  • 960 x 600
  • 960 x 864
  • 960 x 400
  • 960 x 540

tablet 560 (px)

  • 560 x 560
  • 560 x 1120
  • 560 x 1680
  • 560 x 2240
  • 560 x 280
  • 560 x 840
  • 560 x 187
  • 560 x 140
  • 560 x 420
  • 560 x 700
  • 560 x 160
  • 560 x 350
  • 560 x 504
  • 560 x 233
  • 560 x 315

mobile 320 (px)

  • 320 x 320
  • 320 x 640
  • 320 x 960
  • 320 x 1280
  • 320 x 160
  • 320 x 480
  • 320 x 107
  • 320 x 80
  • 320 x 240
  • 320 x 400
  • 320 x 91
  • 320 x 200
  • 320 x 288
  • 320 x 133
  • 320 x 180
.a-box-xs-1x1
.a-box-xs-1x2
.a-box-xs-1x3
.a-box-xs-1x4
.xs-3.a-box-xs-1x1
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-1x1
.xs-3.a-box-xs-1x2
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-1x2
.xs-3.a-box-xs-1x3
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-1x3
.xs-3.a-box-xs-1x4
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-1x4
.a-box-xs-2x1
.a-box-xs-2x3
.xs-6.a-box-xs-2x1
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-2x1
.xs-6.a-box-xs-2x3
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-2x3
.a-box-xs-3x1
.a-box-xs-3x2
.xs-9.a-box-xs-3x1
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-3x1
.xs-9.a-box-xs-3x2
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-3x2
.a-box-xs-4x1
.xs-12.a-box-xs-4x1
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-4x1
.a-box-xs-7x2
.a-box-content.dark-box.p-5(style="margin: 1%")
  pre .a-box-xs-7x2
.a-box-xs-12x5
.a-box-content.dark-box.p-5(style="margin: 1%")
  pre .a-box-xs-12x5
.a-box-xs-16x9
.a-box-content.dark-box.p-5(style="margin: 1%")
  pre .a-box-xs-16x9
.a-box-xs-8x5
.a-box-content.dark-box.p-5(style="margin: 1%")
  pre .a-box-xs-8x5
.a-box-xs-4x3
.xs-12.a-box-xs-4x3
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-4x3
.a-box-xs-10x9
.a-box-content.dark-box.p-5(style="margin: 1%")
  pre .a-box-xs-10x9
.a-box-xs-4x5
.xs-12.a-box-xs-4x5
  .a-box-content.dark-box.p-5(style="margin: 1%")
    pre .a-box-xs-4x5

Examples

Using the grid and aspect boxes together.

  .a-box-xs-2x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
  .a-box-xs-1x1
    .a-box-content
.xs-8
  .a-box-xs-2x1
    .a-box-content.dark-box.p-5(style="margin: 0.5%;")
      pre
        |   .a-box-xs-2x1
        |     .a-box-content
 
.xs-4
  .a-box-xs-1x1
    .a-box-content.dark-box.p-5(style="margin: 1%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content
 
.xs-4
  .a-box-xs-1x1
    .a-box-content.dark-box.p-5(style="margin: 1%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content
 
.xs-4
  .a-box-xs-1x1
    .a-box-content.dark-box.p-5(style="margin: 1%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content
 
.xs-4
  .a-box-xs-1x1
    .a-box-content.dark-box.p-5(style="margin: 1%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content
 
.xs-4
  .a-box-xs-1x1
    .a-box-content.dark-box.p-5(style="margin: 1%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content
 
.xs-8
  .a-box-xs-2x1
    .a-box-content.dark-box.p-5(style="margin: 0.5%;")
      pre
        |   .a-box-xs-1x1
        |     .a-box-content

Using push

.xs-8.xs-push-1.sm-push-2.md-push-3.lg-push-4.success-box.a-box-xs-4x5
  .a-box-content.success-box
.xs-8.xs-push-1.sm-push-2.md-push-3.lg-push-4.success-box.a-box-xs-4x5
  .a-box-content.success-box
    pre
      | .xs-8.xs-push-1.sm-push-2.md-push-3.lg-push-4.success-box.a-box-xs-4x5
      |   .a-box-content.success-box

Changing Layout and Aspect Ratio

.xs-12.md-8
  .a-box-xs-1x1
    .a-box-content.error-box.p-5
.xs-12.md-4
  .a-box-xs-2x1.a-box-md-1x2
    .a-box-content.success-box.p-5
.xs-12.md-8
  .a-box-xs-1x1
    .a-box-content.error-box.p-5
      pre
        | .xs-12.md-8
        |   .a-box-xs-1x1
        |     .a-box-content.error-box.p-5
 
.xs-12.md-4
  .a-box-xs-2x1.a-box-md-1x2
    .a-box-content.success-box.p-5
      pre
        | .xs-12.md-4
        |   .a-box-xs-2x1.a-box-md-1x2
        |     .a-box-content.success-box.p-5

Changing Order

.xs-12.md-8.md-right
  .a-box-xs-1x1
    .a-box-content.success-box.p-5
.xs-12.md-4
  .a-box-xs-2x1.a-box-md-1x2
    .a-box-content.error-box.p-5
.xs-12.md-8.md-right
  .a-box-xs-1x1
    .a-box-content.success-box.p-5
      pre
        | .xs-12.md-8.md-right
        |   .a-box-xs-1x1
        |     .a-box-content.success-box.p-5
 
.xs-12.md-4
  .a-box-xs-2x1.a-box-md-1x2
    .a-box-content.error-box.p-5
      pre
        | .xs-12.md-4
        |   .a-box-xs-2x1.a-box-md-1x2
        |     .a-box-content.error-box.p-5

Hiding

.xs-hide.sm-hide.md-4
  .a-box-xs-1x2
    .a-box-content
.xs-12.md-8
  .a-box-xs-1x1
    .a-box-content.success-box.p-5
.xs-hide.sm-hide.md-4
  .a-box-xs-1x2
    .a-box-content.error-box.p-5
      pre
        | .xs-hide.sm-hide.md-4
        |   .a-box-xs-1x2
        |     .a-box-content
 
.xs-12.md-8
  .a-box-xs-1x1
    .a-box-content.success-box.p-5
      pre
        | .xs-12.md-8
        |   .a-box-xs-1x1
        |     .a-box-content.success-box.p-5
×