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

HeroUI design system

HeroUI’s website (heroui.com) uses the Inter font and #0485F7 as its main color on a #F5F5F5 background. Measured by Sitepeel on November 4, 2026.

#F5F5F5
#F9F9F9
#18181B
#0485F7

Download DESIGN.md

From heroui.com ↗ · 301 elements at 1440×900 and 390×844 Independent analysis, not affiliated with HeroUI

HeroUI color palette

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

Surfaces

Snow#F5F5F5backgroundPage background · 2×

Snow#F9F9F9surface-container-low · --color-fd-secondaryRaised areas one step from the page · 1×

Snow#FCFCFCsurface-containerCards and panels · 3×

White#FFFFFFsurface-container-highHover and pressed fills · 12×

Mist#EBEBECsurface-container-highestHighest raised elements · 26×

Vivid Cyan 15%#00BCFF26overlayTranslucent fill for cards and controls · 1×

Vivid Orange 15%#F5A52426overlay-strongStronger translucent fill · 1×

Near Black#000000inverse-surfaceHigh-contrast fills · 1×

Text

Charcoal#18181Bon-surfacePrimary text and headings · 43×

Cool Slate#71717Aon-surface-variantSecondary text · 38×

Snow#FCFCFCon-primaryText and icons on primary

Accents

Vivid Blue#0485F7primaryPrimary buttons and calls to action · 8×

Blue#1E63AEsecondaryAccent · 1×

Borders

Silver#DDDEE0outlineBorders and dividers · 2×

Status

Vivid Red#FF383CerrorErrors and destructive states · 4×

HeroUI fonts and type scale

2 families.

AaInterWeights 400, 500, 600, 700Inter, Inter Fallback, ui-sans-serif, system-ui

AamonospaceMonospace · Weights 400monospace

headline-displayPage title (h1)HeroUI56px · 700 · 1.07 · -0.03em
mobile 30px

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.43

captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.33

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 600 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 500 · 1.43

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 500 · 1.33

codeCode and technical valuesconst ready = true;40px · 400 · 1 · -0.5em

Contrast

Text on #F5F5F5

AaAAA16.2:1

AaLarge only4.4:1

Spacing

No strict grid · 88% are multiples of 4px

xs4px

sm8px

md12px

lg20px

xl48px

gutter8px

section48px

margin16px

Breakpoints: 600px 1200px

Shapes

Corner radii, most used first.

xl24px · 148×

md12px · 40×

sm8px · 16×

lg16px · 16×

Depth

Shadow

HeroUI UI components

Rebuilt from the measured CSS.

Get started

button-primaryFilled button

Click me

button-outlineOutlined button

Select one

button-ghostOutlined button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.1s0.15s0.25s0.2s

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

Do’s and don’ts

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

Use #F5F5F5 for the page and lift surfaces in small steps: #F9F9F9, #FCFCFC, #FFFFFF, #EBEBEC.
Keep text in 2 levels: #18181B, #71717A.
Reserve #0485F7 for primary actions and key highlights.
Set headlines in Inter with tight tracking (-0.03em).
Reuse the measured spacing steps (8px, 12px, 20px).
Use 24px corners on most elements; larger surfaces also use 12px, 8px and 16px.
Use #71717A for body text; it reaches 4.43:1 on #F5F5F5. Keep it for large text or metadata.
Introduce new font families beyond Inter and monospace.
Use #0485F7 for large backgrounds or body text.
Make interface transitions slower than 0.3s.

HeroUI DESIGN.md216 lines

---
version: alpha
name: HeroUI
description: "Light interface measured from heroui.com: Inter type, vivid blue accents, tonal surfaces and 24px corners."
colors:
  background: "#F5F5F5"
  surface: "#F5F5F5"
  on-surface: "#18181B"
  on-background: "#18181B"
  on-surface-variant: "#71717A"
  surface-container-low: "#F9F9F9"
  surface-container: "#FCFCFC"
  surface-container-high: "#FFFFFF"
  surface-container-highest: "#EBEBEC"
  overlay: "#00BCFF26"
  overlay-strong: "#F5A52426"
  outline: "#DDDEE0"
  primary: "#0485F7"
  on-primary: "#FCFCFC"
  inverse-surface: "#000000"
  secondary: "#1E63AE"
  error: "#FF383C"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: -0.03em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
  code:
    fontFamily: monospace
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.5em
  headline-display-mobile:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.025em
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 48px
  gutter: 8px
  section: 48px
  margin: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 0px 16px 0px 20px
    height: 40px
  button-outline:
    backgroundColor: "{colors.surface-container-highest}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 0px 12px
    height: 32px
  button-ghost:
    backgroundColor: "{colors.surface-container-high}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 8px 28px 8px 12px
    height: 36px
  card:
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 16px
  link:
    textColor: "{colors.on-surface-variant}"
