Merriweather (Primary)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
My Design System
1.0 Typography
1.1 Font family
Open Sans (Secondary)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Montserrat (Tertiary)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.2 Type scale
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
1.3 Headings and Paragraphs
Heading
What looked like a small patch of purple grass, above five feet
square,
was moving across the sand in their direction.
When it came near enough he perceived that it was not grass;
there
were no blades, but only purple roots. The roots were revolving,
for
each small plant in the whole patch, like the spokes of a rimless
wheel.
Heading
What looked like a small patch of purple grass, above five feet
square,
was moving across the sand in their direction.
When it came near enough he perceived that it was not grass;
there
were no blades, but only purple roots. The roots were revolving,
for
each small plant in the whole patch, like the spokes of a rimless
wheel.
Heading
What looked like a small patch of purple grass, above five feet
square,
was moving across the sand in their direction.
When it came near enough he perceived that it was not grass;
there
were no blades, but only purple roots. The roots were revolving,
for
each small plant in the whole patch, like the spokes of a rimless
wheel.
Heading
What looked like a small patch of purple grass, above five feet
square,
was moving across the sand in their direction.
When it came near enough he perceived that it was not grass;
there
were no blades, but only purple roots. The roots were revolving,
for
each small plant in the whole patch, like the spokes of a rimless
wheel.
Heading
What looked like a small patch of purple grass, above five feet
square,
was moving across the sand in their direction.
When it came near enough he perceived that it was not grass;
there
were no blades, but only purple roots. The roots were revolving,
for
each small plant in the whole patch, like the spokes of a rimless
wheel.
2.0 Colors
2.1 Base
2.2 Greyscale
3.0 Spacing (Margin and Padding)
1
2
3
4
5
6
7
8
9
4.0 Responsive Grid
100%
50%
50%
33%
33%
33%
25%
25%
25%
25%
20%
20%
20%
20%
20%