# Landbot Design System

> A vibrant, structured playground where deep navy anchors a high-energy palette of electric purple, hot pink, and mint.

**Source:** https://landbot.io | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Landbot utilizes a "Navy Foundation" strategy where the primary structural color is a deep, professional navy `#33405e` (CSS `--lb-navy`), used for text, borders, and shadows. This sober base allows for high-voltage brand accents: an electric purple `#636bfc` (CSS `--lb-purple`) for primary actions and a vibrant pink `#ff3f7b` (CSS `--lb-pink`) for secondary highlights and badges. Typography is strictly sans-serif, pairing the geometric **DM Sans** for headlines with the rounded, friendly **Gotham Rounded** for UI elements. Layouts are defined by soft, generous radii (16px–20px for cards) and a distinctive shadow system that uses the navy token at low opacity (`rgba(51, 64, 94, 0.08)`) to create depth without graying out the canvas.

## Signature DNA
1. **The Navy Anchor:** Unlike standard SaaS grays, Landbot uses `#33405e` for almost all neutral roles, including shadows and borders, creating a cohesive, "inked" feel across the white canvas.
2. **Rounded Geometry:** A consistent application of `16px` and `20px` radii on cards, paired with `9999px` pills for CTAs, reinforces a friendly, "bot-like" approachable identity.
3. **Chromatic Hierarchy:** Primary actions use the Electric Purple `#636bfc`, while the Hot Pink `#ff3f7b` is reserved for "New" tags, specific highlights, and secondary brand moments.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--lb-white` | `#ffffff` | Page background, button text, card surfaces | 89 | 1 | Computed style |
| `--lb-navy` | `#33405e` | Primary text, borders, shadow color, UI icons | 332 | 1 | `--lb-navy` |
| `--n-100` | `#9596a7` | Muted secondary text, descriptions | 9 | 1 | `--n-100` |
| `--kc-background` | `#f5f7fa` | Subtle section backgrounds, secondary buttons | 4 | 1 | `--kc-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--lb-purple` | `#636bfc` | Primary CTA background, active links, brand hero text | 24 | 1 | `--lb-purple` |
| `--lb-pink` | `#ff3f7b` | Secondary highlights, "New" badges, price emphasis | 16 | 1 | `--lb-pink` |
| `--lb-teal` | `#4fccc2` | Decorative accents, specific feature icons | 3 | 1 | `--lb-teal` |
| `--lb-orange` | `#f58b0b` | Decorative only | 1 | 1 | `--lb-orange` |
| `--yellow-1` | `#ffc659` | Decorative only | 1 | 1 | `--yellow-1` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| DM Sans | 400, 500, 700 | Primary headlines and body | DM Sans (Google Fonts) | SIL Open Font |
| Gotham Rounded | 400 | UI Navigation, specific labels | Quicksand | Commercial |
| Mabry Pro | 400, 700 | Pricing tables, FAQ headers | Apercu (similar) | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-hero` | 80px | 80px | -2px | 700 | Homepage hero | `h1.home-hero-heading` |
| `display-h1` | 48px | 64px | -2px | 400 | Section headers | `h2.heading-h1-new` |
| `display-h2` | 40px | 56px | -1.5px | 400 | Secondary headers | `h2.heading-h2` |
| `heading-h3` | 32px | 40px | -1.5px | 700 | Feature titles | `div.heading-h3.text-weight-bold` |
| `heading-h4` | 24px | 32px | -0.5px | 400 | Card titles | `h4.heading-h4` |
| `body-lg` | 18px | 28px | normal | 400 | Lead paragraphs | `p.paragraph-2` |
| `body-md` | 16px | 24px | normal | 400 | Default text | `p.text-color-n100` |
| `label-sm` | 14px | 24px | normal | 500 | UI labels, buttons | `div.label-1` |
| `caption` | 12px | 20px | normal | 400 | Small annotations | `div.label-2` |

### Principles
1. **Tight Display Tracking:** Large headlines (40px+) use negative letter spacing (-1.5px to -2px) to maintain visual density.
2. **Navy as Default Ink:** Pure black is avoided; `#33405e` or `#333333` are the standard for high-contrast text.
3. **Rounded UI Context:** Gotham Rounded is reserved for navigation and specific interactive wrappers to signal "utility."

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 101 |
| `space-sm` | 16px | 37 |
| `space-md` | 24px | 63 |
| `space-lg` | 32px | 12 |
| `space-xl` | 80px | 11 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-pill` | 9999px | Primary CTAs, status badges | `.cta-primary-new` |
| `radius-card` | 16px | Feature cards, pricing tiers | `.revenue-team-card` |
| `radius-surface` | 20px | Large containers, testimonials | `.testimonial-card` |
| `radius-sm` | 4px | Input fields, small tags | `.rounded-button` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `shadow-soft` | `rgba(51, 64, 94, 0.08) 0px 1px 1px 0px, rgba(51, 64, 94, 0.08) 0px 2px 2px 1px` | Standard cards | Pricing cards |
| `shadow-medium` | `rgba(0, 0, 0, 0.08) 3px 3px 12px 0px` | Hover states / Floating UI | Feature cards |
| `shadow-navy` | `rgba(51, 64, 94, 0.08) 0px 8px 8px 0px` | Deep elevation | Hero elements |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Try Landbot Free")
**Pages observed:** landbot.io, landbot.io/pricing
**Spec:** Background: `#636bfc` | Text: `#ffffff` | Radius: `9999px` | Typography: `DM Sans 500`
**States observed:** Default | Hover: captured (darker purple shift) | Active: captured

