---
version: alpha
name: Silencio
description: Anti-boring editorial minimalism — a near-pure-white canvas with true-black ink, a giant tight-tracked grotesque headline voice, a single hot-red accent reserved for emphasis and arrows, and a product-packaging metaphor (barcodes, "consume responsibly" stamps, recycling marks) that turns a studio site into a consumer-good wrapper.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f4f4f2"
  ink: "#0a0a0a"
  ink-pure: "#000000"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8c8c8c"

  # Accent — the single hot red, used sparingly for emphasis, arrows, the fire mark
  primary: "#ff3b1f"
  primary-hover: "#e62d12"
  on-primary: "#ffffff"

  # On-color
  on-ink: "#ffffff"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-600: "#5c5c5c"
  gray-400: "#8c8c8c"
  gray-200: "#d8d8d4"
  gray-100: "#ececea"
  gray-50: "#f4f4f2"

  # Lines / borders
  border: "#e2e2de"
  border-strong: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: -3.5px
  display:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  barcode-stamp:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px
  caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.8px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  # Primary CTA — solid black, square-ish, the studio's confident voice
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  # Secondary — outline, hairline black border
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  # Inline text link with arrow — the recurring nav/cta pattern
  link-arrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 0px 0px

  # Accent badge / stamp — the red emphasis chip
  badge-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.barcode-stamp}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  # Mono label chip — packaging-style tag
  badge-mono:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 4px 10px
    borderColor: "{colors.border}"

  # Card — flat, hairline-ruled, no shadow
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  # Project / case-study card on soft tint
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 28px
    borderColor: "{colors.border}"

  # Input — square, underline-forward minimal
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.border-strong}"

  # Top nav bar — flat white, ruled bottom
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"

  # Barcode footer stamp block
  packaging-stamp:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.barcode-stamp}"
    rounded: "{rounded.none}"
    padding: 8px 12px
    borderColor: "{colors.border-strong}"
---

# Silencio Design System

## Overview

Silencio is a Spanish creative studio that builds "digital visual languages for daring brands," and its own site practices what it preaches: an anti-boring editorial system that reads less like a portfolio and more like the wrapper of a consumer product. The canvas is near-pure white (`{colors.background}`) with true-black ink (`{colors.ink}`), and the whole identity hangs on one structural conceit — packaging. Barcodes, recycling marks, "consume responsibly" micro-stamps, and monospace product codes turn the layout into something you'd find printed on the side of a box.

