Deep Teal
#186f64Teal action color for filled buttons, selected navigation states, and focused conversion moments.
Letter
letter.coWebsite preview
The design language
Letter is a private-banking platform that reads like a gallery exhibition for high-net-worth finance. The visual system pivots between a deep ink-black hero stage and a bright editorial body, with 3D metallic and prismatic renders as the recurring sculptural accent. Typography is split into two deliberate registers: a wide grotesque for interface text and navigation, and a high-contrast serif at 80px for headlines that read like magazine cover titles. Color is used as architectural punctuation — three near-gray tinted panels (peach, mint, lavender) act as gallery walls, while teal, violet, and blue claim the action buttons as discrete brand moments. Components are square and confident: 2px corner radii, generous horizontal button padding, and zero decorative shadow — the renders and typography do all the emotional work.
Color palette
brand
Electric Violet
#536effViolet action color for filled buttons, selected navigation states, and focused conversion moments.
Royal Violet
#644bc4Secondary action buttons, hover state on violet CTAs, accent borders — deeper companion to Electric Violet for depth
Sapphire Blue
#154ea5Blue action color for filled buttons, selected navigation states, and focused conversion moments.
accent
Peach Wall
#fcede1Hairline borders, dividers, input outlines, and card edges on light surfaces.
Mint Wall
#eefcefTinted card background — cool mint gallery wall, likely the investing/savings panel
Lavender Wall
#e6def0Tinted card background — soft lavender gallery wall for the credit or lending panel
neutral
Vault Ink
#191b1fHero background, dark surface stage, dark card panel — deep near-black with the faintest blue chill, warmer than pure black but harder than charcoal
Paper White
#ffffffPage canvas, light card surface, inverse text on dark backgrounds, outlined button fills
Mist White
#f6f9f9Soft section background, subtle card surface, secondary canvas — sits one step below pure white without grayness
Fog Gray
#9fabadMuted helper text, secondary metadata, low-emphasis labels — a true middle gray with no chromatic bias
Hairline
#e6ebecBorders, dividers, card outlines, button strokes at low contrast — barely-there separators that define structure without drawing the eye
Obsidian
#000000Primary text, headline ink, logo mark — the only true black in the system, reserved for maximum-contrast typography
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 600 · 1.1 · 1.6px trackingThe quick brown fox jumps
heading
46px · 600 · 1.2 · 0.92px trackingThe quick brown fox jumps
heading-sm
28px · 400 · 1.3 · 0px trackingThe quick brown fox jumps
subheading
22px · 600 · 1.2 · 0.44px trackingThe quick brown fox jumps
body
16px · 400 · 1.4 · 0px trackingThe quick brown fox jumps
caption
13px · 400 · 1.4 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neufile Grotesk Extended
- Weights
- 400, 500
- Sizes
- 13px, 16px, 28px
- Line height
- 1.30, 1.40, 1.00, 2.00
- Fallback
- Söhne, Inter, IBM Plex Sans
Body copy, navigation links, button text, card descriptions, footer text, and medium-weight subheads at 28px. This is the working sans — wide apertures and extended proportions give it an editorial, almost monospace rhythm at small sizes. Weight 400 for running text, weight 500 for subheads and emphasized UI labels.
Additional typeface
Albra Sans
- Weights
- 600
- Sizes
- 22px, 46px, 80px
- Line height
- 1.10, 1.20
- Letter spacing
- 0.0200em
- Fallback
- GT Sectra, Tiempos Headline, Canela, Playfair Display
All headlines and display text. The serif/sans split is the system's defining typographic move: a high-contrast serif at 80px line-height 1.10 creates magazine-cover presence for the hero, while a 46px line-height 1.20 handles section titles. The 22px size at weight 600 works as a serif subhead — unusual and signature. Positive 0.020em letter-spacing on a serif is anti-convention (most serifs tighten at display sizes), here it breathes the letterforms open for gallery-label elegance.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-96px
- Card padding
- 32px
- Element gap
- 16px
Border radius
tags
2pxcards
0pxinputs
2pxbuttons
2pxSpacing scale
8px12px13px16px19px23px24px27px32px48px64px72px80px82px90px98px104px112px133px208px253pxGuidelines
Do
- Use Albra Sans serif for all headlines and display text — never substitute a sans-serif for headings; the serif/sans split is the system's identity
- Keep button corner radius at 2px — the near-square edges read as architectural confidence, not friendliness
- Use 80px Albra Sans for hero headlines only; section titles cap at 46px
- Pair every filled colored button with an adjacent ghost text link in the matching brand color — teal button + teal link, violet button + violet link
- Let 3D renders float in negative space without containers, borders, or rounded masks — the raw edges of the render ARE the visual frame
- Use tinted card backgrounds (#fcede1, #eefcef, #e6def0) for product panels; reserve #ffffff and #f6f9f9 for structural sections
- Maintain 27px horizontal button padding — this generous horizontal breathing is what makes the buttons feel premium rather than functional
Don’t
- Never use shadows, drop shadows, or box-shadows on cards, buttons, or sections — the system is flat and lets background color and 3D renders do the depth work
- Don't introduce additional border radii beyond 2px — no rounded cards, no pill buttons, no circular avatars
- Don't use the brand colors (#186f64, #536eff, #644bc4, #154ea5) for body text, borders, or backgrounds — they are reserved for action moments and headlines only
- Never set headlines in a sans-serif — the serif Albra Sans is non-negotiable for the editorial voice
- Don't use the tinted card backgrounds (#fcede1, #eefcef, #e6def0) for body text or large surface areas — they are gallery walls for 3D renders, not page backgrounds
- Don't apply gradients to UI components — gradients appear only in 3D renders and the hero light burst, not in buttons, cards, or backgrounds
- Avoid tight letter-spacing on serif headlines — the 0.020em positive tracking is deliberate and creates the gallery-label feel
Components
Navigation Bar (Dark)
Primary navigation over heroTransparent dark bar (#191b1f) with white Neufile Grotesk Extended 13px nav links. Logo mark (white S-shape) left, 7 nav items spaced 23px horizontal padding, 'Join' as ghost button (white border, 2px radius) and 'Sign In' as text link on the far right. No background blur — sits on pure dark.
Navigation Bar (Light)
Primary navigation on light sectionsWhite background bar, #191b1f text and logo. Same structure as dark nav but inverted. 'Join' becomes a dark filled button (#191b1f fill, white text, 2px radius) and 'Sign In' remains text.
Teal Filled Button
Primary action — invest, depositBackground #186f64, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. No shadow. The flagship CTA color — appears on 'Invest Now' actions.
Violet Filled Button
Secondary action — borrow, creditBackground #536eff, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. Appears on 'Borrow Now' actions.
Blue Filled Button
Tertiary action — card, checkingBackground #154ea5, white text in Neufile Grotesk Extended 16px weight 500. 2px border radius. Padding 12px vertical, 27px horizontal. Appears on 'Get Your Card' actions.
Ghost Text Link
Tertiary action — learn moreNo background, no border. Dark text (#191b1f) in Neufile Grotesk Extended 16px. Sits immediately right of a filled button as a low-commitment alternative. Color-tinted to match its sibling filled button (teal link beside teal button, etc.).
Tinted Feature Card
Product/service showcase panelFull-width or half-width card with a tinted near-gray background — Peach Wall (#fcede1), Mint Wall (#eefcef), or Lavender Wall (#e6def0). Zero border radius, no border, no shadow. Contains a serif Albra Sans 22px subhead, a 16px body description, a filled action button, a ghost link, and a large 3D render occupying the right or lower half. 32px internal padding. The tinted background is the card's only differentiator from the white page.
Dark Hero Stage
Above-the-fold hero sectionFull-bleed #191b1f background. Centered Albra Sans 80px display headline in white, 46px or 22px serif subhead below, and a large 3D metallic/chrome render with dramatic light flares occupying the lower 60% of the viewport. No border, no card treatment — the dark background IS the surface. Generous vertical padding (96-128px top, 64-96px bottom).
Split Content Section
Body content with paired 3D renderTwo-column layout, roughly 50/50. Left column: Albra Sans 46px heading, 16px body text, optional CTA. Right column: 3D render (iridescent card, liquid-metal form, chrome sphere) with generous breathing room. Background alternates between white and #f6f9f9 between sections.
3D Abstract Render
Signature visual elementFull-color 3D renders with metallic, prismatic, or iridescent surfaces. Floating in space with dramatic directional lighting — lens flares, caustic light patterns, and subsurface scattering. Treatment: sharp edges, no rounded masks, overlapping light bloom. Each render is a one-off composition, not a reusable component, but they share a consistent material language: polished chrome, dichroic glass, and liquid metal. This is the brand's most distinctive visual asset.
Surfaces & elevation
Level 0
Vault Ink
#191b1fHero stage, dark section backgrounds, dark nav — the deepest surface
Level 1
Paper White
#ffffffPage canvas, light cards, primary content surface
Level 2
Mist White
#f6f9f9Alternating section background, subtle elevation above white
Level 3
Tinted Gallery Walls
#fcede1Product panel backgrounds — peach, mint, lavender variants act as gallery walls for 3D renders
The system is intentionally shadowless. Depth is created through surface color contrast (white → #f6f9f9 → tinted walls → #191b1f) and through 3D renders that carry their own internal lighting. No box-shadows, no drop shadows, no glows on UI elements. This flat treatment is a luxury signal — the confidence to not use visual crutches.
Layout & imagery
Layout
Max-width ~1200px centered container. Hero is full-bleed dark with centered headline stack (display → subhead → no button above fold), then transitions to a rhythm of alternating light sections. Pattern: dark hero → white split section → tinted card row (2-column grid) → white split section → tinted card row. Sections use generous vertical padding (64-96px) for gallery-walk pacing. Content arrangement: 50/50 split layouts pairing text with 3D renders, with text consistently on the left and renders on the right. Tinted feature cards form a 2-column grid for product panels. Navigation: sticky top bar that transitions from dark (on hero) to light (on scroll). No sidebar, no mega-menu.
Imagery
3D abstract renders are the dominant visual asset — polished chrome spheres, iridescent prismatic card forms, liquid-metal organic shapes, and faceted geometric crystals. Treatment: full-color, high-contrast, with dramatic directional lighting (caustic light patterns, lens flares, subsurface glow on metallic surfaces). Renders are never masked or placed in containers — they float in raw negative space with sharp edges. No photography, no illustration, no flat icons. Icon style: minimal outlined line icons in nav and UI chrome, monochrome white or #191b1f, thin consistent stroke weight. Role: the 3D renders are explanatory content (visualizing abstract financial concepts as physical artifacts) and brand atmosphere simultaneously. Density: text-dominant overall, but each major section features one large hero render that commands 40-60% of the viewport.
Design notes
Agent Guide
**Quick Color Reference** - text (primary): #191b1f - background: #ffffff - soft background: #f6f9f9 - border/hairline: #e6ebec - brand accent (teal): #186f64 - brand accent (violet): #536eff - brand accent (blue): #154ea5 - primary action: #186f64 (filled action) **3 Example Component Prompts** 1. **Dark Hero Section**: Full-bleed #191b1f background. Centered Albra Sans 80px weight 600 display headline in #ffffff, letter-spacing 1.6px, line-height 1.1. Below: Albra Sans 22px weight 600 subhead in #ffffff at 70% opacity, line-height 1.2. Large 3D metallic render with chrome and prismatic lighting occupying the lower 60% of the viewport, no border, no container, raw edges. 128px top padding, 96px bottom padding. 2. **Tinted Feature Card (Peach)**: Full-width panel with #fcede1 background, zero border-radius, no border, no shadow. 32px padding. Left half: Albra Sans 22px weight 600 heading in #191b1f, 16px Neufile Grotesk Extended weight 400 body text in #191b1f, teal filled button (#186f64, white text, 2px radius, 12px 27px padding), teal ghost text link beside it. Right half: 3D liquid-metal render, no container. 3. **Teal Filled Button**: Background #186f64, white text in Neufile Grotesk Extended 16px weight 500. 2px border-radius. Padding 12px vertical, 27px horizontal. No shadow, no gradient. Adjacent ghost text link in matching #186f64, no background, no border.
Material Language
The 3D renders share a consistent material vocabulary that functions as the brand's secondary color system: polished chrome, dichroic glass, liquid metal, and iridescent prismatic surfaces. These are rendered with dramatic directional lighting — single key light with lens flare, caustic light patterns on adjacent surfaces, and subtle subsurface glow. Each render is a one-off composition, but the material treatment is the system: objects that look like museum artifacts displayed under gallery spotlights. Never matte, never flat-shaded, never cartoonish.
Similar brands
Mercury
Serif headlines paired with sans-serif body, restrained color palette with single accent moments, luxury private-banking tone, near-zero border radii
Arc
Dramatic dark-to-light section transitions, premium typography mixing serif display with sans body, generous whitespace as luxury signal
Linear
Dark hero stage transitioning to clean light sections, precise typographic hierarchy, product panels with distinct color identity
Ramp
Clean financial UI with generous horizontal button padding, flat surfaces without shadows, restrained chromatic palette
Stripe
Editorial typography treatment applied to financial product, gallery-like section rhythm, confidence through typographic restraint rather than visual effects
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
