Lightdash

Lightdash

The open-source AI native BI platform
Visit
Lightdash
Screens
19
Flows
0
Updates
Sections
Brand & identity

Marketing Pages

11
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Landing Page
Lightdash
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Pricing Page
Lightdash
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Features Page
Lightdash
Features Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Customers Page
Lightdash
Customers Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Customer Stories
Lightdash
Customer Stories
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash About Page
Lightdash
About Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Affiliate Page
Lightdash
Affiliate Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Security Page
Lightdash
Security Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Blog Feed
Lightdash
Blog Feed
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Blog Post
Lightdash
Blog Post
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Contact Page
Lightdash
Contact Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Landing Page
Lightdash
Landing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Pricing Page
Lightdash
Pricing Page
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Features Page
Lightdash
Features Page

🔒 Get SaaSFrame Pro to see 8 more marketing pages from Lightdash

Product Interfaces

8
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Main Dashboard
Lightdash
Dashboard
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash KPI Dashboard
Lightdash
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Company KPI
Lightdash
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Metrics Catalog
Lightdash
Table
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Metric Analytics
Lightdash
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash AI Chat Feed
Lightdash
Chat
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash AI Analysis
Lightdash
Chat
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Search Modal
Lightdash
Search Modal
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Main Dashboard
Lightdash
Dashboard
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash KPI Dashboard
Lightdash
Analytics
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Company KPI
Lightdash
Analytics

🔒 Get SaaSFrame Pro to see 5 more product intefaces from Lightdash

Emails

0
No items found.
No items found.

🔒 Get SaaSFrame Pro to see 3 more emails from Lightdash

No items found.
No items found.
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Blog Cards
Lightdash Blog Cards
This is some text inside of a div block.
Lightdash Blog Cards
Lightdash FAQ
Lightdash FAQ
This is some text inside of a div block.
Lightdash FAQ
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Timeline
Lightdash Timeline
This is some text inside of a div block.
Lightdash Timeline
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Call to Action
Lightdash Call to Action
This is some text inside of a div block.
Lightdash Call to Action
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Footer
Lightdash Footer
This is some text inside of a div block.
Lightdash Footer
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Pricing
Lightdash Pricing
This is some text inside of a div block.
Lightdash Pricing
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash Pricing Plan Comparison
Lightdash Pricing Plan Comparison
This is some text inside of a div block.
Lightdash Pricing Plan Comparison
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figma file available
Lightdash FAQ
Lightdash FAQ
This is some text inside of a div block.
Lightdash FAQ

Visual identity

DESIGN.md
CSS Variables
Design Tokens
Notes

Lightdash Design Tokens

