This skill guides creation of distinctive, production-grade frontend interfaces that follow our established design principles and best practices.
Fonts
- •Use sans-serif fonts for better readability on screens.
- •Maintain consistent font sizes and weights across the application.
- •Use relative units (em, rem) for font sizes to ensure scalability.
- •Ensure sufficient contrast between text and background for accessibility.
- •Limit the number of different fonts used to maintain visual coherence.
Colors
- •Text color:
- •#222 on light backgrounds
- •#fff on dark backgrounds (e.g. #222 background)
- •Highlight color: Shades of yellow
- •#ffde00;
- •#776800;
- •#bba300;
- •#ffe84c;
- •#fff299;
- •#fffbe5;
- •Inactive background color: Shades of gray
- •#eee
- •#f4f4f4
Layout
- •Use a maximum content width of 1280px, centered horizontally on the page.
- •Design for desktop (full HD resolution) only; responsive design is not required.
- •Use CSS Grid and Flexbox for layout structures.
- •Maintain consistent spacing and alignment throughout the interface.
- •Use whitespace effectively to enhance readability and focus.