---

# HeroUI Design System

## Overview

HeroUI describes itself as: “Beautiful, accessible React UI components built on React Aria and Tailwind CSS v4. The modern alternative to MUI, Chakra UI, and shadcn/ui for building production-ready applications.” The interface is light, built on **Snow (#F5F5F5)** with **Charcoal (#18181B)** text, and **Vivid Blue (#0485F7)** as the main accent.

Type is set in **Inter**, with **monospace** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are mostly 24px.

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

## Colors

The palette has 15 roles.

- **Snow (#F5F5F5):** Page background, seen 2 times. Token `background`.
- **Charcoal (#18181B):** Primary text and headings, seen 43 times. Token `on-surface`.
- **Cool Slate (#71717A):** Secondary text, seen 38 times. Token `on-surface-variant`.
- **Snow (#F9F9F9):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`, CSS `--color-fd-secondary`.
- **Snow (#FCFCFC):** Cards and panels, seen 3 times. Token `surface-container`.
- **White (#FFFFFF):** Hover and pressed fills, seen 12 times. Token `surface-container-high`.
- **Mist (#EBEBEC):** Highest raised elements, seen 26 times. Token `surface-container-highest`.
- **Vivid Cyan 15% (#00BCFF26):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Vivid Orange 15% (#F5A52426):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Silver (#DDDEE0):** Borders and dividers, seen 2 times. Token `outline`.
- **Vivid Blue (#0485F7):** Primary buttons and calls to action, seen 8 times. Token `primary`.
- **Snow (#FCFCFC):** Text and icons on primary. Token `on-primary`.
- **Near Black (#000000):** High-contrast fills, seen 1 time. Token `inverse-surface`.
- **Blue (#1E63AE):** Accent, seen 1 time. Token `secondary`.
- **Vivid Red (#FF383C):** Errors and destructive states, seen 4 times. Token `error`.

## Typography

**Inter** and **monospace** (monospace) share the interface. Fallback stack: `Inter, Inter Fallback, ui-sans-serif, system-ui`.

- **headline-display:** Inter 56px at weight 700, line height 1.07, tracking -0.03em (30px on mobile). Page title (h1).
- **body-md:** Inter 16px at weight 400, line height 1.5. Body text.
- **body-sm:** Inter 14px at weight 400, line height 1.43. Secondary and small text.
- **caption:** Inter 12px at weight 400, line height 1.33. Captions and fine print.
- **label-lg:** Inter 16px at weight 600, line height 1.5. Large buttons and tabs.
- **label-md:** Inter 14px at weight 500, line height 1.43. Buttons, navigation and labels.
- **label-sm:** Inter 12px at weight 500, line height 1.33. Small labels and badges.
- **code:** monospace 40px at weight 400, line height 1, tracking -0.5em. Code and technical values.

## Layout

Spacing is mostly on a 4px grid (88% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 12px, lg 20px, xl 48px.
- **Sections:** 48px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 16px on each side of full-width sections.
- **Breakpoints:** 600px, 1200px.

## 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.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 0px 1px 0px`
- `rgba(0, 0, 0, 0.02) 0px 0px 5px 0px, rgba(0, 0, 0, 0.06) 0px 2px 10px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px`

## Shapes

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

- **xl (24px):** 148 elements.
- **md (12px):** 40 elements.
- **sm (8px):** 16 elements.
- **lg (16px):** 16 elements.

## Components

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

- **button-primary (“Get started”):** #0485F7 fill, #FCFCFC text, 14px/500, 24px radius, padding 0px 16px 0px 20px.
- **button-outline (“Click me”):** #EBEBEC fill, #18181B text, 14px/500, 24px radius, padding 0px 12px.
- **button-ghost (“Select one”):** #FFFFFF fill, #71717A text, 14px/400, 12px radius, padding 8px 28px 8px 12px, 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.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 0px 1px 0px`.
- **card:** transparent fill, 16px/400, 24px radius, padding 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.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 0px 1px 0px`.
- **link:** transparent fill, #71717A text, padding 0px.

## Do's and Don'ts

- Do use #F5F5F5 for the page and lift surfaces in small steps: #F9F9F9, #FCFCFC, #FFFFFF, #EBEBEC.
- Do keep text in 2 levels: #18181B, #71717A.
- Do reserve #0485F7 for primary actions and key highlights.
- Do set headlines in Inter with tight tracking (-0.03em).
- Do reuse the measured spacing steps (8px, 12px, 20px).
- Do use 24px corners on most elements; larger surfaces also use 12px, 8px and 16px.
- Don't use #71717A for body text; it reaches 4.43:1 on #F5F5F5. Keep it for large text or metadata.
- Don't introduce new font families beyond Inter and monospace.
- Don't use #0485F7 for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.1s, 0.15s, 0.25s, 0.2s. Longer ambient animations run 0.75s.

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

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

Fonts

What font does HeroUI use?

HeroUI uses Inter (weights 400, 500, 600 and 700) on heroui.com. Page titles are 56px at weight 700 (30px on phones) and body text is 16px. Measured on November 4, 2026.

AaInter · 400, 500, 600, 700
Aamonospace · 400

Find every font on heroui.com with Font finder →

Colors

HeroUI colors: palette and hex codes

HeroUI’s main colors are #F5F5F5 (snow) for the background, #18181B (charcoal) for text and #0485F7 (vivid blue) as the main accent, with #1E63AE (blue) as another accent. Measured on November 4, 2026.

#F5F5F5 · snow
#18181B · charcoal
#71717A · cool slate
#F9F9F9 · snow
#FCFCFC · snow
#FFFFFF · white
#EBEBEC · mist
#DDDEE0 · silver

Get heroui.com’s palette as CSS or Tailwind with Colors →

Tech stack

What is HeroUI built with?

HeroUI’s website (heroui.com) is built with Next.js, React, shadcn/ui, Radix UI and React Aria. Measured on November 4, 2026.

JavaScript framework: Next.js 16.4.2, React 19.3.0-canary-278794d7-2
Hosting & CDN: Vercel
Animation & 3D: Motion
UI & CSS: shadcn/ui, Radix UI, React Aria, Tailwind CSS 4.x
Analytics: Vercel Web Analytics
Fonts & icons: Lucide

Check heroui.com 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 →

HighchartsBrand highcharts.com · IBM Plex Sans

Salesforce Lightning Design SystemBrand lightningdesignsystem.com · AvantGardeForSalesforce

LucideBrand lucide.dev · Inter

Material DesignBrand m3.material.io · Google Sans

Magic UIBrand magicui.design · Geist

MantineBrand mantine.dev · Outfit

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

FAQ

HeroUI design system questions

What font does HeroUI use?

HeroUI’s website uses Inter (weights 400, 500, 600 and 700). Page titles are 56px at weight 700 (30px on phones) and body text is 16px. Measured on November 4, 2026.

What are the HeroUI colors and hex codes?

On heroui.com: #F5F5F5 (snow) for the background, #18181B (charcoal) for text and #0485F7 (vivid blue) as the main accent, with #1E63AE (blue) as another accent. The color palette above lists all 15 colors with their hex codes and where each one is used.

What is the HeroUI design system?

The design system on this page is heroui.com’s, as measured on November 4, 2026: Inter type, #0485F7 as the main color and 24px corners, written down as a DESIGN.md. It is not HeroUI’s own documentation.

What is HeroUI built with?

HeroUI’s website (heroui.com) is built with Next.js, React, shadcn/ui, Radix UI and React Aria. The full tech stack Sitepeel found: Next.js, Vercel, React, Motion, shadcn/ui, Vercel Web Analytics, Radix UI, React Aria, Tailwind CSS and Lucide. Measured on November 4, 2026.

What is the HeroUI DESIGN.md?

A plain-text file with HeroUI’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 HeroUI’s official design system?

No. Sitepeel measured it from heroui.com’s public page on November 4, 2026. It is an independent analysis, not made or approved by HeroUI.

Can I use HeroUI’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 HeroUI’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.