# Lucidlink Design System

> High-contrast technical precision anchored by deep indigo canvases and neon-lime kinetic accents.

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

## TL;DR
Lucidlink employs a "Dark Mode by Default" aesthetic for its primary brand moments, utilizing a deep charcoal `#151519` and indigo `#191452` foundation. The system's "voltage" is provided by a high-visibility neon lime `#b0fb16` (tokenized as `--ds-color-neon`), used exclusively for primary actions and critical highlights. Typography is strictly structured between **Aeonik** for high-impact technical headings and **Inter** for dense, legible utility and body text. Layouts rely on a generous 96px vertical rhythm and large-radius containers (24px to 32px) that soften the otherwise severe technical palette.

## Signature DNA
1. **Neon-on-Dark Contrast** (The pairing of `#b0fb16` against `#151519` or `#191452` creates a "heads-up display" feel, signaling high-performance cloud technology. Observed on Homepage and Pricing heroes.)
2. **Aeonik Display Geometry** (The use of Aeonik at weight 700 for all major headings provides a proprietary, geometric sans-serif voice that feels engineered rather than editorial.)
3. **Soft-Tech Radii** (Large 32px corner radii on high-contrast cards and section containers prevent the dark UI from feeling overly aggressive. Observed across all feature grids.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--ds-color-charcoal` | `#151519` | Primary text, dark section backgrounds, borders | 402 | 1 | Computed Style |
| `--ds-color-white` | `#ffffff` | Page background, light section text, button labels | 344 | 1 | Brand Page |
| `--ds-color-neutral-90` | `#070708` | Deepest black for footer and terminal-style sections | 27 | 1 | Computed Style |
| `--ds-color-neutral-10` | `#f0efe9` | Warm grey secondary surface for pricing tables | 26 | 1 | Computed Style |
| `--ds-color-grey-81` | `#272730` | Muted borders and secondary dark surfaces | 16 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--ds-color-indigo-70` | `#3a2eb8` | Primary brand color, borders, text links | 24 | 1 | Computed Style |
| `--ds-color-neon` | `#b0fb16` | Primary CTA background, "instant" highlights | 9 | 1 | Computed Style |
| `--ds-color-indigo-60` | `#5e53e0` | Secondary button text, hover states | 4 | 1 | Computed Style |
| `--ds-color-neutral-30` | `#c4b9a1` | Decorative borders (decorative_only) | 5 | 1 | Computed Style |
| `--ds-color-indigo-75` | `#2e2593` | Deep indigo surface (decorative_only) | 1 | 1 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--ds-color-success` | `#e0ff9f` | Positive validation / Success states |
| `--ds-color-warning` | `#ffc2a3` | Warning / Alert states |
| `--ds-color-error` | `#ffc2c3` | Error / Critical states |
| `--ds-color-info` | `#cdc9ff` | Informational highlights |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `__aeonik_4019e8` | 500, 600, 700 | Headings, Display | Montserrat | Proprietary |
| `__Inter_492eb4` | 400, 500, 600, 700 | Body, UI, Labels | Inter (Google) | SIL OFL |
| `Arial` | 600 | Fallback / Button UI | System Sans | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 72px | 79.2px | normal | 700 | Hero Display | `p._a3._r` |
| `{type.display-md}` | 54px | 59.4px | normal | 700 | Page Titles | `h1` |
| `{type.h2}` | 44px | 48.4px | normal | 700 | Section Heads | `h2` |
| `{type.h3}` | 33px | 36.3px | normal | 700 | Sub-sections | `h3` |
| `{type.h4}` | 24px | 26.4px | normal | 700 | Card Titles | `h3.h4` |
| `{type.body-lg}` | 20px | 32px | normal | 400 | Lead Paragraphs | `section._b8._aY` |
| `{type.body-md}` | 16px | 25.6px | normal | 400 | Default Body | `p` |
| `{type.label-sm}` | 14px | 14px | 1.12px | 600 | Uppercase Badges | `p._s._zg` |

### Principles
1. **Aeonik is for Impact.** Never use Aeonik for body copy exceeding two sentences; it is reserved for structural hierarchy.
2. **Loose Body Leading.** Body text (16px/20px) uses a 1.6x line-height ratio (`32px` for `20px` text) to maintain legibility against dark backgrounds.
3. **Heavyweight Headers.** Headings are almost exclusively weight 700, creating a "stamped" technical feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 37 |
| `{space.base}` | 16px | 75 |
| `{space.lg}` | 24px | 90 |
| `{space.xl}` | 32px | 42 |
| `{space.section}` | 96px | 27 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.control}` | 12px | Form inputs, small buttons | 12px (8 occurrences) |
| `{radius.card}` | 16px | Pricing cards, feature tiles | 16px (64 occurrences) |
| `{radius.panel}` | 32px | Main section containers, large CTAs | 32px (38 occurrences) |
| `{radius.full}` | 50px | Pill buttons, avatars | 50px (20 occurrences) |

## Components
### Tier 1: Foundational
#### Primary Button (Neon)
**Role:** Main call to action (e.g., "Start your free trial")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#b0fb16` / Text: `#151519` / Radius: `32px` / Padding: `8px 24px` / Font: `Inter 600`
**States observed:** Default | Hover: Not captured

