Vizcom

Vizcom

Preview image. Unlock full-res

digital workbench, blueprint sketch

Industryai
Palette
#191919
#f8f4f1
#1145a0
#4c4cef
#4586da
#e8e3dd
#242425
#131313
#3c3c3e
#5c5b5a
#2f2f31
#8d8a88

Vizcom presents a dark, high-contrast digital workbench aesthetic, inspired by traditional drawing and industrial design. The layout features stark monochrome surfaces punctuated by a single vivid blue for primary actions and interactive elements. Thin borders and subtle elevation define components, prioritizing functionality and a focused user experience. Textures of paper, charcoal, and engineering blueprints provide an underlying tactile quality to the otherwise digital interface. Prioritize 'Ink Black' (#191919) as the default background for most content and 'Canvas White' (#f8f4f1) for primary text to maintain high contrast. Use 'Ideation Blue' (#4586da) exclusively for primary call-to-action buttons and active interactive states, providing a clear visual cue for engagement. Apply 'Matter' for all UI text, varying weights (400, 500) and sizes according to the type scale. Maintain tight letter spacing, especially at larger sizes. Reserve 'Tomboy LP' (weight 700) for large, impactful section headlines to inject a raw, sketched aesthetic. Use 'Dots Black' (#242425) or 'Dark Card' (#2f2f31) for card backgrounds and secondary surfaces to create subtle layering against the main 'Ink Black' background. Implement 8px border-radius as the default for most interactive elements (icons, buttons, inputs, badges), reserving 12px or 16px for larger cards and 1440px for pill-shaped elements. Define element spacing using multiples of 8px and 12px for elementGap and cardPadding respectively, with a sectionGap of 90px to ensure comfortable density. Do not introduce new chromatic colors outside of the defined accent palette; use the existing vivid blues for UI differentiation. Avoid generic large drop shadows; elevation should be subtle and primarily driven by background color changes rather than heavy shadows. Do not use 'Tomboy LP' for body text, navigation, or any functional UI text; its expressive nature is intended for display purposes only. Avoid using bold or heavily saturated colors for secondary UI text or disabled states; use 'Faded Grey' (#5c5b5a) or 'Paper Grey' (#e8e3dd) for such cases. Do not use generic border-radii; adhere strictly to the 8px, 12px, 16px, or 1440px values provided for specific component types. Do not deviate from the established spacing hierarchy; maintain the elementGap of 8px and sectionGap of 90px for consistent visual rhythm. Avoid using multiple font families beyond 'Matter' and 'Tomboy LP'; maintain typographic consistency.

More like this