Square

Square's design system evokes the precision of a finely tuned instrument, balancing robust functionality with an accessible aesthetic. The interplay of a predominantly white background with crisp dark typography creates a high-contrast, information-first experience that feels direct and trustworthy. Strategic use of a vibrant blue accent color serves as a clear functional indicator, like a status light on a reliable machine, guiding the user without visual clutter, while subtle rounded corners on interactive elements soften the overall technical impression. Use Sky Blue (#006aff) exclusively for primary calls to action and active interactive states. Maintain a clear hierarchy with Square Sans Display VF for headlines and Square Sans Text VF for body copy. Always apply a 5px radius to primary buttons and input fields for a consistent tactile feel. Utilize Pure White (#ffffff) as the default background for content sections to maximize readability. Employ Light Fog (#f2f2f2) to subtly differentiate background sections without introducing strong visual breaks. It acts as a soft divider. Ensure input fields have a 1px solid Ink Black (#1a1a1a) border to clearly delineate the interactive area. Do not use Sky Blue (#006aff) for decorative elements or non-interactive text. Avoid using Cash Sans for long passages of text; reserve it for specific button labels and distinct accents. Do not introduce strong visual shadows on cards or elements; rely on background color changes for depth. Do not use highly saturated colors other than Sky Blue; maintain a largely monochromatic palette with blue as the sole accent. Avoid arbitrary border radii; stick to 0px, 4px, 5px, 20px, 24px, or 32px for specific component types. Do not use highly decorative or script fonts; maintain a modern, sans-serif aesthetic throughout.