#### Secondary Button (Outline)
**Role:** Secondary actions (e.g., "Book a demo")
**Pages observed:** landbot.io, landbot.io/pricing
**Spec:** Background: `transparent` | Text: `#636bfc` | Border: `1px solid #636bfc` | Radius: `9999px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** landbot.io
**Spec:** Background: `#ffffff` | Radius: `16px` | Padding: `24px` | Shadow: `shadow-soft`
**States observed:** Default | Hover: `shadow-medium`

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** landbot.io/pricing
**Spec:** Background: `#ffffff` | Border: `2px solid #e8e4f0` | Radius: `16px` | Padding: `16px 24px`
**States observed:** Default | Featured: Border becomes `#636bfc`

### Tier 3: Surface-specific

#### "New" Badge
**Role:** Highlighting new features
**Pages observed:** landbot.io, landbot.io/pricing
**Spec:** Background: `#ff3f7b` | Text: `#ffffff` | Radius: `4px` | Typography: `10px Bold`
**States observed:** Default

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** landbot.io/pricing
**Spec:** Text: `#33405e` | Border-bottom: `1px solid #e8e4f0` | Typography: `Mabry Pro 20px`
**States observed:** Default | Open: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px |
| Column Gap | 24px |

## Do's
- Use `#33405e` (Navy) for all primary text to maintain brand depth.
- Apply `16px` radius to all content-containing cards.
- Use Electric Purple `#636bfc` for the primary conversion path.
- Reserve Hot Pink `#ff3f7b` for high-attention badges and labels.
- Ensure all large headlines use negative letter spacing (-1.5px).

## Don'ts
- **Wrong:** Using `#636bfc` (Purple) for error messages. **Right:** Use standard semantic red. **Reason:** Purple is reserved for positive primary actions.
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#333333` or `#33405e`. **Reason:** Pure black breaks the "Navy Foundation" softness.
- **Wrong:** Applying sharp `0px` corners to buttons. **Right:** Use `9999px` pills. **Reason:** Sharp corners conflict with the friendly bot-centric identity.

## Quick start

```css
/* Landbot Design Tokens */
:root {
  --lb-navy: #33405e;
  --lb-purple: #636bfc;
  --lb-pink: #ff3f7b;
  --lb-teal: #4fccc2;
  --lb-white: #ffffff;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --shadow-soft: rgba(51, 64, 94, 0.08) 0px 1px 1px 0px, rgba(51, 64, 94, 0.08) 0px 2px 2px 1px;
}
```

## Known gaps
- Hover state hex codes for buttons were not explicitly captured in token data, though visual shifts were observed.
- Mobile-specific spacing tokens (e.g., reduced section padding) were not fully quantified.
- Success and Error semantic tokens were not present in the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://landbot.io | 1440px | 2026-06-06 |
| Pricing | https://landbot.io/pricing | 1440px | 2026-06-06 |