Color Palettes
1. 3–5 Main Colors
- 1 primary brand color (used most prominently)
- 1–2 secondary colors (for accents, highlights, or call-to-actions)
- 1–2 neutral colors (grays, off-whites, or backgrounds)
2. Use neutrals generously
- Most of the interface should rely on whites, light grays, or dark grays for readability and to avoid overwhelming users.
- Strong colors should be used sparingly for hierarchy and emphasis.
3. Establish hierarchy and consistency
- Assign specific roles to each color (e.g., buttons, links, alerts, backgrounds).
- Reuse them consistently rather than introducing new shades for every component.
4. Consider accessibility
- Ensure enough contrast (WCAG AA or AAA if possible).
- Avoid relying on color alone to convey meaning—use labels, icons, or patterns too.
5. Reserve special colors for feedback
- Universal conventions help:
- Green for success
- Red for error
- Yellow/amber for warnings
- Blue for info
Palette Generators
- https://coolors.co
- Figma Color Palette Generator
- Figma Complimentary Color Wheel
- Figma Color Palette Library
Fonts
1. Limit the number of font families
- 1–2 font families is best for most interfaces.
- One for headings and another for body text (or use a single well-designed family for both).
- Using more than two can make the interface feel cluttered and inconsistent.
2. Use font weights and styles for hierarchy
- Instead of adding new fonts, rely on different weights (regular, medium, bold) and sizes to create distinction.
- For example:
- Headings: Bold, larger size
- Body: Regular, smaller size
- Emphasis: Italic or medium weight
3. Maintain a clear hierarchy
- Define a type scale (e.g., H1, H2, H3, body, caption).
- Stick to consistent spacing and sizing rules so the interface feels organized.
4. Prioritize readability
- Sans-serif fonts (like Inter, Roboto, Helvetica) are most common for UI because they’re clean and readable at small sizes.
- Minimum body text size: 16px (web standard).
- Line length: ~45–75 characters per line for comfort.
5. Accessibility
- Ensure good contrast between text and background.
- Don’t rely solely on font weight or color to show importance—combine with size, spacing, or icons when needed.