Spring Pulse
#a7f175Primary action buttons, active states, the single chromatic accent — a high-chroma lime-green that reads as switched-on against the black canvas
Affinity
affinity.studio
Website preview
The design language
Affinity inhabits a black-void gallery: a single near-black canvas with editorial-scale serif headlines floating over it, surrounded by scattered design work as if pinned to an invisible wall. The visual grammar pairs a massive custom serif (reaching 112px at near-unity line-height) with a neutral sans for everything utilitarian, creating tension between gallery gravitas and interface clarity. A single electric spring-green — #a7f175 — is the only chromatic signal, used sparingly for the one action that matters. Images carry soft, directional drop shadows that suggest stage lighting on a dark backdrop. Surfaces stay nearly indistinguishable from the canvas; the system communicates through type scale, whitespace, and that one green pulse rather than elevation or color-coded regions.
Color palette
brand
accent
Iris
#9e9effOutlined-link borders, image accent strokes — the cool violet used for secondary chromatic borders
Amethyst
#a370fcOutlined-link borders, body text accents — a warmer violet paired with Iris for link systems
Cobalt
#3860beLink borders, hover-stroke accents — the deeper blue for interactive outlines
Tide
#83d9e1Single-card background highlight, occasional surface wash — the teal that appears as a breathing accent
Saffron
#fdbd68Icon accents, body emphasis, warm stroke highlights — a yellow punctuation color used at micro scale
neutral
Void
#000000Page canvas, hero background, deepest surface — the negative space everything floats on
Obsidian
#211d1dElevated surface, button fills, subtle card backgrounds — one step off true black to distinguish interactive elements
Carbon
#0f1015Card surfaces, body text on light flips, icon fills — the workhorse dark for contained components
Bone
#ffffffHeadline text, body text on dark canvas, nav fill, button fills on dark — maximum-contrast white that never competes with the green accent
Ash
#373434Card borders, hairline dividers on dark — barely visible structural lines
Smoke
#707477Muted body text, secondary copy, placeholder — readable but recedes
Fog
#c4c4c4Subtle borders, disabled strokes, soft separators
Taupe
#b0a79eFooter dividers, warm-neutral hairline accents
Sand
#e0dcd6Warm off-white for inverted button fills or light-section surfaces
Slate
#505050Deep body text, pressed states
Typography
Type scale
Minor Third (1.2) · 18px basedisplay-2xl
112px · 700 · 0.96The quick brown fox jumps
display-xl
80px · 700 · 0.96The quick brown fox jumps
display-lg
56px · 700 · 0.98The quick brown fox jumps
display
48px · 400 · 1.1The quick brown fox jumps
heading-lg
38px · 500 · 1.2 · 0.01px trackingThe quick brown fox jumps
heading
32px · 400 · 1.25 · 0.01px trackingThe quick brown fox jumps
heading-sm
24px · 401 · 1.3 · 0.01px trackingThe quick brown fox jumps
subheading
19px · 600 · 1.4 · 0.01px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times (system)
- Weights
- 400
- Sizes
- 10px
- Line height
- 1.20
- Fallback
- Times New Roman
Captions, micro-meta text — the system serif fallback for fine print that should feel editorial, not utilitarian
Additional typeface
Affinity Serif Variable
- Weights
- 400, 700
- Sizes
- 48px, 56px, 80px, 112px
- Line height
- 0.96–1.10
- Letter spacing
- 0
- Fallback
- Playfair Display
Display headlines only. The signature element — tight 0.96–1.10 line-height lets descenders nearly touch the line below, creating an editorial poster feel. The italic 'all' in headlines is the brand's voice. At 112px with weight 400 it whispers authority; the type is the artwork.
Additional typeface
Canva Sans
- Weights
- 400, 500, 600, 700
- Sizes
- 13px, 14px, 16px, 19px, 24px, 32px, 38px
- Line height
- 1.20–1.57
- Letter spacing
- 0.01em
- Fallback
- Inter
All UI, body, nav, buttons, subheads. The neutral workhorse with a subtle 0.01em tracking that gives it a slightly airy feel without feeling loose. Weight 500 for subheads, 600–700 for nav and button text.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.2, 1.8
Arial — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 16px
- Element gap
- 8-16px
Border radius
nav
4pxcards
8pxpills
9999pxbuttons
8pxlarge-cards
16pxSpacing scale
1px2px4px8px9px10px12px13px16px20px24px29px32px45px48px64px69px80px88px96px111px128px136px144px240px313pxGuidelines
Do
- Use Spring Pulse #a7f175 only for the one primary action on screen — never for decoration, tags, or secondary buttons
- Let the Affinity Serif Variable headline reach 80–112px with line-height 0.96–1.10 so descenders crowd the next line
- Pair every display headline with Canva Sans 400 body copy at 14–16px — the serif-sans tension is the brand voice
- Give every floating artwork image the directional shadow: rgba(0,0,0,0.32) -20px 34px 64px 0 — the shadow is what makes them look pinned to a dark wall
- Use 8px radius for buttons and cards, 4px for nav and links, 9999px for pill tags — do not mix these tiers
- Keep the canvas #000000 or #211d1d for all hero and section backgrounds — never introduce a light surface mid-page
- Set display headlines to weight 400, not 700 — the whisper weight is the editorial authority
Don’t
- Do not use Spring Pulse on more than one element per viewport — it loses meaning when it repeats
- Do not apply the floating-artwork shadow to UI cards or buttons — it is reserved for showcase images only
- Do not set the Affinity Serif at body sizes (14–16px) — it is a display face, not a text face
- Do not use colored backgrounds for cards on the dark canvas — rely on 1px #373434 borders instead
- Do not introduce gradients as decorative fills — the only gradient is the green-to-teal radial on accent moments
- Do not let the CTA button radius deviate from 8px — pill-shaped CTAs break the geometric discipline
- Do not center the nav or push the logo away from the left edge — the asymmetry is intentional
Components
Top Navigation Bar
Minimal site header with logo, nav items, and single CTAFull-width, transparent on dark canvas. Logo 'affinity' in Canva Sans 700, white, left-aligned. Center nav items in Canva Sans 400–500 white at 14–16px. Right CTA: 'Get Affinity' pill button with download icon, 8px radius, Spring Pulse (#a7f175) fill, #0f1015 text, 12px 16px padding. 4px border-radius on nav dividers.
Primary CTA Button (Spring Pulse)
The single most important action on any pageSpring Pulse #a7f175 background, #0f1015 text, Canva Sans 500 at 14px, 8px border-radius, 12px 24px padding. Subtle 1px outer ring at rgba(14,19,24,0.07) and soft 18px shadow at rgba(47,64,80,0.25) for lift against the void. Download icon optional, 4px gap from text.
Secondary Ghost Button
Secondary action with low visual weightTransparent or #ffffff fill on dark, #000000 text, 8px radius, 12px 24px padding, Canva Sans 500 14px. No border or 1px hairline #373434. Sits quietly next to the primary without competing.
Editorial Display Headline
The signature hero/section headlineAffinity Serif Variable, weight 400, 80–112px on desktop, white #ffffff. Line-height 0.96–1.10 — descenders crowd the line below. Italic word ('all') in weight 400 italic. Tight letter-spacing 0. May break across two lines with generous vertical stacking.
Subheadline / Lede
Supporting copy beneath the display headlineCanva Sans 400, 16px, Smoke #707477 or white #ffffff at reduced opacity. Max-width ~520px centered. Line-height 1.5. Reads as quiet, factual context beneath the loud serif.
Floating Artwork Card
Scattered design showcase images around the heroFull-color image content (no overlay), hard-edge crop, ~200–280px on desktop. Soft directional drop shadow: rgba(0,0,0,0.32) -20px 34px 64px 0 — the shadow does the gallery-lighting work. Scattered asymmetrically around the headline with rotation implied by placement. No border, no radius — the images sit raw against black.
Cookie Consent Banner
Bottom-pinned consent stripWhite #ffffff background, full-width bar fixed to bottom. Left: bold 'Affinity Cookies' heading in Canva Sans 700, body copy in Canva Sans 400 13–14px. Right: three buttons — 'Manage Cookies' (text/ghost), 'Reject All' (outlined), 'Accept All' (filled Spring Pulse, same spec as primary CTA). 16–24px vertical padding.
Image-Frame Card (Contained)
Cards with visible boundaries on dark8px radius, Carbon #0f1015 or Obsidian #211d1d background, 1px hairline #373434 border. 16px padding. Used for secondary content blocks where a floating image would lose definition. No shadow — the border is the definition.
Outlined Link / Text Button
Inline links and micro-actions4px radius, transparent fill, 1px border in Iris #9e9eff, Amethyst #a370fc, or Cobalt #3860be. Canva Sans 400–500, 14–16px, text in matching hue or white. Sits inline with body copy as a clickable token.
Footer Divider
Hairline separator at page bottom1px solid Taupe #b0a79 at 8–32% opacity, full-width, 24–48px vertical margin above and below. Defines the end of the dark stage.
Icon (UI)
Small functional icons in nav and controlsOutlined, 1.5–2px stroke, white or Saffron #fdbd68 fill, 16–20px. Canva Sans context — no fill background, no circle wrapper. Icons float inline with text.
Surfaces & elevation
Level 0
Void Canvas
#000000Page background, hero stage — the base everything floats on
Level 1
Obsidian Surface
#211d1dElevated panels, button fills, subtle containment
Level 2
Carbon Card
#0f1015Card surfaces, contained content blocks, icon fills
Level 3
Bone Inversion
#ffffffInverted surfaces for light sections, primary button fill on dark
Elevation is theatrical, not functional. The system uses only three shadow patterns: the heavy directional shadow for floating showcase images (creates the gallery-pin illusion), a soft close shadow for the green CTA (makes it feel pressed toward you), and a thin inset highlight for light-section buttons. Card surfaces never lift — they are defined by hairline #373434 borders against the dark canvas, keeping the stage flat so the serif type and scattered images stay the visual focus.
Floating artwork image
rgba(0, 0, 0, 0.32) -20px 34px 64px 0px
Primary CTA button
rgba(14, 19, 24, 0.07) 0px 0px 0px 1px, rgba(47, 64, 80, 0.25) 0px 2px 18px 0px
Inset highlight (buttons on light)
rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset
Layout & imagery
Layout
Full-bleed dark hero is the dominant page model — no max-width container on the hero, the black canvas extends edge to edge. The headline is centered horizontally and vertically within the viewport, surrounded by 5–7 scattered artwork images at varying scales, positioned asymmetrically above, below, left, and right of the type. Below the headline: centered CTA pair (primary + ghost), then a small 'affinity × Canva' co-brand mark. Section rhythm: dark canvas continues with generous vertical breathing room (80px section gaps), each section punctuated by either a centered editorial headline or a scattered image arrangement. Navigation is a thin transparent top bar with logo left, center nav, single CTA right — no shadow, no border, it floats on the canvas. The cookie banner is a white full-width strip pinned to the bottom, breaking the dark stage with a single bright bar.
Imagery
Imagery is the product. The site surrounds its headlines with full-color design work — editorial layouts, album covers, motion stills, portrait photography — scattered asymmetrically around the type as if pinned to a gallery wall. Each image is a hard-edge crop with no rounded corners and no frame, floating on the black canvas with a heavy directional drop shadow. The images are the proof of the product's capability: a green figure, a floral explosion, a neon explosion, a fashion spread, a concert poster. No lifestyle photography, no abstract gradients, no product screenshots of the software itself. Photography style: high-saturation, high-contrast, editorial — the work of designers using the tools. Icons are outlined, 1.5–2px stroke, white or saffron-accent, no filled backgrounds.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (on dark canvas) - background: #000000 - card surface: #0f1015 - border: #373434 - accent / primary action: #a7f175 (filled action) - muted text: #707477 **3-5 Example Component Prompts** 1. Create a Primary Action Button: #a7f175 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **Floating artwork card**: Raw image, no border, no radius, no background. Apply shadow rgba(0,0,0,0.32) -20px 34px 64px 0. Position absolutely in hero, rotated 0–5deg for gallery feel. 4. **Card with hairline border**: #0f1015 background, 1px #373434 border, 8px radius, 16px padding. Canva Sans 400 14px white body. No shadow — the border is the definition.
Similar brands
Linear
Same near-black canvas, single chromatic accent for primary action, and editorial display headlines that dominate the viewport — the dark-stage-with-one-spot-of-color grammar
Arc browser
Same scattered-image-around-headline hero pattern, massive serif display type, and the black-canvas-as-gallery treatment
Figma marketing site
Same dark hero with floating showcase work, minimal nav, and a single vivid green as the only chromatic signal
Framer
Same display-scale serif headlines on a dark canvas, scattered product work around the type, and high-contrast minimal nav
Pitch
Same dark editorial-poster language, tight serif line-heights, and the pattern of letting showcase content float asymmetrically around bold display headlines
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
