# Landingi Design System

> A high-contrast SaaS canvas balancing deep charcoal foundations with a "Classic Blue" primary action and vibrant, multi-chromatic accent pops.

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

## TL;DR
Landingi utilizes a "Classic Blue" (`#2550aa`) as its primary interactive driver against a stark white (`#ffffff`) or deep charcoal (`#1f1f1f`) background. The system is characterized by an editorial use of **Inter** at a signature weight of 300 for large-scale hero displays, contrasted by **Axiforma** for structured, high-tracking headlines. While the functional UI is strictly blue and monochrome, the brand introduces a "rainbow" of decorative accents—including Almost Cyan (`#1ec7b8`), Leaf Green (`#46be83`), and Tangerine Orange (`#ff8e56`)—to signify creative flexibility. Geometry is varied, moving from sharp 0px edges on sections to ultra-soft 250px "pill" containers for feature cards.

## Signature DNA
1. **Lightweight Display Inter** (Inter weight 300 at 48px is the primary hero move, creating a clean, airy technical feel on landing pages).
2. **The Chromatic Accent Palette** (The use of 6+ distinct high-saturation colors like `#1ec7b8` and `#f27589` as decorative surface backgrounds to represent "templates" and "creativity").
3. **Ultra-Soft Pill Cards** (Feature cards use a 250px border radius, creating a distinct "stadium" shape that softens the high-contrast typography).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--white` | `#ffffff` | Page background, primary surface | 84 | 1.0 | computed_style |
| `--wp--preset--color--dark-100` | `#1f1f1f` | Dark mode surface, primary text | 7 | 1.0 | computed_style |
| `foundation-text` | `#333333` | Secondary body text | 17 | 0.8 | computed_style |
| `foundation-border` | `#3f3f3f` | Dark surface dividers | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--classicblue-100` | `#2550aa` | Primary CTA background, links | 3 | 1.0 | computed_style |
| `--wp--preset--color--almostcyan-100` | `#1ec7b8` | Accent surface, feature text | 4 | 1.0 | computed_style |
| `--wp--preset--color--leafgreen-100` | `#46be83` | Decorative surface (decorative_only) | 2 | 1.0 | computed_style |
| `--wp--preset--color--warmpink-100` | `#f27589` | Decorative surface (decorative_only) | 1 | 1.0 | computed_style |
| `--wp--preset--color--tangerineorange-100`| `#ff8e56` | Decorative surface (decorative_only) | 1 | 1.0 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 300, 400, 500, 600, 700 | Body, Display, UI | Inter (Google Fonts) | OFL |
| Axiforma | 200, 300, 600 | Headings | Montserrat | Commercial |
| system-ui | 400, 600 | Captions, Footer | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-hero}` | 48px | 81.6px | normal | 300 | Hero display | `div.scene-hero` |
| `{type.heading-lg}` | 37px | 52.45px | 1.6px | 600 | Section heading | `h1.wp-block-heading` |
| `{type.heading-md}` | 29px | 40.32px | 1.28px | 600 | Sub-section head | `span:nth-of-type(1)` |
| `{type.body-sm}` | 15px | 21px | normal | 600 | UI Labels | `div.languages__item` |
| `{type.caption-ui}` | 12px | 20.4px | normal | 300 | Metadata | `span:nth-of-type(1)` |
| `{type.caption-footer}` | 12px | 18px | normal | 400 | Footer links | `div.footer-inner` |
| `{type.micro}` | 10px | 17.68px | normal | 600 | Badges | `span:nth-of-type(1)` |

### Principles
1. **Display weight is 300.** Large hero text always uses the light weight of Inter to maintain a "blueprint" aesthetic.
2. **High-tracking headings.** Axiforma headings utilize wide letter-spacing (1.28px to 1.6px) to establish a premium, spaced-out rhythm.
3. **Contrast-driven legibility.** Text on dark surfaces (`#1f1f1f`) strictly uses white (`#ffffff`) or high-saturation accents (`#1ec7b8`).

## Spacing
**Base unit:** 4px (inferred), 13px/16px (observed)
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 13px | 18 |
| `{spacing.sm}` | 16px | 5 |
| `{spacing.xl}` | 46px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main sections, full-width bands | 44 occurrences |
| `{radius.md}` | 12px | Form inputs, small controls | 5 occurrences |
| `{radius.pill}` | 250px | Feature cards, primary containers | 16 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.2) 0px 20px 20px -15px` | Floating feature cards | Landing page hero |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Start free trial")
**Pages observed:** landingi.com, landingi.com/about
**Spec:** Background `#2550aa` / Text `#ffffff` / Radius `12px` / Font `Inter 600`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card (Pill)
**Role:** Highlighting core platform capabilities
**Pages observed:** landingi.com
**Spec:** Background `#ffffff` / Border `1px rgba(255,255,255,0.2)` / Radius `250px` / Padding `13px 46px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Dark Hero Section
**Role:** Primary landing page entry point
**Pages observed:** landingi.com
**Spec:** Background `#1f1f1f` / Text `#ffffff` / Radius `0px` / Typography `{type.display-hero}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (inferred from desktop screenshots) |
| Section Padding | 80px - 100px vertical |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Pill cards stack vertically. |

## Imagery & decoration
Landingi uses stylized product UI screenshots with high-quality photography (e.g., pottery/lifestyle) embedded within them. Decorative elements include small floating "status" badges (e.g., "Publish") and multi-colored radial glows behind product mocks.

## Do's
- Use **Inter 300** for all hero headlines above 40px.
- Apply **250px border-radius** to feature cards to create the signature pill shape.
- Use **Classic Blue (#2550aa)** for the primary conversion path.
- Maintain high letter-spacing (1.6px) on **Axiforma** headings.
- Pair dark surfaces (`#1f1f1f`) with white text for maximum contrast.

## Don'ts
- **Wrong:** Using `#2550aa` for decorative background surfaces. **Right:** Use `#1ec7b8` or `#46be83`. **Reason:** Blue is reserved for functional interaction.
- **Wrong:** Applying bold weights (700+) to hero display text. **Right:** Use weight 300. **Reason:** The brand signature is "light and airy" technicality.
- **Wrong:** Mixing Axiforma and Inter in the same text block without a clear hierarchy shift.
- **Don't** use sharp corners for interactive cards; keep them at `{radius.pill}`.

## Similar brands
- Intercom (use of high-contrast dark/light and blue accents)
- Framer (technical typography and pill-shaped UI elements)
- Webflow (structured SaaS layout with vibrant accent pops)

## Quick start
```css
/* CSS Variables */
:root {
  --color-primary: #2550aa;
  --color-dark: #1f1f1f;
  --color-accent-cyan: #1ec7b8;
  --font-display: 'Inter', sans-serif;
  --font-heading: 'Axiforma', sans-serif;
  --radius-pill: 250px;
}
```

## Agent prompt examples
- "Generate a hero section for Landingi using a #1f1f1f background, Inter 300 weight text at 48px, and a primary button in #2550aa with 12px corners."
- "Create a feature grid using white cards with a 250px border radius and 1px #ffffff33 borders."
- "Design a heading using Axiforma weight 600 with 1.6px letter spacing in #ffffff."

## Known gaps
- Hover and Active states for secondary buttons were not explicitly captured in the computed style tokens.
- Semantic colors (Success/Error) were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://landingi.com | 1440px | 2026-06-06 |
| Pricing | https://landingi.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://landingi.com | 390px | 2026-06-06 |