№ duckdb-org

DuckDB – An in-process SQL OLAP database management system

Cool, clean code clarity: crisp sans-serif, generous white space, a digital laboratory feel.

Bento Gridminimalism swiss brutalism developer toolslight

DuckDB is an in-process SQL OLAP database management system. Simple, feature-rich, fast & open source. · minimalism, swiss, brutalism, developer-tools, saas, feature-trio, hero-with-cta, feature-alternating

DuckDB – An in-process SQL OLAP database management system - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

DuckDB – An in-process SQL OLAP database management system - full page scroll

DuckDB – An in-process SQL OLAP database management system - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#f6ec07
OKLCHoklch(92.1% 0.196 107)
RoleDominant
find sites →
Hex#fcf47c
OKLCHoklch(95.0% 0.142 105)
RoleSurface
find sites →
Hex#bcac04
OKLCHoklch(73.5% 0.154 103)
RoleInk
find sites →
Hex#9c9757
OKLCHoklch(66.6% 0.085 105)
RoleAccent
find sites →
Hex#bcb47c
OKLCHoklch(76.3% 0.075 101)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	SuisseIntl	57px	600	1.1	-0.14193px	Aa Bb Cc
h2	SuisseIntl	45px	600	1.2	0.045px	Aa Bb Cc
h3	SuisseIntl	19px	600	1.2	0.019px	Aa Bb Cc
body	SuisseIntl	16px	450	1.5	0.04px	Aa Bb Cc
button	SuisseIntl	14px	450	1	0.014px	Aa Bb Cc

Spacing scale

35px

50px

70px

105px

Radius scale

0px

10px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f6ec07;
  --color-surface: #fcf47c;
  --color-ink: #bcac04;
  --color-accent: #9c9757;
  --color-detail: #bcb47c;
}

