Robi's Design Best Practice

Quick Reference Checklist

When designing or reviewing UI components:

• Colors are low saturation (avoid "vibe code" oversaturated colors)
• Dark mode colors are desaturated or lightened appropriately
• Text contrast meets WCAG AAA standards
• No pure black (#000000) or pure white (#FFFFFF) - use tinted variations
• All spacing uses 4px multiples
• Nested border radii follow: inner_radius = outer_radius - padding
• Icons use consistent weight and style throughout
• Shadows avoided in dark mode (use borders/color instead)
• Animations use smooth easings (not linear)
• Micro-interactions added for premium feel

Color Guidelines