Confirm Green
#34c759Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
Voicenotes
voicenotes.comWebsite preview
The design language
Voicenotes operates as a quiet, editorial note-taking workspace: a warm cream canvas with nearly zero chroma, where the only vivid mark is a single green check used as a tiny trust signal. The visual identity is a conversation between a humanist display serif (Instrument Serif) and a utilitarian sans (Inter) — the serif sings the marketing headlines while the sans does all the interface labor. Components are low-elevation, generously rounded, and pill-shaped for actions, giving every screen the feel of paper notebook pages laid out on a desk rather than a chrome-heavy SaaS dashboard.
Color palette
accent
neutral
Parchment
#faf9f5Page canvas, hero backgrounds, section bands — the warm off-white that makes the whole product feel like paper rather than a screen
Paper White
#ffffffCard surfaces, modal backgrounds, elevated panels — pure white sits on top of Parchment to create depth without shadows
Soft Sky
#eaf2f8Soft section background, alternate surface, and quiet card fill
Hairline
#e5e7ebPrimary border color for cards, dividers, and input fields — the most-used neutral in the system
Bone
#cbcac7Secondary borders, card outlines in dense grids, subtle structural dividers
Ash
#717171Muted body text, helper copy, secondary metadata, timestamps, and icon fills at rest
Pebble
#848381Tertiary text and low-emphasis labels
Slate Dark
#646462Secondary headings and medium-emphasis body text
Charcoal
#222222Headline text, SVG illustration fills, logo lockup — the warm-tinted near-black for editorial type
Ink
#0d0d0dPrimary action button background, primary navigation text, high-emphasis links — the only dark fill used for interactive elements
Jet
#000000Body text color, icon strokes, high-contrast outlines — the sharpest dark in the system
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 400 · 1 · -1.6px trackingThe quick brown fox jumps
heading
60px · 400 · 1.17 · -1.2px trackingThe quick brown fox jumps
heading-sm
20px · 400 · 1.4 · -0.4px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.47 · -0.054px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.048px trackingThe quick brown fox jumps
text-15
15px · 400 · 1.33The quick brown fox jumps
text-14
14px · 400 · 1.38The quick brown fox jumps
text-12
12px · 400 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ui-sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
ui-sans-serif — detected in extracted data but not described by AI
Additional typeface
InstrumentSerif-Regular
- Weights
- 400
- Sizes
- 20px, 60px, 80px
- Line height
- 1.00-1.40
- Letter spacing
- -0.0200em at 60-80px, normal at 20px
- Fallback
- Playfair Display, EB Garamond, Cormorant Garamond
Display and heading serif — used exclusively for editorial section headlines and hero copy. At 60-80px with -0.02em tracking, it creates a magazine-cover presence that contrasts against Inter's utility. The single weight (400) and high contrast strokes give headlines an unhurried, confident voice that would feel overwrought in any bolder weight.
Additional typeface
Inter
- Weights
- 400-700
- Sizes
- 10px, 12px, 14px, 15px, 16px, 18px, 20px
- Line height
- 1.21-1.71
- Letter spacing
- -0.0090em at body sizes, -0.0030em at larger sizes, normal at 10-12px
- Fallback
- system-ui, -apple-system, Helvetica Neue
Universal UI and body sans — Inter handles all interface text from 10px micro-labels up to 20px subheadings. The 400 weight is the workhorse for body, 500 for buttons and labels, 600 for emphasis, and 700 reserved for the smallest badge text. Tight letter-spacing (-0.009em at 14-18px) gives dense UI text a modern, engineered feel.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 16px
Border radius
cards
12pxlinks
6pximages
16pxinputs
12pxbuttons
9999pxSpacing scale
1px2px4px6px8px10px12px16px20px24px28px32px40px48px93px105px110px120px193pxGuidelines
Do
- Use #faf9f5 as the default page background for all full-page layouts — never use pure #ffffff as the canvas.
- Set headlines in Instrument Serif at 60-80px with -0.02em letter-spacing and 1.17 line-height for editorial presence.
- Set all body and UI text in Inter, choosing weight by emphasis: 400 for body, 500 for buttons/labels, 600 for headings, 700 for 10px badges only.
- Use 9999px border-radius for all buttons, tags, and pill-shaped interactive elements.
- Use 12-16px border-radius for cards and content containers — never sharp corners.
- Limit chromatic color to #34c759 for status dots, trust checkmarks, and compliance badges only.
- Apply the #eaf2f8 tint sparingly for info panels that need differentiation from white cards.
Don’t
- Do not introduce any brand accent color beyond #34c759 — the system is intentionally near-monochrome.
- Do not use drop shadows for elevation — use borders (#e5e7eb, #cbcac7) and surface color contrast instead.
- Do not set body text below 14px in Inter 400, or below 10px in any weight.
- Do not apply the Instrument Serif to UI text, labels, or anything below 20px — it loses readability and its editorial purpose.
- Do not center-align body paragraphs or card content longer than two lines — the serif is for display, not body.
- Do not use the #0d0d0d button fill for anything other than the single primary action per view.
- Do not stack more than two border-radius values in a single component family — pick pill (9999px) or card (12-16px), not both.
Components
Primary Pill Button
Main call-to-action across hero and feature sectionsFilled black pill button with white text. Background #0d0d0d, text #ffffff, border-radius 9999px, padding 12px 24px. Font: Inter Medium 16px. Used for 'Download for Mac' and 'Download' in the top nav. The dark fill on cream background creates the strongest contrast moment on the page.
Ghost Pill Button
Secondary actions in navigation and inline contextsTransparent background with #0d0d0d text, border-radius 9999px, no border. Font: Inter Medium 16px. Used for 'Log in' in the top nav. Keeps the pill language consistent with the primary button while deferring visual weight.
Tab Nav Item
Primary navigation between product modesIcon (emoji or product icon) paired with Inter Medium 16px text, gap 6px, bottom border 2px solid #0d0d0d when active. Inactive state has no border and #717171 text color. Padding 8px 4px. Sits centered in the top nav with quiet underline-based active state.
Note Card
Display of individual recorded meeting notes in gridWhite card (#ffffff) with #cbcac7 border, border-radius 12px, padding 16-20px. Contains a small timestamp in Inter 10-12px #717171, a title in Inter SemiBold 14-16px #0d0d0d, a summary excerpt in Inter Regular 14px #717171, and a duration badge at the bottom. The light border replaces shadow for elevation — the system deliberately avoids heavy drop shadows.
Feature Card
Product showcase panels in the features gridWhite card on #faf9f5 background, border-radius 12-16px, padding 16px. Contains a product screenshot or UI mockup. May have a subtle border or sit on a #eaf2f8 tinted surface variant. Large enough to hold a full meeting interface screenshot with context.
Trust Badge Row
Social proof and compliance signals below the heroInline horizontal arrangement of small text labels with a colored dot prefix. Green dot (#34c759) for compliance items like 'SOC 2 Type II & GDPR Compliant', yellow/amber dot for star ratings. Font: Inter 14px #717171. Dot size ~8px. Gap 24px between items.
Integration Logo Cluster
Visual proof of platform compatibilityRow of grayscale brand logos (Zoom, Meet, Teams, Slack, Webex) centered on the page. Each logo rendered in a single neutral tone (#222222 or #717171), no brand colors. Sits on the cream canvas with 32px gap from surrounding text.
Search Overlay
AI-powered search bar floating above contentWhite pill-shaped bar (border-radius 9999px or 16px) with #e5e7eb border, shadow rgba(0,0,0,0.15) 0px 0px 10px. Contains placeholder text in Inter 16px #717171 and a blue circular (#0088ff) send button on the right. Floats above the note grid as a floating action.
Hero Product Screenshot
Primary visual demonstration of the productLarge product mockup (typically a Zoom/meeting interface window) placed against colorful paint-splash textures. The window mockup has #ffffff background with #e5e7eb border, 16px radius. The paint textures use a multi-color gradient (green to cyan to blue) but are contained outside the UI frame, so the product itself stays neutral.
Note Grid
Multi-column display of meeting note cardsResponsive grid (3-4 columns at desktop) of Note Cards with 16-24px gap. The grid is the signature data-display pattern: dense, information-rich, with consistent card geometry creating a tile-like rhythm on the cream background.
Section Heading
Editorial section titles between content blocksInstrument Serif Regular, 60px at desktop, line-height 1.17, letter-spacing -0.02em, color #222222. Centered or left-aligned depending on section. Often two-line with a period or em-dash punctuation for editorial voice. Examples: 'Simple as it gets.', 'Real teams. Real meetings. Real results.'
Status Indicator Dot
Small functional color marker8px circle in #34c759 (green) for success/compliance or amber for ratings. Always paired with a text label, never standalone. The only place chromatic color is permitted in the interface.
Surfaces & elevation
Level 0
Parchment Canvas
#faf9f5Base page background — the warm cream that defines the system's paper-notebook feel
Level 1
Paper White
#ffffffStandard card and content surface — sits on top of Parchment for depth without shadow
Level 2
Soft Sky Tint
#eaf2f8Accent card variant for info panels and feature callouts needing subtle differentiation
Level 3
Ink Overlay
#0d0d0dModal, popover, and floating overlay surfaces — the only dark surface in the system
The system deliberately avoids heavy drop shadows for elevation. Instead, depth is communicated through: (1) a 1-step warm surface stack — Parchment #faf9f5 canvas → Paper White #ffffff cards → Soft Sky #eaf2f8 tinted panels, and (2) hairline borders in #e5e7eb and #cbcac7. The only shadow in the system is a soft 10px black-at-15% glow reserved for floating elements like the AI search overlay. This keeps the visual language feeling like flat paper, not skeuomorphic UI.
Layout & imagery
Layout
The page follows a single-column, centered, max-width-1200px container pattern. The hero is a centered text stack: large serif headline, 3-line subtext, pill CTA, trust badges, then a full-bleed product screenshot that breaks the container width. Section rhythm alternates between Parchment background and Paper White cards, with 80px vertical gaps between major sections. Content arrangements use: (1) centered editorial headings, (2) 3-column card grids for features and notes, (3) horizontal logo rows for trust and integrations, and (4) full-bleed product mockup bands. Navigation is a single thin top bar with a logo left, centered tab nav with emoji icons, and right-aligned ghost + primary pill buttons. The overall density is compact — cards pack tightly in grids, text blocks have minimal line-height padding, and the page rewards scrolling with continuous information rather than spacious hero moments.
Imagery
Imagery is dominated by product screenshots and UI mockups rather than photography or illustration. The product is always shown in a meeting-interface context: a browser/app window with participant tiles on the left and a 'Morning sync' notes panel on the right. These product frames are placed against expressive, colorful paint-splash textures (greens, teals, pinks, blues) that bleed off the canvas edges, creating a deliberate contrast: the UI is sterile and monochrome while the surrounding atmosphere is painterly and vivid. There is no lifestyle photography, no stock imagery, and no abstract geometric decoration. The colorful textures serve a dual role: they make the product screenshots feel like editorial spreads rather than spec sheets, and they provide the only chromatic energy in an otherwise neutral system. The icon set is minimal and uses emoji (🤝, 📓, 📝) for navigation, giving the nav a casual, personal quality.
Design notes
Agent Guide
**Quick Color Reference** - text: #0d0d0d - background: #faf9f5 - card surface: #ffffff - border: #e5e7eb - accent: #34c759 (status/trust only) - primary action: #0d0d0d (filled action) **3 Example Component Prompts** 1. Create a Primary Action Button: #0d0d0d background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **Note Card Grid**: 3-column grid with 20px gap. Each card: #ffffff background, #cbcac7 1px border, 12px radius, 20px padding. Timestamp in Inter 12px #717171 at top. Title in Inter SemiBold 16px #0d0d0d. Summary in Inter 14px #717171, 2-line clamp. Duration badge at bottom in Inter 12px #717171 with a small clock icon. 3. **Feature Section**: Parchment background. Centered section heading in Instrument Serif 60px #222222, letter-spacing -0.02em. Below: row of 4 grayscale integration logos (each in #222222), 32px gap, centered. Then a 3-column grid of feature cards — each card has 16px padding, 16px radius, contains a product screenshot with 12px radius and #e5e7eb border.
Similar brands
Granola
Same AI meeting-notes category with an identical cream-canvas editorial aesthetic, Instrument Serif headlines, and near-monochrome palette
Reflect
Same paper-notebook metaphor with warm off-white canvas, pill buttons, and a serif/sans typographic pairing for headings vs UI
Tana
Same compact-density product UI with hairline-border cards, minimal shadows, and a single accent color used only for status indicators
Notion
Same restrained near-monochrome system where the only color appears in small functional dots and tags, with content doing the visual work
Craft
Same editorial-document visual language with oversized serif headings against clean Inter-style UI and product-screenshot hero sections
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
