Prism Red
#ff2a2aChromatic dispersion accent — one channel of the RGB-split prism hero artifact; appears only inside the brand illustration, not as a UI token
Vivid+Co
vividand.coWebsite preview
The design language
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.
Color palette
accent
Prism Cyan
#2a7fffChromatic dispersion accent — blue channel of the RGB-split prism, paired with red and green to create the signature caustics effect
Prism Lime
#2aff2aChromatic dispersion accent — green channel of the RGB-split prism artifact
neutral
Bone White
#fffdf9Primary text, nav labels, link color, heading fill — the near-white that occupies every typographic surface across the dark canvas
Obsidian
#101010Page canvas, background fill for hero and section bands — the deep black the prism artifact sits inside
Graphite Veil
#495764Dominant surface behind headings and content blocks — a cool dark slate that gives the canvas depth without flat black
Ash Border
#403f3fHairline divider and card outline — barely visible, used at 1px to separate rows without competing with type
Fog Blue
#6f879cMuted secondary text and ghost-button labels (3.7:1 contrast) — service-category labels like Strategy, Creative, Communications + marketing read as de-emphasized metadata
Pure Black
#000000Decorative SVG icon and illustration fill — used in the prism artwork and icon glyphs; not a background
Typography
Type scale
Major Third (1.25) · 14px basedisplay
136px · 400 · 1 · -2.72px trackingThe quick brown fox jumps
display-sm
105px · 400 · 1.01 · -2.1px trackingThe quick brown fox jumps
heading-lg
56px · 400 · 1.13 · -0.56px trackingThe quick brown fox jumps
heading
36px · 700 · 1.5 · 0px trackingThe quick brown fox jumps
heading-sm
33px · 400 · 1.2 · -0.33px trackingThe quick brown fox jumps
text-32
32px · 400 · 1.01The quick brown fox jumps
body-lg
22px · 400 · 1.2 · -0.22px trackingThe quick brown fox jumps
text-21
21px · 400 · 1.24The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neue Montreal
- Weights
- 400, 700
- Sizes
- 14, 15, 17, 18, 20, 21, 22, 32, 33, 36, 56, 105, 136
- Line height
- 1.00–1.50
- Letter spacing
- -0.02em at 136px display, -0.01em at 33–56px headings, +0.01em at 15–21px body, +0.02em at 17px uppercase labels
- Fallback
- Söhne, Inter, General Sans
- Features
- "ss01" on
Exclusive typeface across all UI — heading, body, nav, button, link, footer. Weight 400 is the default; weight 700 is reserved for 36px subheadings only. Display headlines at 105px and 136px carry line-height 1.00–1.01 with -0.02em tracking, producing cinematic stacked headlines that read as sculptural rather than typographic.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 108px
- Card padding
- 20px
- Element gap
- 7px
Border radius
nav
5pxtags
9999pxcards
15pxbuttons
0pxSpacing scale
1px5px6px7px9px11px15px16px17px19px20px30px38px40px53px56px60px64px72px108pxGuidelines
Do
- Use #fffdf9 for all text and interactive elements on the dark canvas — never introduce a second text color unless it is #6f879c for de-emphasized metadata.
- Let scale carry hierarchy: pair 136px display with 18px body at a 7.5× ratio rather than bolding the body to compensate.
- Hold Neue Montreal weight 400 as the default; reserve weight 700 exclusively for 36px subheadings.
- Set display headlines at line-height 1.00–1.01 and -0.02em letter-spacing so multi-line stacks feel sculptural.
- Use 0px border-radius for buttons and most cards — the prism artwork supplies all the visual softness the system needs.
- Center hero compositions vertically and horizontally, leaving ~50% viewport height for the headline block.
- Apply the prism artifact at full scale as the only chromatic element; never dilute it with accent buttons or colored badges.
Don’t
- Don't introduce filled buttons, gradients, or saturated action colors — the system has no distinct primary action color and the nav's outlined Contact button is the only bordered UI element.
- Don't use weight 600–800 for headlines; authority comes from size (105–136px), not stroke weight.
- Don't apply box-shadows to cards or nav — depth comes from the Prism artifact and the slate-to-black canvas gradient.
- Don't add line-heights above 1.5 to display sizes; the tight 1.00–1.01 leading at 136px is a signature.
- Don't use letter-spacing looser than -0.01em on any size above 22px — the tracking is intentionally tight.
- Don't split the prism colors into separate UI tokens — RGB red/cyan/green only exist inside the artifact.
- Don't lighten the canvas past #495764 or the slate-to-black contrast that makes #fffdf9 type read will collapse.
Components
Ghost Nav Button
Primary navigation item (EXPERTISE, WORK, TEAM, CAREERS)Transparent fill, #fffdf9 text, 0px radius, no padding, uppercase Neue Montreal 14–15px. No underline, no border — letterforms alone carry identification.
Outlined Contact Button
Sole outlined call-to-action in the navTransparent fill, 1px solid #fffdf9 border, 5px radius, padding 9px 15px, uppercase 14px #fffdf9 text. The only bordered element in the header.
Ghost Service Label
Service-category metadata (Strategy, Creative, Communications + marketing)Transparent fill, #6f879c text, 0px radius, 20px padding-top, 30px padding-bottom, 20px Neue Montreal. Reads as de-emphasized taxonomy — sits below case-study titles.
Display Headline Block
Hero statement (We are Storytellers..., Putting the pieces together...)Neue Montreal weight 400 at 105–136px, line-height 1.00, letter-spacing -0.02em, color #fffdf9. Stacks across multiple lines; occupies 50–60% of viewport height. No font-weight override — scale alone creates hierarchy.
Hero Lead Paragraph
Subtitle below display headlineNeue Montreal 400 at 18–22px, line-height 1.5, #fffdf9, max-width ~440px. Aligns left beneath the prism artifact, never full-width.
Prism Artifact
Signature brand illustration — glass-cube array with RGB-split causticsFour to six glass cubes arranged in a staggered cluster, rendered with #000000 cores, #fffdf9 specular highlights, and red/cyan/green channel-offset edges that bleed saturated color. No shadow — the chromatic dispersion is the visual depth.
Section Heading
In-section statement (Building brand value is our singular mission.)Neue Montreal 400 at 18–22px, #fffdf9, max-width ~440px, left-aligned above the larger display headline that follows.
Footer Hairline Divider
1px separator above footer copy1px solid #403f3f line, full-width, 15px margin-top. The only border-color token used in the system.
Case Study Title Link
Project/work listing headlineNeue Montreal 400 at 33px, #fffdf9, letter-spacing -0.01em, line-height 1.2. Hover state likely color-shifts to #6f879c — no underline, no background change.
Eyebrow Label
Section opener or category tag (uppercase)Neue Montreal 400 at 32px or 17px, uppercase, line-height 1.01–1.5, letter-spacing +0.02em at 17px. All-caps treatment without weight 700 — restraint over shouting.
Rounded Pill Tag
Sole radius-9999px element — possibly a status indicator or metadata chip9999px border-radius, 15px radius also appears for card corners. Used sparingly; most of the UI is square-edged.
Surfaces & elevation
Level 0
Obsidian Canvas
#101010Deepest page background — hero void, full-bleed sections
Level 1
Graphite Veil
#495764Primary content surface — content bands sit on this slightly lighter slate
Level 2
Bone Card
#fffdf9Rare inverted cards (when used) — near-white surface that flips the type to dark
Flat by design. The system uses zero box-shadows — depth is implied solely through the contrast between #101010, #495764, and the Prism artifact's chromatic edges. Borders are 1px solid at #403f3f and only used for the Contact button and footer divider. Elevation is non-existent because the prism artwork is the only element that needs to feel three-dimensional.
Layout & imagery
Layout
Full-bleed dark canvas with a single max-width ~1440px content column. Hero pattern: centered prism artifact with overlapping headline (text crosses the cubes) and left-aligned subtitle beneath. Navigation sits in a thin top bar with the wordmark left, four ghost links right, and an outlined Contact button terminating the row. Section rhythm alternates between full-viewport-height hero panels and narrower content bands at ~108px gaps. Content arrangement is asymmetric: the prism artifact anchors the visual center while headlines wrap around it. Single-column text blocks max out around 440px width; no multi-column grids, no card matrices, no pricing tables. Footer is a thin hairline-divided band with two columns of metadata.
Imagery
Single hero artifact dominates: an abstract 3D rendering of glass cubes with RGB-split chromatic aberration edges. No photography, no human imagery, no product shots. The prism IS the brand image — everything else is monochrome typography on dark canvas. Iconography is minimal: thin-line navigation labels and a small cursor/glyph accent (area 142765) at the end of one headline suggest a single 16px monoline icon. No illustrations, no decorative patterns, no textures.
Design notes
Agent Guide
Quick Color Reference: - text: #fffdf9 - background: #101010 (canvas) / #495764 (surface) - border: #403f3f (hairline) / #fffdf9 (button only) - muted text: #6f879c - accent: #ff2a2a / #2a7fff / #2aff2a (prism only — never on UI) - primary action: no distinct CTA color Example Component Prompts: 1. Hero section: #101010 canvas filling viewport. Prism artifact (4–6 glass cubes with #000000 cores and RGB-split #ff2a2a/#2a7fff/#2aff2a edges) centered at ~40% width. Headline 'We are Storytellers Strat egists Crea tives Market ers Tech nologists' at 136px Neue Montreal weight 400, #fffdf9, line-height 1.00, letter-spacing -2.72px, wrapping across the cubes. Subtitle at 22px weight 400 #fffdf9, max-width 440px, left-aligned below. 2. Ghost navigation button: transparent fill, #fffdf9 text, uppercase Neue Montreal 14px, 0px radius, 0px padding. Hover transitions color only via 0.5s cubic-bezier(0.52,0.01,0,1). 3. Outlined Contact button: transparent fill, 1px solid #fffdf9 border, 5px radius, 9px 15px padding, uppercase 14px #fffdf9 text. Only bordered element in the header. 4. Case-study title link: Neue Montreal 400 at 33px, #fffdf9, letter-spacing -0.33px, line-height 1.2, no underline. Below it a Fog Blue (#6f879c) service label at 20px with 20px padding-top and 30px padding-bottom. 5. Footer divider: 1px solid #403f3f line, full-width, 15px margin-top. Footer metadata at 14–18px #fffdf9 in a two-column row.
Motion Philosophy
Expressive but restrained. Default duration 0.5s with ease for most transitions, but the signature curve cubic-bezier(0.52, 0.01, 0, 1) (150 occurrences) drives all meaningful state changes — a slow start and decisive stop, like optical focus pulling. Transform and opacity carry 90% of transitions; border-color and color handle the remaining 10%. One named animation kVfqLU runs at 6.65s — likely the prism artifact's slow chromatic shimmer. Avoid springs, bounces, or scale-pop effects; the system's confidence reads through stillness, not motion.
Similar brands
Giant Ant
Same monochrome-dark-canvas agency treatment with oversized weight-400 display type and zero filled buttons
Resn
Both rely on a single signature 3D artifact as the brand image and pair it with near-white type on near-black canvas
Active Theory
Dark-mode creative-agency homepage with chromatic-aberration glass rendering and minimal nav
Ueno
Single-typeface agency site at 400 weight, cinematic dark canvas, and restraint as a design philosophy
Locomotive
Dark creative agency with oversized display headlines, no filled CTAs, and an outlined contact button as the only bordered element
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