Source: lightdash.com · App UI sourced from the open-source repo ([github.com/lightdash/lightdash](http://github.com/lightdash/lightdash)) Stack: Marketing site built with Framer; app built with React + Mantine UI (v6 + v8), Inter typeface.

Overview

Lightdash ships a full dual-theme system (light + dark). The toggle is stored in localStorage under the key color-scheme. Embed routes can force a theme via ?theme=light|dark.

Typography \- Font family: Inter (primary), Menlo / Ubuntu Mono / Consolas (monospace), Noto Sans CJK variants for CJK locales \- Base size: 14px \- Line height: 1.4 \- Heading weight: 600 (semibold)

Spacing system Custom scale built on top of Mantine: 1px → 160px (1, 2, xxs=4, xs=8, sm=12, md=16, lg=20, xl=24, xxl=32, 3xl=40, 4xl=48, 5xl=64, 6xl=80, 7xl=96, 8xl=128, 9xl=160).

Color philosophy \- Neutral grays (ldGray) for surfaces and text in light mode \- Same neutral ramp collapses into ldDark in dark mode so tones stay consistent \- Three semantic field color tracks: blue (dimensions), orange (metrics), green (calculations)

Component defaults \- Border radius: md (8px) everywhere — buttons, inputs, cards, modals, popovers \- Transitions: 200ms ease-in-out (sidebar uses faster 150ms) \- Default button variant: dark (near-black bg, white text)

Layout constants \- Navbar: 50px · Page header: 64px · Footer: 80px \- Content width: 900px · Max large: 1600px · Min: 600px \- Sidebar default: 400px · Min: 320px

:root { / TYPOGRAPHY / --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-family-mono: Menlo, 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; --font-family-chart: 'Inter', sans-serif; --font-size-base: 14px; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.4; --heading-font-family: var(--font-family-base); --heading-font-weight: var(--font-weight-semibold);

/ SPACING / --space-1: 1px; --space-2: 2px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-xxl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; --space-6xl: 80px; --space-7xl: 96px; --space-8xl: 128px; --space-9xl: 160px; --space-empty: 96px;

/ BORDER RADIUS / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

/ SHADOWS / --shadow-subtle: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); --shadow-heavy: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04); --shadow-bottom-fade: 0 0 0 1px #bec1c426;

/ TRANSITIONS / --transition-duration: 200ms; --transition-timing: ease-in-out; --transition-default: var(--transition-duration) var(--transition-timing);

/ LAYOUT / --navbar-height: 50px; --banner-height: 35px; --page-header-height: 64px; --footer-height: 80px; --page-content-width: 900px; --page-content-max-width-lg: 1600px; --page-min-content-width: 600px; --sidebar-default-width: 400px; --sidebar-min-width: 320px; --sidebar-resize-handle-width: 6px; --sidebar-toggle-reserve: 48px; --sidebar-animation-duration: 150ms;

/ Z-INDEX / --z-dashboard-header: 10; --z-dashboard-tabs: 9;

/ LIGHT MODE COLORS / --color-background: #FEFEFE; --color-foreground: #1A1B1E; --color-black: #111418;

/ Gray scale (ldGray) / --color-gray-0: #f8f9fa; --color-gray-1: #f1f3f5; --color-gray-2: #e9ecef; --color-gray-3: #dee2e6; --color-gray-4: #ced4da; --color-gray-5: #adb5bd; --color-gray-6: #868e96; --color-gray-7: #495057; --color-gray-8: #343a40; --color-gray-9: #212529;

/ Dark scale (ldDark) / --color-dark-0: #C9C9C9; --color-dark-1: #b8b8b8; --color-dark-2: #828282; --color-dark-3: #696969; --color-dark-4: #424242; --color-dark-5: #3b3b3b; --color-dark-6: #2e2e2e; --color-dark-7: #242424; --color-dark-8: #1f1f1f; --color-dark-9: #141414;

/ Semantic field colors / --color-dimension: #3b5bdb; --color-dimension-bg: #EDF0FD; --color-dimension-bg-hover: rgba(75, 105, 239, 0.157); --color-dimension-header: #1c2b67; --color-metric: #de7f0b; --color-metric-bg: #FBE9E0; --color-metric-bg-hover: rgba(232, 89, 12, 0.188); --color-metric-header: #502e06; --color-calculation: #2b8a3e; --color-calculation-bg: #EBF5ED; --color-calculation-bg-hover: rgba(47, 158, 68, 0.157); --color-calculation-header: #1b5326;

/ Table selection / --color-table-selected-bg: #ECF6FE; --color-table-selected-border: #4170CB;

/ Input / Card / --color-input-border: var(--color-gray-2); --color-input-text: var(--color-gray-7); --color-input-label: var(--color-gray-7); --color-card-border: var(--color-gray-2); --color-scrollbar-thumb: var(--color-gray-3);

/ Button variants / --color-btn-dark-bg: var(--color-dark-9); --color-btn-dark-hover: var(--color-dark-8); --color-btn-dark-text: var(--color-gray-0); --color-btn-subtle-text: var(--color-gray-7); --color-btn-subtle-hover: var(--color-gray-1); }

