Color
Primary Colors
$color-primary-100
$color-primary-200
$color-primary-300
$color-primary-400
$color-primary-500
$color-primary-600
$color-primary-700
$color-primary-800
$color-primary-900
Secondary Colors
$color-secondary-100
$color-secondary-200
$color-secondary-300
$color-secondary-400
$color-secondary-500
$color-secondary-600
$color-secondary-700
$color-secondary-800
$color-secondary-900
Accent 01 Colors
$color-accent-01-100
$color-accent-01-200
$color-accent-01-300
$color-accent-01-400
$color-accent-01-500
$color-accent-01-600
$color-accent-01-700
$color-accent-01-800
$color-accent-01-900
Accent 02 Colors
$color-accent-02-100
$color-accent-02-200
$color-accent-02-300
$color-accent-02-400
$color-accent-02-500
$color-accent-02-600
$color-accent-02-700
$color-accent-02-800
$color-accent-02-900
Accent 03 Colors
$color-accent-03-100
$color-accent-03-200
$color-accent-03-300
$color-accent-03-400
$color-accent-03-500
$color-accent-03-600
$color-accent-03-700
$color-accent-03-800
$color-accent-03-900
Neutral Colors
$color-neutral-100
$color-neutral-200
$color-neutral-300
$color-neutral-400
$color-neutral-500
$color-neutral-600
$color-neutral-700
$color-neutral-800
$color-neutral-900
Grey Scale
$color-grey-100
$color-grey-200
$color-grey-300
$color-grey-400
$color-grey-500
$color-grey-600
$color-grey-700
$color-grey-800
$color-grey-900
Default Background Colors
$color-default-bg-300
$color-default-bg-500
$color-default-bg-700
Background Colors
$color-bg-300
$color-bg-500
$color-bg-700
Black and White Colors
$color-black
$color-white
Warning Colors
$color-warning-300
$color-warning-500
$color-warning-700
Success Colors
$color-success-300
$color-success-500
$color-success-700
Danger Colors
$color-danger-300
$color-danger-500
$color-danger-700
Typography
Hierarchy and Scaling:
Define a typographic hierarchy, specifying different font sizes for headings, sub Headers, and paragraphs. Use a consistent scale for font sizes to maintain harmony.
Header
| Text type |
Classname |
| Header 1 |
.text-h1 |
| Header 2 |
.text-h2 |
| Header 3 |
.text-h3 |
| Header 4 |
.text-h4 |
| Header 5 |
.text-h5 |
| Header 6 |
.text-h6 |
| Header 7 |
.text-h7 |
Sub Header
| Text type |
Classname |
| Sub Header 1 |
.text-sh1 |
| Sub Header 2 |
.text-sh2 |
| Sub Header 3 |
.text-sh3 |
| Sub Header 4 |
.text-sh4 |
| Sub Header 5 |
.text-sh5 |
| Sub Header 6 |
.text-sh6 |
| Sub Header 7 |
.text-sh7 |
Paragraph
| Text type |
Classname |
| Paragraph 1 |
.text-p1 |
| Paragraph 2 |
.text-p2 |
| Paragraph 3 |
.text-p3 |
| Paragraph 4 |
.text-p4 |
| Paragraph 5 |
.text-p5 |
| Paragraph 6 |
.text-p6 |
| Paragraph 7 |
.text-p7 |
Button
| Text type |
Classname |
| Button 1 |
.text-b1 |
| Button 2 |
.text-b2 |
| Button 3 |
.text-b3 |
| Button 4 |
.text-b4 |
| Button 5 |
.text-b5 |
Form
| Text type |
Classname |
| Form 1 |
.text-f1 |
| Form 2 |
.text-f2 |
| Form 3 |
.text-f3 |
| Form 4 |
.text-f4 |
| Form 5 |
.text-f5 |
| Form 6 |
.text-f6 |
Spacing
| Variable name |
Value |
Visual |
| $space-1 |
4px |
|
| $space-2 |
8px |
|
| $space-3 |
12px |
|
| $space-4 |
16px |
|
| $space-5 |
20px |
|
| $space-6 |
24px |
|
| $space-7 |
32px |
|
| $space-8 |
40px |
|
| $space-9 |
48px |
|
| $space-10 |
56px |
|
| $space-11 |
64px |
|
| $space-12 |
72px |
|
| $space-13 |
80px |
|
| $space-14 |
96px |
|
Breakpoints
| Name |
Value |
SCSS |
| Mobile |
375 px - 679 px |
$breakpoint-mobile |
| Tablet |
680 px - 1199 px |
$breakpoint-tablet |
| Desktop |
< 1200 px |
- |
How to use
.classname {
// styling for mobile
@media (min-width: $breakpoint-mobile) {
// styling for tablet
}
@media (min-width: $breakpoint-tablet) {
// styling for desktop
}
}
Components
