Vetric uses an iridescent-prism visual language: a bright white canvas, near-black ink for text and actions, and a four-color rainbow accent set (blue, pink, yellow, green) that refracts across soft pastel washes like light through a glass diamond. The system pairs a humanist serif (Noto Serif) for headlines with a geometric sans (Manrope) for UI, creating a deliberate tension between editorial calm and technical confidence. Components stay light and flat — thin borders, gentle radii, no drop shadows — so the prismatic gradients and colored accents carry all the visual energy. The result reads as 'data made luminous': the chrome recedes, the color talks.
#2969ffBrand accent and logo mark — the cool anchor of the rainbow; also acts as info/state accent on badges and borders; Signature iridescent gradient — the through-line of the brand, sweeping pink → blue → yellow → green like light through a prism
#f75cc3Accent stroke and badge accent — warm half of the prism spectrum
#ffd363Accent stroke and warning/state highlight
#090a1ePrimary text, primary CTA fill, strong borders — the dominant brand dark; a slightly blue-tinted near-black that reads warmer than pure black on white
#ffffffPage canvas, card surfaces, button text on dark fills
#e0e0e0Default hairline borders, button outlines, icon strokes
#222222Navigation text and thin nav borders — sits one step lighter than Midnight Ink
#c3dae3Cool-tinted card borders and subtle section dividers
#000000SVG fills, icon glyphs, and high-contrast decorative shapes only — not used for UI text or backgrounds
#fffdeaSoft tinted surface for cards and badges tied to the yellow accent
#eaffedSoft tinted surface for cards and badges tied to the green accent
#fff3fbSoft tinted surface for cards and badges tied to the pink accent
#e5f5ffSoft tinted surface tied to the blue accent — appears in gradient fills and decorative washes
#5ab040Accent stroke and success state highlight
77px · 400 · 1.06 · -3.85px trackingThe quick brown fox jumps
70px · 500 · 0.79The quick brown fox jumps
63px · 400 · 1.06 · -3.15px trackingThe quick brown fox jumps
49px · 400 · 1.1 · -1.96px trackingThe quick brown fox jumps
42px · 400 · 1.4The quick brown fox jumps
35px · 400 · 1.2 · -1.75px trackingThe quick brown fox jumps
26px · 500 · 1.33 · -1.04px trackingThe quick brown fox jumps
23px · 600 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
All editorial headlines and section titles — the serif against a sans UI gives the brand an editorial, almost magazine-like voice. Used at 77px for hero display, scaling down through 63/49/42/35/26px for h1→h5.
Body copy, UI controls, navigation, button labels, badges, and large numeric display. 18–19px for body, 14–16px for compact UI, 11px with +0.06em tracking for eyebrow labels like 'TRUSTED BY' and section kickers. The geometric construction balances the serif headlines.
7px7px7px24.5px4px9px11px14px18px21px25px26px28px29px35px42px44px48px53px56px70px72px83px88pxBackground #090a1, text #ffffff, Manrope 14–16px weight 500, padding 11px 28px, border-radius 7px, no border. Used for 'Book an Intro Call'. Sits directly beside a ghost secondary.
Transparent background, 1px border #090a1 or #e0e0e0, text #090a1, Manrope 14–16px weight 500, padding 11px 28px, border-radius 7px. Used for 'Join the Team'.
Centered composition on #ffffff with Noto Serif 77px display headline (Midnight Ink, -0.05em), 18px Manrope subtext, CTA pair, and a large iridescent glass-diamond/prism graphic that bleeds pink, blue, yellow, and green gradient edges into the surrounding white. The prism is the only hero artwork.
Background #ffffff, 1px border #e0e0e0, border-radius 7px, padding 18–25px. Contains a small monochrome icon (top-left, 20–24px), Noto Serif or Manrope title at 19–23px, Manrope body at 14–16px, and a 3-bullet list. Stacks in a 2-column grid.
Background uses one of the four pastel washes (#fffdea, #eaffed, #fff3fb, #e5f5ff), 1px border tinted to the matching prism hue, border-radius 7–24.5px, padding 25–28px. Lets the rainbow accent system apply to whole regions, not just strokes.
Manrope 11px weight 500, letter-spacing 0.06em (0.66px), color Midnight Ink or a muted gray. All-caps. Sits centered or left-aligned directly above a serif headline.
Horizontal row of monochrome or light-tinted wordmarks at uniform height (~24px), separated by generous 35–42px gaps. Rendered in muted gray (#222 or #e0e0e0), never in full color.
Left column on #ffffff with scattered chaotic tags/pills, right column on a full-bleed iridescent gradient (pink → blue → yellow → green) with white-tinted supporting text. The visual contrast IS the message.
Background #ffffff, 1px border #e0e0e0, border-radius 7px, padding 6px 14px, Manrope 13–14px. In the 'Struggle' column these float in scattered, overlapping positions to suggest disorder.
White background, 1px bottom border #e0e0e0 or transparent, 64–72px tall. Logo (blue diamond + 'vetric' wordmark) left, 4–5 text links (Products ▾, Use Cases, About, Careers) right in Manrope 14–16px weight 500 Midnight Ink. No background fill, no shadow.
Horizontal linear gradient sweeping #f75cc3 → #2969ff → #ffd363 → #5ab040 with soft feathered edges so it dissolves into white. Used to make text appear 'illuminated' without any chrome.
No border, no background. Icon (24px, Midnight Ink or a single prism color) above, Noto Serif 26–35px title, Manrope 16–18px body. Used when the section already has its own surface treatment.
#ffffffPage canvas, default background across all sections
#fffdeaSoft-tinted card and badge surfaces keyed to each accent color (cream/mint/blush/sky variants)
#2969ffFull-bleed iridescent wash used in hero bleed and the 'Vetric Does it Better' comparison panel
The system deliberately avoids drop shadows. Separation is achieved through hairline borders (1px #e0e0e0 or #c3dae3) and occasional tinted pastel backgrounds. The flatness makes the prismatic gradients feel like the only thing casting light.
Max-width 1200px centered container with generous horizontal padding. The hero is a single centered column (headline → subtext → CTA pair → prism graphic) rather than a split layout. Sections stack vertically with 80px+ gaps, no alternating background bands — everything sits on white, with color appearing only in discrete gradient panels or card tints. Feature grids use a 2-column layout for benefit cards, with each card being compact and left-aligned (icon top, title, bullets). The comparison section breaks the centered rhythm with a full-bleed split: a left 'chaos' half on white and a right 'clarity' half on an iridescent gradient that reaches the page edge. Navigation is a single minimal top bar; no sidebar, no mega-menu, no sticky behavior beyond standard scroll. The page reads as one long editorial scroll, not a dashboard.
Imagery is minimal and almost entirely abstract. The hero uses a single iridescent glass-diamond/prism graphic — faceted, translucent, throwing pink/blue/yellow/green refraction at its edges — that functions as the brand's only 'product photo'. Supporting sections use full-bleed pastel gradient washes (pink → blue → yellow → green) with feathered edges, never hard rectangular banners. No photography of people, offices, or devices appears. The comparison section relies on scattered pill-shaped text chips to evoke visual noise, and the right-side 'solution' half uses a flowing rainbow gradient to evoke clarity. Icons throughout the UI are flat, single-weight outlines in Midnight Ink or a single prism accent color — never multicolor, never filled. The whole visual language is about light and color doing the work that stock photography would do elsewhere.
**Quick Color Reference** - text: #090a1e (Midnight Ink) - background: #ffffff (Paper White) - border: #e0e0e0 (Ash) - accent: #2969ff (Prism Blue) — and the full prism set: #f75cc3, #ffd363, #5ab040 - primary action: #090a1e (filled action) **3 Example Component Prompts** 1. Create a Primary Action Button: #090a1e background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *Feature card:* #ffffff background, 1px solid #e0e0e0 border, 7px radius, 25px padding. 24px monochrome outline icon in #090a1e at top-left. Title Noto Serif 23px weight 500 #090a1e. Body Manrope 14px weight 400 #090a1e. Three bullet points in Manrope 13px. 3. *Tinted accent card:* #fff3fb (Blush Wash) background, 1px solid #f75cc3 border, 7px radius, 28px padding. Title Manrope 16px weight 600 #090a1e. Body Manrope 14px weight 400 #090a1e. The pink border and pink-tinted surface key the card to the Prism Pink accent.
Same restrained light-mode canvas, single dark CTA, minimal chrome, and emphasis on one signature graphic (their gradient/3D mark) over photography.
Both lean on iridescent gradient washes and pastel-tinted surfaces to add color without borders or shadows, with editorial serif headlines paired with clean sans body.
Shares the minimal white-canvas aesthetic, generous spacing, single dark filled CTA, and a preference for abstract gradient/iridescent visuals over stock imagery.
Same serif-headline-over-soft-gradient language, restrained palette punctuated by a few vivid accents, and flat components with hairline borders instead of shadows.
Use the design exports or connect Musterlab to your AI.
