Vivid Lime
#a3fda7Primary action button fill, accent highlights, gradient mid-stop, active tag backgrounds; Display text treatment — vivid lime-to-citrus gradient on hero headlines
Swap
swap-commerce.comWebsite preview
The design language
Swap's design is a pale-mint editorial canvas anchored by a high-fashion display serif and pill-shaped vivid green CTAs. The brand reads like a luxury fashion magazine spread digitized — generous whitespace, a barely-there sage wash, and lime-green accents that feel like fresh foliage against a near-white backdrop. Everything sits lightly: thin charcoal-black borders, soft 28px blur shadows, 24px card radii, and a custom display serif that shifts between ultra-thin (100) and light (300) to whisper rather than shout. The green-to-yellow gradient display text is the only moment of visual spectacle — the rest of the system stays restrained, monochrome, and editorial, with color appearing as small functional punctuation for primary actions, tags, and active states.
Color palette
brand
Forest Depth
#0d5b3bDeep green card backgrounds, contrast surfaces, gradient anchor
Pine Shadow
#083a26Darkest green for emphasis cards, gradient endpoints, high-contrast text on light surfaces
Spring Gradient Start
#82ff87Gradient anchor for display type and decorative washes
Citrus Gradient End
#deff82Gradient endpoint for display type — yellow-green warmth in hero text
neutral
Mint Wash
#f2ffe3Page canvas, section backgrounds, hero wash — the dominant surface tone
Charcoal Ink
#000000Primary text, hairline borders, dark action buttons, icon strokes
Cream Paper
#ffffffCard surfaces, button text on dark fills, input backgrounds, elevated overlays
Stone Charcoal
#2d3637Secondary dark surface, icon fills, dark borders, muted dark mode text
Warm Mist
#e9e7e2Alternate section backgrounds, disabled states, cream-toned surfaces
Silver Border
#ccccccLight dividers, inactive borders, subtle separators
Sage Gray
#838676Muted accent card backgrounds, secondary decorative surfaces
Eucalyptus
#9cb0a8Muted sage for outlined secondary action borders, subtle green-tinted UI
Typography
Type scale
Minor Third (1.2) · 18px basedisplay-lg
120px · 100 · 0.95 · -2.04px trackingThe quick brown fox jumps
text-80
80px · 300 · 0.95The quick brown fox jumps
display
72px · 300 · 0.95 · -1.22px trackingThe quick brown fox jumps
heading
30px · 400 · 1.2 · -0.3px trackingThe quick brown fox jumps
heading-sm
24px · 500 · 1.2 · -0.24px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.4 · -0.18px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
body-sm
15px · 400 · 1.4 · -0.15px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
mainFont
- Weights
- 400, 500, 700
- Sizes
- 9px, 12px, 15px, 16px, 18px, 24px, 30px
- Line height
- 1, 1.2, 1.4, 1.5
- Letter spacing
- -0.01
mainFont — detected in extracted data but not described by AI
Additional typeface
Custom Editorial Serif (swap-serif)
- Weights
- 100, 300
- Line height
- 0.95, 1.00
- Fallback
- Playfair Display, Cormorant Garamond, or Libre Caslon Display
Display and headline serif — used exclusively for hero/headline contexts at 72–120px. Weight 100 for maximum impact headlines, weight 300 for sub-headlines. Negative letter-spacing (-0.017em) tightens the high-contrast strokes for fashion-editorial density. This ultra-thin serif against pale mint is the signature combination — it borrows from luxury print typography (Bodoni/Didone lineage) to make a commerce platform feel like a magazine spread.
Additional typeface
Custom UI Sans (swap-sans)
- Weights
- 400, 500, 700
- Line height
- 1.00, 1.20, 1.40, 1.50
- Letter spacing
- -0.16px at 16px, -0.24px at 24px
- Fallback
- Inter, Söhne, or General Sans
- Features
- "ss01" on
Primary interface and body typeface — 16px for body, 15px for compact UI, 18px for lead paragraphs, 24px and 30px for section sub-headings. Weight 400 is default, 500 for emphasis, 700 for labels and small caps eyebrow text. Slight negative tracking (-0.01em) tightens the geometric forms for a precise, modern feel. The sans is functional and quiet — it never competes with the display serif.
Additional typeface
secondaryFont
- Weights
- 100, 300
- Sizes
- 72px, 80px, 120px
- Line height
- 0.95, 1
- Letter spacing
- -0.017, -0.01
secondaryFont — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 30px
- Element gap
- 8-16px
Border radius
tags
200pxcards
24pxbadges
10pxinputs
100pxbuttons
200pxSpacing scale
2px3px4px6px7px8px10px11px12px14px15px16px19px20px24px30px32px40px50px53px80px85px160px165px200px240pxGuidelines
Do
- Use the custom display serif at weight 100 for all hero/feature headlines — this whisper-thin weight is the signature; never substitute with bold sans headlines
- Use 200px border-radius for all buttons and tags to maintain the pill-shaped language
- Pair the vivid lime (#a3fda7) fill with pure black (#000000) text on all primary CTAs for 17:1 contrast
- Apply the 90deg green-to-citrus gradient as background-clip text only on display-sized serif headlines (72px+)
- Set section gaps to 80–120px to preserve the editorial breathing room between content blocks
- Use the pale mint (#f2ffe3) as the primary canvas and reserve white (#ffffff) for card surfaces and inputs — never invert this hierarchy
- Set the display serif to line-height 0.95 and letter-spacing -0.017em to maintain the tight, fashion-editorial density
Don’t
- Never use bold or semibold weights for display headlines — the ultra-thin serif is the brand signature
- Never use sharp or small border-radii on buttons — anything below 100px breaks the pill language
- Never apply the green-to-citrus gradient to body text, UI labels, or anything below 48px
- Never use a dark or charcoal page background — the entire system is built on pale mint and white
- Never use colored body text — all paragraph and UI copy stays in black (#000000) or charcoal (#2d3637)
- Never add heavy drop shadows — the only shadow allowed is the 28px soft black-9% blur on cards
- Never use multiple chromatic accent colors simultaneously — lime is the sole accent; sage gray and forest green appear only in gradients or specific card contexts
Components
Primary Lime Pill Button
Main call-to-action across hero and section CTAsFilled vivid lime (#a3fda7) with black text. Border-radius 200px (full pill). Padding 12px 24px. Body text at 16px weight 500, -0.01em tracking. No shadow. The lime-on-mint combination creates a fresh, botanical accent against the pale canvas.
Secondary Black Pill Button
Secondary action alongside primary CTAs (e.g. "Book a Demo")Solid black (#000000) fill with white (#ffffff) text. Border-radius 200px. Padding 12px 24px. 16px weight 500. Hairline-thin or borderless. Pairs with the lime primary as a high-contrast anchor.
Outlined Ghost Button
Tertiary or alternative actionsTransparent fill with 1px black or sage (#9cb0a8) border. Border-radius 200px. 16px weight 500, black or dark charcoal text. Used for less prominent navigation or section links.
Hero Gradient Display Block
Oversized brand statement in hero and feature sectionsFull-bleed text block with the green-to-citrus linear gradient (#82ff87 → #a3fda7 → #deff82) applied as background-clip text. Custom serif at 80–120px weight 100, line-height 0.95, tracking -0.017em. Creates a botanical, fresh visual punctuation — the only place where color is allowed to be loud.
Soft Card
Content cards, feature blocks, brand story panelsWhite (#ffffff) surface on the mint canvas. Border-radius 24px. Padding 30px. No border. Soft shadow rgba(0,0,0,0.09) 0px 0px 28px 0px for a gentle, diffused lift. The generous radius + soft shadow creates a pillow-like, premium feel.
Brand Logo Grid Card
Customer/partner logo showcase sectionGrid of 5 columns × 3 rows of brand wordmarks on white or mint background. Logos are rendered in muted gray or original brand color, evenly spaced with 30–40px gaps. No card containers — logos float on the canvas to keep the editorial feel.
Section Header with Eyebrow
Section introduction with small caps label and serif headlineSmall uppercase eyebrow text in sans weight 700 at 12px, letter-spacing slightly increased, black. Main headline in serif weight 300 at 48–72px, black, tracking -0.017em. Centered or left-aligned with generous top spacing (60–80px above).
Pill Input Field
Email capture, form fields, searchWhite fill with thin (#cccccc or #000000) 1px border. Border-radius 100px (full pill). Padding 14px 24px. 16px sans weight 400. Placeholder in #999999. Focus state shifts border to vivid lime (#a3fda7).
Eyebrow Label
Small all-caps section identifier above headlinesUppercase sans weight 700 at 9–12px, black, slightly increased letter-spacing. Sits 20–30px above its associated headline. Used to introduce content sections with editorial precision.
Top Navigation Bar
Primary site navigationWhite or transparent background over mint canvas. 64–72px tall. Logo left (serif "Swap" wordmark in black). Nav links in sans 15px weight 400, black. Sign in link and lime pill CTA pinned right. No shadow or hairline bottom border.
Full-Bleed Hero Section
Opening brand statementPale mint (#f2ffe3) background filling the viewport. Centered or left-aligned serif headline at 72–120px weight 100. Subtext at 18px weight 400 in charcoal (#2d3637). Two CTAs side by side: lime primary + black secondary. Generous vertical padding (120–160px top/bottom).
Logo Strip Section
Social proof via partner/customer logosWhite or mint background. Serif heading at 30–48px weight 300 centered. Optional lime pill CTA below. Logo grid beneath with 5 columns, even spacing, logos in grayscale or muted tone. No card containers.
Statement Section Divider
Full-width editorial section break with large display textMint background with oversized serif headline at 72–120px weight 100, applied with the green-to-citrus gradient as text fill. Acts as a visual pause and brand moment between content sections.
Surfaces & elevation
Level 0
Mint Canvas
#f2ffe3Primary page background and hero wash
Level 1
White Card
#ffffffCard surfaces, input fields, elevated content blocks
Level 2
Warm Mist
#e9e7e2Alternate section background, disabled state fill
Level 3
Vivid Lime Surface
#a3fda7Active tag, highlight wash, primary CTA fill
Level 4
Forest Surface
#0d5b3bDark contrast card, emphasis surface for inverted content
Elevation is almost entirely absent — the only shadow in the system is a single soft 28px black-9% blur used sparingly on white cards to create a gentle pillow-like lift. Buttons, nav, inputs, and tags rely on fills, borders, and the 200px pill radius for their definition rather than drop shadows. This restraint preserves the flat, editorial print-magazine feel.
Soft Card
0px 0px 28px 0px rgba(0, 0, 0, 0.09)
Layout & imagery
Layout
Max-width 1200px centered container with full-bleed mint sections. Hero is a centered stack: large serif headline, short subtext paragraph, two pill CTAs (lime + black) side by side, then an oversized gradient display block below as visual punctuation. Sections alternate between mint canvas and white card surfaces, separated by 80–120px gaps. Logo showcase is a 5-column grid centered with a serif heading and optional CTA. Content sections use left-aligned serif headlines with left-aligned body text below. Navigation is a single white/transparent top bar — no sticky behavior, no sidebar, no mega-menu. The overall rhythm is vertical and editorial, like scrolling through a fashion magazine spread.
Imagery
The site is overwhelmingly text-driven and editorial — no photography, no product imagery, no lifestyle shots. The only visual elements are: (1) oversized gradient-clipped display type that acts as the hero visual, (2) a grid of partner/customer logo wordmarks in muted grayscale serving as social proof, and (3) minimal line-style icons. The mint background, gradient display text, and logo wordmarks together form the entire visual language. When illustration appears, it is likely abstract botanical or geometric in lime and green tones.
Design notes
Agent Guide
**Quick Color Reference** - Text: #000000 - Background (canvas): #f2ffe3 - Surface (card): #ffffff - Border: #cccccc (light) / #000000 (emphasis) - Accent: #a3fda7 - primary action: #a3fda7 (filled action) **Example Component Prompts** 1. Create a hero section: pale mint (#f2ffe3) full-bleed background, 120px top padding. Centered serif headline at 72px weight 100, #000000, letter-spacing -0.017em, line-height 0.95. Subtext below at 18px sans weight 400, #2d3637. Two CTAs side by side with 12px gap: a lime pill (#a3fda7 fill, #000000 text, 200px radius, 12px 24px padding, 16px weight 500) and a black pill (#000000 fill, #ffffff text, 200px radius, same padding). 2. Create a Primary Action Button: #a3fda7 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. Create a soft content card: white (#ffffff) background, 24px border-radius, 30px padding, shadow 0px 0px 28px 0px rgba(0,0,0,0.09). Eyebrow label in 12px sans weight 700 uppercase, #000000. Serif headline at 30px weight 300, #000000, -0.017em tracking. Body at 16px sans weight 400, #2d3637. 4. Create a pill input field: white (#ffffff) fill, 1px #cccccc border, 100px border-radius, 14px 24px padding, 16px sans weight 400, placeholder #999999. Focus state: border becomes #a3fda7 (vivid lime). 5. Create a gradient display statement block: pale mint (#f2ffe3) background, 100px vertical padding. Oversized serif text at 120px weight 100, line-height 0.95, letter-spacing -0.017em, with linear-gradient(90deg, #82ff87, #a3fda7 50%, #deff82) applied as background-clip text. The gradient should fill the text glyphs, not the background.
Similar brands
The Yes (Boston-based fashion commerce)
Same pale pastel canvas with a single vivid accent color, pill-shaped CTAs, and editorial serif display type for a fashion-luxury feel
Shopify (premium brand pages)
Same generous whitespace, 24px card radii, and restrained single-accent color approach for commerce content marketing
Glossier brand site
Same pale-toned canvas with botanical green accents, pill buttons, and editorial large-type hero treatment
Bambuser
Same fashion-commerce editorial aesthetic with oversized gradient display type as the hero visual moment
Aritzia brand pages
Same whisper-thin display serif headlines, near-white canvas, and pill-shaped dark secondary CTAs pairing with a vivid accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