/* CSS variables exposed by source */
:root {
  --type-display-3: 36px;
  --type-body-normal: 16px;
  --type-tiny: 12px;
  --type-code: 14px;
  --type-headline-2: 28px;
  --type-label-1: 14px;
  --type-body-large: 18px;
  --type-body-docs: 15px;
  --type-label-3: 11px;
  --type-menu-items-m: 14px;
  --type-side-menu: 13px;
  --type-code-large: 16px;
  --type-micro: 10px;
  --type-label-2: 12px;
  --type-display-1: 57px;
  --type-title-1: 22px;
  --type-title-2: 19px;
  --type-menu-items-l: 14.5px;
  --type-display-2: 45px;
  --type-headline-1: 32px;
  --type-body-small: 14px;
  --type-title-3: 16px;
  --type-pre-title: 12px;
  --type-headline-3: 24px;
  --type-weight-standard: 450;
  --grey-transparent-93: #ededed99;
  --page-margin-xxl: 64px;
  --interactive-table-row-hover: #f2f2f2;
  --grey-15: #262626;
  --red-60: #ff3333;
  --grey-30: #4c4c4c;
  --doc-codebox-button-background-color: #f2f2f299;
  --blue-transparent-70: #66c4ff99;
  --no-export-labs: #f2f2f299;
  --main-ribbon-border-color-blue: #66c4ff99;
  --no-export-diagram-yellow: #ccbd00;
  --blue-85: #b2e2ff;
  --blue-transparent-95: #e5f5ff99;
  --yellow-transparent-85: #fffcb299;
  --doc-codebox-background-hover: #e6e6e6;
  --page-margin-s: 12px;
  --yellow-transparent-15: #4d460099;
  --cli-secondary: #626262;
  --labs-nav-icon-hover: #ff6900;
  --red-02: #0a0000;
  --blue-transparent-60: #33b1ff99;
  --purple-85: #beb3ff;
  --grey-transparent-30: #4c4c4c99;
  --page-box-padding-secodary: 20px;
  --lake-architecture-background-hover: #e5f5ff;
  --main-marker-background-color: #fff43399;
  --interactive-installation-icon-border: #cccccc;
  --blue-transparent-30: #20577999;
  --main-tooltip-border: #ccbd0099;
  --grey-60: #999999;
  --social-social-colorful-border: #ccbd00;
  --social-thumbnail-button-background-color: #1a1a1a;
  --page-margin-xl: 48px;
  --grey-90: #e6e6e6;
  --main-text-tertiary-yellow: #998b00;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of DuckDB – An in-process SQL OLAP database management system.
Reference design system (extracted from the live site):
- Palette: #f6ec07, #fcf47c, #bcac04, #9c9757, #bcb47c
- Typefaces: SuisseIntl, sans-serif
- Macrostructure: Bento Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/duckdb-org

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

SuisseIntl

57px

600

1.1

-0.14193px

Aa Bb Cc

SuisseIntl

45px

600

1.2

0.045px

Aa Bb Cc

SuisseIntl

19px

600

1.2

0.019px

Aa Bb Cc

body

SuisseIntl

16px

450

1.5

0.04px

Aa Bb Cc

button

SuisseIntl

14px

450

0.014px

Aa Bb Cc

:root { --color-dominant: #f6ec07; --color-surface: #fcf47c; --color-ink: #bcac04; --color-accent: #9c9757; --color-detail: #bcb47c; } /* CSS variables exposed by source */ :root { --type-display-3: 36px; --type-body-normal: 16px; --type-tiny: 12px; --type-code: 14px; --type-headline-2: 28px; --type-label-1: 14px; --type-body-large: 18px; --type-body-docs: 15px; --type-label-3: 11px; --type-menu-items-m: 14px; --type-side-menu: 13px; --type-code-large: 16px; --type-micro: 10px; --type-label-2: 12px; --type-display-1: 57px; --type-title-1: 22px; --type-title-2: 19px; --type-menu-items-l: 14.5px; --type-display-2: 45px; --type-headline-1: 32px; --type-body-small: 14px; --type-title-3: 16px; --type-pre-title: 12px; --type-headline-3: 24px; --type-weight-standard: 450; --grey-transparent-93: #ededed99; --page-margin-xxl: 64px; --interactive-table-row-hover: #f2f2f2; --grey-15: #262626; --red-60: #ff3333; --grey-30: #4c4c4c; --doc-codebox-button-background-color: #f2f2f299; --blue-transparent-70: #66c4ff99; --no-export-labs: #f2f2f299; --main-ribbon-border-color-blue: #66c4ff99; --no-export-diagram-yellow: #ccbd00; --blue-85: #b2e2ff; --blue-transparent-95: #e5f5ff99; --yellow-transparent-85: #fffcb299; --doc-codebox-background-hover: #e6e6e6; --page-margin-s: 12px; --yellow-transparent-15: #4d460099; --cli-secondary: #626262; --labs-nav-icon-hover: #ff6900; --red-02: #0a0000; --blue-transparent-60: #33b1ff99; --purple-85: #beb3ff; --grey-transparent-30: #4c4c4c99; --page-box-padding-secodary: 20px; --lake-architecture-background-hover: #e5f5ff; --main-marker-background-color: #fff43399; --interactive-installation-icon-border: #cccccc; --blue-transparent-30: #20577999; --main-tooltip-border: #ccbd0099; --grey-60: #999999; --social-social-colorful-border: #ccbd00; --social-thumbnail-button-background-color: #1a1a1a; --page-margin-xl: 48px; --grey-90: #e6e6e6; --main-text-tertiary-yellow: #998b00; }

Build a landing page in the visual style of DuckDB – An in-process SQL OLAP database management system. Reference design system (extracted from the live site): - Palette: #f6ec07, #fcf47c, #bcac04, #9c9757, #bcb47c - Typefaces: SuisseIntl, sans-serif - Macrostructure: Bento Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/duckdb-org