Mint Wash
#c7f8fbTeal wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Schema
schema.figma.comWebsite preview
The design language
Schema by Figma runs on a stark monochrome architecture punctured by bold flat-color geometric murals. The UI uses pure black, near-black, and white with hairline gray borders — no shadows, minimal radii, no chromatic accents in the interface itself. Color appears only as decorative art (circles, hexagons, rectangles in purple, teal, maroon, green, orange) and as solid-background speaker portraits. Typography is the loudest element: Figma's custom display face at 56–86px with extreme negative tracking (-0.02em) and tight 0.90 line-height makes headlines feel carved rather than typeset. The hero inverts convention with a black canvas and an oversized outlined Register button; content sections then alternate through full-bleed colored bands before resolving into a clean white speaker grid.
Color palette
accent
Emerald Band
#24cb71Full-bleed accent section background — a bright green horizontal band that closes the hero composition
neutral
Obsidian
#000000Hero canvas, heavy structural borders, icon strokes — sets the high-contrast keynote-stage mood for the opening fold
Ink
#0f0f0fBody and heading text on light surfaces, dark section borders
Paper
#ffffffPage background, speaker card surfaces, light-section text on dark hero
Ash
#e2e2e2Hairline borders, subtle icon fills, structural dividers between UI regions
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
86px · 400 · 0.9 · -1.72px trackingThe quick brown fox jumps
heading-lg
72px · 400 · 0.9 · -1.44px trackingThe quick brown fox jumps
heading
56px · 400 · 1 · -1.12px trackingThe quick brown fox jumps
heading-sm
32px · 400 · 1.1 · -0.32px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.2 · -0.24px trackingThe quick brown fox jumps
body-md
18px · 400 · 1.22 · 0.54px trackingThe quick brown fox jumps
body
16px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
caption
13px · 400 · 1.2 · -0.26px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Source Sans Pro
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Source Sans Pro — detected in extracted data but not described by AI
Additional typeface
Figma Sans Display
- Weights
- 400, 700
- Sizes
- 16, 24, 32, 56, 72, 86
- Line height
- 0.90–1.40
- Letter spacing
- -0.02em at 72–86px, -0.01em at 24–32px, 0.03em for some 16px contexts
- Fallback
- Inter Tight or a custom variable sans like General Sans
Headlines and display copy — used at 56–86px for hero ('Schema by Figma', 'Meet our speakers!') with tight leading (0.90–1.10) and -0.02em tracking that makes type feel carved from a block. Weight 400 carries the design; 700 is reserved for emphasis.
Additional typeface
Figma Sans Text
- Weights
- 400, 600
- Sizes
- 13, 16, 18
- Line height
- 1.20–1.22
- Letter spacing
- -0.02em at 13px, 0.03em at 18px
- Fallback
- Inter or Söhne
Body, nav, button labels, supporting text. The companion text face at modest sizes (13–18px) with weight 400 as default and 600 for buttons/labels. -0.02em at 13px prevents the small type from feeling loose; 0.03em at 18px gives labels air.
Additional typeface
Figma Mono
- Weights
- 400
- Sizes
- 16
- Line height
- 1.30–1.40
- Letter spacing
- 0.03em
- Fallback
- JetBrains Mono or IBM Plex Mono
Code or metadata snippets — used sparingly at 16px with 0.03em tracking for an architectural, monospaced accent in a world of proportional text
Additional typeface
Figma VF-normal-700-75
- Weights
- 400
- Sizes
- 24px
- Line height
- 1.2
Figma VF-normal-700-75 — detected in extracted data but not described by AI
Additional typeface
Figma VF-normal-400-100
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
- Letter spacing
- 0.03
Figma VF-normal-400-100 — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 60px
- Card padding
- 16px
- Element gap
- 24px
Border radius
tags
0pxcards
0pxbuttons
0pxspeaker-images
0pxSpacing scale
1px2px4px8px16px17px20px22px24px32px48px60px64px80px120pxGuidelines
Do
- Use 0px border-radius on all cards, buttons, images, and tags — sharp corners are non-negotiable
- Pair the dark hero with a large outlined button (1px Paper border, no fill); fill it on hover
- Apply Figma Sans Display at 56–86px with -0.02em tracking and 0.90–1.00 line-height for any headline that needs to feel carved
- Reach 0.03em tracking on small labels (13–18px) to give uppercase eyebrows and nav links air
- Alternate full-bleed colored bands (Mint Wash #c7f8fb, Emerald Band #24cb71) between dark and light sections to create visual rhythm
- Use Ash (#e2e2e2) 1px borders for hairline separation; reserve Ink (#0f0f0f) borders for emphasis on light sections
- Keep the UI monochrome — let color appear only in decorative murals and speaker portrait backgrounds, never in controls
Don’t
- Don't add border-radius to any element — sharp corners define the system's poster-like character
- Don't use shadows, glows, or blur effects — flat is the only elevation language here
- Don't introduce a chromatic CTA color — the system is intentionally monochrome, actions are outlined or text-only
- Don't set body text below 16px; captions can go to 13px but never smaller
- Don't let display headlines exceed 0.90–1.00 line-height — tight leading is what makes them feel architectural
- Don't color-fill buttons with brand hues; outlined Paper-on-Obsidian is the only button pattern in the system
- Don't separate light sections with gray bands — use either full-bleed color or seamless Paper-to-Paper flow
Components
Top Navigation Bar
Persistent header across all sectionsTransparent on the black hero, Paper on light sections. Left: small monogram logo (32px square, Obsidian or Paper fill). Right: 2–4 text links (FAQ, Agenda) at 16px Figma Sans Text weight 400, tracking 0.03em. 16px horizontal padding, 20px vertical. No background fill, no border.
Hero Outlined Register Button
Primary action on the dark heroFull-width on the hero, 56–64px tall. 1px Paper border, no fill, Paper text. 0px radius. Text at 18–24px Figma Sans Text weight 400, centered. On hover, fills to Paper with Obsidian text.
Eyebrow Label
Section pre-heading (VIRTUAL, SPEAKERS, REGISTER)12–13px Figma Sans Text weight 400 or 600, uppercase via CSS, tracking 0.03em. Color is Ink on light sections, Paper on dark. Sits 16–24px above the headline.
Display Headline
Section hero titles ('Schema by Figma', 'Meet our speakers!', 'Join us virtually!')Figma Sans Display weight 400, 56–86px, line-height 0.90–1.00, letter-spacing -0.02em. Ink color on light sections, Paper on dark hero. No max-width constraint — fills available column.
Geometric Mural Banner
Decorative full-bleed section divider between hero and contentFull viewport width, ~200–300px tall. Flat 2D art: circles, rectangles, hexagons, chevrons in saturated palette (indigo #4a4afc, lavender #b8b3ff, teal #c7f8fb, maroon #7a2e2, orange #ff6b2c, emerald #24cb71, yellow #ffe74a). No gradients, no shadows. Edges are hard/rectilinear where blocks meet the canvas.
Speaker Portrait Card
Speaker in the gridSquare portrait image, 0px radius, fills a 4-column grid. Each portrait sits on a solid background color (mint, emerald, indigo, lavender, orange, yellow). Below: name in Figma Sans Text weight 600 at 18px, title/role in Figma Sans Text weight 400 at 16px — both in Ink. 24px gap between portrait and text, 48px between cards vertically.
Event Status Notice
Inline status banner ('Event ended')Centered or right-aligned block. Small triangular warning icon (~24px, Ink fill) above label. Label in Figma Sans Text weight 600 at 18–24px, subtext at 16px weight 400. Sits on the cyan Mint Wash band.
Full-Bleed Color Section
Horizontal content band with colored backgroundEdge-to-edge, ~200–400px tall, Paper or Ink text depending on contrast. Internal padding 60px top/bottom, 24–48px left/right. No border, no radius, no shadow.
Date/Time Metadata Block
Event date and time under hero headlineTwo lines: bold date (16–18px Figma Sans Text weight 600) above time range (16–18px weight 400). Inherit text color from section (Paper on dark hero). 8–16px gap between lines.
Grid Section Header
Section title block above card grid (e.g., "Meet our speakers!")Eyebrow label + display headline, left-aligned. 24px gap between label and headline. Sits 48–60px above the grid.
Surfaces & elevation
Level 0
Dark Hero Canvas
#000000Opening fold, sets editorial tone, contains Register CTA and decorative mural
Level 1
Colored Band
#c7f8fbCyan section separating hero from content
Level 1
Colored Band
#24cb71Green section band
Level 2
Paper
#ffffffMain content canvas for speaker grid and text sections
Shadowless flat design — separation is achieved through hard edges, color blocks, and 1px hairline borders in Ash (#e2e2e2) or Ink. The absence of shadow is a deliberate editorial choice: every element is printed flat onto the page like a poster, never floating above it.
Layout & imagery
Layout
The page follows a top-to-bottom band model. It opens with a full-bleed black hero (centered or left-aligned content block, full-width outlined Register CTA) that bleeds into a ~250px-tall geometric mural banner spanning the viewport width. Below the mural, a light teal (Mint Wash) band holds the secondary 'Join us virtually!' CTA and an event status notice, followed by a bright green (Emerald Band) strip. The page then resolves into a max-width 1200px white content area with 60px vertical section gaps, opening with a left-aligned section header (eyebrow + display headline) above a 4-column grid of speaker cards. Navigation is a minimal top bar — logo left, 2 text links right, transparent on the dark hero and Paper on light sections. There is no sidebar, no sticky header beyond the nav, and no modal overlays.
Imagery
The site uses bold flat-color geometric illustration as a hero divider: circles, rectangles, hexagons, chevrons, and dots in a saturated palette (indigo, lavender, teal, maroon, orange, emerald, yellow) with hard rectilinear edges and no gradients or shadows. Speaker portraits are desaturated or black-and-white photographs, each placed on a solid color background (mint, emerald, indigo, lavender, orange, yellow) to create a poster-grid effect. Icons are minimal and mono — a single triangular warning glyph is the only iconographic element visible. The overall treatment is editorial-poster: no soft photography, no lifestyle shots, no depth — everything is either flat color, flat type, or a flat photo on flat color.
Design notes
Agent Guide
**Quick Color Reference** - text on light: #0f0f0f (Ink) - text on dark hero: #ffffff (Paper) - page background: #ffffff (Paper) - hero background: #000000 (Obsidian) - hairline borders: #e2e2e2 (Ash) - accent section band 1: #c7f8fb (Mint Wash) - accent section band 2: #24cb71 (Emerald Band) - primary action: no distinct CTA color **Example Component Prompts** 1. **Dark hero with outlined Register button**: Full-bleed Obsidian (#000000) background, left-aligned content with 60px horizontal padding. Eyebrow 'VIRTUAL' at 13px Figma Sans Text weight 400, uppercase, tracking 0.03em, Paper color. Headline 'Schema by Figma' at 72px Figma Sans Display weight 400, line-height 0.90, letter-spacing -1.44px, Paper. Date/time block at 18px Figma Sans Text, Paper, 16px gap between lines. Register button: full-width within content column, 64px tall, 1px Paper border, 0px radius, no fill, 'Register' at 24px Figma Sans Text weight 400 centered, Paper text. 2. **Speaker card in a 4-column grid**: 0px radius portrait image, 1:1 aspect ratio, placed on a solid lavender (#b8b3ff) background. 24px gap below portrait, then name 'Loredana Crisan' at 18px Figma Sans Text weight 600 in Ink, title 'Chief Design Officer / Figma' at 16px weight 400 in Ink with 4px line gap. Cards separated by 48px vertical and 24px horizontal gaps; grid sits inside a 1200px max-width container with 60px section padding above. 3. **Geometric mural divider**: Full-bleed, 250px tall, no padding. Layer flat shapes: 200px indigo (#4a4afc) circle bottom-left, 120px lavender (#b8b3ff) rectangle top-center, 80px maroon (#7a2e2e) hexagon right-center on a 120px mint (#c7f8fb) square, 60px orange (#ff6b2c) circle far right, 180px emerald (#24cb71) rectangle bottom-right. No gradients, no shadows, no border-radius. 4. **Light section header**: Paper background. Eyebrow 'SPEAKERS' at 13px Figma Sans Text weight 600, uppercase, tracking 0.03em, Ink color. 16px gap to headline 'Meet our speakers!' at 56px Figma Sans Display weight 400, line-height 1.00, letter-spacing -1.12px, Ink. 60px gap below to grid. 5. **Event status notice on colored band**: Mint Wash (#c7f8fb) full-bleed section, 60px vertical padding, right-aligned content block. 24px Ink triangular warning icon, 16px gap, label 'Event ended' at 18px Figma Sans Text weight 600 Ink, subtext 'This event has already ended.' at 16px weight 400 Ink.
Similar brands
Config (Figma's annual conference)
Same Figma Sans Display typography at hero scale, same poster-mural art style, same monochrome UI with full-bleed colored bands
Apple Event pages
Black hero with large outlined CTA, editorial display type at extreme scale, full-bleed color band transitions between sections
Figma Config 2022–2024 microsites
Identical geometric flat-color illustration system and Figma Sans pairing, with speaker portraits on solid color backgrounds
Are.na event pages
Editorial-poster layout, sharp 0px corners, monochrome UI punctuated by bold flat-color section bands
It's Nice That conference coverage
Design-zine aesthetic with oversized display headlines, tight tracking, and full-bleed decorative color blocks
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
