Vividand
A dark, gallery-black creative-agency landing surface anchored on a near-black canvas (#101010) with warm off-white type (#fffdf9), oversized Neue Montreal display headlines, and a single muted slate-blue accent. The system reads as a confident portfolio site — cinematic negative space, one enormous editorial headline per view, a chromatic-aberration 3D graphic as the hero centerpiece, and rounded photo cards for team members. Brand voltage comes from scale (a 136px display headline against black) rather than from color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
136px · 400 · 1.0
The quick brown fox jumps
title-lg
36px · 700 · 1.5
The quick brown fox jumps
heading-md
32px · 400 · 1.01
The quick brown fox jumps
body-lg
33px · 400 · 1.2
The quick brown fox jumps
button
18px · 400 · 1.167
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 5px | |
| xs | 7px | |
| sm | 11px | |
| md | 15px | |
| lg | 20px | |
| xl | 38px | |
| xxl | 64px | |
| huge | 318px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 5px | |
| md | 15px |
FAQ
- What colors does Vividand use?
- Vividand's core palette includes #fffdf9, #6f879c, #101010, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Vividand DESIGN.md.
- What font does Vividand use?
- Vividand's primary typeface is Neue Montreal. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Vividand design system?
- A dark, gallery-black creative-agency landing surface anchored on a near-black canvas (#101010) with warm off-white type (#fffdf9), oversized Neue Montreal display headlines, and a single muted slate…