WarholArts design system

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