Design System Builder

Design System

Color

Set each role — each generates an 11-stop scale

Mode

Backgrounds & surfaces

Background

#0c0d0d

Surface

#1b1c1d

Surface 2

#2e3033

Override auto backgrounds

By default backgrounds derive from the Neutral scale. Enable to set them manually.

Typography

Modular scale, weights and line height

Body size15px

Scale ratio

Heading weight

Line height1.60

Heading
37px / 600

Heading text

Subhead
23px / 600

Heading text

Body
15px / 400

The quick brown fox jumps over the lazy dog

Label
12px / 400

CATEGORY · STATUS · ACTION

Caption
10px / 400

Heading text

Spacing

One base unit drives all gaps and padding

Density

Base unit4px

Border radius7px

Spacing scale

4×1

4px

4×2

8px

4×3

12px

4×4

16px

4×6

24px

4×8

32px

4×12

48px

4×16

64px

4×24

96px

4×32

128px

--card-pad: 16px

--item-gap: 8px

--section-gap: 32px

--inline-gap: 8px

--row-gap: 8px

Export

Copy design tokens to your project

globals.css

/** globals.css - Tailwind CSS v4 */

@import "tailwindcss";

@theme {
  --color-primary: {
    50: #f6f7f9;
    100: #e6eaef;
    200: #c9d5e3;
    300: #9bb7d9;
    400: #679ad5;
    500: #267ad9;
    600: #2a619d;
    700: #27496d;
    800: #1f3042;
    900: #141c24;
    950: #0a0d0f;
  }
  --color-secondary: {
    50: #f7f6f9;
    100: #e9e6ef;
    200: #d2cbe2;
    300: #afa0d4;
    400: #8a6fcd;
    500: #5d33cc;
    600: #4c3295;
    700: #3b2c68;
    800: #29223f;
    900: #191623;
    950: #0c0b0f;
  }
  --color-tertiary: {
    50: #f6f8f8;
    100: #e7eeed;
    200: #cce1dd;
    300: #a2d2c9;
    400: #73c9b7;
    500: #39c6a7;
    600: #36917c;
    700: #2f6558;
    800: #233e37;
    900: #16221f;
    950: #0b0f0e;
  }
  --color-neutral: {
    50: #f7f7f8;
    100: #eaeaeb;
    200: #d4d6d8;
    300: #b6b9bf;
    400: #969ca6;
    500: #737d8c;
    600: #5b626c;
    700: #45494f;
    800: #2e3033;
    900: #1b1c1d;
    950: #0c0d0d;
  }
  --color-success: {
    50: #f6f9f7;
    100: #e6efeb;
    200: #cae3d6;
    300: #9ed7ba;
    400: #6bd19d;
    500: #2dd27c;
    600: #2e9960;
    700: #2a6a47;
    800: #20412f;
    900: #15231b;
    950: #0a0f0c;
  }
  --color-warning: {
    50: #f9f8f6;
    100: #f0ebe5;
    200: #e4d7c8;
    300: #dbbc99;
    400: #d9a063;
    500: #df8020;
    600: #a16326;
    700: #6f4925;
    800: #432f1e;
    900: #241b14;
    950: #100c0a;
  }
  --color-danger: {
    50: #f9f6f6;
    100: #efe6e6;
    200: #e3c9c9;
    300: #d99b9d;
    400: #d5676c;
    500: #d9262f;
    600: #9d2a31;
    700: #6d272c;
    800: #421f22;
    900: #241416;
    950: #0f0a0b;
  }
  --color-info: {
    50: #f6f8f9;
    100: #e6ebef;
    200: #cbd8e2;
    300: #a0c0d4;
    400: #6fa9cd;
    500: #3393cc;
    600: #327195;
    700: #2c5368;
    800: #22353f;
    900: #161e23;
    950: #0b0e0f;
  }
  --color-bg: #0c0d0d;
  --color-surface: #1b1c1d;
  --color-surface-2: #2e3033;
  --color-text-primary: #f7f7f8;
  --color-text-secondary: #969ca6;
  --color-accent: #267ad9;
  --color-secondary: #5d33cc;
  --color-tertiary: #39c6a7;
  --color-success: #2dd27c;
  --color-warning: #df8020;
  --color-danger: #d9262f;
  --color-info: #3393cc;
  --spacing-card: 16px;
  --spacing-item: 8px;
  --spacing-section: 32px;
  --spacing-inline: 8px;
  --spacing-row: 8px;
  --radius-default: 7px;
  --text-size-xs: 10px;
  --text-size-sm: 12px;
  --text-size-base: 15px;
  --text-size-md: 19px;
  --text-size-lg: 23px;
  --text-size-xl: 29px;
  --text-size-2xl: 37px;
  --text-size-3xl: 46px;
  --line-height: 1.60;
  --head-weight: 600;
}

Donate

localhost:3000

Meridian

v2.4.1 live

Overview

Analytics

Projects

Team

Settings

Workspace

Acme Corp

Pro plan

Q3 Overview

July – September 2024 · Updated 2h ago

Total revenue

↑ 12.4%

$2.84M

Active users

↑ 8.1%

18,420

Critical issues

2 new

3 open

Activity

Deployment v2.4.1 shipped

2 min ago

Rate limit alert on /api/search

18 min ago

Q3 board deck uploaded

1 hr ago

Enterprise contract signed

3 hr ago

Scheduled maintenance window

Tomorrow

Projects

Design system v378%

API migration45%

Mobile app92%

Status

Production· Healthy

Staging· Deploying

DB· Warning

CDN· Healthy

Search· Degraded

Team

View all →

Anna K

Product

Marcus W

Eng

Priya O

Design

Dan N

Data