.webp)
Lightdash
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.
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.