#### Ghost Button (White)
**Role:** Secondary action on dark backgrounds
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `2px #ffffff` / Radius: `32px` / Padding: `8px 24px`

### Tier 2: Patterns
#### Feature Card (Dark)
**Role:** Highlighting product capabilities
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#1c1c22` / Text: `#ffffff` / Border: `1px #272730` / Radius: `20px` / Padding: `32px`

#### Pricing Card (Light)
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Text: `#151519` / Border: `0px` / Radius: `24px` / Padding: `32px`

### Tier 3: Surface-specific
#### Navigation Bar
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `transparent` (over dark) / Text: `#ffffff` / Height: `~80px` / Font: `Inter 500`

#### Footer
**Role:** Global site map
**Pages observed:** All
**Spec:** Background: `#070708` / Text: `#ffffff` / Padding: `96px 0px 64px` / Font: `Inter 400`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px |
| Section Padding (Vertical) | 96px |
| Grid Gap (Cards) | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked card grids, 100% width buttons, reduced heading sizes (e.g., 72px -> 40px) |
| Desktop | 1440px | Multi-column layouts (3-up or 4-up), 96px section spacing |

## Imagery & decoration
- **Technical Schematics:** Uses simplified UI abstractions and node-based diagrams to represent cloud workflows.
- **Brand Gradients:** Subtle indigo-to-black gradients (`#221b6e` to `#151519`) used in hero backgrounds.
- **Avoids:** Soft photography, organic shapes, or pastel colors.

## Do's
- Use `#b0fb16` for the primary "Start" action only.
- Maintain `96px` vertical spacing between major content blocks.
- Pair Aeonik headings with Inter body text for a technical hierarchy.
- Use `32px` radii for large container elements to maintain brand softness.
- Ensure all text on dark backgrounds uses `#ffffff` for maximum contrast.

## Don'ts
- **Wrong:** Using `#5e53e0` (Indigo 60) for a primary CTA background. **Right:** Use `#b0fb16`. **Reason:** Indigo is a secondary brand signal; Neon is the primary action signal.
- **Wrong:** Applying Aeonik to long-form paragraph text. **Right:** Use Inter. **Reason:** Aeonik's geometric nature reduces legibility at small sizes.
- **Wrong:** Using sharp `0px` corners for feature cards. **Right:** Use `16px` or `20px`. **Reason:** The brand identity relies on the "Soft-Tech" radius to differentiate from legacy dev-tools.

## Similar brands
- Vercel (Dark mode, high contrast, geometric type)
- Linear (Technical precision, dark UI, subtle gradients)
- Sentry (Bold accent colors on dark foundations)

## Quick start
```css
/* CSS Variables */
:root {
  --ds-color-charcoal: #151519;
  --ds-color-neon: #b0fb16;
  --ds-color-indigo-70: #3a2eb8;
  --ds-color-white: #ffffff;
  --ds-radius-card: 16px;
  --ds-radius-panel: 32px;
  --ds-space-section: 96px;
}
```

## Agent prompt examples
- "Generate a hero section for Lucidlink with a `#151519` background, a `72px` Aeonik 700 heading in `#ffffff`, and a primary pill button using `#b0fb16`."
- "Create a 3-column feature grid using cards with `20px` border-radius, `#1c1c22` background, and `1px` border of `#272730`."
- "Design a pricing tier card for Lucidlink using `#ffffff` background, `24px` radius, and `32px` internal padding."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation menu (hamburger) interaction was not fully analyzed.
- Shadow tokens were not present in the CSS variable declarations or computed styles.

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