AI · DESIGN.md · measured November 4, 2026

Modal design system

Modal’s website (modal.com) uses the ABC Diatype font and #7FEE64 as its main color on a #040804 background. Measured by Sitepeel on November 4, 2026.

#040804
#10120F
#A8ABA6
#7FEE64

Download DESIGN.md

From modal.com ↗ · 416 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Modal

Modal color palette

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

Surfaces

Near Black#040804background · --color-v2-primary-blackPage background · 4×

Charcoal#10120Fsurface-container-lowRaised areas one step from the page · 2×

Charcoal#181818surface-container · --color-deprecated-groundCards and panels · 7×

White 5%#FFFFFF0DoverlayTranslucent fill for cards and controls · 9×

Light Green 10%#9EFB871Aoverlay-strongStronger translucent fill · 1×

Text

Gray#A8ABA6on-surfacePrimary text and headings · 48×

Mist#EEF2EBon-surface-strongHeadings and emphasis · 34×

Mist#E3E5E1on-surface-variantSecondary text · 37×

Near Black#000000on-primaryText and icons on primary

Accents

Green#7FEE64primary · --semantic-icon-primary-selectedBrand accent (CSS variable) · 11×

Green#62DE61secondaryAccent in the logo · 1×

Dark Green#09AF58tertiaryAccent in the logo · 2×

Borders

White 5%#FFFFFF0DoutlineBorders and dividers · 14×

White 10%#FFFFFF1Aoutline-variant · --color-raw-gray-alpha-100-opacity-10Secondary dividers · 5×

Modal fonts and type scale

2 families.

AaABC DiatypeWeights 400, 500ABC Diatype, ABC Diatype Fallback, Arial, ui-sans-serif

AaDM MonoMonospace · Weights 400DM Mono, ui-monospace, monospace

headline-displayPage title (h1)Modal45px · 500 · 1.07 · -0.01em
mobile 37px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog38px · 500 · 1.16 · -0.01em
mobile 31px

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

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 400 · 1.33

body-smSecondary and small textThe quick brown fox jumps over the lazy dog15px · 400 · 1.47 · 0.01em

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

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog13px · 500 · 1.54 · 0.03em

codeCode and technical valuesconst ready = true;12px · 400 · 1.67 · 0.03em

Contrast

Text on #040804

AaAAA8.6:1

AaAAA17.7:1

AaAAA15.9:1

Spacing

No strict grid · 64% are multiples of 4px

xs4px

sm6px

md12px

lg20px

xl48px

gutter20px

section144px

margin64px

container1546px

Shapes

Corner radii, most used first.

lg48px · 204×

md10px · 20×

sm7px · 16×

Depth

Inset

Shadow

Inset

Modal UI components

Rebuilt from the measured CSS.

button-primaryFilled button

modal endpo |

button-outlineOutlined button

Product

button-ghostText button

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.15s0.2s0.16s0.25s

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

Do’s and don’ts

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

Use #040804 for the page and lift surfaces in small steps: #10120F, #181818.
Keep text in 3 levels: #A8ABA6, #EEF2EB, #E3E5E1.
Use #7FEE64 as the brand accent: header, logo and key highlights.
Set headlines in ABC Diatype with tight tracking (-0.01em).
Reuse the measured spacing steps (6px, 12px, 20px).
Use 48px corners on most elements; larger surfaces also use 10px and 7px.
Use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
Introduce new font families beyond ABC Diatype and DM Mono.
Use #7FEE64 for large backgrounds or body text.
Make interface transitions slower than 0.25s.

Modal DESIGN.md222 lines

---
version: alpha
name: Modal
description: "Dark interface measured from modal.com: ABC Diatype type, green accents, tonal surfaces and 48px corners."
colors:
  background: "#040804"
  surface: "#040804"
  on-surface: "#A8ABA6"
  on-background: "#A8ABA6"
  on-surface-strong: "#EEF2EB"
  on-surface-variant: "#E3E5E1"
  surface-container-low: "#10120F"
  surface-container: "#181818"
  overlay: "#FFFFFF0D"
  overlay-strong: "#9EFB871A"
  outline: "#FFFFFF0D"
  outline-variant: "#FFFFFF1A"
  primary: "#7FEE64"
  on-primary: "#000000"
  secondary: "#62DE61"
  tertiary: "#09AF58"
