Preview image. Unlock full-res
High-contrast geometric abstraction. Like engineering blueprints rendered in bold ink on a white page, punctuated by a single, sharp burst of yellow ink.
VSCO's design system creates a raw, utilitarian feel, blending high-contrast black and white with a select, vibrant yellow accent. The heavy reliance on a custom sans-serif font with tight letter-spacing for headlines establishes a direct, unadorned communication style. The overall impression is one of stark professionalism with a hint of creative energy, achieved through the deliberate scarcity of color and the bold, geometric typography. Prioritize Absolute Black (#000000) and Pure White (#ffffff) for high-contrast pairs, especially for text and background combinations. Use VSCO Gothic with negative letter-spacing for headlines (e.g., -0.05em at large sizes) to create a distinct, modern feel. Apply 999px border-radius for all primary and secondary buttons, signifying interactive elements. Employ Amber Glow (#f1a900) as the exclusive accent color for primary calls-to-action and badges. Maintain a tight vertical rhythm using base units of 4px, especially for margin-bottom and padding in blocks and text. Utilize Fog Gray (#f2f2f2) to subtly differentiate background sections without introducing strong chromatic shifts. Avoid using multiple accent colors; Amber Glow (#f1a900) and Sunshine Yellow (#ffbc3c) serve as the only chromatic highlights. Do not introduce soft shadows or gradients; the design relies on stark contrast and flat surfaces for depth. Omit rounded corners for cards and main content blocks; these should remain sharp (0px radius) to maintain the geometric aesthetic. Do not deviate from VSCO Gothic; it is integral to the brand's typographic identity. Avoid excessive spacing; elements are presented compactly to maintain information density. Do not use subtle gray for actionable elements; interactivity should be clearly indicated by Absolute Black, Pure White, or Amber Glow.
