# WarholArts design system

> WarholArts design system measured from warhol-arts.webflow.io: Mangogrotesque font, 8 color hex codes, type scale and spacing. Light theme with 3px corners.

Canonical page: https://sitepeel.dev/design-md/warhol-arts.webflow.io/

WarholArts’s website (warhol-arts.webflow.io) uses the Mangogrotesque font and #2D62FF as its main color on a #FFE5D5 background. Measured by Sitepeel on November 5, 2026.

## What font does WarholArts use?

WarholArts uses Mangogrotesque (weights 300, 400 and 700) and Tomato Grotesk (weights 200 and 400) on warhol-arts.webflow.io. Page titles are 48px at weight 300 and body text is 14.5px. Measured on November 5, 2026.

- Mangogrotesque (weights 300, 400, 700)
- Tomato Grotesk (weights 200, 400)

## WarholArts colors: palette and hex codes

WarholArts’s main colors are #FFE5D5 (pale orange) for the background, #000000 (near black) for text and #2D62FF (vivid blue) as the main accent, with #DD23BB (purple) and #FB4E2B (vivid red) as other accents. Measured on November 5, 2026.

- #FFE5D5: pale orange
- #000000: near black
- #A8988D: orange
- #FFFFFF: white
- #2D62FF: vivid blue
- #DD23BB: purple
- #FB4E2B: vivid red

## What is WarholArts built with?

WarholArts’s website (warhol-arts.webflow.io) is built with Webflow, jQuery, Cloudflare, GSAP and GSAP Observer. Measured on November 5, 2026.

- JavaScript framework: jQuery 3.5.1
- Animation & 3D: GSAP 3.15.0, GSAP Observer 3.15.0, GSAP ScrollTrigger 3.15.0, Lenis 1.0.23
- Hosting & CDN: Cloudflare
- Site builder & CMS: Webflow

## Questions and answers

### What font does WarholArts use?

WarholArts’s website uses Mangogrotesque (weights 300, 400 and 700) and Tomato Grotesk (weights 200 and 400). Page titles are 48px at weight 300 and body text is 14.5px. Measured on November 5, 2026.

### What are the WarholArts colors and hex codes?

On warhol-arts.webflow.io: #FFE5D5 (pale orange) for the background, #000000 (near black) for text and #2D62FF (vivid blue) as the main accent, with #DD23BB (purple) and #FB4E2B (vivid red) as other accents. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the WarholArts design system?

The design system on this page is warhol-arts.webflow.io’s, as measured on November 5, 2026: Mangogrotesque type, #2D62FF as the main color and 3px corners, written down as a DESIGN.md. It is not WarholArts’s own documentation.

### What is WarholArts built with?

WarholArts’s website (warhol-arts.webflow.io) is built with Webflow, jQuery, Cloudflare, GSAP and GSAP Observer. The full tech stack Sitepeel found: jQuery, GSAP, GSAP Observer, GSAP ScrollTrigger, Lenis, Lottie, Matter.js, SplitType, Three.js and Cloudflare. Measured on November 5, 2026.

### What is the WarholArts DESIGN.md?

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

No. Sitepeel measured it from warhol-arts.webflow.io’s public page on November 5, 2026. It is an independent analysis, not made or approved by WarholArts.

### Can I use WarholArts’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 WarholArts’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/warhol-arts.webflow.io/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 WarholArts.

## The DESIGN.md file