typography:
  headline-display:
    fontFamily: ABC Diatype
    fontSize: 45px
    fontWeight: 500
    lineHeight: 1.07
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: ABC Diatype
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: -0.01em
  body-md:
    fontFamily: ABC Diatype
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: ABC Diatype
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
  body-sm:
    fontFamily: ABC Diatype
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0.01em
  label-md:
    fontFamily: ABC Diatype
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  label-sm:
    fontFamily: ABC Diatype
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.54
    letterSpacing: 0.03em
  code:
    fontFamily: DM Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0.03em
  headline-display-mobile:
    fontFamily: ABC Diatype
    fontSize: 37px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: ABC Diatype
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.16
rounded:
  sm: 7px
  md: 10px
  lg: 48px
spacing:
  xs: 4px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 48px
  gutter: 20px
  section: 144px
  margin: 64px
  container: 1546px
components:
  button-primary:
    backgroundColor: "{colors.on-surface-variant}"
    textColor: "{colors.surface-container-low}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 4px 12px
    height: 32px
  button-outline:
    backgroundColor: "#1A1C19"
    textColor: "#FDFD76"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 24px 32px
    height: 64px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 0px 12px
  card:
    backgroundColor: "#1A1C19"
    textColor: "{colors.on-surface-variant}"
    rounded: "{rounded.md}"
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Modal Design System

## Overview

