Preview image. Unlock full-res
Midnight refractography. A dark, expansive canvas lit by precise typography and spectral light refractions.
Vivid+Co employs a command-center dark theme, focusing on high contrast and dramatic impact. Large, confident typography dominates the layout, using subtle letter-spacing adjustments to control visual flow. The absence of strong chromatic accents outside of a single, muted gray for functional elements keeps the aesthetic clean and focused, punctuated by the refractive visuals. Components are minimalist, relying on precise typography and ghost-like interactive states rather than heavy fills or shadows.
Prioritize Canvas Ink (#000000) for all main backgrounds to maintain the dark, dramatic aesthetic.
Use Refined White (#fffdf9) exclusively for primary text and high-visibility interactive elements like navigation.
Apply Stonewash Gray (#6f879c) for ghost button borders and subtle text, reserving it for functional yet understated elements.
Utilize Neue Montreal universally across all text, carefully applying its range of weights and the corresponding letter-spacing tokens for visual hierarchy.
Maintain the 0px border-radius for buttons and most structural elements to uphold a sharp, angular design language, only using 15px for distinct card-like containers and 5px for very specific interactive elements.
Ensure large headlines employ negative letter-spacing (-0.0200em at 136px, -0.0100em at 56px) for a tight, impactful appearance.
Implement motion with ease timing functions and durations of 0.5s for smooth visual transitions, particularly for transform and opacity properties.
Do not introduce additional saturated colors; maintain the monochrome palette with Stonewash Gray as the only chromatic accent.
Avoid box-shadows or significant elevation; the design relies on flat surfaces and high contrast for definition.
Do not use generic system fonts; Neue Montreal is critical for brand personality.
Don't use large positive letter-spacing for headlines; it will diminish the brand's distinct tight typographic style.
Avoid visual dividers between content sections; rely on generous vertical spacing (108px section gap) to separate content blocks.
Do not vary border radii arbitrarily; stick to 0px, 5px, or 15px as specified for their respective contexts.
Do not add heavy background fills to buttons; they should remain ghost-like or text-only to preserve the lightweight feel.
