---
name: Giuliatonon It
description: "This page is worth including as a prime example of functional, system-level UI design where clarity and information architecture override aesthetic considerations."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#404040"
  tertiary: "#2F7BBF"
  neutral: "#999999"
  line: "rgba(217, 217, 217, 1)"

typography:
  display:
    fontFamily: system-ui
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  h2:
    fontFamily: system-ui
    fontSize: 30px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: system-ui
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist, utility-focused system diagnostic page designed to communicate technical status clearly and authoritatively.

*A clean, standard system diagnostic panel or utility interface.*

## Colors

High-contrast neutrals with functional semantic colors for clear status communication.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#404040`)** — uses `ink` token
- **Accent (`#2F7BBF`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(217, 217, 217, 1)`)** — uses `line` token

## Typography

- **Display:** system-ui
- **Body:** system-ui
- **Mono:** system-ui

- Use system font stack for maximum compatibility and native feel
- Keep headings unweighted (400) for a clean, non-aggressive look
- Maintain clear hierarchy through size differences rather than weight

## Layout

Centered single-column layout with clear vertical rhythm

*Rhythm:* Consistent 4px base rhythm with clear section separation

## Elevation & Depth

- 0 1px 3px rgba(0,0,0,0.1)
- Borders: Subtle 1px borders in muted grays for section separation

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Standard system links with minimal styling
- **card:** Icon-based status cards in a horizontal flow
- **chip:** Minimal inline status badges
- **input:** Not present
- **hero:** Large text-based error status with timestamp and reference link

## Do's and Don'ts

**Don't:**
- don't use decorative fonts — screenshot shows system-ui stack
- don't add rounded corners to main layout elements — screenshot shows sharp edges
- don't use heavy font weights for headings — screenshot shows 400 weight throughout
- don't introduce complex background patterns — screenshot shows solid white and simple gradients
- don't use vibrant, non-functional accent colors — screenshot shows blue only for links and status
- don't create dense, cramped layouts — screenshot shows generous 60px vertical padding

---

## System Prompt (paste into AI agent)

```
This is a Cloudflare error page design for an Invalid SSL certificate. The design DNA is a minimal, utility-focused system diagnostic interface. The primary colors are clean white backgrounds (#FFFFFF) with dark gray text (#404040), using functional blue (#2F7BBF) for links, green (#9BCA3E) for success states, and red (#BD2426) for errors. The typography relies entirely on the system font stack (system-ui, -apple-system, etc.) with a clear hierarchy established through size rather than weight, using 60px for the main heading and 30px for subheadings. Critical constraints include avoiding decorative fonts, heavy font weights, complex backgrounds, and non-functional accent colors. The layout is a clean, single-column centered structure with generous spacing, prioritizing clarity and immediate comprehension of the technical status.
```