# Let.us Design System

> Geometric sans-serif clarity anchored by a vibrant grass-green primary and deep plum accents.

**Source:** https://let.us | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Let.us utilizes a high-contrast palette of grass green (#5bbb61) and deep plum (#432767) set against a clean white (#ffffff) or dark charcoal (#121212) foundation. The typography is strictly geometric, pairing Montserrat for all headings and display elements with Quicksand for specialized body and footer content. Components favor a 5px border radius for interactive elements, while structural surfaces remain sharp (0px). The system relies on generous vertical rhythm, often using 48px spacing increments to separate feature blocks.

## Signature DNA
1. **The Green Pivot** (#5bbb61 used for primary CTAs and iconography, providing a high-energy signal against both light and dark backgrounds. Seen on homepage and pricing.)
2. **Geometric Type Pairing** (Montserrat headings at weight 600 paired with Quicksand 500/700 body text, creating a friendly yet professional fintech aesthetic. Seen across all analyzed pages.)
3. **Plum Contrast** (#432767 used as a secondary surface or text color to soften the harshness of pure black while maintaining readability. Seen on homepage hero and about sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background, text on dark | 69 | 0.8 | computed_style |
| `{color.ink.primary}` | `#121212` | Primary text, dark section backgrounds | 45 | 0.8 | computed_style |
| `{color.ink.muted}` | `#333333` | Secondary body text | 6 | 0.6 | computed_style |
| `{color.surface.dark}` | `#2a2a2a` | Footer and dark UI surfaces | 3 | 0.6 | computed_style |
| `{color.border}` | `#000000` | Hard dividers and borders | 7 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#5bbb61` | Primary buttons, icons, active states | 9 | 0.6 | computed_style |
| `{color.accent.plum}` | `#432767` | Hero backgrounds, heading text | 9 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Montserrat | 300, 400, 500, 600 | Headings, Display, Nav | Montserrat (Google Fonts) | OFL |
| Quicksand | 500, 700 | Body, Footer, Labels | Quicksand (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 40px | 60px | normal | 600 | Main section headers | `h2.heading2.centered` |
| `{type.heading.md}` | 28px | 42px | normal | 500 | Feature titles | `h3.heading-3.features` |
| `{type.heading.sm}` | 20px | 32px | normal | 500 | Large body intro | `div.bodytext-lg` |
| `{type.body.md}` | 16px | 20px | normal | 400 | Navigation, general UI | `a.brand.w-nav-brand` |
| `{type.body.sm}` | 14px | 25.2px | normal | 500 | Footer text, selectors | `div#languageSelector` |
| `{type.label.md}` | 14px | 20px | normal | 500 | Login links, UI labels | `a#tenantLogin` |
| `{type.body.alt}` | 14px | 25.2px | normal | 500 | Footer (Quicksand) | `div.bodytext-sm.footer` |
| `{type.code.sm}` | 13px | 20px | normal | 500 | Secondary links | `a#aboutLink` |

### Principles
1. **Heading Weight Consistency:** Montserrat is consistently used at weight 500 or 600 for all structural headings.
2. **Line Height Generosity:** Display sizes use a 1.5x line-height ratio (40px/60px) to maintain airiness in dense layouts.
3. **Quicksand for Utility:** Quicksand is reserved for the footer and specific body-text blocks to provide a softer visual counterpoint to Montserrat.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 9px | 9 |
| `{space.sm}` | 15px | 9 |
| `{space.md}` | 16px | 7 |
| `{space.lg}` | 20px | 7 |
| `{space.xl}` | 24px | 6 |
| `{space.xxl}` | 48px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, large surfaces | 116 occurrences |
| `{radius.md}` | 5px | Buttons, input fields, cards | 9 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | `shadow: none` in component evidence |

## Components
### Tier 1: Foundational
#### Button Primary
**Role:** Main call to action
**Pages observed:** https://let.us, https://let.us/pricing
**Spec:** Background `{color.primary}` (#5bbb61) / Text `{color.canvas}` (#ffffff) / Radius 5px / Padding 9px 15px / Typography Montserrat 500
**States observed:** Default | Hover: not captured | Active: not captured

#### Surface Dark
**Role:** Footer and high-contrast sectioning
**Pages observed:** https://let.us, https://let.us/pricing, https://let.us/about
**Spec:** Background `{color.ink.primary}` (#121212) / Text `{color.canvas}` (#ffffff) / Radius 0px / Padding 24px 0px
**States observed:** Default

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** https://let.us, https://let.us/pricing, https://let.us/about
**Spec:** Background `{color.primary}` (#5bbb61) / Text `{color.canvas}` (#ffffff) / Border 0px / Radius 5px / Padding 9px 15px
**States observed:** Default

#### Nav Bar
**Role:** Global navigation
**Pages observed:** https://let.us, https://let.us/about
**Spec:** Background transparent / Text `{color.ink.primary}` (#121212) / Border 1px `rgba(0,0,0,0.1)` / Radius 0px / Padding 20px 0px
**States observed:** Default

### Tier 3: Surface-specific
#### Content Block (Plum)
**Role:** Hero or secondary emphasis sections
**Pages observed:** https://let.us, https://let.us/about
**Spec:** Background `{color.accent.plum}` (#432767) / Text `{color.canvas}` (#ffffff) / Radius 0px
**States observed:** Default

#### Utility Surface
**Role:** Subtle section differentiation
**Pages observed:** https://let.us, https://let.us/pricing
**Spec:** Background `{color.surface.dark}` (#2a2a2a) / Text `{color.canvas}` (#ffffff) / Radius 0px / Padding 24px 0px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | Not captured in source |
| Section Gap | 48px |
| Horizontal Padding | 20px (Nav) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, hamburger menu navigation |
| Desktop | 1440px | Multi-column feature grids, horizontal navigation |

## Imagery & decoration
Let.us uses flat, line-art iconography in the primary green (#5bbb61) to illustrate features. Imagery consists of high-quality architectural or lifestyle photography with deep color overlays (plum/purple) to maintain brand consistency.

## Do's
- Use `#5bbb61` for all primary interactive elements.
- Set all headings in Montserrat with a minimum weight of 500.
- Apply a 5px border radius to buttons and cards.
- Use `#432767` for high-impact hero backgrounds.
- Maintain a 48px vertical gap between major content sections.

## Don'ts
- **Wrong:** Using a 10px radius on buttons. **Right:** Use `{radius.md}` (5px). **Reason:** Brand geometry is strictly 5px or sharp.
- **Wrong:** Using Montserrat for footer fine print. **Right:** Use Quicksand 500. **Reason:** System uses Quicksand for utility and footer roles.
- **Wrong:** Using pure black (#000000) for large surface backgrounds. **Right:** Use `{color.ink.primary}` (#121212). **Reason:** Foundation tokens specify #121212 for dark surfaces.

## Similar brands
- Better.com
- Wealthsimple
- Lemonade
- Chime

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #5bbb61;
  --color-accent-plum: #432767;
  --color-canvas: #ffffff;
  --color-ink-primary: #121212;
  --radius-md: 5px;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Quicksand', sans-serif;
}
```

```javascript
/* Tailwind v4 @theme */
@theme {
  --color-primary: #5bbb61;
  --color-plum: #432767;
  --color-canvas: #ffffff;
  --color-ink: #121212;
  --radius-md: 5px;
  --font-montserrat: "Montserrat";
  --font-quicksand: "Quicksand";
}
```

## Agent prompt examples
- "Create a primary CTA button using #5bbb61 background, white text, 5px border radius, and Montserrat 500 font."
- "Design a feature card with a 5px radius, 15px padding, and a 28px Montserrat heading."
- "Generate a dark section using #121212 background with white Montserrat body text at 16px."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific container max-widths were not explicitly defined in the computed styles.
- Semantic colors (Success/Error) were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://let.us | 1440px | 2026-06-06 |
| Pricing | https://let.us/pricing | 1440px | 2026-06-06 |
| About | https://let.us/about | 1440px | 2026-06-06 |