Lindy design specAI

Friendly, polished consumer-software craft with a conversational voice — the headline literally speaks in first person. The canvas is a WARM off-white #fcf9f8 rather than pure white, which is reserved for the cards floating on top of it, carrying deep navy #0f1e2e ink and #344d63 body with one blue #2a66ff accent. Type is a single family, Manrope, used at genuinely bold weights that are unusual for the category — 700 at 72/75.6 for display with -1.44px tracking, 500 at 20/30 for body — with negative tracking scaled consistently to size. The signature hero is a drifting constellation of realistic app-notification cards from the tools Lindy manages (Slack, Gmail, Notion, GitHub, Linear, Calendar), which explains the product without a diagram; GSAP and Lottie drive it, alongside two infinite marquees. Depth is soft and NAVY-TINTED rather than neutral black — rgba(15,53,71,.15) 0 12px 36px for card lift, plus an inset white rim for glass — over rgba(0,0,0,.08) borders and unusually fine 0.5px sub-pixel hairlines. Radii are plentiful: 12px dominant, 18px, asymmetric 18px 18px 5px chat bubbles, and a 1512px value that reads as a full pill. Its neatest detail is the glass recipe, which pairs blur with SATURATE (blur(30px) saturate(1.28)) so the panels never go grey, and hover states are pastel fills — periwinkle #c5d4ff, mint #ddfffb — rather than colour shifts.

Browse Lindy in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

Source: lindy.ai (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Webflow-built with 497 :root vars (mostly theme scaffolding); §2 read from computed fills/text. The #0a84ff, #e9e9eb, #c7c7cc, #8e8e93, #636366 and #aeaeb2 values are Apple system-UI colours used inside simulated iMessage/notification mockups — recorded separately as "product mockup" rather than brand chrome. Reality check: the hint is accurate. "Playful clean, soft gradients" holds: a warm off-white canvas, rounded Manrope, and eight soft gradients. Two things it misses: the signature hero is a drifting field of fake app-notification cards (Slack, Gmail, Notion, GitHub, Linear, Calendar), and the glass recipe pairs blur() with saturate() rather than blur alone.

Visual Theme & Atmosphere

Friendly, confident consumer-software polish. A warm off-white canvas carries deep navy type set in rounded Manrope at genuinely bold weights (700 at 72px), and the tone is conversational — the headline speaks in first person. The signature hero is a drifting constellation of realistic app-notification cards from the tools Lindy manages, which does the product explanation without a diagram. Depth is soft and generous: 12px radii everywhere, navy-tinted shadows, and glass panels built from blur *plus* saturation. Colour is mostly held back to one blue, with pastel gradients and mint/periwinkle hover states supplying the play. Feels: friendly, polished, conversational, soft.

Color Palette & Roles

TokenHex / valueRole / usage
canvas#fcf9f8THE page background (warm off-white)
canvas-2#fcfbf8alt warm surface
white#ffffffcards, panels (73 uses)
white-97rgba(255,255,255,.97)near-opaque floating card
navy#0f1e2eprimary ink (1316 uses)
navy-deep#0f3547shadow tint base
slate#474a55secondary text
slate-2#344d63body copy
ink-alt#1c1c1ealt dark text
blue#2a66ffTHE accent — CTA, active border
green#42b056success / positive
cream#f4ecd3warm highlight panel
divider#ddddddhairline
border-alphargba(0,0,0,.08)THE border (65 uses)
hairline#e7e7e70.5px sub-pixel rule
hairline-2#f3f3f3faintest 0.5px rule
hover-periwinkle#c5d4ffnav-button hover fill
hover-mint#ddfffbbeta-button hover fill

Apple system-UI colours inside simulated notification mockups (not brand): #0a84ff, #e9e9eb, #c7c7cc, #8e8e93, #636366, #aeaeb2.

Rules: the canvas is warm off-white, never pure white — white is reserved for cards floating on it. One blue #2a66ff is the accent; the pastel hovers (periwinkle, mint) are state colours, not palette entries.

Typography Rules

One family, Manrope — a rounded geometric sans — used at genuinely bold weights, which is unusual for this category: 700 for display and sub-heads, 600 for section labels, 500 for body and nav. Tracking is consistently negative and scales with size (-1.44px at 72px, -0.64px at 32px, -0.2px at 20px, -0.16px at 16px). Body sits at a generous 20/30. Apple system-ui appears only inside the notification mockups.

Specimen substitution: Manrope is an open Google font, so previews use the
real face.
RoleFamilySize/LineWeightTracking
Display (h1)Manrope72/75.6700-1.44px
Sub-head (h3)Manrope32/35.2700-0.64px
Section label (h2)Manrope20/30600-0.2px
BodyManrope20/30500-0.2px
NavManrope16/24500-0.16px
Mockup UI-apple-system14/17.5400normal

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.