Design Convention
1. Color Palette
- Primary Colors:
- Primary:
#2196f3
- Secondary:
#82b1ff
- Neutral Colors:
- Light:
#FFFFFF
- Medium:
#E0E0E0
- Dark:
#202124
- Accent Colors:
- Warning:
#FBBC05
- Error:
#EA4335
- Success:
#34A853
2. Typography
- Font Family:
- Primary:
Roboto
- Secondary:
Open Sans
- Font Sizes:
- Display:
48px
- Heading 1 (H1):
32px
- Heading 2 (H2):
24px
- Heading 3 (H3):
18px
- Body Text:
16px
- Small Text:
14px
- Caption:
12px
- Line Heights:
- Display:
48px
- Heading:
1.5
- Body:
1.6
- Small Text:
1.4
3. Spacing and Sizing
- Margins and Padding:
- Extra Small:
4px
- Small:
8px
- Medium:
16px
- Large:
24px
- Extra Large:
32px
- Grid System:
- Columns:
12
- Gutter:
16px
- Margin:
24px
- Container Widths:
- Mobile:
100%
- Tablet:
720px
- Desktop:
1440px
4. Buttons
- Primary Button:
- Background:
#2196f3
- Text Color:
#FFFFFF
- Border Radius:
4px
- Padding:
12px 24px
- Secondary Button:
- Background:
#FFFFFF
- Text Color:
#1A73E8
- Border:
1px solid #1A73E8
- Border Radius:
4px
- Padding:
24px 8px
- Disabled Button:
- Background:
#E0E0E0
- Text Color:
#9E9E9E
- Border Radius:
4px
- Padding:
12px 24px