# HeroUI design system

> HeroUI design system measured from heroui.com: Inter font, #0485F7 primary on #F5F5F5, 15 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/heroui.com/

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.

## 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.

- Inter (weights 400, 500, 600, 700)
- monospace (weights 400)

## 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

## 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

## Questions and answers

### 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.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/heroui.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with HeroUI.

## The DESIGN.md file

```markdown
---
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).

```