Counterprint

Counterprint

Preview image. Unlock full-res

Graphic design manual on white canvas

Industryecommerce
Palette
#ffffff
#1c1c1c
#e5e7eb

Counterprint's visual system evokes a precise, almost utilitarian aesthetic, reminiscent of classic design publishing. The core palette is primarily achromatic, relying on sharp black text against stark white surfaces and soft gray borders. Typography is confident and compact, favoring a system sans-serif for most content, with a custom geometric sans-serif for specific branding. Components are lightweight, emphasizing function over embellishment, with generous use of infinite border-radius for buttons and subtle rounded corners for input fields, providing a touch of approachability within the otherwise rigorous structure. Use Canvas White (#ffffff) as the default background for all page surfaces and major content blocks. Implement Text Black (#1c1c1c) for all primary text, headings, and functional icons to maintain high contrast. Apply Border Gray (#e5e7eb) for all hairline separators, subtle outlines, and inactive interactive component borders. Utilize 9999px border-radius for all pill-shaped buttons and tags, creating a soft, approachable boundary. Maintain a compact typographical rhythm with Helvetica (or system-ui sans-serif substitute) at a letter-spacing of -0.025em for all prominent text. Adhere to an 8px base unit for horizontal spacing between elements and 4px for fine-tuned vertical padding. Avoid introducing additional saturated colors unless explicitly for semantic states (e.g., error) or specific brand-approved product imagery, as the system is intentionally achromatic. Do not use heavy shadows or deeply colored backgrounds; surface elevation should be minimal and almost imperceptible, achieved through subtle borders where needed. Refrain from using large, decorative typefaces for headlines; the system prioritizes compact, functional typography. Do not deviate from the established border-radius values (9999px for buttons/tags, 15px for inputs); arbitrary rounded corners will disrupt the system's feel. Avoid excessive padding around interface elements; the site employs a compact density, maximizing information visibility.

More like this