# Petrillo.studio design system

> Petrillo.studio design system measured from petrillo.studio: Clash Grotesk font, 6 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/petrillo.studio/

Petrillo.studio’s website (petrillo.studio) uses the Clash Grotesk font on a #FF0000 background. Measured by Sitepeel on November 7, 2026.

## What font does Petrillo.studio use?

Petrillo.studio uses Clash Grotesk (weight 400) and Suisse Intl (weight 400), with Suisse Intl Mono for code on petrillo.studio. Body text is 16px. Measured on November 7, 2026.

- Clash Grotesk (weights 400)
- Suisse Intl (weights 400)
- Suisse Intl Mono (weights 400)

## Petrillo.studio colors: palette and hex codes

Petrillo.studio’s main colors are #FF0000 (vivid red) for the background and #000000 (near black) for text. Measured on November 7, 2026.

- #FF0000: vivid red
- #000000: near black
- #FFFFFF: white
- #0A0A0A: near black

## What is Petrillo.studio built with?

Petrillo.studio’s website (petrillo.studio) is built with Vercel. Measured on November 7, 2026.

- Hosting & CDN: Vercel
- Analytics: Vercel Web Analytics

## Questions and answers

### What font does Petrillo.studio use?

Petrillo.studio’s website uses Clash Grotesk (weight 400) and Suisse Intl (weight 400), with Suisse Intl Mono for code. Body text is 16px. Measured on November 7, 2026.

### What are the Petrillo.studio colors and hex codes?

On petrillo.studio: #FF0000 (vivid red) for the background and #000000 (near black) for text. The color palette above lists all 6 colors with their hex codes and where each one is used.

### What is the Petrillo.studio design system?

The design system on this page is petrillo.studio’s, as measured on November 7, 2026: Clash Grotesk type and 10.5px corners, written down as a DESIGN.md. It is not Petrillo.studio’s own documentation.

### What is Petrillo.studio built with?

Petrillo.studio’s website (petrillo.studio) is built with Vercel. The full tech stack Sitepeel found: Vercel and Vercel Web Analytics. Measured on November 7, 2026.

### What is the Petrillo.studio DESIGN.md?

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

No. Sitepeel measured it from petrillo.studio’s public page on November 7, 2026. It is an independent analysis, not made or approved by Petrillo.studio.

### Can I use Petrillo.studio’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 Petrillo.studio’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/petrillo.studio/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 Petrillo.studio.

## The DESIGN.md file

```markdown
---
version: alpha
name: Petrillo.studio
description: "Light monochrome interface measured from petrillo.studio: Clash Grotesk type with Suisse Intl, flat surfaces and 10.5px corners."
colors:
  background: "#FF0000"
  surface: "#FF0000"
  on-surface: "#000000"
  on-background: "#000000"
  primary: "#000000"
  on-primary: "#FFFFFF"
  inverse-surface: "#0A0A0A"
  error: "#FF0000"
typography:
  body-md:
    fontFamily: Clash Grotesk
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Suisse Intl
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.4
  code:
    fontFamily: Suisse Intl Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.35
rounded:
  md: 10.5px
spacing:
  sm: 7.49px
components:
  card:
    backgroundColor: "{colors.inverse-surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
---

# Petrillo.studio Design System

## Overview

Petrillo.studio describes itself as: “Petrillo.studio is a design practice founded by Arthur Petrillo, working across brand, product, creative direction and design direction.” The interface is light, built on **Vivid Red (#FF0000)** with **Near Black (#000000)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Clash Grotesk** and **Suisse Intl**, with **Suisse Intl Mono** for code. Headlines run large; body text is 16px. The surface language is flat. Corners are mostly 10.5px.

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

## Colors

The palette has 6 roles.

- **Vivid Red (#FF0000):** Page background, seen 3 times. Token `background`, CSS `--red`.
- **Near Black (#000000):** Primary text and headings, seen 12 times. Token `on-surface`, CSS `--black`.
- **Near Black (#000000):** Primary actions (the main text color; the palette is monochrome), seen 64 times. Token `primary`, CSS `--black`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Near Black (#0A0A0A):** High-contrast fills, seen 11 times. Token `inverse-surface`.
- **Vivid Red (#FF0000):** Errors and destructive states, seen 7 times. Token `error`, CSS `--red`.

## Typography

**Clash Grotesk**, **Suisse Intl** and **Suisse Intl Mono** (monospace) share the interface. Fallback stack: `Clash Grotesk, Archivo, sans-serif`. Other loaded fonts: Space Grotesk.

- **body-md:** Clash Grotesk 16px at weight 400. Body text.
- **body-sm:** Suisse Intl 13.5px at weight 400, line height 1.4. Secondary and small text.
- **code:** Suisse Intl Mono 11px at weight 400, line height 1.35. Code and technical values.

## Layout

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

- **Scale:** sm 7.49px.
- **Breakpoints:** 767px, 768px, 1199px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

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

- **md (10.5px):** 4 elements.

## Components

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

- **card:** #0A0A0A fill, #000000 text, 16px/400, padding 0px.

## Do's and Don'ts

- Do use #FF0000 for the page.
- Do let contrast carry emphasis; primary actions use #000000 on #FF0000.
- Do reuse the measured spacing steps (7.49px).
- Do use 10.5px corners on most elements.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Clash Grotesk, Suisse Intl and Suisse Intl Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.6s.

## Motion

Interface transitions are quick: 0.18s, 0.56s, 0.2s, 0.3s. Longer ambient animations run 1.9s, 0.8s.

- **Easing:** `cubic-bezier(0.32, 0.72, 0.16, 1)`, `cubic-bezier(0.3, 0.85, 0.15, 1)`, `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```