
Preview image. Unlock full-res
Frosted glass on dark slate; a refined digital workspace.
Contra embraces a sleek, desaturated design language with crisp typography and subtle interactions. The interface prioritizes clear content hierarchy on a largely achromatic canvas, punctuated by a deep slate gray for primary actions and occasional, carefully placed pops of vivid color within content modules. Component surfaces typically feature soft, rounded edges and minimal elevation, fostering a sense of approachability and digital craftsmanship. Use Midnight Slate (#222834) exclusively for filled primary buttons and the most prominent text on light backgrounds. Apply Canvas White (#ffffff) for all main page backgrounds and component surfaces to maintain a pristine aesthetic. Employ GT Standard L 58px with letter-spacing -0.58px for all main section headlines, giving them a distinct condensed aggression. Prioritize 24px border-radius for all interactive buttons and 16px for content cards to unify the component curvature. Maintain a clear visual hierarchy by limiting saturated colors to decorative content cards and subtle functional accents, keeping core UI achromatic. Utilize Phantom Gray (#677084) for secondary text, labels, and hair-thin dividers to preserve visual lightness. Ensure input fields have sharp, 0px radius borders in Charcoal Black (#000000) for a precise, functional appearance. Do not use highly saturated colors for button backgrounds or primary text unless it’s a specific branded content block. Avoid heavy shadows or gradients on core UI elements; elevation should be minimal and primarily achieved with the provided soft shadows. Do not use default system fonts; always specify GT Standard M or L, or their designated substitutes. Refrain from using more than two distinct text sizes within a single component to prevent visual clutter. Do not introduce new border radii beyond the defined 24px, 16px, 10px, 4px, 32px, 40px, and 50% for consistency. Never use less than 4px element spacing; maintain a minimum of 4px between adjacent elements. Do not apply excessive padding; adhere to the 12px card padding and ensure button padding is symmetrical from the center.









