spec tool
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
notification types
container classes
Background-color
Text-align
Mobile aspect ratios
Tablet aspect ratios
Desktop md aspect ratios
Desktop aspect ratios
mr ipsum
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
#53284F
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
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
check icon .icon-check
add to-calendar icon .icon-add-to-calendar
amex icon .icon-amex
arrow back icon .icon-arrow-back
arrow down icon .icon-arrow-down
arrow up icon .icon-arrow-up
attach icon .icon-attach
bag plus icon .icon-bag-plus
bag icon .icon-bag
calendar icon .icon-calendar
camera icon .icon-camera
card break icon .icon-card-break
card icon .icon-card
caret down icon .icon-caret-down
caret left icon .icon-caret-left
circle icon .icon-circle
caret right icon .icon-caret-right
caret up icon .icon-caret-up
arrow forward icon .icon-arrow-forward
chat icon .icon-chat
check nobox icon .icon-check-nobox
discover icon .icon-discover
dollar icon .icon-dollar
download icon .icon-download
edit icon .icon-edit
email icon .icon-email
facebook icon .icon-facebook
gift icon .icon-gift
googleplus icon .icon-googleplus
haircarestyling icon .icon-haircarestyling
heart break icon .icon-heart-break
heart full icon .icon-heart-full
heart half icon .icon-heart-half
heart leaf icon .icon-heart-leaf
heart refresh icon .icon-heart-refresh
heart x icon .icon-heart-x
heart icon .icon-heart
infinity icon .icon-infinity
info icon .icon-info
instagram icon .icon-instagram
location icon .icon-location
lock icon .icon-lock
lw icon .icon-lw
magnify icon .icon-magnify
mastercard icon .icon-mastercard
.icon-menu
neg icon .icon-neg
open icon .icon-open
p icon .icon-p4p
pdf icon .icon-pdf
phone icon .icon-phone
pinterest icon .icon-pinterest
play icon .icon-play
pos circle icon .icon-pos-circle
pos full icon .icon-pos-full
pos icon .icon-pos
process icon .icon-process
question icon .icon-question
quote icon .icon-quote
rcc icon .icon-rcc
revive icon .icon-revive
roots icon .icon-roots
star full icon .icon-star-full
star half icon .icon-star-half
star icon .icon-star
subscription icon .icon-subscription
tag icon .icon-tag
trending icon .icon-trending
truck left icon .icon-truck-left
truck move icon .icon-truck-move
truck icon .icon-truck
tube icon .icon-tube
twitter icon .icon-twitter
user icon .icon-user
visa icon .icon-visa
warning icon .icon-warning
x full icon .icon-x-full
x icon .icon-x
youtube icon .icon-youtube
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-2Aspect 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-4x5Examples
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-contentUsing 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-boxChanging 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-5Changing 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-5Hiding
.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