The headline voice is enormous and tightly tracked. A heavy grotesque (rendered here in `Archivo`, the closest Google match to the studio's bold neo-grotesque) runs at display sizes with aggressive negative letter-spacing (`-3.5px` at the hero) and a sub-1.0 line-height, so titles stack into dense, confident blocks. Body copy relaxes back to a clean, readable grotesque, while a monospace (`Space Mono`) carries every "label" role — barcodes, captions, tags, stamps — reinforcing the packaging metaphor at small sizes.

Color is deliberately starved. The system is black-and-white first, with a single hot red (`{colors.primary}`) reserved for genuine emphasis: the fire mark, arrow accents, the occasional stamp, a hover flip on the primary button. Red is never decoration and never chrome — it is the loudest thing on a quiet page, so it appears rarely and lands hard. Everything else lives on a tight neutral ramp from black to soft warm-gray (`{colors.surface-soft}`).

Geometry is square. Corners are mostly `{rounded.none}`; buttons, cards, inputs, and stamps are crisp rectangles ruled by hairline borders (`{colors.border}`) or a strong black keyline (`{colors.border-strong}`) rather than shadows. Depth comes from rules, tint, and scale contrast — a tiny mono stamp next to a building-sized headline — not from elevation.

**Key Characteristics:**
- Near-pure-white canvas, true-black ink, no shadows — flat editorial layout
- Giant tight-tracked grotesque headlines (`-3.5px` at hero, sub-1.0 line-height)
- A single hot-red accent (`{colors.primary}`) reserved for emphasis and arrows only
- Monospace (`Space Mono`) for every label, caption, barcode, and packaging stamp
- Square geometry — `{rounded.none}` corners, hairline keylines instead of borders-as-shadow
- Product-packaging metaphor: barcodes, recycling marks, "consume responsibly" micro-copy
- Hover flips the black primary button to red — the brand's signature interaction

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Headlines, body, primary button fill, strong keylines.
- **Pure White** (`{colors.background}`): Page canvas, card surfaces, text on black.
- **True Black** (`{colors.ink-pure}`): Barcode bars, hard graphic marks.

### Accent
- **Silencio Red** (`{colors.primary}`): The single accent — fire mark, arrows, emphasis stamps, primary-button hover. Used sparingly.
- **Red Hover** (`{colors.primary-hover}`): Pressed/hover deepening of the accent.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text equivalent to ink.
- **Gray 600** (`{colors.gray-600}`): Secondary copy, sub-labels.
- **Gray 400** (`{colors.gray-400}`): Muted captions, placeholders.
- **Gray 200** (`{colors.gray-200}`): Stronger dividers.
- **Gray 100** (`{colors.gray-100}`): Light dividers.
- **Gray 50** (`{colors.gray-50}`): Soft warm surface tint behind project cards.

### Lines & Borders
- **Border** (`{colors.border}`): Hairline rules between sections and cards.
- **Border Strong** (`{colors.border-strong}`): Black keyline on buttons, inputs, packaging stamps.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks `Helvetica Neue, Arial, sans-serif` — heavy neo-grotesque for display and body.
- **Monospace**: `Space Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — every label, caption, barcode, and stamp.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px building-sized hero headline |
| `display` | 64px section openers |
| `section-heading` | 40px feature titles |
| `sub-heading` | 28px sub-sections |
| `card-title` | 22px project/card titles |
| `body-large` | 20px lead paragraphs |
| `body` | 17px standard reading text |
| `body-small` | 15px dense UI text |
| `button-ui` | 14px button + nav labels |
| `label-mono` | 12px monospace labels |
| `barcode-stamp` | 11px monospace packaging stamps |
| `caption` | 11px monospace metadata |

### Principles
- **Scale as drama**: The hero is intentionally oversized and tight-tracked; the contrast between an 88px headline and an 11px mono stamp IS the design.
- **Mono = packaging voice**: Anything that reads like a product code, barcode legend, or compliance stamp uses `Space Mono`.
- **Negative tracking scales with size**: `-3.5px` at 88px, `-2.4px` at 64px, easing to `0` at body sizes.
- **Weight tells rank**: 800/700 for display, 600 for sub-heads and UI, 400 for reading.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large editorial jumps to `{spacing.4xl}` (96px) and `{spacing.5xl}` (140px) for section breathing room.

### Grid & Container
- Wide editorial container, roughly 1280px max
- Hero: oversized single headline block, mono stamp anchored to a corner
- Work: asymmetric project grid, 2-up to 1-up
- Full-bleed hairline rules separate major sections

### Whitespace Philosophy
- **Loud quiet**: Massive whitespace makes the rare red accent and giant headline hit harder.
- **Ruled, not shadowed**: Separation comes from hairline keylines and tint shifts, never elevation.
- **Packaging margins**: Mono stamps and barcodes tuck into corners like print registration marks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, stamps — the default |
| `xs` | 2px | Tiny chips |
| `sm` | 4px | Small functional elements |
| `md` | 8px | Soft containers (rare) |
| `lg` | 12px | Media containers (rare) |
| `pill` | 9999px | Occasional tag pills |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Solid black, white text, square corners. Hover flips fill to Silencio Red.
- **`button-secondary`** — White with a black keyline, square corners.
- **`link-arrow`** — Inline text link paired with an arrow glyph; the recurring nav/CTA pattern.

### Badges & Stamps
- **`badge-accent`** — Red fill, white mono text — the emphasis stamp.
- **`badge-mono`** — Soft-tint chip with mono label and hairline border.
- **`packaging-stamp`** — Barcode/"consume responsibly" block in `Space Mono` with a strong keyline.

### Cards
- **`card`** — Flat white, hairline border, generous padding, no shadow.
- **`card-project`** — Soft warm tint (`{colors.surface-soft}`) for case-study tiles.

### Inputs
- **`input`** — Square, black keyline, mono-adjacent minimal styling.

### Navigation
- **`nav-bar`** — Flat white header ruled at the bottom; 14px labels and arrow links.

## Do's and Don'ts

### Do
- Keep the canvas white and ink black — let scale and rules carry hierarchy.
- Reserve `{colors.primary}` red for true emphasis, arrows, the fire mark, and the primary-button hover flip.
- Use `Space Mono` for every label, caption, barcode, and packaging stamp.
- Track headlines tightly and let them get huge.
- Default every corner to `{rounded.none}`.

### Don't
- Don't sprinkle red as decoration or chrome — it loses its punch.
- Don't add shadows; separation is ruled and tinted.
- Don't round button or card corners — square is the identity.
- Don't set body copy in the mono face — mono is the label/packaging voice only.
- Don't loosen headline tracking; the compression is the point.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Hero scales down hard, single column, stamps move inline |
| Tablet | 600–1024px | 2-up project grid, expanded margins |
| Desktop | 1024–1280px | Full editorial layout |
| Large | >1280px | Centered container, generous side margins |

### Collapsing Strategy
- Hero: 88px → ~44px, keeps proportional negative tracking
- Nav: arrow links → menu toggle
- Project grid: 2-up → single column
- Packaging stamps: corner-anchored → inline footer block
- Section spacing: 140px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink Black `{colors.ink}`, hover → Silencio Red `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: Ink Black `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Accent: Silencio Red `{colors.primary}` (sparingly)
- Border: hairline `{colors.border}`, keyline `{colors.border-strong}`

### Example Component Prompts
- "Hero on white. Headline at 88px Archivo weight 800, line-height 0.95, letter-spacing -3.5px, color `{colors.ink}`. A small `Space Mono` 11px barcode stamp anchored bottom-left in `{colors.gray-600}`."
- "Primary button: black fill `{colors.ink}`, white text, square `{rounded.none}` corners, 14px Archivo weight 600, 14px/28px padding; on hover flip background to `{colors.primary}`."
- "Project card: soft tint `{colors.surface-soft}`, hairline border `{colors.border}`, square corners, 28px padding, 22px Archivo weight 600 title."
- "Packaging stamp: `Space Mono` 11px, strong black keyline `{colors.border-strong}`, square, 'CONSUME RESPONSIBLY' style micro-copy."

### Iteration Guide
1. White canvas, black ink, square corners — always start here.
2. Red is rare and loud — emphasis, arrows, hover only.
3. Mono carries labels; grotesque carries headlines and body.
4. Hierarchy = scale + hairline rules, never shadow.
5. The primary-button red hover flip is the signature move.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Silencio. Brand names and trademarks belong to their respective owners.