# Giuliatonon It · Design system migration spec

> Source: https://www.giuliatonon.it  ·  Curated by OpenDesign  ·  en

> This page is worth including as a prime example of functional, system-level UI design where clarity and information architecture override aesthetic considerations.

## 1. Identity DNA

Giuliatonon.it operates like a system diagnostic panel—functional, clear, and built for immediate comprehension. Its design DNA is that of a utility interface where every element serves a specific purpose in communicating technical status, with no decorative layer to obscure the message.

**One-liner:** A minimalist, utility-focused system diagnostic page designed to communicate technical status clearly and authoritatively.
**Keywords:** error · diagnostic · clear · system · technical
**Analogy:** A clean, standard system diagnostic panel or utility interface.

## 2. Color

The color system is built on high-contrast neutrals, using functional semantic colors for clear status communication. Clean whites and dark grays form the foundation, with blue for links and status, green for success, and red for errors.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#404040` | body text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#2F7BBF` | single accent |
| `--line` | `rgba(217, 217, 217, 1)` | divider |

**Color principle:** High-contrast neutrals with functional semantic colors for clear status communication.

This is a purely functional palette where color exists only to communicate state or enable interaction.

## 3. Typography

Typography relies entirely on the system font stack for maximum compatibility and a native feel. The hierarchy is established through clear size differences rather than weight, with headings kept unweighted at 400 for a clean, non-aggressive look.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | -0.5px | Primary error status heading |
| h2 | 30px | 1.3 | 400 | normal | Section headings for explanation |
| body | 16px | 1.5 | 400 | normal | Primary explanatory text |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px base rhythm provides the underlying grid for all spacing decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base rhythm with clear section separation

## 5. Surfaces

Depth is communicated through subtle shadows and borders rather than elevation. Subtle 1px borders in muted grays separate sections, while soft shadows provide minimal lift for key components.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.1)
- **Borders:** Subtle 1px borders in muted grays for section separation

## 6. Layout

The layout is a clean, single-column centered structure with clear vertical rhythm. Generous vertical spacing—around 60px—creates breathing room and reinforces the information hierarchy.

- **Container max:** 960px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout with clear vertical rhythm

## 7. Motion & Interaction

Motion is minimal and purely functional, existing only to provide feedback on interaction. Subtle 150ms transitions on interactive elements offer confirmation without distraction from the technical content.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Subtle transitions on interactive elements

- **Hover:** Color transition on links
- **Click:** Standard link behavior
- **Transition:** Smooth color transitions on focus states
- **Keyboard:** Standard keyboard navigation for links

## 8. Voice & Don'ts

The editorial voice is direct, technical, and informative—status declarations are clear and unambiguous. Guidance is split contextually between visitor and owner, avoiding all marketing language and unnecessary pleasantries.

- **Tone:** Direct, technical, and informative
- **Headline style:** Clear, unambiguous status declaration
- **CTA style:** Helpful guidance split by user role (visitor vs owner)
- **Avoid:** Marketing language / Emotional appeals / Unnecessary pleasantries

### Don'ts
- ❌ 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

The system deliberately excludes decorative fonts, rounded corners, complex backgrounds, and non-functional accent colors.

## System Prompt (paste into AI tool)

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