```markdown
---
version: alpha
name: WarholArts
description: "Light interface measured from warhol-arts.webflow.io: Mangogrotesque type with Tomato Grotesk, vivid blue accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#FFE5D5"
  surface: "#FFE5D5"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#A8988D"
  surface-container-low: "#FFFFFF"
  primary: "#2D62FF"
  on-primary: "#FFFFFF"
  secondary: "#DD23BB"
  tertiary: "#FB4E2B"
typography:
  headline-display:
    fontFamily: Mangogrotesque
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.08
  headline-lg:
    fontFamily: Mangogrotesque
    fontSize: 27px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0.038em
  body-md:
    fontFamily: Tomato Grotesk
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.1
  body-lg:
    fontFamily: Tomato Grotesk
    fontSize: 18px
    fontWeight: 200
    lineHeight: 0.6
  body-sm:
    fontFamily: Mangogrotesque
    fontSize: 12.5px
    fontWeight: 300
    lineHeight: 0.9
  label-md:
    fontFamily: Mangogrotesque
    fontSize: 1px
    fontWeight: 700
    lineHeight: 1.1
rounded:
  md: 3px
  full: 9999px
spacing:
  xs: 3.25px
  sm: 6px
  md: 16px
  lg: 26px
  xl: 52px
  gutter: 16px
components:
  button-outline:
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 0px 20px 0px 12px
    height: 41px
  button-outline-hover:
    textColor: "#685E59"
  button-ghost:
    textColor: "{colors.background}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
---

# WarholArts Design System

## Overview

WarholArts describes itself as: “Step into Andy Warhol's iconic Pop Art universe. Explore 80+ works including Four Elvises, Marilyn Monroe, and more. Exhibition in Prague, Czech Republic 2025.” The interface is light, built on **Pale Orange (#FFE5D5)** with **Near Black (#000000)** text, and **Vivid Blue (#2D62FF)** as the main accent.

Type is set in **Mangogrotesque** and **Tomato Grotesk**. Headlines run large; body text is 14.5px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [warhol-arts.webflow.io](https://warhol-arts.webflow.io/) on November 5, 2026 at 1440×900 and 390×844 from 248 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **Pale Orange (#FFE5D5):** Page background. Token `background`, CSS `--text-color--text-primary`.
- **Near Black (#000000):** Primary text and headings, seen 1 time. Token `on-surface`, CSS `--black`.
- **Orange (#A8988D):** Secondary text, seen 7 times. Token `on-surface-variant`, CSS `--beige-300`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`, CSS `--base-color-neutral--white<deleted|variable-248be024-93cf-6ec4-8eec-0e9f047a83ae>`.
- **Vivid Blue (#2D62FF):** Brand accent (CSS variable). Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Purple (#DD23BB):** Accent (CSS variable). Token `secondary`.
- **Vivid Red (#FB4E2B):** Accent in the header, seen 3 times. Token `tertiary`, CSS `--red`.

## Typography

**Mangogrotesque** and **Tomato Grotesk** share the interface. Fallback stack: `Mangogrotesque, sans-serif`.

- **headline-display:** Mangogrotesque 48px at weight 300, line height 1.08. Page title (h1).
- **headline-lg:** Mangogrotesque 27px at weight 400, line height 0.9, tracking 0.038em. Section headings (h2).
- **body-md:** Tomato Grotesk 14.5px at weight 400, line height 1.1. Body text.
- **body-lg:** Tomato Grotesk 18px at weight 200, line height 0.6. Lead paragraphs.
- **body-sm:** Mangogrotesque 12.5px at weight 300, line height 0.9. Secondary and small text.
- **label-md:** Mangogrotesque 1px at weight 700, line height 1.1. Buttons, navigation and labels.

## Layout

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

- **Scale:** xs 3.25px, sm 6px, md 16px, lg 26px, xl 52px.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Breakpoints:** 479px, 600px, 767px, 768px, 991px, 992px, 1024px, 1200px.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **md (3px):** 4 elements.
- **full (9999px):** 4 elements.

## Components

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

- **button-outline (“Off Off”):** transparent fill, #FFE5D5 text, 14.4px/400, 500px radius, padding 0px 20px 0px 12px, border 1px solid #35302D.
- **button-outline-hover:** background #00000000, text #685E59 on hover.
- **button-ghost (“BAG IT BAG IT BAG IT BAG IT”):** transparent fill, #FFE5D5 text, 14.4px/400, padding 0px.

## Do's and Don'ts

- Do use #FFE5D5 for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 2 levels: #000000, #A8988D.
- Do use #2D62FF as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (6px, 16px, 26px).
- Do make buttons and chips fully rounded (9999px); most other elements use 3px corners.
- Don't use #A8988D for body text; it reaches 2.31:1 on #FFE5D5. Keep it for large text or metadata.
- Don't introduce new font families beyond Mangogrotesque and Tomato Grotesk.
- Don't use #2D62FF for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.35s, 0.5s, 0.1s.

- **Easing:** `ease`, `ease-in-out`, `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.

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

```