Deep Teal
#062f34Card surface base, gradient shadow stop — anchors the teal product card in darkness
Monologue
monologue.toWebsite preview
The design language
Monologue operates as a dark editorial canvas draped in near-black with a single electric teal pulse. The visual identity is anchored by Instrument Serif at dramatic scale — italicized headlines ranging from 28px to 400px create a magazine-cover weight, with the brand wordmark blooming across the full viewport as ghostly gray type. DM Mono handles the technical/UI chrome: labels, tags, and structural annotations that read as system metadata rather than copy. Surfaces are matte and paper-thin against the void; a solitary white download button and the teal-gradient product card provide the only points of physical weight. The mood is late-night workstation meets luxury print — confident, quiet, and typographically opinionated.
Color palette
brand
accent
Electric Cyan
#19d0e8Accent text, accent borders, the video card surface, the gradient highlight on the product screen — the only chromatic pulse in an otherwise achromatic system
Sky Signal
#44ccffSecondary cyan for gradient stops and product screen illumination
neutral
Void Black
#000000Page canvas, primary background — the uninterrupted dark field
Obsidian
#010101Alternative near-black surface when the canvas shifts fractionally off-pure-black
Midnight Surface
#191919Elevated surface — cards, panels, overlay containers sitting one step above the void
Graphite
#282828Mid-tier surface and neutral button fills — the interactive control surface
Charcoal
#363636Secondary card surface for stacked or grouped containers
Slate
#3f3f3fDeep shadow surface and tertiary elevation
Steel Gray
#7f7f7fSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Paper White
#ffffffPrimary text, light surface fills, download button, high-contrast elements
Ghost Gray
#c0c0c0Subtle highlight wash and faint surface luminosity
Typography
Type scale
Minor Third (1.2) · 20px basetext-403
403px · 400 · 1.4The quick brown fox jumps
text-393
393px · 400 · 1.1The quick brown fox jumps
display
96px · 400 · 0.9 · -3.84px trackingThe quick brown fox jumps
heading-lg
72px · 400 · 1 · -2.16px trackingThe quick brown fox jumps
text-70
70px · 400 · 1The quick brown fox jumps
text-64
64px · 400 · 1The quick brown fox jumps
heading
48px · 400 · 1.1 · -1.44px trackingThe quick brown fox jumps
text-40
40px · 400 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Instrument Serif
- Weights
- 400
- Sizes
- 28px, 30px, 32px, 40px, 48px, 64px, 70px, 72px, 96px, 393px, 403px
- Line height
- 1.0–1.3
- Letter spacing
- -0.04em at 64px and above; -0.03em at 48px; 0.008em at 32px
- Fallback
- Playfair Display, EB Garamond, Cormorant Garamond
Display and heading — italicized editorial serif at dramatic scale. The brand wordmark reaches 400px filling the viewport; section headlines land at 64–96px. Negative letter-spacing tightens the serif into compact magazine-display density.
Additional typeface
DM Mono
- Weights
- 400
- Sizes
- 10px, 12px, 14px, 15px, 16px, 18px, 20px, 32px
- Line height
- 1.2–1.5
- Letter spacing
- -0.01em at 20px; 0.015–0.021em at 10–14px (slight positive tracking for tag/caps usage)
- Fallback
- JetBrains Mono, IBM Plex Mono, Space Mono
Mono UI chrome — labels, tags, metadata, button text, the 'MADE BY EVERY' stamp, the download button label, feature annotations. Reads as system metadata. The 32px usage appears in product device labels.
Additional typeface
Geist
- Weights
- 400
- Sizes
- 17px
- Line height
- 1.4
- Fallback
- Inter, system-ui
Body text — 17px single weight for paragraphs and descriptions. The slightly larger-than-default body size (17 vs 16) gives copy room to breathe against the dense UI chrome.
Additional typeface
system-ui
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
- Fallback
- Inter, -apple-system, Segoe UI
Fallback body and link text — appears in utility contexts where a system font is appropriate
Additional typeface
SF Pro Display Regular
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.4
- Letter spacing
- -0.006
SF Pro Display Regular — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 10px
Border radius
tags
100000pxcards
18pxlarge
12pxsmall
4pxmedium
8pxbuttons
100000pxproductDevice
40pxSpacing scale
3px5px6px8px9px10px11px12px14px16px18px19px20px24px32px34px39px40px48px56px60px64px72px104px154pxGuidelines
Do
- Use Instrument Serif italic at 64–96px for section headlines — the editorial weight is the brand's primary signature
- Let the brand wordmark bleed beyond viewport edges at ~400px as a ghosted background layer
- Use DM Mono for all UI chrome, labels, buttons, and metadata — never use a proportional font for system annotations
- Apply the teal accent (#19d0e8) at most 2–3 times per viewport — it should feel like a spark, not a wash
- Use fully rounded (100000px) radius for all pills, tags, and the download button
- Use 18–40px radius for cards and the product device — the generous rounding signals physical tangibility
- Layer complex inset + outset shadows on the product device card to create a real-object quality on the void canvas
Don’t
- Do not use bright or warm accent colors — the system is monastically dark with one cold teal point
- Do not use heavy drop shadows on text or flat cards — elevation should be reserved for the product device and stamps
- Do not use Inter or a geometric sans for headings — the italic serif is non-negotiable brand identity
- Do not use small heading sizes (below 28px) for Instrument Serif — it needs scale to function
- Do not apply the teal as a background fill on buttons or large surfaces — it belongs in text, thin borders, and the gradient
- Do not use sharp corners (< 4px radius) on interactive elements — the system curves everything
- Do not center-align body paragraphs — left-align for editorial column behavior, center only for testimonials and the wordmark
Components
Brand Wordmark Background
Atmospheric full-viewport typeThe word 'Monologue' rendered in Instrument Serif at ~400px, light gray (#c0c0c0 to #d1d1d1 gradient fading to white), positioned to overflow the viewport edges. Serves as a watermark/ghost text — the primary background element, not a heading. z-index behind all content.
Product Device Card
Hero product visualWhite (#ffffff) rounded body at 40px radius, ~360px wide. Contains a dark teal gradient screen (linear-gradient(rgb(32,177,195), rgb(3,67,75))) with a pixelated/dot-matrix display texture, and a speaker grille on the left side rendered as a grid of black dots. A 'Download' pill button with the Apple icon sits at the bottom of the screen. Multi-layer inset and outset shadows create a tangible, physical-device quality. A 'MADE BY EVERY' stamp badge protrudes from the top edge.
Every Stamp Badge
Brand attribution stampNavy (#1a3a4a) scalloped/wavy-edge badge, ~140px wide, positioned overlapping the top of the product card. 'MADE BY' in DM Mono 10px white above 'EVERY' in DM Mono 18–20px white. Heavy inset shadow (rgba(0,0,0,0.7) 3px 3px 2px inset) gives it a postage-stamp embossed feel. Attached to the product device at the top.
Download Button (Light Pill)
Primary download CTAWhite (#ffffff) background, black text and Apple icon, DM Mono 12px. Fully rounded (100000px radius). ~120px wide × 32px tall. Minimal — no border, no shadow. The sole light element on the dark canvas, creating high-contrast focal weight.
Watch Video Card
Secondary CTA / video previewTeal-tinted dark surface in the top-right of the hero. Contains a small video thumbnail (landscape crop, ~80px) with a 'Watch video' play-button overlay, plus the label 'Introducing Monologue notes' in white italic serif at 14–16px. Rounded 8px corners. Functions as a soft secondary action.
Section Heading (Italic Serif)
Editorial section titleInstrument Serif 400 italic, 64–72px, white (#ffffff). Left-aligned. Negative letter-spacing -0.04em tightens the serif. Two-line max width creates a magazine-column feel. Paired with a subheading in Geist 17px #7f7f7f or white at reduced opacity.
Feature Annotation Row
Feature callout with product imageTwo-column layout: left side has a DM Mono 12–14px label (e.g. 'Auto formatting') in white with positive letter-spacing, plus a Geist 17px description in muted gray (#7f7f7f). Right side has a product screenshot card with the email composition UI. 10px row gap between label and description.
Email Composition Card
Product feature screenshotDark surface (#191919 or similar), rounded 8–12px, showing an email draft UI. Contains fields for 'To:', 'Subject:', 'From:' in DM Mono, and body text in Geist. The content area uses a teal-to-dark gradient as background. This is the 'Monologue in action' visual — demonstrates auto-formatted voice output.
Testimonial Block
Social proof quoteCentered layout. Italic Instrument Serif 24–28px white quote text. Below: a small circular avatar placeholder, name in DM Mono 12px, and title/role in DM Mono 10px in muted gray. 40–60px vertical padding. Minimal — no card background, floats on the void.
Language Pill
Feature tag / language support indicatorDM Mono 12px, white or muted gray text, no background, no border. Arranged in a horizontal row at the section bottom. The first item (the language name) is styled in italic Instrument Serif as a section sub-label. Fully rounded layout with ~20px gap between pills.
Accent Text Link
Inline accent / emphasis linkElectric Cyan (#19d0e8) text, Geist or DM Mono, often italic. Used for the word 'Every' in the hero subtext and for other inline emphasis. The cyan appears at most 2–3 times per screen — always as a small punctuation mark, never as a full CTA background.
Ghost Button
Secondary text buttonTransparent background, 1px white or gray border, white text in DM Mono 12px, 8px radius, 8–10px vertical padding, 14–16px horizontal padding. Used for secondary actions when a light-fill primary isn't appropriate.
Surfaces & elevation
Level 0
Void
#000000Page canvas, unbroken background
Level 1
Midnight
#191919Cards, panels, raised containers
Level 2
Graphite
#282828Interactive surfaces, button fills, elevated UI
Level 3
Charcoal
#363636Nested card backgrounds, grouped content blocks
Level 4
Paper
#ffffffInverted light surface — download button, product device body
Product device card
rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px, rgba(0, 0, 0, 0.5) 1px 1px 1px 0px inset, rgba(0, 0, 0, 0.7) 2px 2px 12px 0px inset
Stamp/badge
rgba(0, 0, 0, 0.7) 3px 3px 2px 0px inset, rgba(255, 255, 255, 0.25) 3px 2px 2px 0px
Raised card
rgba(0, 0, 0, 0.63) 0px 0px 0px 1px
Teal gradient card
rgb(14, 93, 102) 6px 6px 10px 0px inset, rgba(255, 255, 255, 0.2) 4px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px
Layout & imagery
Layout
Full-bleed dark canvas with content constrained to ~1200px max width. The hero is a split composition: left half holds the headline and download button in generous whitespace, right half holds the teal video card at the top corner. The massive 'Monologue' wordmark spans the full viewport width as a background watermark, overflowing the content container. Below the fold, sections alternate between centered text blocks and two-column layouts (text-left, product-screenshot-right). Vertical rhythm is generous — 80px section gaps create breathing room between dense information blocks. The language support row sits as a horizontal strip near the bottom, single-line, with the italic serif label 'Supports 100+ languages' anchoring the left edge.
Imagery
Imagery is minimal and product-centric. The dominant visual is the product device card — a physical, tangible object rendered with multi-layer shadows to feel like a real device sitting on a dark surface. Email composition screenshots appear as feature illustrations inside dark cards, showing the product's output rather than abstract graphics. The background carries a subtle fabric/ripple texture (dark water-like undulations) that adds atmospheric depth without literal imagery. No photography, no lifestyle shots, no people — the product IS the hero, and everything else is typographic atmosphere.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #000000 - card surface: #191919 - border / hairline: #282828 - accent: #19d0e8 - primary action: #282828 (filled action) **3-5 Example Component Prompts** 1. **Hero section with ghost brand wordmark**: Black (#000000) full-bleed background. Instrument Serif italic, 72px, #ffffff, letter-spacing -0.04em for the headline. DM Mono 12px, #7f7f7f for subtext. A ghost 'Monologue' wordmark in Instrument Serif ~400px, #c0c0c0, positioned as an absolute background layer overflowing the viewport. Geist 17px, #7f7f7f for body description. 2. **Product device card**: White (#ffffff) rounded body at 40px radius, 360px wide. Contains a dark teal gradient screen (linear-gradient(rgb(32,177,195), rgb(3,67,75))) with a dot-matrix texture. A white 'Download' pill button (DM Mono 12px, Apple icon, 100000px radius) sits at the bottom of the screen. Multi-layer shadow: rgba(0,0,0,0.25) 0px 4px 4px, rgba(255,255,255,0.25) 1px 1px 2px, rgba(0,0,0,0.5) 1px 1px 1px inset, rgba(0,0,0,0.7) 2px 2px 12px inset. 3. **Section heading with two-column feature layout**: Left column: Instrument Serif italic 64px, #ffffff, letter-spacing -0.04em. Geist 17px, #7f7f7f for subtext. Right column: dark card (#191919, 8px radius) containing a product screenshot. 80px vertical gap from previous section. 10px row gap between label and description in the feature annotation. 4. **Language pill row**: Horizontal strip at section bottom. Left anchor: 'Supports 100+ languages' in Instrument Serif italic, 28px, #ffffff. Followed by DM Mono 12px tags (#7f7f7f): 'English', 'Portuguese', 'Cantonese', 'Japanese', 'Korean', 'Russian', 'Italian'. 20px gap between tags, no backgrounds. 5. **Testimonial block**: Centered, no card background. Instrument Serif italic 28px, #ffffff for the quote. Below: 32px circular avatar placeholder (#282828). Name in DM Mono 12px white, role in DM Mono 10px #7f7f7f. 60px vertical padding top and bottom.
Gradient System
Two distinct gradient families: (1) **Teal signal gradient** — linear-gradient(rgb(32,177,195) 0%, rgb(3,67,75) 100%) — used exclusively on the product device screen and the email composition card backgrounds. This gradient creates the brand's only saturated color field. (2) **Light fade gradient** — linear-gradient(rgb(209,209,209) 0%, rgb(255,255,255) 100%) — applied to the ghosted wordmark text and other large-scale gray type that needs to fade into lighter values. The teal gradient always points vertically with the lighter cyan on top; the light gradient always points vertically with the darker gray on top. No diagonal or multi-stop gradients are used.
Typography Pairing Philosophy
The system uses a three-font editorial model: Instrument Serif (display), DM Mono (UI/system metadata), and Geist (body). The serif carries voice and personality; the mono carries function and precision; the sans carries readable prose. Never mix these roles. Headlines are always Instrument Serif italic — the italic is a brand marker, not a style option. Mono text often uses positive letter-spacing (0.015–0.021em) at small sizes to give labels a deliberate, spaced-out quality. Serif text always uses negative tracking at display sizes to tighten the magazine-display feel.
Similar brands
Linear
Same dark canvas with generous spacing, restrained accent use, and editorial product presentation
Vercel
Similar near-black surfaces, mono labels for system chrome, and one cool accent against monochrome
Raycast
Dark-mode productivity app with mono UI typography and a single chromatic accent for interactive elements
Every.to
The parent publication uses the same Instrument Serif italic + DM Mono pairing for editorial product pages
Things 3
Premium dark UI with generous rounding, physical card metaphors, and restrained accent color philosophy
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
