Lime Pulse
#4cc02bGreen wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color
Gleap
gleap.ioWebsite preview
The design language
Gleap operates in a warm-paper product language: a slightly cream canvas carries flat, low-elevation surfaces in sage-tinted stone, with almost no chromatic presence — one vivid green dot punctuates an otherwise fully achromatic system. The whole product reads as architectural: weight 400 headlines, tight -0.01em tracking, and pill-shaped controls feel drawn rather than printed. Color is rationed to functional punctuation (status dots, active nav dots, gradient-free product screenshots) while the primary CTA is a matte black capsule, not a brand-colored button. Surfaces stack from canvas → white card → sage tile → glass overlay without ever using shadows as decoration; depth is communicated through color temperature shifts from cool gray to warm stone.
Color palette
accent
neutral
Linen Canvas
#edede8Page background, section surfaces — warm off-white that pushes the whole system toward paper rather than screen
Frosted White
#ffffffCard surfaces, elevated panels, glass overlays — clean white floats above the linen canvas for primary content
Warm Stone
#dbdbd2Secondary card fills, secondary button backgrounds, accent surface — sage-tinted beige gives neutral elements warmth without becoming chromatic
Pebble
#c0c0c0Circular accent tiles, muted card backgrounds — cool gray that sits one step back from stone for de-emphasized surfaces
Graphite Ink
#141414Primary action button background, dark text on light surfaces — near-black with a hair of warmth, anchors every CTA
Charcoal Body
#292929Primary body and heading text — readable but softer than pure black, keeps long-form copy from feeling harsh
Slate Caption
#6f6f6eSecondary body, helper text, descriptive copy — carries the most volume of any text color
Ash Subheading
#8f8f8eSubtle labels, muted headings, decorative type — sits between caption and hairline
Iron Nav
#353535Secondary body text, navigation labels, and subdued headings. Do not promote it to the primary CTA color
Onyx Border
#000000Hairline borders, strong dividers, selected-state outlines — used at 1-2px to outline cards, buttons, and focus rings
Quartz
#d0d0c8Quietest surface tint, reserved for low-contrast dividers and hover-state hints
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 500 · 1 · -1.6px trackingThe quick brown fox jumps
heading-lg
64px · 400 · 0.8 · -0.64px trackingThe quick brown fox jumps
heading
45px · 400 · 1.2 · -0.45px trackingThe quick brown fox jumps
text-40
40px · 400 · 0.6The quick brown fox jumps
text-38
38px · 400 · 1.3The quick brown fox jumps
heading-sm
32px · 400 · 1.3 · -0.32px trackingThe quick brown fox jumps
subheading
27px · 400 · 1.3 · -0.27px trackingThe quick brown fox jumps
body-lg
23px · 400 · 1.35 · -0.23px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Switzer
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 16, 17, 19, 23, 27, 32, 38, 40, 45, 64, 80
- Line height
- 1.0 / 0.8 / 1.2 / 1.3 / 1.35 / 1.4 / 1.5 / 1.77
- Letter spacing
- -0.02em at 80px display, -0.01em at 64px and below, normal at body sizes — tight tracking compounds the calm architectural feel
- Fallback
- Inter, Manrope, or DM Sans at matching weights
Primary typeface for all UI, body, headings, and buttons. Weight 400 dominates even at display sizes — headlines whisper rather than shout, which gives the brand authority through restraint. The Minor Third scale (1.2) is unusually compressed for a SaaS site, so sizes cluster more tightly than a Major Third or Perfect Fourth system would produce.
Additional typeface
system-ui
- Weights
- 400
- Sizes
- 16
- Line height
- 1.0
Icon-internal text and OS-native labels — minimal usage, mostly decorative
Additional typeface
sans-serif
- Weights
- 400, 600
- Sizes
- 15px
- Line height
- 1.6
- Letter spacing
- 0.007
sans-serif — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 18px
- Element gap
- 9px
Border radius
cards
12pxpills
200pxavatars
9999pxbuttons
200pxinnerTiles
6pxsmallElements
3.75pxSpacing scale
3px4px6px7px8px9px12px15px16px17px18px23px24px27px36px43px48px58px60px72px84px96px138px149pxGuidelines
Do
- Use 200px border-radius on every button and pill — the capsule shape is non-negotiable for brand recognition
- Set primary CTAs to #141414 fill with white text; use the stone (#dbdbd2) capsule as the default for any non-purchase action
- Keep headlines at weight 400 Switzer with -0.01em tracking at 64px and below, -0.02em at 80px display — never bold a headline above body weight
- Use the linen canvas (#edede8) as the base; place white (#ffffff) cards on top for contrast, and step down to stone (#dbdbd2) for de-emphasized content
- Apply backdrop-filter blur(12px) to any panel that floats over imagery or gradient backgrounds
- Use #4cc02b Lime Pulse only as a status dot or checkmark — never as a button fill, page accent, or decorative color
- Pair the 6px base unit for inline gaps with 18px card padding and 80px section gaps to maintain the comfortable density
Don’t
- Don't introduce a brand-colored CTA — the system is intentionally chromatic-free; colored buttons would break the architectural language
- Don't use bold (600+) on headlines — weight 400 at display sizes is the signature; heavier weights belong in buttons and badges only
- Don't stack more than three surface tones in one screen (canvas → white → stone); the palette is rationed to preserve warmth
- Don't use drop shadows as decoration — if depth is needed, shift surface tone from white to stone to graphite instead
- Don't apply sharp corners to feature cards or panels — 12px is the floor for content surfaces; only consent dialogs may use 3.75px
- Don't add gradients to UI elements — the gradient zone is reserved for the hero product screenshot backdrop only
- Don't use letter-spacing wider than -0.01em on body copy; positive tracking breaks the tight architectural feel
Components
Pill Button — Dark (Primary)
Primary CTAMatte black capsule. Background #141414, text #ffffff, border-radius 200px, padding 0 18px, height matches line-height at 16px text (≈44px). Weight 400 in Switzer at 16px. Letter-spacing inherits body tracking.
Pill Button — Stone (Secondary)
Secondary action, pricing CTAWarm sage capsule. Background #dbdbd2, text #292929, optional 1-2px #292929 border, border-radius 200px, padding 0 24px, height ≈44px. Same Switzer 16px/400 as primary. This is the workhorse — pricing cards, demo buttons, and feature CTAs use this instead of the dark fill.
Pill Button — Ghost (Tertiary)
Inline link, low-emphasis actionTransparent fill, 1px #353535 border, text #353535, border-radius 200px, padding 9px 12px. Smaller padding profile marks it as a lightweight control, not a section-level CTA.
Square White Button
Consent dialog actionThe system outlier. Background #ffffff, text #000000, border-radius 3.75px (sharp — breaks the pill language intentionally for cookie/consent contexts), padding 15px square. Use only when the pill vocabulary is wrong for the context.
Feature Card — Warm Stone
Feature highlight, de-emphasized panelBackground #dbdbd2, border-radius 12px, padding 18px, no shadow. Used for secondary feature blocks that should recede behind the main white content card.
Feature Card — White
Primary content panelBackground #ffffff, border-radius 12px, padding 18px, optional 1px solid #0000001f border. The default elevated surface. No shadow by default; depth comes from the warmer canvas behind it.
Glass Overlay Panel
Floating widget, sticky chatBackground rgba(255, 255, 255, 0.7), border-radius 6px, padding 18px, backdrop-filter blur(12px). Used for the floating support widget and any UI that needs to float over imagery while staying legible.
Circular Accent Tile
Category icon container, decorative dotBackground #c0c0c0, border-radius 50%, no padding (icon centered inside). Functions as a quiet visual marker — never the primary CTA, always a supporting element.
Navigation Bar
Top-level site navigationTransparent background over linen canvas. Logo + product nav + auth links + dark pill CTA right-aligned. Height ≈60px. Nav text in #353535 at 14-16px Switzer 400.
Pricing Card
Pricing tier displayBackground #dbdbd2 with 12px radius and 18px padding. Tier name and price at 32px/27px Switzer 400. Checklist uses Lime Pulse (#4cc02b) checkmarks at 14-16px. Featured tier gains a subtle gradient highlight strip across the top edge.
Trust Bar
Social proof rowHorizontal row of grayscale customer logos with one-line caption at left. Logos desaturated to monochrome at 60-80% opacity. 9-12px vertical gap between logo and caption.
Status Dot
Online indicator, success pulse8px circle filled with #4cc02b (Lime Pulse). The single chromatic element in the system — appears next to live chat, active features, and system status. Use sparingly.
Surfaces & elevation
Level 0
Linen Canvas
#edede8Page background — warm off-white that warms the entire system
Level 1
Frosted White
#ffffffPrimary card surface, feature panels, elevated content blocks
Level 2
Warm Stone
#dbdbd2Secondary surface for pricing cards, de-emphasized panels, button backgrounds
Level 3
Glass Overlay
#ffffffb3Floating panels, chat widgets, sticky elements — paired with backdrop blur(12px)
Level 4
Graphite
#141414Inverted surface — dark CTAs, emphasis blocks, cookie consent panels
Elevation is intentionally rationed — only two shadow values exist in the system, both reserved for floating UI (chat widget, glass overlays). Card-level depth is communicated entirely through surface tone shifts (linen → white → stone → graphite), not shadows. This keeps the visual language flat and architectural.
Floating Chat Widget
rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
Glass Overlay Panel
rgba(16, 24, 40, 0.12) 0px 18px 55px 0px
Layout & imagery
Layout
Max-width 1200px centered container with generous outer padding. Hero is a centered text stack (display headline, sub-headline, description, trust bar, dual CTA) followed by a full-width product screenshot with gradient backdrop. Sections alternate between linen canvas and white card surfaces separated by 80px gaps. Feature blocks use a 2-column text-plus-screenshot layout that alternates sides. Pricing is a 4-column card grid with equal widths. The footer is a multi-column link directory (4 nav blocks) over a slightly darker section tone. Navigation is a single transparent top bar with logo left and pill CTA right.
Imagery
Product screenshots dominate over photography — the hero features a full app interface rendered against a soft gradient backdrop of lavender, teal, and peach (decorative, not part of the design system palette). Secondary imagery is tight UI crops with no lifestyle context. No stock photography, no illustrations, no 3D renders. Icons are monoline outlined at consistent stroke weight, sitting flat on circular pebble (#c0c0c0) tiles. The visual narrative is entirely product-led: the interface IS the hero.
Design notes
Agent Guide
**Quick Color Reference** - Text primary: #292929 - Text secondary: #6f6f6e - Background (canvas): #edede8 - Surface (card): #ffffff - Border (hairline): #0000001f - Accent (status only): #4cc02b - primary action: #141414 (filled action) **Example Component Prompts** 1. *Create a hero section*: Linen canvas (#edede8) background, centered max-width 1200px. Display headline at 80px Switzer weight 500, color #292929, letter-spacing -1.6px. Sub-headline at 45px weight 400, color #292929. Body description at 19px weight 400, color #6f6f6e, line-height 1.4. Two CTAs centered: dark pill (#141414 fill, white text, 200px radius, 0 18px padding, 16px Switzer 400) followed by stone pill (#dbdbd2 fill, #292929 text, 200px radius, 0 24px padding). 2. Create a Primary Action Button: #141414 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. *Create a feature card*: White surface (#ffffff), 12px radius, 18px padding, no shadow. Optional 1px #0000001f border. Heading at 27px Switzer 400 in #292929. Body text at 16px Switzer 400 in #6f6f6e, line-height 1.5. Optional circular accent tile (background #c0c0c0, 50% radius, 40px diameter) at top of card containing an outlined icon in #353535. 4. *Create a floating chat widget*: Glass panel (rgba(255,255,255,0.7) with backdrop-filter blur(12px)), 6px radius, 18px padding, shadow rgba(0,0,0,0.3) 0 32px 68px 0. Header text at 16px Switzer 400 in #292929. Status indicator: 8px Lime Pulse (#4cc02b) circle to the left of any 'online' label. Position fixed bottom-right. 5. *Create a navigation bar*: Transparent background over linen canvas, height 60px, max-width 1200px centered. Logo at left in #292929 at 16px Switzer 500. Center nav links at 14px Switzer 400 in #353535 with 24px horizontal gap. Right cluster: Login link in #353535 + dark pill CTA (#141414 fill, white text, 200px radius, 0 18px padding).
Gradient Zone
The only gradient usage in the system is the hero product screenshot backdrop — a soft sweep of lavender, peach, and teal that sits behind the app screenshot. This is decorative screenshot context, not a UI surface. No gradients are applied to buttons, cards, or text. Treat gradients as off-limits for component design; reserve them for full-bleed image backgrounds only.
Color Rationing
Gleap's chromatic budget is exactly one color: #4cc02b Lime Pulse. This discipline is the brand. Adding a secondary brand color, accent palette, or status spectrum would dilute the architectural feel. Even success/warning/error states default to monochrome (icon + label) rather than chromatic swatches. If a state requires visual emphasis, use surface tone (white → stone → graphite) before reaching for hue.
Similar brands
Linear
Same weight-400-at-display-sizes typography discipline and matte black pill-button vocabulary; both reject colored CTAs in favor of monochrome depth
Vercel
Similar warm off-white canvas with tight tracking and pill-shaped controls; both treat color as rationed punctuation rather than decoration
Resend
Shared architectural flatness — warm neutral surfaces, minimal shadows, product-screenshot-as-hero imagery, and weight 400 headlines that whisper
Frame.io
Same dual-pill CTA pairing (dark primary + light secondary) and warm-paper product aesthetic with desaturated supporting imagery
Stripe (documentation)
Identical approach to typography tracking (-0.01em at large sizes) and the same rationed chromatic palette with one accent green for status
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
