FullStackGI
commented
1 year ago TimeLens App - Style Guide
Introduction
This style guide ensures consistency across the TimeLens application. Adhering to these guidelines ensures a uniform appearance, making the user experience smooth and intuitive.
Typography
Fonts
- Primary Font: Roboto
- Secondary Font: Arial, sans-serif
Headings
- H1: 32px, Bold, Primary Font
- H2: 28px, Bold, Primary Font
- H3: 24px, Bold, Primary Font
- H4: 20px, Regular, Primary Font
Paragraphs
- Regular Text: 16px, Regular, Primary Font
- Links: 16px, Underlined, Primary Font
Color Palette
- Primary Color:
#3498DB(Blue) - Secondary Color:
#E74C3C(Red) - Background Color:
#FFFFFF(White) - Text Color:
#333333(Dark Gray) - Link Color:
#007BFF(Bright Blue)
Buttons
Primary Button
- Background: Primary Color
- Text: 16px, Bold, White
- Border Radius: 4px
Secondary Button
- Background: Secondary Color
- Text: 16px, Bold, White
- Border Radius: 4px
Input Fields
- Background:
#FAFAFA(Light Gray) - Text: 16px, Regular, Text Color
- Border: 1px solid
#CDCDCD(Gray) - Border Radius: 4px
- Placeholder Text:
#AAAAAA(Medium Gray)
Icons
- Use consistent icon sets, preferably from a source like FontAwesome or Material Icons.
- Ensure icons are of the same style: either solid, outline, or duo-tone.
Spacing
- Default Margin: 16px
- Default Padding: 16px
Responsiveness
- Ensure designs are mobile-responsive.
- Font sizes can be adjusted for mobile to better fit the screen.
Conclusion
This style guide provides a foundation for the design of the TimeLens application. It's essential to refer to this guide during the development phase to maintain consistency. However, as the application grows, this style guide can and should be updated to reflect new design decisions.
o ensure consistency across our application, we need to create a style guide. This should cover typography, color palette, button styles, input fields, etc.