# Lindy — Marketing site Design Spec

> 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.

## 1. 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.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| canvas | #fcf9f8 | THE page background (warm off-white) |
| canvas-2 | #fcfbf8 | alt warm surface |
| white | #ffffff | cards, panels (73 uses) |
| white-97 | rgba(255,255,255,.97) | near-opaque floating card |
| navy | #0f1e2e | primary ink (1316 uses) |
| navy-deep | #0f3547 | shadow tint base |
| slate | #474a55 | secondary text |
| slate-2 | #344d63 | body copy |
| ink-alt | #1c1c1e | alt dark text |
| blue | #2a66ff | THE accent — CTA, active border |
| green | #42b056 | success / positive |
| cream | #f4ecd3 | warm highlight panel |
| divider | #dddddd | hairline |
| border-alpha | rgba(0,0,0,.08) | THE border (65 uses) |
| hairline | #e7e7e7 | 0.5px sub-pixel rule |
| hairline-2 | #f3f3f3 | faintest 0.5px rule |
| hover-periwinkle | #c5d4ff | nav-button hover fill |
| hover-mint | #ddfffb | beta-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.

## 3. 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.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Manrope | 72/75.6 | 700 | -1.44px |
| Sub-head (h3) | Manrope | 32/35.2 | 700 | -0.64px |
| Section label (h2) | Manrope | 20/30 | 600 | -0.2px |
| Body | Manrope | 20/30 | 500 | -0.2px |
| Nav | Manrope | 16/24 | 500 | -0.16px |
| Mockup UI | -apple-system | 14/17.5 | 400 | normal |

## 4. Component Stylings

