Mist Gradient
#d4eaefDecorative atmospheric gradient — cool, desaturated pastels (pale blue, sage, blush) used as rare background washes to add tonal depth without breaking the monochrome discipline
Figura
figura.digitalWebsite preview
The design language
Figura operates in a stark monochrome register — a pitch-black canvas (#000000) with white typography that sits on the page like neon signage. The system is built on extreme contrast, not decoration: nothing competes with the words, the work, or the whitespace. White surfaces (the product mockup card) function as proscenium stages that interrupt the dark, creating a cinematic reveal between black sections. The visual attitude is confident and unapologetic — a design studio that bills itself as 'no design thinking theater' should look like one. Type does the heavy lifting: Inter Display in tight tracking for headlines, Geist Mono in wide tracking for small labels, creating a typographic duet between editorial prose and technical metadata.
Color palette
accent
Fog Gradient
#b3d5dfSecondary atmospheric gradient — a tighter, near-monochrome cool wash for quieter decorative moments
neutral
Void
#000000Page background, section canvas — the dominant ground that swallows 80%+ of the screen and gives white text its full charge
Paper
#ffffffPrimary text, reversed buttons, featured surface cards (product mockup stage) — used sparingly so each white element reads as a deliberate reveal
Ash
#8f8f8fMuted helper text, secondary borders, disabled labels — the only non-pure neutral in the palette, carries low-emphasis metadata
Charcoal
#1f1f1fFirst elevation step — subtle panel surfaces that lift content off pure black without breaking the dark mood
Graphite
#333333Second elevation step — nested cards or dividers sitting on Charcoal surfaces
Bone
#f0f0f0Light neutral used as an off-white card surface, softer than Paper for large background fills that need reduced glare
Typography
Type scale
Major Second (1.125) · 12px basedisplay
36px · 500 · 1.22 · -1.08px trackingThe quick brown fox jumps
heading
32px · 500 · 1.36 · -0.64px trackingThe quick brown fox jumps
subheading
22px · 700 · 1.38 · -0.22px trackingThe quick brown fox jumps
text-20
20px · 600 · 1.4The quick brown fox jumps
body-lg
18px · 500 · 1.43 · 0px trackingThe quick brown fox jumps
text-16
16px · 600 · 1.5The quick brown fox jumps
body
15px · 600 · 1.5 · 0px trackingThe quick brown fox jumps
text-14
14px · 500 · 1.43The 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
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 14px, 15px, 16px, 18px, 20px, 22px, 32px, 36px
- Line height
- 1.22, 1.33, 1.36, 1.38, 1.40, 1.43, 1.50, 1.87
- Letter spacing
- -0.03em at 36px, -0.02em at 32px, -0.01em at 22px, 0 at body sizes
- Fallback
- Inter (freely available on Google Fonts and Fontshare — the 'Display' variant in the source data is Inter's optical-size display cut; standard Inter is an acceptable substitute)
Primary typeface for all body copy, headings, and UI. The tight tracking at large sizes (-0.03em at 36px, -0.02em at 32px, -0.01em at 22px) is signature — display headlines pull optically tight to feel compact and architectural rather than airy. Weight 500 for nav, 600-700 for emphasis and subheadings, 400 for body prose.
Additional typeface
Geist Mono
- Weights
- 500, 600
- Sizes
- 10px, 12px
- Line height
- 1.20, 1.33, 1.40
- Letter spacing
- 0.02em at 12px, 0.04em at 10px, 0.10em for one emphasized label instance
- Fallback
- JetBrains Mono (Google Fonts) — closest free alternative in weight and proportion
Technical labels, metadata tags, timestamps, status text. The wide tracking (+0.02em to +0.04em, with one outlier at +0.10em for an ultra-emphasized label) pushes mono text into a near-architectural-bluelprint register. Pairs against Inter's tight display to create a clear typographic hierarchy: editorial prose vs. technical annotation.
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96px
- Card padding
- 24px
- Element gap
- 8px
Border radius
cards
32pxicons
40pxsmall
8pxbuttons
56pxextraLarge
200pxSpacing scale
1px2px4px6px8px10px12px16px20px24px40px56px64px72px80px96px128pxGuidelines
Do
- Use #000000 as the page background for every section unless the section's purpose is to act as a white proscenium (product showcase, feature card) — then use #ffffff.
- Set all button border-radius to 56px. Buttons must read as pills, never as rectangles.
- Apply -0.03em letter-spacing to display headlines (32px+) and 0 tracking to body text (15-18px). The contrast between tight display and neutral body is the signature.
- Use Geist Mono at 10-12px with +0.02em to +0.04em tracking for metadata, timestamps, status labels, and tag chips — never for body prose.
- Limit color: 95%+ of the page should be pure #000000 and #ffffff. Use #8f8f8f only for true low-emphasis helper text or disabled states.
- Keep section vertical gaps at 96px. The dark canvas needs generous whitespace to let the white text breathe.
- Use 32px border-radius for large surface cards and 8px for small inline elements. Never mix — the jump from 8 to 32 to 56 is intentional and creates the system's geometric rhythm.
Don’t
- Don't introduce a chromatic brand color, accent, or button fill. The system is monochrome by conviction; adding color dilutes the discipline.
- Don't apply drop shadows. Figura uses surface color contrast (#000 vs #fff) as its only elevation mechanism — shadows are noise in a black-box environment.
- Don't use border-radius values outside the defined scale (8, 32, 40, 56, 200). The 200px token is reserved for full-curvature shapes like device mockups, not for cards or buttons.
- Don't center-align body paragraphs longer than 2 lines. Left-align prose; only center-align short statements and headlines.
- Don't use letter-spacing above 0 on Inter at any size above 22px. Tight tracking on display text is the signature — loosening it makes the type look generic.
- Don't add hover states that change color. The dark system can't afford chromatic hover affordances — use opacity (1.0 → 0.7) or a 1px border tick instead.
- Don't place white text on a non-pure-black background. If you need a surface that's not #000, use #1f1f1f or #333333 and confirm the contrast ratio stays above 12:1.
Components
Pill Primary Button
The single highest-emphasis action on the pageFilled white pill on black canvas. Background: #ffffff, text: #000000. Border-radius: 56px. Padding: 12px 24px. Type: Inter 15px / 600, letter-spacing 0. Inline-block, no border, no shadow. Compact height (~40px) keeps the button feeling like a label rather than a heavyweight UI element.
Ghost Secondary Button
Lower-emphasis companion actionTransparent fill with 1px #ffffff border on the dark canvas. Border-radius: 56px. Padding: 12px 24px. Type: Inter 15px / 500, text: #ffffff. Sits at the same height as the Pill Primary so the two read as a matched pair.
Top Navigation Bar
Minimal global headerFull-bleed black bar, ~64px tall. Logo (wordmark 'FIGURA' with a dot glyph) left-aligned in Inter 14px / 600, white. Nav links right-aligned: 'About', 'Manifesto', 'Services', 'Book a call' — last item separated by a 1px hairline divider at #333333. Links use Inter 14px / 500, white, 8px row-gap between items.
Product Showcase Card
Hero work display — the white stage that breaks the dark flowLarge surface: #ffffff background, 32px border-radius, padding 24-40px. Contains phone mockups arranged in a row. No shadow — the white-on-black contrast itself creates the lift. This card is the visual punctuation that stops the eye mid-page.
Phone Mockup Frame
Product visualization containerRealistic iPhone-frame device with dark bezel, inner screen showing the app UI. Sits on the white Product Showcase Card. No explicit border-radius applied to the frame — uses the device's natural rounded corners (~200px equivalent, matching the extraLarge radius token). Screen content (turf/golf app) is the actual color event in an otherwise monochrome system.
Partner Logo Strip
Social proof band showing past collaboratorsHorizontal row of 3-5 logos on the black canvas, right-aligned in the hero, 40px row-gap. Each logo is a simple monochrome icon + wordmark in #ffffff. The 40px border-radius is used for any circular icon elements. Logos share a single baseline, aligned to optical center of the row.
Centered Statement Block
Editorial / manifesto text blockFull-bleed black background. Max-width ~720px, centered horizontally. Headline: Inter 22-32px / 400, white, tight tracking. Sub-text appears 40-56px below. No card background — text floats directly on the void. Vertical padding: 96px top and bottom.
Hairline Divider
Visual separator between nav items or sections1px tall, 8-16px wide, color #333333. Used in nav between 'Services' and 'Book a call'. Not a full-width rule — a short tick mark that implies a break without drawing a visible line across the page.
Manifesto Footer Link
Single-link minimal footer anchorInter 12-14px / 400, white, text-decoration underline at 1px #ffffff. Center-aligned below the last text block. No background, no border — relies on underline as the only affordance.
Surfaces & elevation
Level 0
Void Canvas
#000000Page background, hero section, all editorial text sections, footer — the default ground
Level 1
Charcoal Panel
#1f1f1fFirst elevation — subtle panel containers that need to separate from void without visual weight
Level 2
Graphite Nest
#333333Second elevation — nested cards, input fields, or dividers sitting on Charcoal
Level 3
Bone Stage
#f0f0f0Light off-white surface for large cards that need a softer alternative to pure white
Level 4
Paper Procenium
#ffffffTop surface — reserved for product mockup cards and filled buttons. Rare; each instance is a deliberate reveal
Figura has zero drop shadows. Elevation is communicated exclusively through surface color contrast — moving from #000000 up through #1f1f1f, #333333, #f0f0f0, and #ffffff creates a 5-step elevation ladder without a single shadow. The system treats shadows as visual noise that would compete with the high-contrast typography. White-on-black contrast is the only lift mechanism that matters.
Layout & imagery
Imagery
Imagery is product-first, not lifestyle. The only large visuals are realistic iPhone mockups rendered at full fidelity, presented on white cards as the featured work. The golf app's screen content (turf greens, blue score badges, orange/blue tee selection dots) provides the only chromatic event in an otherwise monochrome system — the color lives inside the product, not in the chrome. No photography, no illustration, no abstract graphics. The site's visual energy comes entirely from typography and the black/white surface contrast.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #000000 - border: #333333 - accent: no chromatic accent (monochrome only) - muted text: #8f8f8f - primary action: no distinct CTA color **Example Component Prompts** 1. **Dark Hero Section**: Background #000000. Headline at 36px Inter weight 400, #ffffff, letter-spacing -1.08px, max-width 720px left-aligned. Sub-headline at 18px Inter weight 400, #ffffff, 8px gap above. Pill button (filled white): background #ffffff, text #000000, border-radius 56px, padding 12px 24px, Inter 15px / 600. Ghost button beside it: transparent background, 1px #ffffff border, border-radius 56px, text #ffffff, same dimensions. 2. **White Product Showcase Card**: Background #ffffff, border-radius 32px, padding 40px. Contains a centered row of 3 phone mockup images, 24px gap between devices. Card sits on a #000000 page background with 96px vertical padding above and below. 3. **Centered Statement Block**: Background #000000, max-width 720px centered. Headline at 22px Inter weight 400, #ffffff, letter-spacing -0.22px, text-align center. Mono metadata tag above headline: Geist Mono 10px / 600, #8f8f8f, letter-spacing 0.4px, 24px below the headline. 4. **Top Navigation Bar**: Background #000000, height 64px, padding 0 40px. Logo 'FIGURA' left-aligned in Inter 14px / 600, #ffffff. Nav links right-aligned: Inter 14px / 500, #ffffff, 8px column-gap. 1px × 8px hairline divider in #333333 before the final nav item.
Similar brands
Manual (design studio)
Same dark-canvas-plus-white-type editorial approach with product mockups as the only color event
Pentagram
Stark monochrome layouts that treat typography and whitespace as the primary design system, no chromatic brand color
Resend
Black background with white display type, tight letter-spacing on headlines, and pill-radius CTAs that disappear into the brand
Linear (marketing site)
Same full-bleed dark sections interrupted by single product showcase surfaces, with Inter Display as the primary face
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
