SquadEasy

SquadEasy's design system evokes a playful, high-contrast digital environment. It uses bold, unadorned typography set against vibrant, geometric color blocks and photo cutouts. The layout is dynamic, featuring angled visual elements and prominent typography to create a sense of directness and energy. Color is employed in large, flat regions and as vivid accents, while component styling is typically crisp with generous radii, prioritizing impact over subtle detail. Always use 'Absolute Black' (#000000) for primary text on light backgrounds and 'Pure White' (#ffffff) on dark backgrounds. Apply a 100px border radius to all interactive buttons for a consistent, soft pill shape. Use 'Electric Lime' (#e4ff60) specifically for primary call-to-action button backgrounds. Employ 'Deep Violet' (#adabff) for prominent content cards to differentiate them from the main canvas. Layer large, angled photographic cutouts to create a dynamic and energetic visual composition. Utilize 'Black' font family at large sizes for headlines (50-220px) with tight line heights to ensure a commanding presence. Maintain a comfortable density with a base spacing unit of 4px and elemental gaps around 16px. Do not use generic gray tones for primary interactive elements; always use chromatic colors for emphasis. Avoid subtle shadows or gradients on component surfaces; stick to flat, vibrant color blocks or crisp borders. Do not use small, delicate fonts for headlines; always leverage the 'Black' font family for impact. Never use square corners for buttons; always apply the 100px border radius for a distinct visual identity. Do not place images in simple, contained boxes; allow them to break out of their bounds or appear dynamically angled. Avoid highly ornate or complex typography; the system favors bold, direct, and efficient typefaces. Do not introduce additional background colors outside of the defined 'Amber Canvas', 'Deep Violet', 'Electric Lime', and 'Soft Gray' for major sections.