Bronze Glow
#f2b98bOutlined action border, link underline, decorative icon accent — warm copper against matte black, the only chromatic punctuation in the system
Mesh
clay.earthWebsite preview
The design language
Mesh presents a nocturnal editorial workspace: near-black canvas, warm amber glow bleeding up from the lower viewport, and crisp white type that reads like a magazine spread rather than a SaaS dashboard. The voice is confident but quiet — compact, information-dense, with text doing the heavy lifting and color reserved as semantic punctuation. Warm copper (#f2b98b) is the only chromatic accent, and it arrives as outlines and rules rather than fills, so actions feel invited rather than pushed. The interface borrows from print typography: wide-tracked uppercase labels (0.1–0.17em), condensed display faces for hero headlines, and generous line-height on body copy. Surfaces are flat, borders are hairline, and the lone shadow is subtle — depth comes from layering and glow, not drop shadows.
Color palette
brand
Apricot Highlight
#ffaf7cLighter amber accent for secondary decorative rules and gradient highlights
accent
Amber Wash
#d49065Gradient start color — the warm horizon glow that bleeds into the lower viewport
neutral
Obsidian Canvas
#0f0f10Page background, hero base, footer — the dominant near-black field that holds everything else
Graphite Layer
#1d1d1fElevated surfaces, icon strokes, secondary button borders — one step lighter than the canvas to create depth without elevation
Bone White
#fefef7Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Cream Paper
#f7f3eeLight surface variant, gradient terminus — a soft warm white paired with Obsidian for AAA contrast
Ash Border
#b3b3b3Hairline borders, dividers, list separators, muted structural lines — the most-used neutral border color
Slate Mute
#666666Secondary text, inactive link borders, de-emphasized chrome
Cool Steel
#868f97Body helper text, icon outlines, subtle annotation
Warm Pewter
#86868bHeading and body muted variant — the slightly warmer counterpart to Cool Steel
Pale Mist
#ccccccBody borders, very subtle structural separators
Onyx
#000000Body text on light surfaces, icon fills, deep contrast anchor
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
64px · 700 · 1The quick brown fox jumps
display
48px · 900 · 1The quick brown fox jumps
editorial
22px · 400 · 1.55The quick brown fox jumps
heading-sm
20px · 400 · 1.33The quick brown fox jumps
subheading
18px · 400 · 1.35The quick brown fox jumps
body-lg
16px · 400 · 1.38The quick brown fox jumps
text-15
15px · 600 · 1.33The quick brown fox jumps
body
14px · 700 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Verlag
- Weights
- 400, 600, 700
- Sizes
- 9, 10, 12, 14, 16, 18, 20
- Line height
- 1.00–3.00
- Letter spacing
- 0.013em at 20px → 0.167em at 9px (all-caps labels at 9–10px use 0.167em, badges at 10–12px use 0.063–0.083em, body at 16px uses 0.013em)
- Fallback
- Inter, Untitled Sans, Söhne
Primary UI and body typeface. Weight 400 for body, 600 for nav and emphasized labels, 700 for buttons and card headings. The wide letter-spacing at small sizes (0.056em–0.167em) on 9–10px creates editorial all-caps labels that read as section markers, not body text. Substitute: Inter, Untitled Sans, or Söhne for a similar geometric grotesque with editorial weight range.
Additional typeface
Verlag Condensed
- Weights
- 700, 900
- Sizes
- 48, 64
- Line height
- 1.00
- Letter spacing
- 0.014em at 48–64px — nearly tight, letting the condensed forms breathe vertically
- Fallback
- Oswald, Barlow Condensed, Roboto Condensed
Display headlines only. The compressed letterforms at weight 900 create tall, magazine-cover impact on hero text — the signature of the Mesh brand voice. Substitute: Oswald, Barlow Condensed, or Roboto Condensed Black for a tall, narrow display face.
Additional typeface
Chronicle Text G1 Roman
- Weights
- 400
- Sizes
- 22
- Line height
- 1.55
- Letter spacing
- normal at 22px
- Fallback
- Tiempos Text, Source Serif, PT Serif
Editorial subhead accent — a serif counterpoint to Verlag's sans, used sparingly for humanizing mid-page text. Substitute: Tiempos Text, Source Serif, or PT Serif.
Additional typeface
system-ui
- Weights
- 500, 600
- Sizes
- 10, 14, 15
- Line height
- 1.14–2.00
- Letter spacing
- 0.1em at 10px
- Fallback
- system-ui, -apple-system, Segoe UI
System fallback for body and heading contexts where Verlag is unavailable. The 0.1em tracking at 10px mirrors the wide-label pattern.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 10px
Border radius
cards
16pxbadges
12pximages
36pxbuttons
6pxnavPill
9999pxSpacing scale
2px4px6px7px8px9px10px12px14px15px16px18px23px24px26px27px28px36px50px56px64px66px100px104px133px140px150px154px181px200px239px264pxGuidelines
Do
- Use #fefef7 (Bone White) as the filled CTA background on dark surfaces — it provides 18.9:1 contrast against #0f0f10 and reads as warm, not clinical.
- Set small UI labels to 9–10px Verlag 600 uppercase with 0.083–0.167em letter-spacing — the wide tracking is a signature of the system.
- Use Verlag Condensed weight 900 at 48–64px for display headlines only; line-height 1.0 lets the tall forms stack tightly.
- Reserve #f2b98b (Bronze Glow) for outlined actions, link underlines, and decorative rules — never as a fill, to keep it feeling like a warm signal, not a button color.
- Apply 36px border-radius to all avatar and product-mockup images; 16px for content cards; 6px for buttons and inline links; 12px for badges.
- Layer the warm gradient (linear-gradient(95deg, #d49065 0%, #fec99b 100%)) as a bottom-of-viewport atmospheric wash — it bleeds up behind content rather than being contained in a band.
- Keep body text at 14–16px Verlag 400 with line-height 1.35–1.55; let long-form copy breathe vertically rather than tightening it.
Don’t
- Do not use #f2b98b as a filled button background — the system uses white fills for primary actions and amber only for outlined accents.
- Do not introduce additional chromatic colors; the 3% colorfulness budget means any new hue must be earned by a new functional role.
- Do not use soft, large-radius drop shadows; the single shadow in the system is an offset hairline (negative X, positive Y) — keep elevation minimal and directional.
- Do not use letter-spacing below 0.013em on body text or above 0.167em on any label; the tracking scale is the system's typographic identity.
- Do not use serif faces (Chronicle) for more than one mid-page editorial accent per screen — it is a counterpoint, not a workhorse.
- Do not apply border-radius uniformly; the 6/12/16/36 hierarchy maps to element type and losing it flattens the visual grammar.
- Do not place bright white (#fefef7) on bright surfaces — it is reserved for dark-canvas text and CTA fills; on light sections switch to #0f0f10 or #1d1d1f.
Components
Hero Headline
Primary page title64px Verlag Condensed weight 900, color #fefef7, letter-spacing 0.014em, line-height 1.0. Centered above subtext. This is the loudest element on the page — everything else is quieter.
Hero Subtext
Supporting paragraph under headline16px Verlag weight 400, color #b3b3b3, line-height 1.38, max-width ~600px centered. Muted gray-on-black to recede behind the headline.
Filled Primary Button
Main call-to-action (GET STARTED, GET MESH FREE)Background #fefef7, text #0f0f10, Verlag 600 at 14px, uppercase, letter-spacing ~0.063em, padding 14px 28px, border-radius 6px. No border. The bright white pill against the dark canvas is the strongest visual button — no shadow needed, contrast does the work.
Outlined Amber Action
Secondary or contextual link/actionBackground transparent, border 1px solid #f2b98b, text #f2b98b, Verlag 600 at 14px, padding 8px 16px, border-radius 6px. The amber outline is the only chromatic interactive element — use sparingly for contextual actions, not for primary CTAs.
Ghost Text Link
Inline navigation and footer linksNo background, no border, text #b3b3b3 or #fefef7, Verlag 400 at 14–16px. Underline appears on hover in #f2b98b.
Centered Nav Pill
Primary site navigationPill-shaped container (border-radius 9999px) with semi-transparent dark background, holding 4 nav items (RELEASES, RESOURCES, COMPANY, PRICING) in Verlag 600 at 12px uppercase, letter-spacing ~0.071em, text #fefef7. Sits centered between logo and sign-in actions.
Sign In Link
Authenticated entry pointPlain text 'SIGN IN' in Verlag 600 at 12px uppercase, letter-spacing ~0.071em, color #fefef7. Sits left of the primary CTA in the header.
Eyebrow Label
Section markers and small annotationsVerlag 600 at 9–10px uppercase, letter-spacing 0.083–0.167em, color #b3b3b3 or #f2b98b. The wide tracking is a signature — these read as editorial captions, not UI labels.
Product Mockup Card
App preview in the heroLarge card with background #1d1d1f, border-radius 16px, subtle hairline border + offset shadow (see elevation). Contains a three-column app UI mockup with sidebar nav, activity feed, and detail panel. Rounded avatar images at 36px radius sit inside.
Activity Feed Row
Item in the product mockup feedRow layout with 24px avatar, bold name, action text, timestamp right-aligned. Verlag 400/600 at 12–14px, name in #fefef7, description in #b3b3b3, timestamp in #666666. Dividers are 1px #b3b3b3 at very low opacity.
Avatar Group
Stacked user avatarsOverlapping circular images (36px radius), 2–4 avatars shown with negative margin. No border, no shadow — the overlap itself creates the grouping effect.
Badge / Tag
Status and category markersPill or rounded-rect (12px radius), background transparent or very dark, text in Verlag 600 at 10–12px uppercase, letter-spacing ~0.063em, border 1px #fefef7 or #b3b3b3. Amber variant uses border #f2b98b for emphasis.
Social Proof Logo Strip
Brand logos under the heroHorizontal row of monochrome white logos (Notion, Disney, Stanford, IDEO, Tumblr, McKinsey) on the dark canvas. Logos are uniformly sized, evenly spaced with 40–60px gaps, and rendered in #b3b3b3 or #fefef7 with a small uppercase eyebrow label above.
Announcement Banner
Top-of-page news or updateSingle line of Verlag 400 at 14px centered above the hero, with a bold name ('Clay' in this case) and a right-arrow link. Color #b3b3b3 base, #fefef7 for the bolded name, amber #f2b98b for the arrow link.
Surfaces & elevation
Level 0
Obsidian Canvas
#0f0f10Page base, hero, footer — the ground plane
Level 1
Graphite Layer
#1d1d1fProduct mockup card, elevated UI panels, secondary surfaces
Level 2
Warm Horizon
#d49065Gradient atmosphere zone in the lower viewport — decorative only
Level 3
Cream Paper
#f7f3eeInverse light sections, gradient terminus, high-contrast blocks
Level 4
Bone White
#fefef7Filled CTA, nav-pill background, badge borders — the brightest interactive surface
Elevation is minimal and directional — a single hairline border plus an asymmetric offset shadow (negative X, positive Y) that suggests light from the upper-left. The system avoids soft drop shadows; depth comes from the warm gradient bleeding through the page and from layering near-black surfaces, not from blur halos.
Product Mockup Card
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) -8px 12px 22px 0px
Layout & imagery
Layout
Centered, max-width 1200px page model with full-bleed dark canvas. The hero is a single centered column: announcement banner → large condensed headline → 2-line subtext → white filled CTA, with the product mockup card overlapping the lower viewport where the warm gradient begins. Navigation is a centered pill above the headline, with logo and sign-in/CTA flanking it. Below the hero, sections flow as centered single-column or 2-column text-plus-visual blocks with 80px vertical gaps. The social-proof logo strip is a full-width centered row. The overall rhythm is unhurried and editorial — generous section gaps with compact internal spacing. No sidebar, no sticky header pattern, no card grid layouts — the page reads top-to-bottom as a continuous narrative.
Imagery
Imagery is sparse and product-centric. The hero features a large product-mockup card showing the Mesh app interface rather than lifestyle photography. Avatar groups use real circular portraits (36px radius) for social proof. A social-proof logo strip displays monochrome white partner logos. The lower viewport carries a warm amber-to-cream gradient as atmospheric backdrop — decorative, not informational. No stock photography, no 3D renders, no illustrations. Icons are minimal and monoline. The visual weight is carried by type and the gradient atmosphere, not by imagery.
Design notes
Agent Guide
**Quick Color Reference** - text (on dark): #fefef7 - text (muted): #b3b3b3 - text (subtle): #666666 - background (canvas): #0f0f10 - surface (elevated): #1d1d1f - border (hairline): #b3b3b3 - accent (amber): #f2b98b - primary action: #f2b98b (outlined action border) **Example Component Prompts** 1. Create an Outlined Primary Action: Transparent background, #f2b98b border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button. 2. *Centered nav pill*: 9999px radius, semi-transparent dark fill, padding 6px 8px, containing 4 items at 12px Verlag 600 uppercase, letter-spacing 0.071em, text #fefef7, separated by 16px gaps. Sits centered in a max-width 1200px header. 3. *Product mockup card*: 16px border-radius, background #1d1d1f, hairline border 1px #b3b3b3, offset shadow rgba(0,0,0,0.06) 0 0 0 1px + rgba(0,0,0,0.08) -8px 12px 22px 0. Contains a 3-column app UI with sidebar (avatar 36px radius), activity feed rows (14px Verlag 400 names in #fefef7, 12px timestamps in #666666, 1px #b3b3b3 dividers at low opacity), and right detail panel. 4. *Outlined amber action link*: transparent background, 1px solid #f2b98b border, 6px radius, padding 8px 16px, text 14px Verlag 600 uppercase, letter-spacing 0.063em, color #f2b98b. Use for secondary/contextual actions only. 5. *Eyebrow label*: 9–10px Verlag 600 uppercase, letter-spacing 0.167em, color #b3b3b3. Sits centered above section content with 24px margin-bottom. Reads as editorial caption, not UI label.
Gradient System
The single approved gradient is the warm horizon wash: linear-gradient(95deg, #d49065 0%, #fec99b 100%). It is positioned in the lower viewport, bleeding upward behind content rather than being contained in a card or band. Treat it as atmospheric chrome, not a brand element — it never appears inside components, only behind them.
Typography Personality
The system pairs three faces: Verlag (geometric grotesque) for UI and body, Verlag Condensed (compressed sans) for hero display, and Chronicle Text G1 (transitional serif) for occasional editorial accents. The wide-tracked all-caps label is the most recognizable typographic signature — 9–10px with 0.083–0.167em tracking reads as magazine sidebar text, not interface chrome. Body copy is unadorned 14–16px Verlag 400 with generous line-height; the voice is unhurried.
Similar brands
Linear
Same dark-canvas editorial approach with monochrome neutrals, hairline borders, and a single restrained accent for actions
Arc
Compact information-dense layout with wide-tracked all-caps labels and warm-tinted whites (#fefef7 family) instead of pure white
Notion
Near-black canvas with white text, condensed display type for hero headlines, and minimal chromatic accent usage
Vercel
Dark-first design with centered nav pill, white filled CTA pattern, and product-mockup-over-gradient hero composition
Pitch
Editorial dark UI with serif accents on a sans body, wide-tracked labels, and a single warm gradient as atmosphere
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
