# Adobe Fonts design system

> Adobe Fonts design system measured from fonts.adobe.com: adobe-clean font, 9 color hex codes, type scale, spacing and a free DESIGN.md. Free.

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

Adobe Fonts’s website (fonts.adobe.com) uses the adobe-clean font on a white background. Measured by Sitepeel on November 4, 2026.

## What font does Adobe Fonts use?

Adobe Fonts uses adobe-clean (weights 400 and 700) on fonts.adobe.com. Page titles are 28px at weight 700 and body text is 14px. Measured on November 4, 2026.

- adobe-clean (weights 400, 700)

## Adobe Fonts colors: palette and hex codes

Adobe Fonts’s main colors are #FFFFFF (white) for the background and #4B4B4B (graphite) for text, with #0000EE (vivid indigo) as another accent. Measured on November 4, 2026.

- #FFFFFF: white
- #4B4B4B: graphite
- #2C2C2C: graphite
- #B1B1B1: gray
- #DADADA: silver
- #222222: charcoal
- #0000EE: vivid indigo

## What is Adobe Fonts built with?

Adobe Fonts’s website (fonts.adobe.com) is built with Adobe Experience Manager, AngularJS, Lit, Amazon CloudFront and Nginx. Measured on November 4, 2026.

- JavaScript framework: AngularJS 1.4.14, Lit 4.2.2
- Hosting & CDN: Amazon CloudFront
- Server: Nginx
- Site builder & CMS: Adobe Experience Manager
- Fonts & icons: Adobe Fonts
- Analytics: Google Analytics, New Relic

## Questions and answers

### What font does Adobe Fonts use?

Adobe Fonts’s website uses adobe-clean (weights 400 and 700). Page titles are 28px at weight 700 and body text is 14px. Measured on November 4, 2026.

### What are the Adobe Fonts colors and hex codes?

On fonts.adobe.com: #FFFFFF (white) for the background and #4B4B4B (graphite) for text, with #0000EE (vivid indigo) as another accent. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Adobe Fonts design system?

The design system on this page is fonts.adobe.com’s, as measured on November 4, 2026: adobe-clean type and 16px corners, written down as a DESIGN.md. It is not Adobe Fonts’s own documentation.

### What is Adobe Fonts built with?

Adobe Fonts’s website (fonts.adobe.com) is built with Adobe Experience Manager, AngularJS, Lit, Amazon CloudFront and Nginx. The full tech stack Sitepeel found: AngularJS, Lit, Amazon CloudFront, Nginx, Adobe Experience Manager, Adobe Fonts, Google Analytics and New Relic. Measured on November 4, 2026.

### What is the Adobe Fonts DESIGN.md?

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

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

### Can I use Adobe Fonts’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 Adobe Fonts’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/fonts.adobe.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 Adobe Fonts.

## The DESIGN.md file

```markdown
---
version: alpha
name: Adobe Fonts
description: "Light monochrome interface measured from fonts.adobe.com: adobe-clean type, flat surfaces and 16px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#4B4B4B"
  on-background: "#4B4B4B"
  on-surface-strong: "#2C2C2C"
  on-surface-variant: "#B1B1B1"
  outline: "#DADADA"
  primary: "#4B4B4B"
  on-primary: "#FFFFFF"
  inverse-surface: "#222222"
  secondary: "#0000EE"
typography:
  headline-display:
    fontFamily: adobe-clean
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: adobe-clean
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: adobe-clean
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: adobe-clean
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: adobe-clean
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.06em
  label-md:
    fontFamily: adobe-clean
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  label-sm:
    fontFamily: adobe-clean
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
rounded:
  md: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  margin: 30px
components:
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px 14px
    height: 32px
  button-outline-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
  button-ghost:
    textColor: "#292929"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 5px 16px 6px 16px
    height: 32px
  button-ghost-hover:
    backgroundColor: "#E9E9E9"
  link:
    textColor: "#D5D5D5"
---

# Adobe Fonts Design System

## Overview

Adobe Fonts describes itself as: “Adobe Fonts partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and you can use fonts from Adobe Fonts on the web or in desktop” The interface is light, built on **White (#FFFFFF)** with **Graphite (#4B4B4B)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **adobe-clean**. Headlines run large; body text is 14px. The surface language is flat. Corners are mostly 16px.

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

## Colors

The palette has 9 roles.

- **White (#FFFFFF):** Page background, seen 7 times. Token `background`, CSS `--vs-background-color`.
- **Graphite (#4B4B4B):** Primary text and headings, seen 14 times. Token `on-surface`.
- **Graphite (#2C2C2C):** Headings and emphasis, seen 10 times. Token `on-surface-strong`.
- **Gray (#B1B1B1):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Silver (#DADADA):** Borders and dividers, seen 1 time. Token `outline`.
- **Graphite (#4B4B4B):** Primary actions (the main text color; the palette is monochrome), seen 18 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Charcoal (#222222):** High-contrast fills, seen 1 time. Token `inverse-surface`.
- **Vivid Indigo (#0000EE):** Accent, seen 1 time. Token `secondary`.

## Typography

**adobe-clean** carries the whole interface. Fallback stack: `adobe-clean, adobe-clean-han-japanese, source-sans-pro, Helvetica Neue`. Other loaded fonts: adobe-notdef, mjwq-normal-400.

- **headline-display:** adobe-clean 28px at weight 700, line height 1.3. Page title (h1).
- **body-md:** adobe-clean 14px at weight 400, line height 1.5. Body text.
- **body-lg:** adobe-clean 18px at weight 400, line height 1.5. Lead paragraphs.
- **body-sm:** adobe-clean 12px at weight 400, line height 1.5. Secondary and small text.
- **caption:** adobe-clean 11px at weight 400, line height 1.5, tracking 0.06em. Captions and fine print.
- **label-md:** adobe-clean 15px at weight 700, line height 1.5. Buttons, navigation and labels.
- **label-sm:** adobe-clean 14px at weight 700, line height 1.5. Small labels and badges.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 40px.
- **Page margin:** 30px on each side of full-width sections.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #DADADA borders.

## Shapes

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

- **md (16px):** 24 elements.

## Components

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

- **button-outline (“View more”):** transparent fill, #4B4B4B text, 15px/700, 16px radius, padding 0px 14px, border 2px solid #4B4B4B.
- **button-outline-hover:** background #4B4B4B, text #FFFFFF on hover.
- **button-ghost (“Sign in”):** transparent fill, #292929 text, 14px/700, 16px radius, padding 5px 16px 6px 16px, border 2px solid #DADADA.
- **button-ghost-hover:** background #E9E9E9, text #292929 on hover.
- **link:** transparent fill, #D5D5D5 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 3 levels: #4B4B4B, #2C2C2C, #B1B1B1.
- Do let contrast carry emphasis; primary actions use #4B4B4B on #FFFFFF.
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do use 16px corners on most elements.
- Don't use #B1B1B1 for body text; it reaches 2.14:1 on #FFFFFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond adobe-clean.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.125s, 0.2s.

- **Easing:** `ease-out`, `ease-in-out`.

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

```