UI and animation libraries · DESIGN.md · measured November 4, 2026

Magic UI design system

Light interface · Geist · 14px corners

#FFFFFF
#0A0A0A
#4F39F6
#00C950

Download DESIGN.md

From magicui.design ↗ · 359 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Magic UI

Magic UI color palette

10 colors with hex codes, grouped by where each one is used on the page.

Surfaces

White#FFFFFFbackground · --tw-ring-offset-colorPage background · 44×

Snow 50%#F5F5F580overlayTranslucent fill for cards and controls · 1×

Text

Near Black#0A0A0Aon-surfacePrimary text and headings · 14×

Slate#737373on-surface-variantSecondary text · 6×

Gray#A1A1A1on-surface-mutedMuted text and metadata · 84×

White#FFFFFFon-primaryText and icons on primary

Accents

Vivid Indigo#4F39F6primaryBrand color in the header

Green#00C950secondaryAccent in text, fills and borders · 2×

Vivid Blue#2B7FFFtertiaryAccent · 11×

Borders

Mist#E5E5E5outlineBorders and dividers · 43×

Gradients

Magic UI fonts and type scale

One family carries the whole interface.

AaGeistWeights 400, 500, 600Geist, sans-serif

headline-displayPage title (h1)Magic UI72px · 600 · 1 · -0.05em
mobile 48px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog48px · 600 · 1.2 · -0.05em
mobile 30px

body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog15px · 400 · 1.63

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 500 · 1.43

Contrast

Text on #FFFFFF

AaAAA19.8:1

AaAA4.7:1

AaLarge only2.5:1

Spacing

4px grid · 96% of values fit

xs4px

sm8px

md16px

lg20px

xl56px

gutter8px

section56px

margin32px

container1400px

Breakpoints: 600px 1600px 2000px

Shapes

Corner radii, most used first.

md14px · 164×

sm10px · 32×

Depth

Shadow

Magic UI UI components

Rebuilt from the measured CSS.

Browse Components

button-primaryFilled button

Browse Templates

button-secondaryFilled button

Search documentation... ⌘ K

button-outlineOutlined button

Search documentation... ⌘ K

button-ghostText button

Card

cardCard

Motion

Interface transitions

0.2s0.15s0.3s

cubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0, 0, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #FFFFFF for the page.
Keep text in 3 levels: #0A0A0A, #737373, #A1A1A1.
Use #4F39F6 as the brand accent: header, logo and key highlights.
Set headlines in Geist with tight tracking (-0.05em).
Keep spacing on the 4px grid.
Use 14px corners on most elements; larger surfaces also use 10px.
Use #A1A1A1 for body text; it reaches 2.58:1 on #FFFFFF. Keep it for large text or metadata.
Introduce new font families beyond Geist.
Use #4F39F6 for large backgrounds or body text.
Make interface transitions slower than 0.3s.

Magic UI DESIGN.md198 lines

---
version: alpha
name: Magic UI
description: "Light interface measured from magicui.design: Geist type, vivid indigo accents, flat surfaces and 14px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#0A0A0A"
  on-background: "#0A0A0A"
  on-surface-variant: "#737373"
  on-surface-muted: "#A1A1A1"
  overlay: "#F5F5F580"
  outline: "#E5E5E5"
  primary: "#4F39F6"
  on-primary: "#FFFFFF"
  secondary: "#00C950"
  tertiary: "#2B7FFF"
typography:
  headline-display:
    fontFamily: Geist
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Geist
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.05em
  body-md:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  body-lg:
    fontFamily: Geist
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.63
  label-md:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: Geist
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.05em
  headline-lg-mobile:
    fontFamily: Geist
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.05em
rounded:
  sm: 10px
  md: 14px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 56px
  gutter: 8px
  section: 56px
  margin: 32px
  container: 1400px
components:
  button-primary:
    textColor: "#FAFAFA"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 0px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 0px 16px
    height: 40px
  button-outline:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: 8px
    padding: 8px 48px 8px 16px
    height: 32px
  button-ghost:
    typography: "{typography.body-md}"
    rounded: 8px
    padding: 8px 48px 8px 16px
  card:
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 20px
---

# Magic UI Design System

## Overview

Magic UI describes itself as: “Beautiful UI components and templates to make your landing page look stunning.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#0A0A0A)** text, and **Vivid Indigo (#4F39F6)** as the main accent.

Type is set in **Geist**. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 14px.

