Iris Voltage
#6360d8Brand accent for primary CTAs, link color, accent words inside serif headlines, and the thin violet underlines/arrows on navigation and article links
Prevalent
prevalent.aiWebsite preview
The design language
Prevalent's visual system is an editorial intelligence briefing set inside a dark observatory: a near-black navy hero anchors large serif headlines in Tiempos, while the body switches to a humanist sans (Matter) for UI, captions, and controls. A single vivid violet (#6360d8) carries the entire chromatic load — it paints the most important nouns in every headline, fills the primary CTA, and underlines article links — leaving the rest of the page in pure black-on-white. The product is illustrated, not photographed: whimsical hand-drawn scenes of miniature people navigating futuristic architecture replace the usual SaaS 3D renders, giving the brand a storybook quality that contrasts sharply with its serious cybersecurity subject matter. Components are flat, borderless by default, and depend on thin black hairlines rather than shadows for separation.
Color palette
brand
accent
Lavender Mist
#dad9edLight neutral action fill for buttons on dark surfaces.
neutral
Midnight Vault
#060b25Hero and footer canvas — the deep navy that frames the largest serif headlines and the top of the page
Pure Ink
#000000Primary text, default hairlines, and the 1px borders that separate every card, section, and image
Paper White
#ffffffPage canvas, card surfaces, button text on violet, and inverse text on the dark hero
Graphite Slate
#383c51Cool desaturated border and secondary text — sits between Pure Ink and Midnight Vault when a softer line or muted label is needed
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
80px · 400 · 0.98 · -1.6px trackingThe quick brown fox jumps
heading-lg
50px · 400 · 1 · -1px trackingThe quick brown fox jumps
heading
48px · 400 · 1.1 · -0.96px trackingThe quick brown fox jumps
text-45
45px · 400 · 1.1The quick brown fox jumps
heading-sm
30px · 400 · 1.1 · -0.6px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.22 · -0.4px trackingThe quick brown fox jumps
body
18px · 400 · 1.33 · -0.36px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.4 · -0.32px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Tiempos Headline
- Weights
- 400
- Sizes
- 16px, 30px, 45px, 48px, 50px, 80px
- Line height
- 0.98–1.10
- Letter spacing
- -1.6px at 80px, -1.0px at 50px, -0.96px at 48px, -0.9px at 45px, -0.6px at 30px (all -0.02em)
- Fallback
- Source Serif 4 or PT Serif Caption
Serif used exclusively for headlines and section titles. The single weight (400) plus aggressive negative tracking gives headings a literary, almost newspaper-editorial quality that contrasts with the cyber-security subject matter. Letter-spacing tightens to -0.02em at every size, pulling the serifs into a dense, confident block.
Additional typeface
Matter
- Weights
- 400, 500
- Sizes
- 12px, 14px, 16px, 18px, 20px, 50px
- Line height
- 1.22–1.60
- Letter spacing
- -0.24px at 24px, -0.2px at 20px, -0.18px at 18px, -0.16px at 16px, -0.14px at 14px, -0.12px at 12px (all -0.01em)
- Fallback
- Inter or Söhne
Workhorse sans for body copy, navigation, buttons, captions, and card meta. Weight 400 is default; 500 is used sparingly for emphasis in labels and small UI text. Generous line-heights (1.4–1.6) keep body copy breathable on a spacious canvas. Letter-spacing -0.01em at body sizes gives it a tighter, more engineered feel than a typical system sans.
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 40-48px
- Element gap
- 24px
Border radius
cards
10pxpills
9999pxbadges
9999pxbuttons
4pxSpacing scale
1px2px4px5px6px7px8px12px14px15px16px17px18px20px22px24px26px29px32px34px42px46px48px60px80px89px96px103px123px144px222px256px288px301pxGuidelines
Do
- Use Tiempos Headline 400 exclusively for all display and section titles — never use a sans for headlines, that contrast is the brand
- Recolor exactly 2–3 key nouns in Iris Voltage within every serif headline; leave the rest of the sentence in Pure Ink or Paper White
- Keep the page chromatic load below 5% — violet appears on one CTA, one link per card, and accent words; everything else stays black, white, or navy
- Use 1px Pure Ink hairlines for all card and section separators; never reach for shadows or colored borders to create division
- Set letter-spacing to -0.02em on every Tiempos size and -0.01em on every Matter body size — the tight tracking is part of the voice
- Lead with the dark navy hero on the landing page; any sub-page that opens on a dark band reads as part of the same system
- Illustrate the product with hand-drawn scenes of people and architecture rather than stock photography or 3D renders
Don’t
- Don't introduce a second accent color — the system is monochromatic plus one violet; coral, green, and orange only appear inside the illustration art
- Don't apply shadows, glows, or colored borders to cards or buttons — separation comes from 1px black hairlines or whitespace
- Don't use Tiempos at body sizes below 30px — the serif is a display face and will look fussy as paragraph copy
- Don't round buttons above 4px or cards above 10px — larger radii would clash with the editorial flatness
- Don't set headlines in Pure White on a white background; the dark navy hero is the only place Paper White display type should live
- Don't place violet text on the Midnight Vault background — the contrast drops and the accent loses its punch; use Paper White for hero body and iris only on white
- Don't fill pages with photography; if a visual is needed, use the same illustrated, whimsical scene-style as the hero
Components
Primary CTA Button
The single conversion action on any page (Get a demo, Learn more)Filled Iris Voltage (#6360d8) background, Paper White (#ffffff) text in Matter 500 at 16px, padding 12px 24px, border-radius 4px. Optional trailing arrow icon in white. No border, no shadow — color alone does the work.
Ghost Navigation Button
Secondary actions in the header or inline within contentTransparent background, 1px Pure Ink (#000000) border, Pure Ink text in Matter 500 at 14–16px, padding 8px 16px, border-radius 4px.
Pill Badge
Compact label sitting next to the wordmark or beside a heading (e.g. 'Join our team')Lavender Mist (#dad9ed) background, Pure Ink text in Matter 500 at 12px, padding 4px 12px, border-radius 9999px.
Serif Section Heading
Headlines that introduce every page sectionTiempos Headline 400 at 48–80px, letter-spacing -0.02em, line-height ~1.0. The pattern is two-tone: 2–3 key nouns are recolored in Iris Voltage while the rest stays Pure Ink (on light backgrounds) or Paper White (on the dark hero). The contrast between white and violet words inside a single serif line is the brand's signature typographic move.
Feature Card
Three-column value props beneath the heroPaper White background, no shadow, 1px Pure Ink hairline border at the top, border-radius 10px. Heading in Tiempos 30px Pure Ink, body copy in Matter 18px Pure Ink. A small rounded-square icon container (10px radius) sits below the card, filled with Iris Voltage, coral, or green from the illustration palette.
Article Card
Blog or resource entry in a 3-column gridPaper White background, no border. Full-bleed image at the top (square or 4:3 crop). Eyebrow label 'Article' in Matter 14px Iris Voltage above the title. Title in Tiempos Headline 400 at 20–24px Pure Ink. Trailing down-arrow link in Iris Voltage.
Arrow Link
Inline navigation from headings to detail pagesMatter 500 at 16px in Iris Voltage, followed by a small down-arrow (↳) glyph. No underline by default; the violet color and arrow are the affordance.
Top Navigation Bar
Persistent header across all pagesPaper White background, sits on a 1px Pure Ink hairline at the bottom. Wordmark + pill badge on the left, three nav items (Products, Company, Resources — each with a chevron dropdown) centered or left-aligned in Matter 500 16px Pure Ink, primary CTA on the right. No background blur or elevation.
Hero Section
Full-bleed opening band on the landing pageMidnight Vault (#060b25) background, content centered with a max-width of ~1200px. Display headline in Tiempos 80px Paper White with two words recolored Iris Voltage. Supporting paragraph in Matter 18px at ~70% white. Violet filled CTA centered beneath. A hand-drawn illustration of futuristic architecture and miniature people overflows the bottom edge of the hero, bleeding into the next section.
Footer
Closing band at the bottom of the pageMidnight Vault (#060b25) background mirroring the hero. Top edges clipped with a 20px radius, giving the footer a rounded 'card' feel even though it spans the full viewport. Wordmark and link columns in Paper White at 14–16px Matter.
Surfaces & elevation
Level 0
Paper White
#ffffffDefault page canvas for content sections, article cards, and feature cards
Level 1
Lavender Mist
#dad9edPill badges, gentle section tints, and decorative surface washes
Level 2
Midnight Vault
#060b25Full-bleed hero and footer backgrounds — the only dark surface in the system
The system is deliberately flat — no shadows, no glows, no colored borders. Elevation is implied by layering (white card on white canvas, navy hero on white section) and by 1px Pure Ink hairlines when explicit separation is needed. The only curvature comes from the 4px and 10px radii and the asymmetric clip masks on the hero/footer illustrations.
Layout & imagery
Layout
The landing page follows a strict rhythm: full-bleed dark hero (Midnight Vault) → white content sections → alternating subtle tints → dark footer. Content is centered in a ~1200px max-width container with generous side padding. The hero is a centered text stack (display headline → supporting paragraph → CTA) with the illustration bursting from the bottom. Content sections use a 2-column or 3-column grid — the value-prop section is a 3-column feature grid with equal-width cards separated by whitespace, and the resource section is a 3-column article grid. Section gaps are large (80–120px) giving the page a spacious, editorial cadence. The navigation is a single sticky top bar, white with a 1px bottom hairline; no sidebar, no mega-menu, no floating elements.
Imagery
Illustrations are the entire visual identity. Every visual asset is a hand-drawn, slightly whimsical scene — miniature people in spacesuits and office attire exploring futuristic cityscapes, domed laboratories, and rocket launchpads — rendered in a flat, editorial style with thick linework, saturated mid-tones (blues, corals, greens, purples), and white highlights. The illustrations overflow their containers, with the hero scene bleeding across the full width and even down into subsequent sections. There is no photography anywhere on the site; product UI and people are always depicted as drawn characters. Icons throughout the feature cards are simple, flat, and monochrome, sitting inside small rounded-square containers that pick up accent colors from the illustration palette.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (Pure Ink) - background: #ffffff (Paper White) - dark surface: #060b25 (Midnight Vault — hero and footer only) - border: #000000 (1px hairline) - accent: #6360d8 (Iris Voltage — accent words, links, arrows) - primary action: #6360d8 (filled action) **Example Component Prompts** 1. **Hero section**: Midnight Vault (#060b25) full-bleed background, content centered at max-width 1200px. Display headline at 80px Tiempos Headline weight 400, letter-spacing -1.6px, line-height 0.98. Write the headline as 'Every [asset]. Every [risk]. Complete [exposure management].' where the bracketed words are Iris Voltage and the rest are Paper White. Supporting paragraph in Matter 400 18px at #ffffffcc. Violet filled CTA beneath: bg #6360d8, text #ffffff, Matter 500 16px, padding 12px 24px, radius 4px. 2. **Section heading**: Tiempos Headline 48px weight 400, letter-spacing -0.96px, Pure Ink. Recolor the last three words in Iris Voltage. Below, a 3-column feature grid; each card is Paper White with a 1px top border in Pure Ink, border-radius 10px, padding 48px. Card title in Tiempos 30px Pure Ink, body in Matter 18px Pure Ink, and a small 10px-radius icon container at the bottom filled with a single accent color. 3. **Article card**: Paper White background, no border. Image at top (square crop, no rounding). Eyebrow 'Article' in Matter 14px Iris Voltage. Title in Tiempos 24px Pure Ink, letter-spacing -0.48px. Trailing arrow link in Matter 500 16px Iris Voltage with a down-arrow glyph. 4. **Navigation bar**: Paper White background, 1px Pure Ink bottom border, padding 16px 40px. Wordmark + Lavender Mist (#dad9ed) pill badge labeled 'Join our team' on the left (radius 9999px, padding 4px 12px, Matter 500 12px). Three nav items in Matter 500 16px Pure Ink with chevron dropdowns. Primary CTA 'Get a demo' on the right: bg #6360d8, text #ffffff, padding 12px 24px, radius 4px. 5. **Footer**: Midnight Vault (#060b25) background, top corners clipped at 20px radius to read as a card. Wordmark and link columns in Paper White at Matter 400 14px, max-width 1200px centered, padding 64px top.
Similar brands
Linear
Same restrained monochrome canvas with a single vivid accent and flat, borderless cards
Vercel
Same large serif/sans pairing for headlines, tight tracking, and near-black hero
Framer
Same illustration-driven hero and violet-on-near-black headline treatment
Notion
Same hand-drawn illustration style replacing product photography across the marketing site
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
