---
version: alpha
name: Antonio Scirica
description: A near-black portfolio canvas (#121212) with crisp white ink, Degular for billboard display type and Avenir Next for body, a single warm yellow accent (#efd35e) used as gradient stripes, and oversized 64px pill buttons — restrained, editorial, designer-portfolio minimalism.

colors:
  # Canvas + ink
  background: "#121212"
  surface: "#31363c"
  surface-deep: "#222222"
  ink: "#ffffff"
  ink-muted: "#9a9a9a"
  ink-soft: "#cccccc"     # flattened rgba(34,34,34,.5)-equivalent reading tint over dark

  # Accent
  primary: "#efd35e"      # warm yellow — gradient stripes, highlights
  on-primary: "#121212"

  # On-color
  on-ink: "#121212"       # dark text on white pill buttons
  on-surface: "#ffffff"

  # Light inversion (footer/inverted blocks)
  surface-light: "#ffffff"
  ink-on-light: "#121212"
  ink-on-light-muted: "#333333"

  # Borders / dividers
  border: "#31363c"
  border-soft: "#2a2a2a"

typography:
  display-hero:
    fontFamily: "Degular, sans-serif"
    fontSize: 85px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -1.5px
  display-large:
    fontFamily: "Degular, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Degular, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Degular, sans-serif"
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  card-title:
    fontFamily: "Degular, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-light:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 16px
    fontWeight: 200
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  label-bold:
    fontFamily: "AvenirNext, sans-serif"
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.20
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 32px
  pill: 64px
  circle: 9999px

components:
  # Primary white pill CTA (Book a Call / Send Email)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px

  # Secondary outlined pill on dark
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border}"

  # Project / portfolio card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Deep surface card (archive rows)
  card-deep:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

  # Circular social icon button
  icon-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.circle}"
    width: 48px
    height: 48px

  # Accent chip / category tag
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-bold}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 32px

  # Inverted light section (footer / contact block)
  section-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 48px
---

# Antonio Scirica Design System

## Overview

Antonio Scirica's portfolio is a study in confident, editorial darkness. The entire site sits on a near-black canvas (`{colors.background}`) — not pure `#000`, but a soft `#121212` that reads warmer and gentler under bright display type. Against this, crisp white ink (`{colors.ink}`) carries the headlines and body, producing the high-contrast, gallery-at-night feeling that designer portfolios reach for when they want the work to glow and the chrome to disappear.

The typographic pairing is the system's signature. Degular — a humanist sans with personality at large sizes — handles every display moment, scaling from card titles up to a billboard 85px hero that anchors the landing view. Avenir Next does the quieter work of body copy and UI labels, dropping to a hairline weight 200 for long-form reading passages and climbing to 600/800 for buttons and emphatic labels. The result is a clear two-voice hierarchy: Degular announces, Avenir Next explains.

Color is deliberately rationed. Beyond the black-and-white spine, a single warm yellow (`{colors.primary}`) is the only chromatic note — most distinctively deployed as repeating linear-gradient stripes rather than flat fills, giving the accent a tactile, screen-printed quality. Surfaces step up from the canvas in two muted neutrals (`{colors.surface}` and a deeper `{colors.surface-deep}`) for project cards and archive rows, and muted gray (`{colors.ink-muted}`) handles secondary text without ever competing with the white.

Geometry leans soft and oversized. Buttons are full pills at a generous 64px radius, social actions are perfect circles, and cards round at 16px. The shapes are friendly and the spacing is roomy — the work breathes.

**Key Characteristics:**
- Near-black `#121212` canvas with crisp white ink — warm-dark, not pure black
- Degular for all display type (up to 85px hero), Avenir Next for body and UI
- Avenir Next weight range from hairline 200 to bold 800
- Single warm yellow accent (`{colors.primary}`), often as gradient stripes not flat fill
- Oversized 64px pill buttons; circular social icon buttons
- Two muted dark surfaces (`{colors.surface}`, `{colors.surface-deep}`) for cards
- Occasional fully-inverted white sections for contact/footer blocks
- Roomy spacing rhythm — gallery-style negative space

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): Page background everywhere. Warm near-black, not `#000`.
- **White Ink** (`{colors.ink}`): Headings, body, primary text on dark.
- **Warm Yellow** (`{colors.primary}`): The sole accent — gradient stripes, highlights, badges.

