Petrillo.studio design system

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