Measured from [magicui.design](https://magicui.design/) on November 4, 2026 at 1440×900 and 390×844 from 359 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles, plus gradient stops #FF4242, #A0FF42, #40A1FF, #43D0FF.

- **White (#FFFFFF):** Page background, seen 44 times. Token `background`, CSS `--tw-ring-offset-color`.
- **Near Black (#0A0A0A):** Primary text and headings, seen 14 times. Token `on-surface`.
- **Slate (#737373):** Secondary text, seen 6 times. Token `on-surface-variant`.
- **Gray (#A1A1A1):** Muted text and metadata, seen 84 times. Token `on-surface-muted`.
- **Snow 50% (#F5F5F580):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Mist (#E5E5E5):** Borders and dividers, seen 43 times. Token `outline`.
- **Vivid Indigo (#4F39F6):** Brand color in the header. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Green (#00C950):** Accent in text, fills and borders, seen 2 times. Token `secondary`.
- **Vivid Blue (#2B7FFF):** Accent, seen 11 times. Token `tertiary`.

## Typography

**Geist** carries the whole interface. Fallback stack: `Geist, sans-serif`. Other loaded fonts: Geist Mono.

- **headline-display:** Geist 72px at weight 600, line height 1, tracking -0.05em (48px on mobile). Page title (h1).
- **headline-lg:** Geist 48px at weight 600, line height 1.2, tracking -0.05em (30px on mobile). Section headings (h2).
- **body-md:** Geist 14px at weight 400, line height 1.43. Body text.
- **body-lg:** Geist 15px at weight 400, line height 1.63. Lead paragraphs.
- **label-md:** Geist 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **label-sm:** Geist 14px at weight 500, line height 1.43. Small labels and badges.

## Layout

Spacing follows a 4px grid: 96% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 16px, lg 20px, xl 56px.
- **Sections:** 56px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1400px.
- **Page margin:** 32px on each side of full-width sections.
- **Breakpoints:** 600px, 1600px, 2000px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`

## Shapes

Most elements use 14px corners. Measured radii, most used first:

- **md (14px):** 164 elements.
- **sm (10px):** 32 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Browse Components”):** transparent fill, #FAFAFA text, 14px/500, 10px radius, padding 0px 16px.
- **button-secondary (“Browse Templates”):** transparent fill, #0A0A0A text, 14px/500, 10px radius, padding 0px 16px.
- **button-outline (“Search documentation... ⌘ K”):** #F5F5F580 fill, #737373 text, 14px/400, 8px radius, padding 8px 48px 8px 16px, border 1px solid #E5E5E5, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
- **button-ghost (“Search documentation... ⌘ K”):** transparent fill, 14px/400, 8px radius, padding 8px 48px 8px 16px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
- **card:** transparent fill, 16px/400, 14px radius, padding 20px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 3 levels: #0A0A0A, #737373, #A1A1A1.
- Do use #4F39F6 as the brand accent: header, logo and key highlights.
- Do set headlines in Geist with tight tracking (-0.05em).
- Do keep spacing on the 4px grid.
- Do use 14px corners on most elements; larger surfaces also use 10px.
- Don't use #A1A1A1 for body text; it reaches 2.58:1 on #FFFFFF. Keep it for large text or metadata.
- Don't introduce new font families beyond Geist.
- Don't use #4F39F6 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.2s, 0.15s, 0.3s. Longer ambient animations run 2s, 1s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0, 0, 0.2, 1)`, `linear`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/magicui.design/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

Fonts

What font does Magic UI use?

Magic UI uses Geist (weights 400, 500 and 600) on magicui.design. Page titles are 72px at weight 600 (48px on phones) and body text is 14px. Measured on November 4, 2026.

AaGeist · 400, 500, 600

Find every font on magicui.design with Font finder →

Colors

Magic UI colors: palette and hex codes

Magic UI’s main colors are #FFFFFF (white) for the background, #0A0A0A (near black) for text and #4F39F6 (vivid indigo) as the main accent, with #00C950 (green) and #2B7FFF (vivid blue) as other accents. Measured on November 4, 2026.

#FFFFFF · white
#0A0A0A · near black
#737373 · slate
#A1A1A1 · gray
#E5E5E5 · mist
#4F39F6 · vivid indigo
#00C950 · green
#2B7FFF · vivid blue

Get magicui.design’s palette as CSS or Tailwind with Colors →

Tech stack

What is Magic UI built with?

Magic UI’s website (magicui.design) is built with Next.js, React, Radix UI, Tailwind CSS and Vercel. Measured on November 4, 2026.

JavaScript framework: Next.js 15.5.28, React 19.2.0-canary-0bdb9206-2
Analytics: PostHog, Google Analytics
Hosting & CDN: Vercel
UI & CSS: Radix UI, Tailwind CSS 4.x
Animation & 3D: Motion
Fonts & icons: Lucide

Check magicui.design live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More in UI and animation libraries

All DESIGN.md examples →

MotionBrand motion.dev · TASA Orbiter

MUIBrand mui.com · General Sans

Radix UIBrand radix-ui.com · adobeTextPro

StorybookBrand storybook.js.org · Nunito Sans

Tailwind CSSBrand tailwindcss.com · inter

Aceternity UIBrand ui.aceternity.com · Local x2wexs

Not in the library? Make a DESIGN.md from any site.

FAQ

Magic UI design system questions

What font does Magic UI use?

Magic UI’s website uses Geist (weights 400, 500 and 600). Page titles are 72px at weight 600 (48px on phones) and body text is 14px. Measured on November 4, 2026.

What are the Magic UI colors and hex codes?

On magicui.design: #FFFFFF (white) for the background, #0A0A0A (near black) for text and #4F39F6 (vivid indigo) as the main accent, with #00C950 (green) and #2B7FFF (vivid blue) as other accents. The color palette above lists all 10 colors with their hex codes and where each one is used.

What is the Magic UI design system?

The design system on this page is magicui.design’s, as measured on November 4, 2026: Geist type, #4F39F6 as the main color, 14px corners and a 4px spacing grid, written down as a DESIGN.md. It is not Magic UI’s own documentation.

What is Magic UI built with?

Magic UI’s website (magicui.design) is built with Next.js, React, Radix UI, Tailwind CSS and Vercel. The full tech stack Sitepeel found: Next.js, React, PostHog, Vercel, Radix UI, Tailwind CSS, Motion, Lucide and Google Analytics. Measured on November 4, 2026.

What is the Magic UI DESIGN.md?

A plain-text file with Magic UI’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Magic UI’s official design system?

No. Sitepeel measured it from magicui.design’s public page on November 4, 2026. It is an independent analysis, not made or approved by Magic UI.

Can I use Magic UI’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Magic UI’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.