### Surfaces
- **Card Surface** (`{colors.surface}`): Project cards, icon buttons — a desaturated slate lift.
- **Deep Surface** (`{colors.surface-deep}`): Archive rows, nested blocks.
- **Light Surface** (`{colors.surface-light}`): Inverted white sections (footer/contact).

### Text
- **Muted Gray** (`{colors.ink-muted}`): Secondary text, captions, metadata.
- **Soft Ink** (`{colors.ink-soft}`): Reduced-emphasis reading text on dark.
- **Ink on Light** (`{colors.ink-on-light}`): Dark text inside inverted white sections.

### On-Color
- **On Primary** (`{colors.on-primary}`): Dark text over the yellow accent.
- **On Ink** (`{colors.on-ink}`): Dark text over white pill buttons.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers — same value as card surface for seamlessness.

## Typography

### Font Family
- **Display**: `Degular`, with fallback `sans-serif`
- **Body / UI**: `AvenirNext`, with fallback `sans-serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 85px billboard hero |
| `display-large` | Large section openers |
| `section-heading` | Feature/section titles |
| `sub-heading` | Lighter Degular sub-headings |
| `card-title` | Project card titles |
| `body-large` | Intro and feature copy |
| `body` | Standard reading text |
| `body-light` | Hairline weight-200 long-form passages |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, tags |
| `label-bold` | Emphatic 800-weight labels |

### Principles
- **Two voices, strict roles**: Degular announces (display), Avenir Next explains (body/UI). Never swap.
- **Full weight range on Avenir Next**: 200 for airy long-form, 400 standard, 600 buttons, 800 emphatic labels.
- **Display compression**: light negative tracking only at the largest Degular sizes; body stays neutral.
- **White on near-black**: the contrast spine carries the page; color is the exception, not the rule.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, scaling up to generous `{spacing.3xl}`–`{spacing.4xl}` section gaps for gallery-style breathing room.

### Grid & Container
- Centered single-column hero with oversized Degular headline
- Project work shown as a responsive card grid
- Archive presented as deep-surface list rows
- Inverted white block for contact/footer

### Whitespace Philosophy
- **Gallery breathing room**: large vertical gaps let project imagery dominate.
- **Dark continuity**: sections share the `{colors.background}` canvas; separation comes from surface lifts and spacing, not borders.
- **Accent restraint**: yellow appears sparingly, often as a striped gradient detail rather than a flat block.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small containers, chips |
| `md` | 12px | Deep-surface rows |
| `lg` | 16px | Project cards |
| `xl` | 32px | Inverted section blocks |
| `pill` | 64px | Buttons — the signature oversized pill |
| `circle` | 9999px | Social icon buttons |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — White pill, dark text, 64px radius. Hovers to the yellow accent.
- **`button-secondary`** — Dark pill with subtle border outline.
- **`icon-button`** — Circular social buttons on card-surface.

### Cards
- **`card`** — Project cards on `{colors.surface}`, 16px radius, white title.
- **`card-deep`** — Archive rows on `{colors.surface-deep}`, 12px radius.

### Badges
- **`badge`** — Yellow accent chip with dark 800-weight label.

### Navigation
- **`nav-bar`** — Minimal dark bar; burger toggle on mobile, white links.

### Inverted Sections
- **`section-light`** — Full white block for contact/footer, dark text, 32px radius.

## Do's and Don'ts

### Do
- Keep the canvas warm near-black `{colors.background}` — never pure `#000`.
- Use Degular for display, Avenir Next for everything else.
- Ration the yellow accent; favor striped gradients over flat fills.
- Use oversized 64px pill buttons and circular social icons.
- Let project imagery dominate with generous whitespace.

### Don't
- Don't use the yellow as a large flat background block.
- Don't set body type in Degular or headlines in Avenir Next.
- Don't add a second accent color — the palette is black, white, and one yellow.
- Don't tighten the spacing — the gallery breathing room is the point.
- Don't put white text on the yellow accent — use `{colors.on-primary}` dark text.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, burger nav, hero scales down |
| Tablet | 600–1024px | 2-column project grid |
| Desktop | 1024–1400px | Full grid, max hero size |
| Large | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero: 85px Degular → scales down proportionally on mobile
- Navigation: inline links → burger menu
- Project grid: multi-column → single column
- Pill buttons keep 64px radius at all sizes

### Touch Targets
- Pill buttons use 16px vertical padding
- Circular icon buttons at ~48px diameter

---

## 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 Antonio Scirica. Brand names and trademarks belong to their respective owners.