Design System

The fastest
open-source
database.

Clean, technical UI with signature yellow accents, crisp black text on white, and developer-focused precision.

14 color tokens 10 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with signature yellow accent and developer-focused utility colors. 14 tokens across surfaces, text, interaction, and state indicators.

Pure White
#ffffff
Primary page background
Snow
#fafafa
Secondary sections, alternating rows
Cloud
#f5f5f5
Code blocks, elevated panels
Smoke
#e8e8e8
Borders, dividers
Ash
#d0d0d0
Inactive states, disabled
Carbon
#333333
Primary text, headings
Graphite
#555555
Secondary text, body copy
Slate
#888888
Placeholders, tertiary labels
Canary
#FADB14
Primary accent, CTAs, highlights
Amber
#D4A800
Hover states, deeper accent
Honey
#FFF3B0
Light accent backgrounds
Data Blue
#1A73E8
Links, informational accents
Query Green
#0B8043
Success states, confirmations
Error Red
#D93025
Errors, destructive actions
Typography

Type Scale

Inter as primary typeface. JetBrains Mono for code, SQL queries, and technical data. Clean, modern, and highly legible.

Display-lg Lightning fast 48px / 1.0 / -0.02em
Display Analytics at scale 40px / 1.1 / -0.02em
Heading-lg Query performance 32px / 1.2 / -0.02px
Heading Data ingestion 24px / 1.2 / -0.02px
Subheading Configuration options 18px / 1.4 / -0.01px
Body Default body text for readable content and documentation 14px / 1.6 / 0
Body-sm Dense data, comparison rows, table cells 13px / 1.5 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px
Code SELECT * FROM events WHERE date > today() 14px / 1.6 / Mono

Fonts

Primary Inter 400–700 · 12–48px
Mono JetBrains Mono 400–700 · Code only
Layout

Spacing & Shapes

Base unit 4px. Compact density optimized for developer productivity. 12-step spacing scale, 9 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 4px
md 6px
lg 8px
xl 12px
pill 9999px
Elevation

Surfaces

Flat surfaces with subtle borders for hierarchy. 4 distinct surface levels from white to accent highlight.

Pure White #ffffff
Snow #fafafa
Cloud #f5f5f5
Honey #FFF3B0
Components

Button Variants

Primary action (Canary), secondary (outlined), and ghost variants for different interaction hierarchies.

Primary Button
Main call to action — highest visual weight
.btn-primary
Canary (#FADB14) background, Carbon (#333333) text, 6px radius. Bold and high-contrast for the main CTA.
Secondary Button
Secondary interactive actions
.btn-secondary
Pure White background, Carbon text, Smoke border. Clean and understated for secondary actions.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Graphite text, no border, transparent background. Minimal presence for tertiary actions.
Code Block
SQL queries, terminal output, code snippets
.code-block
SELECT count() AS total_events FROM events WHERE date > today() - 30 GROUP BY event_type ORDER BY total_events DESC
Cloud (#f5f5f5) background, JetBrains Mono 14px, Carbon text. For SQL queries and technical content.
Input Field
User text input, search
input
Pure White background, Carbon text, 6px radius. Focus state uses Canary border.
Badge / Tag
Status indicators, category labels
.badge
v24.3 Active Error Beta
Pill shape (9999px radius), 4px/10px padding, 12px font. Use Honey for neutral, Query Green for success, Error Red for critical.
Metric Display
Key statistics, dashboard numbers
.metric
2.4B
rows/sec
+12.5%
query speed
-3.2%
latency
Large display number in Carbon, label in Slate. Trend indicators in Query Green (positive) or Error Red (negative).
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as primary background
  • Carbon (#333333) for all primary text
  • Canary (#FADB14) for primary CTAs and key highlights
  • Data Blue (#1A73E8) for links and info accents
  • JetBrains Mono for all code and SQL content
  • 6–8px radius for buttons and cards
  • 4px-based compact spacing
  • Flat surfaces with subtle borders
Don't — Avoid
  • Dark backgrounds for primary content
  • Canary (#FADB14) for text — lacks contrast on white
  • More than 2 accent colors per view
  • Serif or decorative fonts
  • Overly rounded corners (except tags)
  • Heavy drop shadows
  • Dense packing without breathing room
  • Generic gray borders on interactive elements