Vucko

Vucko

Preview image. Unlock full-res

High-contrast typographic canvas.

Industrydesign
Palette
#000000
#ffffff
#eeeeee
#888a8b
#222222

Vucko's design system embodies unadorned precision with a high-contrast monochrome palette. Bold, oversized typography dominates the visual field, creating clear hierarchy through scale rather than color. Surface treatments are flat and minimal, emphasizing content, while subtle border radii apply to interactive elements and showcased cards. The overall effect is one of directness and sophisticated restraint, where motion is implied through scale and interaction rather than explicit graphical flourishes. Prioritize text scale and weight changes over color for hierarchy; use Midnight Ink (#000000) for primary content and Canvas White (#ffffff) for backgrounds. Apply 9.6px border-radius to showcase cards and similar contained content areas for subtle softness. Utilize 0px padding and 0px border-radius for ghost buttons/links, relying on a bottom border for interactive states. Maintain a spacious density; use 58px as the primary vertical section gap and 23px for element gaps. Use Suisse, or its closest sans-serif substitute, for all textual elements in various weights to ensure typographic consistency. Employ the negative letter-spacing values provided for larger text sizes to achieve a tightly composed, impactful headline aesthetic. Ensure all interactive text elements use a 1px border on hover, matching the text color. Avoid decorative gradients or vivid accent colors; the system is built on a high-contrast achromatic foundation. Do not introduce unnecessary shadows or complex layer effects; keep surfaces flat and distinct through background color changes. Do not deviate from the specified scale for typography; large sizes have specific line heights and negative letter spacing that are integral to brand identity. Avoid using multiple font families; Suisse is the sole typeface. Do not add internal padding to cards or buttons, the padding is implied by the surrounding spacing. Do not use generic rounded corners; adhere strictly to 9.6px for cards, 0px for buttons, and 9999px for dots. Do not use subtle gray borders for actionable items; borders are strong and match the text color.

More like this