Font: Open Sans, sans-serif
Font Size: 1 rem
Line Height: 1.5rem
Font Color: #212529
Background: transparent
Alignment: Left
Padding (rem): 4 0 4 0
Background: #ffffff
Alignment: Left
Padding (rem): 2 0 2 0
Background: #ffffff
Display: Flex
Direction: Horizontal
Align: Stretch
Justify: Space Between
Alignment: Left
Padding (rem): 1 1 1 1
Background: #ffffff
Height: 4 rem
Border: Bottom, 2 px
Border Color: #212529 (Gray 900)
Display: Flex
Direction: Horizontal
Align: Stretch
Justify: Space Between
Alignment: Left
Padding (rem): 1 1 1 1
Background: #ffffff
Height: 4 rem
Border: Bottom, 2 px
Border Color: #212529 (Gray 900)
Display: Flex
Direction: Horizontal
Align: Stretch
Justify: Space Between
Alignment: Left
Padding (rem): 1 1 1 1
Background: #ffffff
Height: 64px
Alignment: Center
Padding (rem): 4 2.5 4 2.5
Background: Photo, center
Alignment: Center
Padding (rem): 4 2.5 4 2.5
Background: Photo, center
Alignment: Center
Padding (rem): 4 1 4 1
Background: Photo, center
Alignment: Left
Padding (rem): 4 0 4 0
Background: #ffffff
Alignment: Left
Padding (rem): 4 0 4 0
Background: #ffffff
Alignment: Left
Padding (rem): 2 0 2 0
Background: #ffffff
Alignment: Left
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 1200 px
Alignment: Left
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Alignment: Left
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Align Items: Stretch
Justify Items: Stretch
Align Content: Stretch
Justify Content: Stretch
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 1200 px
Columns: 1+
Column Gap: 1 rem
Rows: auto
Row Gap: 1 rem
Align Items: Stretch
Justify Items: Stretch
Align Content: Stretch
Justify Content: Stretch
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Columns: 1+
Column Gap: 1 rem
Rows: auto
Row Gap: 1 rem
Align Items: Stretch
Justify Items: Stretch
Align Content: Stretch
Justify Content: Stretch
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Columns: 1
Column Gap: 1 rem
Rows: auto
Row Gap: 1 rem
This is just another grid item. However, it takes up two columns instead of just one. Some grid items may also be placed manually into the appropriate row and column. manually adjusted items may change depending on the view's breakpoint.
Padding (rem): 0 0 0 0
Background: transparent
***border added for visibility
***bottom padding is from this text
Padding (rem): 1 1 1 1
Background: transparent
***border added for visibility
***additional bottom padding is from this text
Padding (rem): 0 0 0 0
Display: Flex
Direction: Vertical
Align: Center
Justify: Start
Background: transparent
***bottom padding is from this text
Padding (rem): 0 0 0 0
Display: Flex
Direction: Horizontal
Align: Center
Justify: Left
Background: transparent
***bottom padding is from this text
Padding (rem): 0 0 0 0
Background: transparent
Column Gap: 1 rem
Row Gap: 1 rem
***border added for visibility
***bottom padding is from text
This is another paragraph item in the grid that has been manually positioned.
Alignment: Left
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Alignment: Left
Padding (rem): 1 1 1 1
Margin (rem): 0 auto 0 auto (centered)
Background: #ffffff
Max Width: 728 px
Padding (rem): 2 2 2 2
Margin (rem): 2 2 2 2
Background: transparent
Column Gap: 1 rem
Row Gap: 1 rem
***border added for visibility
***bottom padding is from text
This is another paragraph item in the grid that has been manually positioned.
Padding (rem): 2 2 2 2
Margin (rem): 2 2 2 2
Background: transparent
Column Gap: 1 rem
Row Gap: 1 rem
Border: 1 px
Border Color: Gray 900
Outer Shadow (Distance, Blur, Size): 1px, 4 px, 0px
Outer Shadow Color: Gray 600
This is another paragraph item in the grid that has been manually positioned.
Margin (rem): 1 0 0 0
Font Size: 1 rem
Line Height: 1.5 rem
Font Weight: 600 (semibold)
Font Color: Blue 700 (#0040a1)
Background: transparent
Padding (rem): .5 2 .5 2
Margin (rem): 1 0 0 0
Bottom Border Width: 4 px
Bottom Border Color: #0070e0
Font Size: 1 rem
Line Height: 1.5 rem
Font Weight: 600 (semibold)
Font Color: Grey 900 (#212529)
Background: transparent
Padding (rem): .5 2 .5 2
Margin (rem): 1 0 0 0
Margin (rem): 1 1 1 1
Font Size: 1 rem
Line Height: 1.5 rem
Font Weight: 600 (semibold)
Font Color: Grey 900 (#212529)
Opacity: 65%
Background: transparent
Padding (rem): .5 2 .5 2
Margin (rem): 1 0 0 0
Font Size: 3 rem
Line Height: 4 rem
Font Weight: 700 (bold)
Margin (rem): 1 0 1 0
Font Size: 3 rem
Line Height: 4 rem
Font Weight: 700 (bold)
Margin (rem): 1.5 0 1 0
Text Color: Brand
Font Size: 2.4 rem
Line Height: 3.2 rem
Font Weight: 600 (semi-bold)
Margin (rem): 1 0 .5 0
Font Size: 1.6 rem
Line Height: 2.4 rem
Font Weight: 600 (semibold)
Margin (rem): 1 0 1 0
Font Size: 1.3 rem
Line Height: 1.6 rem
Font Weight: 400 (normal)
Margin (rem): 1 0 .5 0
Text Transform: Uppercase
Font Size: 1 rem
Line Height: 1.4 rem
Font Weight: 400 (normal)
Margin (rem): 1 0 .5 0
Text Transform: Uppercase
Font Size: 1.6 rem
Line Height: 1.6 rem
Font Weight: 700 (bold)
Color: Brand
Margin (rem): 1 0 1 0
Font Size: 1.2 rem
Line Height: 1.4 rem
Font Weight: 600 (semi-bold)
Color: Brand
Margin (rem): 0 0 1 0
Heading 2 for panels
Price
Font Size: 4 rem
Line Height: 5rem
Weight: 700 (bold)
Margin (rem): 0 0 0 0
WORDMARK
Font Size: 2 rem
Line Height: 2.5rem
Weight: 800 (extra-bold)
Margin (rem): 0 0 0 0
Font Size: 1.2 rem
Line Height: 1.5rem
Weight: 600 (semi-bold)
Margin (rem): 0 0 .5 0
Border (rem): .25 0 .25 0
Border Color: transparent
Hover Border Color: #0070e0 (Blue 500)
Font Size: 1 rem
Line Height: 1.2 rem
Font Color: Gray 700 (#495057)
Margin (rem): -2 -2 .5 0
Paragraph
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Paragraph Semibold
Font Weight: 600 (semibold)
Empty State Paragraph
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Font Color: Brand 500 (#2b6799)
Alignment: Center
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Text Decoration: Underline
Color: #2b6799
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Text Decoration: Underline
Color: #153c6e
Unordered List
Paragraph
Paragraph
Paragraph
Adopts text's styling
Ordered List
Paragraph
Paragraph
Paragraph
Adopts text's styling
Tab Link (inactive)
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Weight: 600 (semibold)
Tab Link (active)
Font Size: 1 rem
Font Color: Blue 700
Font Decoration: Underline
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Weight: 600 (semibold)
Font Size: 1 rem
Line Height: 1.2 rem
Font Weight: 400 (normal)
Margin (rem): 0 0 .25 0
Font Size: 1 rem
Line Height: 1.2 rem
Font Weight: 400 (normal)
Margin (rem): 0 0 .25 0
Alignment: Right
Font Size: 1.2 rem
Line Height: 1.5rem
Font Weight: 300 (light)
Margin (rem): 0 0 .25 0
Field Tip
Font Size: .8 rem
Line Height: 1 rem
Font Color: Gray 700 (#495057)
Font Weight: 300 (light)
Margin (rem): 0 0 .125 0
Field Description
Font Size: .8 rem
Line Height: 1.1 rem
Font Color: Gray 700 (#495057)
Font Weight: 400 (normal)
Margin (rem): 0 0 .125 0
Field Error
Font Size: .8 rem
Line Height: 1 rem
Font Color: Red 500(#d62427)
Font Weight: 400 (normal)
Margin (rem): 0 0 .125 0
Field Suggestion
Font Size: .8 rem
Line Height: 1 rem
Font Color: Yellow 700 (#aa5f00)
Font Weight: 400 (normal)
Margin (rem): 0 0 .125 0
Font Size: 3 rem
Line Height: 4 rem
Font Weight: 700 (bold)
Margin (rem): 1.5 0 1 0
Font Size: 2.4 rem
Line Height: 3.2 rem
Font Weight: 700 (bold)
Margin (rem): 1.5 0 .5 0
Font Size: 1.6 rem
Line Height: 2.4 rem
Font Weight: 600 (semibold)
Margin (rem): 1.5 0 1 0
Font Size: 1.3 rem
Line Height: 1.6 rem
Font Weight: 400 (normal)
Margin (rem): 1 0 .5 0
Text Transform: Uppercase
Font Size: 1 rem
Line Height: 1.4 rem
Font Weight: 400 (normal)
Margin (rem): 1 0 .5 0
Text Transform: Uppercase
Paragraph
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Paragraph Semibold
Font Weight: 600 (semibold)
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Text Decoration: Underline
Color: #ffffff
Font Size: 1 rem
Line Height: 1.5rem
Margin (rem): 0 0 .5 0
Text Decoration: Underline
Color: #caeefd
Unordered List
Paragraph
Paragraph
Paragraph
Adopts text's styling
Ordered List
Paragraph
Paragraph
Paragraph
Adopts text's styling
White
#ffffff
Gray 100
#f1f3f5
Gray 200
#e9ecef
Gray 300
#dee2e6
Gray 400
#ced4da
Gray 500 (not compliant)
#abd5bd
Gray 600
#868e96
Gray 700
#495057
Gray 800
#343a40
Gray 900
#212529
Blue 100
#caeefd
Blue 300
#62baf5
Blue 500
#0070e0
Blue 700
#0040a1
Blue 900
#00206b
Green 100
#e1f9d4
Green 300
#8ddb7a
Green 500
#278724
Green 700
#12611a
Green 900
#064018
Red 100
#fce0d2
Red 300
#f28c79
Red 500
#d62427
Red 700
#9a122c
Red 900
#66062a
Yellow 100
#fff3cc
Yellow 300
#ffd266
Yellow 500
#ffa100
Yellow 700
#aa5f00
Yellow 900
#7a3a00
Teal 100
#aae9f1
Teal 300
#71d5e2
Teal 500
#46b9c9
Teal 700
#00838f
Teal 900
#015e66
Brand 100
#7fbee0
Brand 500
#2b6799
Brand 900
#153c6e
Aquamarine 500
#7AE7C7
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Yellow 500
Text Color: Gray 900
Hover Background Color: Yellow 700
Hover Text Color: White
Clicked Background Color: Yellow 900
Clicked Text Color: White
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Gray 900
Opacity: 30%
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Yellow 500
Text Color: Gray 900
Hover Background Color: Yellow 700
Hover Text Color: White
Clicked Background Color: Yellow 900
Clicked Text Color: White
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 1px
Border Radius: .25 rem
Background Color: Gray 900
Opacity: 30%
No hover changes
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border: 1px
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border: 1px
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border: 1px
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border: 1px
Border Radius: .25 rem
Background Color: Yellow 500
Text Color: Gray 900
Hover Background Color: Yellow 700
Hover Text Color: White
Clicked Background Color: Yellow 900
Clicked Text Color: White
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border: 1px
Border Radius: .25 rem
Background Color: Gray 900
Opacity: 30%
Padding (rem): .5 1 .5 1
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Align: Left
Border: 1px
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .5 1 .5 1
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Align: Left
Border: 1px
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .5 1 .5 1
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Align: Left
Border: 1px
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
Padding (rem): .5 1 .5 1
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Align: Left
Border: 1px
Border Radius: .25 rem
Background Color: Yellow 500
Text Color: Gray 900
Hover Background Color: Yellow 700
Hover Text Color: White
Clicked Background Color: Yellow 900
Clicked Text Color: White
Padding (rem): .5 1 .5 1
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Align: Left
Border: 1px
Border Radius: .25 rem
Background Color: Gray 900
Opacity: 30%
No hover changes
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Border Color: matches state
Text Color: Green 500
Background Color: White
Hover Background Color: Green 5
Hover Text Color: White
Clicked Background Color: Green 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Text Color: Red 500
Background Color: White
Hover Background Color: Red 500
Hover Text Color: White
Clicked Background Color: Red 700
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Text Color: Blue 500
Background Color: White
Hover Background Color: Blue 500
Hover Text Color: White
Clicked Background Color: Blue 700
This combination does not exist.
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Text Color: Gray 900
Background Color: W
Opacity: 30%
Cursor: Not-allowed
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
This combination does not exist.
Padding (rem): .5 2 .5 2
Margin (rem): .5 0 .5 0
Width: 100%
Min Width: 10 rem
Border: 2px
Border Radius: .25 rem
Text Color: Gray 900
Background Color:
Opacity: 30%
Cursor: Not-allowed
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Text Color: Green 500
Border Radius: .25 rem
Background Color: White
Hover Background Color: Green 5
Hover Text Color: White
Clicked Background Color: Green 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border Radius: .25 rem
Text Color: Red 500
Background Color: White
Hover Background Color: Red 500
Hover Text Color: White
Clicked Background Color: Red 700
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border Radius: .25 rem
Text Color: Blue 500
Background Color: White
Hover Background Color: Blue 500
Hover Text Color: White
Clicked Background Color: Blue 700
This combination does not exist.
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Min Width: 10 rem
Text Alignment: Left
Border Radius: .25 rem
Text Color: Gray 900
Background Color: W
Opacity: 30%
Cursor: Not-allowed
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Width: 100%
Text Alignment: Left
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Width: 100%
Text Alignment: Left
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .5 0
Width: 100%
Text Alignment: Left
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
This combination does not exist.
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Width: 100%
Text Alignment: Left
Border Radius: .25 rem
Text Color: Gray 900
Background Color:
Opacity: 30%
Cursor: Not-allowed
Padding (rem): .25 1 .25 1
Padding (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 remText Alignment: Left
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
This combination does not exist.
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Text Color: Gray 900
Background Color:
Opacity: 30%
Cursor: Not-allowed
Padding (rem): .25 1 .25 1
Padding (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Border Color: matches state
Background Color: Green 500
Hover Background Color: Green 700
Clicked Background Color: Green 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 remText Alignment: Left
Border Radius: .25 rem
Background Color: Red 500
Hover Background Color: Red 700
Clicked Background Color: Red 900
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Background Color: Blue 500
Hover Background Color: Blue 700
Clicked Background Color: Blue 900
This combination does not exist.
Padding (rem): .25 1 .25 1
Margin (rem): .25 0 .25 0
Max Width: 6 rem
Text Alignment: Left
Border Radius: .25 rem
Text Color: Gray 900
Background Color:
Opacity: 30%
Cursor: Not-allowed