By name: frontend-design description: Best practices for frontend design, including layout, styling, and user experience considerations.
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.
Silo Icon
The UI contains silo placeholders and icons in various places. The codebase contains a silo.svg in the public folder that should be used as the default silo icon/placeholder wherever a silo icon is needed.