Design System
Code Generator

Headings:
Font Family:
Weight & Style:
Body Text:
Font Family:
Weight & Style:

Sizing

Modular Type Scale

Spacing Scale (px)


Typography

Heading 1 50px
Heading 2 40px
Heading 3 34px
Heading 4 28px
Heading 5 24px
Heading 6 21px

Normal Body Text

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 ullamco laboris nisi ut aliquip ex ea commodo consequat.


Grid

12 Col - Responsive Gutter


Brand Colors

Primary, Backgrounds

Secondary, Buttons

Secondary hover

Headings, Dark

Body text

Utility Positive

Utility Subtle Positive

Utility Negative

Utility Subtle Negative

Utility Caution

Utility Subtle Caution

Utility Neutral

HTML Code:

			

			
		

CSS Code: