# Lidp Design System

> Deep-sea digital architecture where high-contrast white Poppins type floats over obsidian and navy depths, punctuated by high-voltage orange actions.

**Source:** [https://lidp.com](https://lidp.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Lidp utilizes a "Dark Mode by Default" aesthetic, anchoring the interface in a deep navy and black foundation (`#061131`, `#141416`). The system relies on **Poppins Extralight** for massive, airy display headlines (up to 80px) that contrast sharply against dark backgrounds. Primary interaction is driven by a high-saturation orange (`#e77321`), used for both solid and outlined button states. The visual language is technical and "cloud-native," utilizing geometric network meshes and glowing blue accents (`#3da4dc`) to signal AI and connectivity.

## Signature DNA
1. **The "Titanium" Depth** (The interface uses a tiered dark palette of `#061131` and `#141416` to create a sense of infinite digital space, observed across all hero and feature sections.)
2. **Airy Display Typography** (Poppins Extralight at 80px and 60px with 700 weight creates a technical, premium feel that avoids the "heavy" look of traditional enterprise software.)
3. **Kinetic Orange Punctuation** (The use of `#e77321` as the sole action color creates a high-contrast focal point against the dark foundation, used for all primary CTAs.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wst-color-text-primary` | `#ffffff` | Primary text, titles, and subheadings | 39 | 1 | Computed Style |
| `--wst-color-fill-base-1` | `#141416` | Background primary, surface base | 4 | 1 | Computed Style |
| `accent-navy` | `#061131` | Main section backgrounds (Titanium theme) | 15 | 0.8 | Computed Style |
| `--wst-color-text-secondary` | `#8a8a8a` | Muted text, lines, and secondary labels | 84 | 1 | Computed Style |
| `--wst-color-fill-base-shade-2`| `#3f4349` | Disabled states and dark-grey surfaces | 13 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wst-color-action` | `#e77321` | Primary CTA background, borders, and hover states | 11 | 1 | Computed Style |
| `--wst-color-fill-accent-2` | `#3da4dc` | Accent text, "Training" button, and glow effects | 12 | 1 | Computed Style |
| `link-blue` | `#0000ee` | Legacy link text (decorative_only) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| poppins-extralight | 400, 700 | Display, Headings, Buttons | Poppins (Google Fonts) | Licensed |
| poppins-semibold | 400 | Body copy, UI labels | Poppins (Google Fonts) | Licensed |
| Arial | 400 | Captions, system fallbacks | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.display-mega}` | 80px | 96px | normal | 700 | Homepage hero h1 | `h1.font_0` |
| `{typography.display-lg}` | 60px | normal | normal | 700 | Section display text | `p.font_2` |
| `{typography.heading-lg}` | 30px | 42px | normal | 700 | Section headers | `h2.font_3` |
| `{typography.heading-md}` | 25px | normal | normal | 700 | Sub-section headers | `p.font_4` |
| `{typography.body-lg}` | 18px | 25.2px | normal | 700 | Strong body copy | `p.font_7` |
| `{typography.body-md}` | 18px | normal | normal | 400 | Standard body copy | `h3.font_6` |
| `{typography.button}` | 16px | 22.4px | normal | 700 | CTA labels | `span.wixui-button__label` |
| `{typography.body-sm}` | 14px | 22.4px | normal | 400 | Footer/Small text | `p.font_9` |
| `{typography.caption}` | 10px | normal | normal | 400 | Legal/Fine print | `section#comp-lx0u6qvh` |

### Principles
1. **High Contrast Display:** Headlines must be pure white (`#ffffff`) on dark backgrounds (`#061131`).
2. **Weight Paradox:** Use "Extralight" named fonts but at a 700 weight for display to maintain geometric clarity.
3. **Generous Leading:** Display type uses a 1.2x line-height (80px/96px) to maintain readability at scale.

## Spacing
**Base unit:** 4px (inferred from common layout gaps)
Table: Not captured in source (values are custom/fluid).

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, layout blocks | 172 occurrences |
| `{radius.control}` | 10px | Floating cards with shadows | 4 occurrences |
| `{radius.button}` | 5px | Primary and secondary buttons | 3 occurrences |
| `{radius.input}` | 7px | Form fields and search inputs | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `inner-glow` | `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px, rgba(0, 0, 0, 0.25) 0px 1px 0px 0px inset` | Feature cards on dark backgrounds | 9 occurrences |
| `deep-float` | `rgba(0, 0, 0, 0.5) 0px 0px 30px 0px` | Modal-like surfaces and hover states | 4 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#e77321` | Text `#ffffff` | Border 1px `#e77321` | Radius 5px | Typography 16px/700
**States observed:** Default | Hover: Background `#141416`, Text `#e77321` | Disabled: Background `#3f4349`

#### Surface
**Role:** Main content sectioning
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#061131` | Text `#ffffff` | Radius 0px
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#3f4349` | Radius 7px | Shadow `rgba(255, 255, 255, 0.1) inset`
**States observed:** Default

#### Elevated Card
**Role:** High-priority content blocks
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#061131` | Border 0px | Radius 10px | Shadow `rgba(0, 0, 0, 0.5) 0px 0px 30px`
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global header
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#061131` (transparent overlay) | Text `#ffffff` | Typography 14px/700
**States observed:** Default

#### Footer
**Role:** Global site map and contact
**Pages observed:** [https://lidp.com](https://lidp.com)
**Spec:** Background `#061131` | Text `#8a8a8a` | Border-top 1px `#8a8a8a`
**States observed:** Default

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

## Imagery & decoration
- **Network Meshes:** Blue and cyan glowing line-and-dot patterns representing connectivity.
- **Atmospheric Glows:** Soft radial gradients in `#3da4dc` behind technical icons.
- **Avoids:** Flat illustrations, bright white backgrounds, or rounded "bento" style layouts.

## Do's
- Use `#ffffff` for all text on dark surfaces to ensure 20:1 contrast.
- Apply `#e77321` for primary "Request a Demo" or "Learn More" actions.
- Use Poppins Extralight for headlines exceeding 30px.
- Maintain sharp corners (`0px`) for major section containers.
- Use `#8a8a8a` for non-essential metadata and footer links.

## Don'ts
- **Wrong:** Using `#3da4dc` (Accent Blue) as a primary button background.
  **Right:** Use `#e77321` (Action Orange).
  **Reason:** Blue is reserved for decorative "Training" or secondary accents; orange is the conversion driver.
- **Wrong:** Placing dark text on `#061131` backgrounds.
- **Wrong:** Mixing rounded corners on sections; keep layout blocks at `0px` radius.

## Similar brands
- IBM (Carbon Design System - Dark)
- Palantir (Foundry UI)
- Snowflake (Data Cloud aesthetic)

## Quick start

```css
/* CSS Variables */
:root {
  --lidp-navy: #061131;
  --lidp-black: #141416;
  --lidp-orange: #e77321;
  --lidp-blue-glow: #3da4dc;
  --lidp-text-primary: #ffffff;
  --lidp-text-muted: #8a8a8a;
  --lidp-font-display: 'Poppins', sans-serif;
}
```

## Known gaps
- Mobile-specific spacing tokens were not explicitly declared in the CSS variables.
- Hover state transitions (timing/easing) were not captured in the static evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | [https://lidp.com](https://lidp.com) | 1440x900 | 2026-06-06 |