Modal describes itself as: “Cloud infrastructure for teams that develop, train, and serve AI applications at scale.” The interface is dark, built on **Near Black (#040804)** with **Gray (#A8ABA6)** text, and **Green (#7FEE64)** as the main accent.

Type is set in **ABC Diatype**, with **DM Mono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 48px.

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

## Colors

The palette has 14 roles.

- **Near Black (#040804):** Page background, seen 4 times. Token `background`, CSS `--color-v2-primary-black`.
- **Gray (#A8ABA6):** Primary text and headings, seen 48 times. Token `on-surface`.
- **Mist (#EEF2EB):** Headings and emphasis, seen 34 times. Token `on-surface-strong`.
- **Mist (#E3E5E1):** Secondary text, seen 37 times. Token `on-surface-variant`.
- **Charcoal (#10120F):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`.
- **Charcoal (#181818):** Cards and panels, seen 7 times. Token `surface-container`, CSS `--color-deprecated-ground`.
- **White 5% (#FFFFFF0D):** Translucent fill for cards and controls, seen 9 times. Token `overlay`.
- **Light Green 10% (#9EFB871A):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **White 5% (#FFFFFF0D):** Borders and dividers, seen 14 times. Token `outline`.
- **White 10% (#FFFFFF1A):** Secondary dividers, seen 5 times. Token `outline-variant`, CSS `--color-raw-gray-alpha-100-opacity-10`.
- **Green (#7FEE64):** Brand accent (CSS variable), seen 11 times. Token `primary`, CSS `--semantic-icon-primary-selected`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Green (#62DE61):** Accent in the logo, seen 1 time. Token `secondary`.
- **Dark Green (#09AF58):** Accent in the logo, seen 2 times. Token `tertiary`.

## Typography

**ABC Diatype** and **DM Mono** (monospace) share the interface. Fallback stack: `ABC Diatype, ABC Diatype Fallback, Arial, ui-sans-serif`.

- **headline-display:** ABC Diatype 45px at weight 500, line height 1.07, tracking -0.01em (37px on mobile). Page title (h1).
- **headline-lg:** ABC Diatype 38px at weight 500, line height 1.16, tracking -0.01em (31px on mobile). Section headings (h2).
- **body-md:** ABC Diatype 16px at weight 400, line height 1.5. Body text.
- **body-lg:** ABC Diatype 18px at weight 400, line height 1.33. Lead paragraphs.
- **body-sm:** ABC Diatype 15px at weight 400, line height 1.47, tracking 0.01em. Secondary and small text.
- **label-md:** ABC Diatype 16px at weight 500, line height 1.5. Buttons, navigation and labels.
- **label-sm:** ABC Diatype 13px at weight 500, line height 1.54, tracking 0.03em. Small labels and badges.
- **code:** DM Mono 12px at weight 400, line height 1.67, tracking 0.03em. Code and technical values.

## Layout

Spacing does not follow a strict grid: 64% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 6px, md 12px, lg 20px, xl 48px.
- **Sections:** 144px vertical padding between major sections.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1546px.
- **Page margin:** 64px on each side of full-width sections.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights on tonal surfaces (#10120F → #181818):

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, 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(255, 255, 255, 0.05) 0px 0px 0px 1px inset, 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`

A few raised panels add a soft drop shadow: `rgba(4, 8, 4, 0.5) 0px 1px 3px 0px, rgba(4, 8, 4, 0.6) 0px 2px 32px 0px`.

## Shapes

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

- **lg (48px):** 204 elements.
- **md (10px):** 20 elements.
- **sm (7px):** 16 elements.

## Components

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

- **button-primary (“Sign up”):** #E3E5E1 fill, #10120F text, 15px/500, 48px radius, padding 4px 12px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, 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-outline (“modal endpo |”):** #1A1C19 fill, #FDFD76 text, 12px/400, 10px radius, padding 24px 32px, shadow `rgba(4, 8, 4, 0.5) 0px 1px 3px 0px, rgba(4, 8, 4, 0.6) 0px 2px 32px 0px`.
- **button-ghost (“Product”):** transparent fill, #A8ABA6 text, 15px/400, 48px radius, padding 0px 12px.
- **card:** #1A1C19 fill, #E3E5E1 text, 10px/400, 10px radius, padding 0px, 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(4, 8, 4, 0.4) 0px 1px 3px 0px, rgba(4, 8, 4, 0.5) 0px 2px 32px 0px`.
- **link:** transparent fill, #A8ABA6 text, padding 0px.

## Do's and Don'ts

- Do use #040804 for the page and lift surfaces in small steps: #10120F, #181818.
- Do keep text in 3 levels: #A8ABA6, #EEF2EB, #E3E5E1.
- Do use #7FEE64 as the brand accent: header, logo and key highlights.
- Do set headlines in ABC Diatype with tight tracking (-0.01em).
- Do reuse the measured spacing steps (6px, 12px, 20px).
- Do use 48px corners on most elements; larger surfaces also use 10px and 7px.
- Don't use heavy drop shadows; keep depth to hairline rings and tonal surfaces.
- Don't introduce new font families beyond ABC Diatype and DM Mono.
- Don't use #7FEE64 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.15s, 0.2s, 0.16s, 0.25s. Longer ambient animations run 1s, 3.2s.

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

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

Fonts

What font does Modal use?

Modal uses ABC Diatype (weights 400 and 500), with DM Mono for code on modal.com. Page titles are 45px at weight 500 (37px on phones) and body text is 16px. Measured on November 4, 2026.

AaABC Diatype · 400, 500
AaDM Mono · 400

Find every font on modal.com with Font finder →

Colors

Modal colors: palette and hex codes

Modal’s main colors are #040804 (near black) for the background, #A8ABA6 (gray) for text and #7FEE64 (green) as the main accent, with #62DE61 (green) and #09AF58 (dark green) as other accents. Measured on November 4, 2026.

#040804 · near black
#A8ABA6 · gray
#EEF2EB · mist
#E3E5E1 · mist
#10120F · charcoal
#181818 · charcoal
#7FEE64 · green
#000000 · near black

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

Tech stack

What is Modal built with?

Modal’s website (modal.com) is built with Svelte, SvelteKit, Tailwind CSS, Amazon CloudFront and Three.js. Measured on November 4, 2026.

JavaScript framework: Svelte 5, SvelteKit
Animation & 3D: Three.js r180
Analytics: PostHog, Datadog RUM
Hosting & CDN: Amazon CloudFront
Server: Envoy, Express
UI & CSS: Tailwind CSS 4.x

Check modal.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 AI

All DESIGN.md examples →

OpenAIBrand openai.com · OpenAI Sans

OpenRouterBrand openrouter.ai · gordita

Perplexity AIBrand perplexity.ai · pplxSans

PineconeBrand pinecone.io · gtPlanar

ReplicateBrand replicate.com · rb-freigeist-neue

ReplitBrand replit.com · Replit Diatype

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

FAQ

Modal design system questions

What font does Modal use?

Modal’s website uses ABC Diatype (weights 400 and 500), with DM Mono for code. Page titles are 45px at weight 500 (37px on phones) and body text is 16px. Measured on November 4, 2026.

What are the Modal colors and hex codes?

On modal.com: #040804 (near black) for the background, #A8ABA6 (gray) for text and #7FEE64 (green) as the main accent, with #62DE61 (green) and #09AF58 (dark green) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

What is the Modal design system?

The design system on this page is modal.com’s, as measured on November 4, 2026: ABC Diatype type, #7FEE64 as the main color and 48px corners, written down as a DESIGN.md. It is not Modal’s own documentation.

What is Modal built with?

Modal’s website (modal.com) is built with Svelte, SvelteKit, Tailwind CSS, Amazon CloudFront and Three.js. The full tech stack Sitepeel found: Svelte, SvelteKit, Three.js, PostHog, Amazon CloudFront, Envoy, Express, Tailwind CSS, Lucide and Datadog RUM. Measured on November 4, 2026.

What is the Modal DESIGN.md?

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

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

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