---
title: "Lightdash design system"
variant: extended
source: https://www.lightdash.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/lightdash-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lightdash · Design System

> Dark canvas, cosmic product spectacle

**Theme:** dark · **Industry:** saas · **Source:** https://www.lightdash.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lightdash opens with a restrained black navigation bar above a full-bleed, space-themed 3D product visual. A compact purple CTA and crisp white navigation contrast with the luminous violet imagery.

## North star

Keep the interface nearly black and understated so one vivid, cinematic product image and a precise violet CTA carry the visual focus.

## Overview

The page is defined by a near-black canvas and a large, cinematic product image rather than by a succession of visible content sections. The navigation sits in a distinct black band, with the Lightdash mark and compact links in white; a pale secondary action and saturated violet primary CTA provide the key interface accents. The hero image stages a handheld console and branded cartridge against deep space, with vivid purple nebulae and stars. Those brighter image colours are illustrative rather than a replacement for the restrained interface palette. Britti Sans Medium anchors the site’s body and navigation, with Inter used for captions; both read cleanly at compact scale. The layout uses a wide, centered composition and comfortable spacing, giving the artwork room to dominate while keeping navigation concise. Rounded CTA corners are subtle; the overall treatment favors flat dark surfaces and image-led depth over visible borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Navigation text and pale secondary-action surface; also appears on the console body in the hero artwork. |
| Night Canvas | `#07060f` | `--color-night-canvas` | surface | Measured dark page canvas; the screenshot’s expansive hero backdrop reads near-black. |
| Muted Graphite | `#272835` | `--color-muted-graphite` | semantic | Measured muted-text tone, primarily associated with navigation; use sparingly against the dark interface. |
| Black Panel | `#080808` | `--color-black-panel` | surface | Near-black surface tone measured in the navigation area. |
| Charcoal Panel | `#0c0c0c` | `--color-charcoal-panel` | surface | Secondary near-black surface tone measured in the navigation area. |
| Signal Violet | `#5e4cff` | `--color-signal-violet` | accent | Primary “Start for free” CTA background; a focused interface accent, not a general page wash. |

### Semantic aliases

`--color-canvas` → `#07060f` (Night Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#080808` (Black Panel) · `--color-surface-3` → `#0c0c0c` (Charcoal Panel) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#272835` (Muted Graphite) · `--color-accent` → `#5e4cff` (Signal Violet) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#07060f` | 20.15:1 | AAA |
| `#ffffff` | `#080808` | 20.03:1 | AAA |
| `#ffffff` | `#0c0c0c` | 19.56:1 | AAA |
| `#272835` | `#07060f` | 1.38:1 | fail |
| `#272835` | `#ffffff` | 14.57:1 | AAA |
| `#272835` | `#080808` | 1.37:1 | fail |
| `#272835` | `#0c0c0c` | 1.34:1 | fail |
| `#5e4cff` | `#07060f` | 3.79:1 | AA-large |
| `#5e4cff` | `#ffffff` | 5.31:1 | AA |
| `#5e4cff` | `#080808` | 3.77:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Britti Sans Medium | `--font-body` | webfont | 500 | Measured body and navigation type | Inter |
| Inter | `--font-inter` | webfont | 500 | Measured caption type | Inter |

- **Britti Sans Medium:** Medium weight; measured body and navigation use relaxed line spacing and slight positive tracking.
- **Inter:** Medium weight in the measured caption role; clean, compact supporting text.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 500 | 2 | 0.01em | — | Britti Sans Medium | General body copy where present beyond the visible first viewport. |
| caption | 15px | 500 | 1.2 | 0 | — | Inter | Compact supporting labels and caption-sized content. |
| nav | 16px | 500 | 2 | 0.01em | — | Britti Sans Medium | Header links, login, and navigation actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 8, 10, 12, 14, 16, 20, 24, 32 px.
- Section rhythm — · element gap 10px · card padding — · max content width 1280px.

The measured page width is capped at 1280px, while the opening composition reads as a broad, nearly full-bleed hero beneath a single horizontal navigation row. Navigation content is distributed across the width: brand and links on the left, login and actions on the right. The screenshot shows a comfortable, uncluttered header and a dense hero image that fills the remaining viewport. The section measurement reports four columns, but the visual evidence is a single continuous composition rather than a visible card grid.

## Shape & elevation

- Radius: button `6px` · xs `6px`
- No box shadows measured: the page is flat.

The visible interface is mostly flat: a black navigation band sits above the image without prominent shadows or borders. Depth comes from the hero artwork’s overlapping objects, lighting, and atmospheric background. CTA corners are subtly rounded; avoid adding card-like elevation to the restrained header.

## Imagery

A large 3D-rendered handheld console and cartridge sit against a starfield with saturated purple nebulae. The objects are tilted and layered, with the console foregrounded and cartridge behind it; the black screen and cosmic backdrop create contrast. Treat this as bespoke hero artwork, not as a source for expanding the interface palette.

## Components

### Top navigation

A black horizontal header with the Lightdash mark, compact product and resource links, login, and two right-aligned actions.

### Primary CTA

“Start for free” uses measured #5e4cff, a 6px radius, and compact padding; keep it the strongest interface accent.

### Secondary CTA

“Talk to our team” is a pale button with dark text, measured 6px radius, and restrained contrast against the dark header.

### Hero artwork

Full-width cosmic 3D scene featuring a handheld console and branded game cartridge, with saturated violet space imagery.

### Measured component styles

- **Primary button** (“Start for free”): background #5e4cff · text #0000ee · radius 6px · padding 12px 20px · 400 12px sans-serif
- **Secondary button** (“Talk to our team”): background #f8fafb · text #000000 · radius 6px · padding 0px 20px · 400 12px sans-serif
- **Navigation item** (“Product Pricing Customers Resources Logi”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the navigation band near-black.
- Use white for crisp navigation text.
- Reserve #5e4cff for the primary CTA.
- Let one large hero visual dominate.
- Keep header links and actions compact.
- Use cosmic purple as imagery, not UI filler.

## Don't

- Do not turn the entire page purple.
- Do not add unsupported palette colors.
- Do not crowd the hero with cards.
- Do not add heavy shadows or borders.
- Do not treat illustration colors as interface tokens.
- Do not make the navigation visually louder than the hero.

## Agent prompt

Build a new page in Lightdash’s restrained, dark product-led style. Use Night Canvas (#07060f) and near-black surfaces (#080808, #0c0c0c) for the interface, with Gallery White (#ffffff) for legible navigation and Signal Violet (#5e4cff) only for the primary action. Keep the header compact and horizontal: brand and concise links to the left, login and paired actions to the right. Use Britti Sans Medium for navigation and body copy, with Inter for small captions. Give the main content a wide, image-led composition and comfortable breathing room; favor a single polished product visual over a busy grid. If using cosmic purple imagery, keep it within the artwork. Favor flat surfaces, subtle CTA rounding, and clear contrast over decorative borders, shadows, or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact horizontal navigation above a wide, full-bleed 3D product scene. | Product and resource navigation, Login access, Primary and secondary actions | Near-black header band, White navigation text, Violet primary CTA, Cosmic 3D hero artwork |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lightdash-com