KeepGrading

KeepGrading employs a deep, dark canvas as its primary backdrop, featuring a striking black and white contrast. Typography is the main vehicle for conveying information, appearing in clean geometric sans-serifs. Interactive elements are subtly outlined rather than boldly filled, maintaining the overall sleek, low-key aesthetic, ensuring that images and video content are the focal point. Prioritize Void Black (#080808) for all primary background surfaces and Canvas White (#f8f8f8) for primary text to maintain high contrast. Use Cabinet Grotesk for all primary headings and display text, reserving Inter for body copy and navigation. Employ a 9999px border-radius for all interactive buttons and navigation elements to achieve a fully rounded, 'pill' shape. Apply a 160px border-radius to all content-bearing cards, giving them a distinctively soft, organic container. Maintain a comfortable rhythm with element gaps set to 15px and general section padding at 48px. Ensure all interactive elements, where not a solid fill, use a 1px border of Canvas White (#f8f8f8) against the dark background. Do not introduce strong accent colors; the palette is intentionally monochrome, letting imagery provide visual interest. Avoid using filled buttons as primary calls to action; prefer ghost buttons with Canvas White borders. Do not use generic square or slightly rounded corners for cards; the 160px radius is a signature element. Do not deviate from the specified font families; Cabinet Grotesk and Inter are integral to the brand's typographic identity. Avoid tight spacing; maintain the comfortable density established by 15px element gaps and 48px section padding.