Vivid+Co · scrub to study layout
Vivid+Co
> Vivid+Co
prismatic light through obsidian Vivid+Co operates in a cinematic dark void: near-black canvas at #101010–#495764, punctuated by a single near-white off-white (#fffdf9) used for nearly all type and UI chrome. Typography is overwhelmingly Neue Montreal weight 400 — a deliberate refusal of bold, where authority comes from sheer scale (136px and 105px display) rather than weight. The signature device is the chromatic-prism hero rendering: RGB-split blocks of saturated red/green/blue light bleeding through glass cubes, breaking an otherwise monochrome surface. Layout is centered and roomy; nav, body, and links all wear the same #fffdf9 color with no separate accent button, no fills, and zero shadows — differentiation happens through spacing, scale, and the rainbow artifact that acts as the brand's only chromatic voice.
↗ https://vividand.coColor Palette
ACCENT
Prism Red
#ff2a2a
Chromatic dispersion accent — one channel of the RGB-split prism hero artifact; appears only inside the brand illustration, not as a UI token
Prism Cyan
#2a7fff
Chromatic dispersion accent — blue channel of the RGB-split prism, paired with red and green to create the signature caustics effect
Prism Lime
#2aff2a
Chromatic dispersion accent — green channel of the RGB-split prism artifact
NEUTRALS
Pure Black
#000000
Decorative SVG icon and illustration fill — used in the prism artwork and icon glyphs; not a background
Obsidian
#101010
Page canvas, background fill for hero and section bands — the deep black the prism artifact sits inside
Ash Border
#403f3f
Hairline divider and card outline — barely visible, used at 1px to separate rows without competing with type
Graphite Veil
#495764
Dominant surface behind headings and content blocks — a cool dark slate that gives the canvas depth without flat black
Fog Blue
#6f879c
Muted secondary text and ghost-button labels (3.7:1 contrast) — service-category labels like Strategy, Creative, Communications + marketing read as de-emphasized metadata
Bone White
#fffdf9
Primary text, nav labels, link color, heading fill — the near-white that occupies every typographic surface across the dark canvas
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.