/ DARK MODE / [data-color-mode='dark'] { --color-background: #1a1a1a; --color-foreground: #FEFEFE; --color-gray-0: #141414; --color-gray-1: #1f1f1f; --color-gray-2: #242424; --color-gray-3: #2e2e2e; --color-gray-4: #3b3b3b; --color-gray-5: #525252; --color-gray-6: #7a7a7a; --color-gray-7: #9e9e9e; --color-gray-8: #c8c8c8; --color-gray-9: #d9d9d9; --color-dark-0: #141414; --color-dark-1: #1f1f1f; --color-dark-2: #242424; --color-dark-3: #2e2e2e; --color-dark-4: #3b3b3b; --color-dark-5: #525252; --color-dark-6: #7a7a7a; --color-dark-7: #9e9e9e; --color-dark-8: #c8c8c8; --color-dark-9: #d9d9d9; --color-dimension: #95aaf0; --color-dimension-bg: #202539; --color-dimension-bg-hover: rgba(75, 105, 239, 0.208); --color-dimension-header: #93acff; --color-metric: #e08a20; --color-metric-bg: #3E2F1A; --color-metric-bg-hover: rgba(129, 81, 13, 0.457); --color-metric-header: #de7f0b; --color-calculation: #38af4d; --color-calculation-bg: #1D3525; --color-calculation-bg-hover: rgba(35, 117, 53, 0.396); --color-calculation-header: #48b95d; --color-table-selected-bg: #1e3a5f; --color-table-selected-border: #4d8ed4; --color-subtle-gray: #3b3b3b; --color-contrast-gray: #7a7a7a; }

Color Tokens

Base | Token | Light | Dark | |---|---|---| | --color-background | #FEFEFE | #1a1a1a | | --color-foreground | #1A1B1E | #FEFEFE | | --color-black | #111418 | #111418 |

Gray Scale (ldGray) | Token | Light | Dark | |---|---|---| | --color-gray-0 | #f8f9fa | #141414 | | --color-gray-1 | #f1f3f5 | #1f1f1f | | --color-gray-2 | #e9ecef | #242424 | | --color-gray-3 | #dee2e6 | #2e2e2e | | --color-gray-4 | #ced4da | #3b3b3b | | --color-gray-5 | #adb5bd | #525252 | | --color-gray-6 | #868e96 | #7a7a7a | | --color-gray-7 | #495057 | #9e9e9e | | --color-gray-8 | #343a40 | #c8c8c8 | | --color-gray-9 | #212529 | #d9d9d9 |

Dark Scale (ldDark — light mode only, dark mode merges with ldGray) | Token | Light | |---|---| | --color-dark-0 | #C9C9C9 | | --color-dark-4 | #424242 | | --color-dark-7 | #242424 | | --color-dark-9 | #141414 |

Semantic Field Colors | Field | Token | Light | Dark | |---|---|---|---| | Dimension | --color-dimension | #3b5bdb | #95aaf0 | | Dimension bg | --color-dimension-bg | #EDF0FD | #202539 | | Dimension header | --color-dimension-header | #1c2b67 | #93acff | | Metric | --color-metric | #de7f0b | #e08a20 | | Metric bg | --color-metric-bg | #FBE9E0 | #3E2F1A | | Metric header | --color-metric-header | #502e06 | #de7f0b | | Calculation | --color-calculation | #2b8a3e | #38af4d | | Calculation bg | --color-calculation-bg | #EBF5ED | #1D3525 | | Calculation header | --color-calculation-header | #1b5326 | #48b95d |

Spacing Tokens | Token | Value | Rem | |---|---|---| | --space-xxs | 4px | 0.25rem | | --space-xs | 8px | 0.5rem | | --space-sm | 12px | 0.75rem | | --space-md | 16px | 1rem | | --space-lg | 20px | 1.25rem | | --space-xl | 24px | 1.5rem | | --space-xxl | 32px | 2rem | | --space-3xl | 40px | 2.5rem | | --space-4xl | 48px | 3rem | | --space-5xl | 64px | 4rem | | --space-6xl | 80px | 5rem | | --space-7xl | 96px | 6rem | | --space-8xl | 128px | 8rem | | --space-9xl | 160px | 10rem |

Typography Tokens | Token | Value | |---|---| | --font-family-base | Inter, system-ui, … | | --font-family-mono | Menlo, Ubuntu Mono, Consolas, … | | --font-size-base | 14px | | --font-weight-medium | 500 | | --font-weight-semibold | 600 | | --line-height-base | 1.4 |

Border Radius Tokens | Token | Value | Usage | |---|---|---| | --radius-sm | 4px | Badges, pills | | --radius-md | 8px | Default — buttons, inputs, cards, popovers | | --radius-lg | 12px | Larger surfaces |

Shadow Tokens | Token | Value | |---|---| | --shadow-subtle | 0px 1px 2px 0px rgba(10, 13, 18, 0.05) | | --shadow-heavy | 0px 12px 16px -4px rgba(10,13,18,.08), 0px 4px 6px -2px rgba(10,13,18,.03), 0px 2px 2px -1px rgba(10,13,18,.04) |

Layout Tokens | Token | Value | |---|---| | --navbar-height | 50px | | --page-header-height | 64px | | --footer-height | 80px | | --page-content-width | 900px | | --page-content-max-width-lg | 1600px | | --page-min-content-width | 600px | | --sidebar-default-width | 400px | | --sidebar-min-width | 320px |

Implementation Notes

Source: Tokens extracted from the open-source Lightdash repository (packages/frontend/src/mantineTheme.ts, mantine8Theme.ts, mantine8CssVariablesResolver.ts, components/common/Page/constants.ts).

UI framework: Mantine v6 (legacy) + Mantine v8 (migration in progress). The app runs both providers simultaneously during the Mantine migration.

Dual theme: Full light/dark support. Color scheme stored in localStorage key color-scheme, default light. Embed routes (/embed/...) can override via ?theme=light|dark URL param without affecting the viewer's saved preference.

Gray ramp behaviour: In light mode, ldGray is a standard cool-neutral ramp (#f8f9fa → #212529). In dark mode, both ldGray and ldDark collapse to the same near-black ramp (#141414 → #d9d9d9) to prevent tone clashing.

Field color system: Three semantic tracks keyed to BI field types: \- Blue → Dimensions (exploratory, structural) \- Orange → Metrics (computed, quantitative) \- Green → Calculations (derived, custom) Each track has: text color, background, hover background, column-header color.

Default component styles: \- All interactive elements default to radius: md (8px) \- Default button variant is dark (ldDark[9] background, ldGray[0] text) \- Subtle button: ldGray[7] text, ldGray[1] hover background \- All transitions: 200ms ease-in-out (sidebar: 150ms) \- Scrollbar thumb: ldGray[3]

CJK font support: CSS :lang() selectors apply Noto Sans CJK variants (JP, SC, TC, KR) for headless screenshot/PDF rendering on Linux where fontconfig is bypassed.

Marketing site (lightdash.com): Built with Framer, client-side rendered. Design tokens above reflect the product app, not the marketing site. The marketing site uses a dark aesthetic with the same Inter typeface.