Radii are soft and plentiful: **12px** dominant (97 uses), 18px, 10px, 8px, 6px,
20px, 50%, and a **1512px** value (67 uses) that reads as a full pill on wide
elements. Buttons run ~39px with 12px radius; the primary is the blue #2a66ff.
Cards are white on the warm canvas, bordered by `rgba(0,0,0,.08)` (65 uses) and
lifted by a **navy-tinted** shadow. Note the **0.5px sub-pixel hairlines**
(#e7e7e7, #f3f3f3, and a 0.5px #2a66ff active border) — an unusually fine rule
weight. Chat bubbles use asymmetric `18px 18px 5px` radii.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Nav button | transparent / white | bg → **#c5d4ff** (periwinkle) | `button:focus-visible { outline: #000; outline-offset: 2px }` | — | not observed |
| Beta button | fill | bg → **#ddfffb**, text → #003829 (mint) | as above | — | — |
| Text button | #474a55 | color → #007aff | as above | — | — |
| Chip | rounded fill | 0.2s ease | as above | pressed state on `.lp-chip:active` | — |

Focus: the site defines a **real** `button:focus-visible` ring — `outline: #000000;
outline-offset: 2px`. Keep it; specifying a width would be an improvement.

## 5. Layout Principles

A floating rounded nav sits over the hero. The hero itself is the signature: a
full-width field of ~8 drifting notification cards (Slack, iMessage, Notion,
GitHub, Gmail, Calendar, Linear, Reminders) above a first-person 72px headline and
a blue CTA. Below, content stacks in white 12px-radius cards on the warm canvas,
with two infinite marquees (60s and 30s) for logos and integrations.

## 6. Depth & Elevation

Radius: **12px** dominant, 18px, 10px, 8px, 6px, 20px, 50%, **1512px** (full
pill). Shadows are soft, layered and **colour-tinted rather than neutral black**:

- `rgba(15,53,71,.15) 0 12px 36px` + second layer — the main card lift (50 uses)
- `rgba(20,21,26,.05) 0 1px 2px` — subtle chrome
- `rgba(0,0,0,.1) 0 -1px 1px inset` + layer — pressed/inset chrome
- `rgba(14,23,39,.06) 0 4px 6px -2px` — mid lift
- `rgba(255,255,255,.22) 0 0 0 1px inset` — glass rim light

Borders: `rgba(0,0,0,.08)` (65) plus **0.5px** sub-pixel rules. **Five backdrop
filters, and they pair blur with saturate** — `blur(30px) saturate(1.28)`,
`blur(22px) saturate(1.22)`, `blur(16px)`, `blur(8px)`, and a
`blur(0px) saturate(1)` reset. That saturation boost is what keeps the glass from
looking grey.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background-color | 0.2s | ease | hover fills (dominant, 18x) |
| border-color, color, background-color | 0.2s | ease | chrome |
| color | 0.2s | ease | text links |
| all | 0.25s | ease | controls |
| all | 0.4s | cubic-bezier(0.165, 0.84, 0.44, 1) | larger surfaces (easeOutQuart) |
| transform | 0.12s | ease | fast press feedback |

House transition: **0.2s ease** for colour, with a slower 0.4s easeOutQuart for
surfaces. **Both GSAP and Lottie are detected** — the drifting notification field
and the product demos are script-driven, which is why the CSS keyframe list is
short: `spin`, `marquee` (60s infinite), `marquee-scroll` (30s infinite),
`lp-typing` and `lp-demo-tap` (the simulated chat demo). Notable declared easings
include an **overshoot** `cubic-bezier(0.68, -0.55, 0.265, 1.55)`. The site ships
**one `prefers-reduced-motion: reduce` block** — honour it, given the constant
hero drift and two infinite marquees.

## 8. Backgrounds, Effects & WebGL

Eight gradients, all soft and decorative rather than structural — a pastel
`linear-gradient(110deg, rgba(250,210,226,.6), rgba(255,220,217,.6) 54%,
rgba(247,194,245,.6))` (pink → peach → orchid at 60% alpha), an amber
`#f7b844 → #c68809`, and a multi-stop metallic
`135deg #6f7880 → #181c20 → #050607 → #67727b` used for chrome/hardware effects.
Five backdrop filters combining blur and saturate (§6). No canvas/WebGL, no
video, no grain, 1 raster layer. Atmosphere is soft gradient washes plus glass.

## 9. Do's and Don'ts

### Do
- Keep the canvas warm off-white #fcf9f8; reserve pure white for cards on top of it.
- Set Manrope at genuinely bold weights (700 display) with negative tracking scaled to size.
- Write in first person — the copy voice is part of the design.
- Use 12px radii broadly and the 1512px value for full pills.
- Tint shadows with the navy (rgba(15,53,71,…)), never neutral black.
- Pair `blur()` with `saturate()` on glass so it doesn't go grey.
- Use pastel hover fills (periwinkle #c5d4ff, mint #ddfffb) as state, not palette.
- Keep the `button:focus-visible` ring.

### Don't
- Don't use pure white as the page background.
- Don't set the display below 700 — the boldness is deliberate.
- Don't let the Apple system-UI mockup colours leak into brand chrome.
- Don't use plain blur for glass; the saturation is what makes it work.
- Don't round the 0.5px hairlines up to 1px.

## 10. Responsive Behavior

A max-width-first Webflow ladder (desktop-first, the inverse of this library's
norm) with a few min-width additions:

| Breakpoint | What changes |
|---|---|
| max 380 / 479 / 480px | phone tiers |
| max 767 / 768px, min 768px | phone → tablet seam |
| max 991 / 992px | tablet |
| max 1100 / 1138 / 1200px | small-desktop steps |
| min 1280 / 1440 / 1500px | wide desktop |

No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries. **1
reduced-motion block.**

## 11. Agent Prompt Guide

- Canvas `#fcf9f8` · Card `#ffffff` · Ink `#0f1e2e` · Body `#344d63` · Border `rgba(0,0,0,.08)` + 0.5px `#e7e7e7` · Accent `#2a66ff`
- Font: **Manrope** (real face, open) · Display 72/75.6 **700** -1.44px · Body 20/30 500 -0.2px · Radius: 12px / 1512px pill · Control height: ~39px
- Focus: `outline: #000; outline-offset: 2px` · Hover: periwinkle `#c5d4ff` / mint `#ddfffb` · Shadow: `rgba(15,53,71,.15) 0 12px 36px` · Glass: `blur(30px) saturate(1.28)`

<lindy_design_language>
Friendly, polished consumer-software brand with a conversational voice. Canvas is
a WARM off-white #fcf9f8 (never pure white — white is reserved for the cards
floating on it), with deep navy #0f1e2e ink, #344d63 body and #474a55 secondary.
One blue #2a66ff is the accent; green #42b056 signals success and a cream #f4ecd3
highlights. Type is a single family, Manrope (an open Google font, so use the real
face), at genuinely BOLD weights — 700 at 72/75.6 for display, 700 at 32/35.2 for
sub-heads, 500 at 20/30 body — with negative tracking scaled to size (-1.44px at
72px down to -0.16px at 16px). The signature hero is a drifting constellation of
realistic APP-NOTIFICATION CARDS (Slack, Gmail, Notion, GitHub, Linear, Calendar)
that explains the product without a diagram. Radii are soft and plentiful: 12px
dominant, 18px, plus a 1512px value that reads as a full pill; chat bubbles use
asymmetric 18px 18px 5px. Depth is soft and NAVY-TINTED rather than neutral —
rgba(15,53,71,.15) 0 12px 36px for card lift, a rgba(255,255,255,.22) inset rim
for glass — over rgba(0,0,0,.08) borders and unusually fine 0.5px sub-pixel
hairlines. Glass pairs blur WITH saturate: blur(30px) saturate(1.28),
blur(22px) saturate(1.22). Hover states are pastel fills (periwinkle #c5d4ff,
mint #ddfffb with #003829 text). Motion is 0.2s ease for colour and 0.4s
cubic-bezier(.165,.84,.44,1) for surfaces, with GSAP and Lottie driving the hero
drift and two infinite marquees (60s, 30s); a real button:focus-visible ring and a
prefers-reduced-motion block both ship. Feels: friendly, polished, soft. Avoid: a
pure-white page background, display weights below 700, plain blur without
saturate, letting Apple system-UI mockup colours into brand chrome.
</lindy_design_language>