---
version: alpha
name: Erick Velasco
description: Quiet designer-portfolio minimalism — Acid Grotesk grotesque with light (300) and book (400) weights, near-black ink on pure white, soft 10px card radii, restrained grey neutral scale, and one electric blue link accent reserved for interaction.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  surface-card: "#f2f2f2"
  ink: "#0c0c0c"
  ink-pure: "#000000"

  # Secondary / muted text
  ink-secondary: "#222222"
  ink-muted: "#5d6c7b"
  ink-faint: "#758696"
  ink-disabled: "#767676"

  # Accent — link / interaction blue
  primary: "#0082f3"
  link-blue: "#0082f3"
  on-primary: "#ffffff"

  # Neutral scale
  gray-900: "#151515"
  gray-700: "#373737"
  gray-500: "#717380"
  gray-400: "#999999"
  gray-300: "#c8c8c8"
  gray-200: "#d5d5d5"
  gray-100: "#dddddd"
  gray-50: "#eeeeee"

  # Card surfaces
  card-grey: "#f2f2f2"
  card-grey-hover: "#e8e8e8"
  border-ribbon: "#d5d5d5"

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

typography:
  display-hero:
    fontFamily: "Fff Acidgrotesk Light, Space Grotesk, sans-serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.96px
  display-large:
    fontFamily: "Fff Acidgrotesk Light, Space Grotesk, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.10
    letterSpacing: -0.48px
  section-heading:
    fontFamily: "Fff Acidgrotesk Light, Space Grotesk, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.4px
  sub-heading:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  card-title:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  title-medium:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Fff Acidgrotesk Light, Space Grotesk, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Fff Acidgrotesk Light, Space Grotesk, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-caps:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1.04px
  caption:
    fontFamily: "Fff Acidgrotesk Book, Space Grotesk, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 24px
  xl: 48px
  2xl: 68px
  3xl: 96px

rounded:
  none: 0px
  micro: 3px
  md: 8px
  lg: 10px
  xl: 150px
  pill: 999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.gray-100}"
  button-secondary-hover:
    backgroundColor: "{colors.card-grey}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.gray-200}"

  badge:
    backgroundColor: "{colors.card-grey}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-100}"

  card-grey:
    backgroundColor: "{colors.card-grey}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.card-grey}"
  card-grey-hover:
    backgroundColor: "{colors.card-grey-hover}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 15px
    borderColor: "{colors.gray-200}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 15px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 15px 24px
    borderColor: "{colors.gray-50}"

  link:
    textColor: "{colors.link-blue}"
    typography: "{typography.body}"

  avatar:
    backgroundColor: "{colors.card-grey}"
    rounded: "{rounded.pill}"
    width: 48px
    height: 48px
---

# Erick Velasco Design System

## Overview

Erick Velasco's portfolio is a study in confident restraint — the kind of personal site where the design disappears so the work can speak. The canvas is pure white (`{colors.background}`) and the ink is a near-black `{colors.ink}` (#0c0c0c, not true black), giving the page a soft, photographic contrast rather than a harsh one. Everything else is built from a quiet grey neutral scale, and a single electric blue (`{colors.primary}`) is held in reserve for links and interaction. There is no decorative color anywhere — color is functional, and almost entirely absent from the chrome.

The typographic signature is Acid Grotesk (FFF's grotesque), used in two weights with strict roles: Light (300) carries the display and reading voice, and Book (400) handles UI, labels, and smaller text. The Light display weight is what makes the site feel airy and editorial — large headings render thin and open rather than bold and loud. Uppercase labels add tracked-out letter-spacing (1.04px) to function as small-caps eyebrows. The closest faithful Google substitute for Acid Grotesk's geometric-grotesque character is Space Grotesk.

Structure is calm and grid-driven. Cards sit on either pure white with a hairline `{colors.gray-100}` border or on a soft grey surface (`{colors.card-grey}`, #f2f2f2) that lifts to `{colors.card-grey-hover}` on interaction. Radii are gentle — a 10px `--border-radius` is the house default, with 8px on tighter elements and a dramatic 150px pill for select rounded shapes. The container maxes at 1400px with responsive horizontal padding that steps from 68px on large desktop down to 15px on mobile.

**Key Characteristics:**
- Acid Grotesk in two weights — Light (300) for display/reading, Book (400) for UI/labels
- Near-black `{colors.ink}` (#0c0c0c) on pure white — soft, photographic contrast
- Thin display headings: Light weight at 48–64px reads airy, not heavy
- Single electric blue (`{colors.primary}`) accent reserved for links/interaction
- Quiet grey neutral scale carries all structure and depth
- Soft 10px default radius with 8px on tight elements
- Tracked-out uppercase labels (1.04px letter-spacing) as eyebrows
- Grey card surfaces (#f2f2f2) as an alternative to bordered white cards

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings — #0c0c0c, intentionally not pure black for softer contrast.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark buttons.
- **Link Blue** (`{colors.primary}`): The single accent — links, hover, interaction states only.

### Secondary / Muted Text
- **Ink Secondary** (`{colors.ink-secondary}`): Strong secondary text, badge labels.
- **Ink Muted** (`{colors.ink-muted}`): Muted descriptive copy.
- **Ink Faint** (`{colors.ink-faint}`): Faint metadata, captions.
- **Ink Disabled** (`{colors.ink-disabled}`): Disabled / placeholder text.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest neutral, near-ink surfaces.
- **Gray 700** (`{colors.gray-700}`): Dark dividers, primary button hover.
- **Gray 500** (`{colors.gray-500}`): Tertiary text, muted UI.
- **Gray 400–100** (`{colors.gray-400}` → `{colors.gray-100}`): Borders, hairlines, dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle dividers, nav border.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Subtle off-white section tint.
- **Card Grey** (`{colors.card-grey}`): Grey card surface (#f2f2f2).
- **Card Grey Hover** (`{colors.card-grey-hover}`): Grey card hover lift (#e8e8e8).
- **Border Ribbon** (`{colors.border-ribbon}`): Ribbon / divider border.

## Typography

### Font Family
- **Primary**: `Fff Acidgrotesk Light` and `Fff Acidgrotesk Book`, with fallback `Space Grotesk, sans-serif`
- **Closest Google substitute**: Space Grotesk (geometric grotesque with comparable proportions)

### 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` | 64px Light hero — airy, open |
| `display-large` | 48px Light section displays |
| `section-heading` | 40px Light section titles |
| `sub-heading` | 32px Book sub-sections |
| `card-title` | 24px Book project / card titles |
| `title-medium` | 23px Book mid titles |
| `body-large` | 18px Light intro / lead copy |
| `body` | 15px Light standard reading text |
| `body-small` | 14px Book UI text, buttons |
| `label-caps` | 12px Book uppercase tracked eyebrow |
| `caption` | 12px Book metadata, captions |

### Principles
- **Light is the voice**: Display and reading text use Acid Grotesk Light (300) — headings read thin and editorial, never bold.
- **Book for UI**: Weight 400 (Book) handles buttons, labels, and small text where Light would feel too fragile.
- **Tracked uppercase eyebrows**: Small uppercase labels use 1.04px letter-spacing to read as small-caps section markers.
- **Two weights only**: 300 and 400 carry the whole system; 700 exists but is used sparingly, not for body or display.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Global horizontal padding is responsive: 68px (large desktop) → 48px (desktop) → 24px (tablet) → 15px (mobile).

### Grid & Container
- Max content width: 1400px (`--max-width-desktop`)
- Project portfolio: multi-column card grid that collapses to single column
- Generous vertical rhythm between sections

### Whitespace Philosophy
- **Gallery calm**: Whitespace carries the layout; sections separate by space and hairline borders, not color blocks.
- **Airy headings**: Light-weight display type paired with open leading keeps even large headlines quiet.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.gray-100}` | Card borders, dividers |
| Grey Surface (Level 2) | `{colors.card-grey}` fill, no border | Soft cards, tiles |
| Grey Hover (Level 2b) | `{colors.card-grey-hover}` fill | Hovered grey cards |

**Depth Philosophy**: Depth comes from grey surface tints and hairline borders, not shadows. The system is whisper-quiet — cards are distinguished by a #f2f2f2 fill or a single light border, and they shift one tonal step on hover rather than rising on a shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `micro` | 3px | Tiny inline elements |
| `md` | 8px | Inputs, tight elements |
| `lg` | 10px | Default card radius (`--border-radius`) |
| `xl` | 150px | Large rounded feature shapes |
| `pill` | 999px | Buttons, badges, avatars |

## Components

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

### Buttons
- **`button-primary`** — Dark ink fill, white text, full pill. Hover deepens to `{colors.gray-700}`.
- **`button-secondary`** — White surface, hairline `{colors.gray-100}` border, ink text. Hover fills to `{colors.card-grey}`.

### Badges
- **`badge`** — Grey surface, uppercase tracked label, full pill.

### Cards
- **`card`** — White surface with a single `{colors.gray-100}` hairline border, 10px radius.
- **`card-grey`** — Grey #f2f2f2 surface, borderless, 10px radius; hovers to #e8e8e8.

### Inputs
- **`input`** — White surface, `{colors.gray-200}` border, 8px radius. Focus border switches to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White header, Book 14px links, hairline bottom border.

### Links
- **`link`** — `{colors.link-blue}` text; the only place the blue accent appears.

## Do's and Don'ts

### Do
- Use Acid Grotesk Light (300) for display and reading text — keep headings thin
- Reserve the blue accent (`{colors.primary}`) for links and interaction only
- Use `{colors.ink}` (#0c0c0c) instead of pure black for softer contrast
- Build depth from grey surfaces and hairline borders, not shadows
- Track out uppercase labels (1.04px) for eyebrow text
- Default to 10px radius; full pills for buttons and badges

### Don't
- Don't make display headings bold — Light/Book is the whole range
- Don't introduce decorative color — the palette is grey + ink + one blue
- Don't add heavy drop shadows — depth is tonal, not floated
- Don't set primary to the page background — blue is for interaction only
- Don't use pure black (#000) for primary text — `{colors.ink}` is intentional

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <480px | Single column, 15px padding |
| Tablet | 480–768px | 24px padding, stacked grids |
| Tablet Large | 768–991px | 2-column grids begin |
| Desktop | 991–1280px | 48px padding, full grids |
| Large Desktop | >1280px | 68px padding, 1400px max width |

### Touch Targets
- Buttons use comfortable pill padding (12px vertical)
- Nav links at 14px with adequate spacing

### Collapsing Strategy
- Hero: display scales 64px → smaller, keeps Light weight
- Project grid: multi-column → single column
- Navigation: horizontal links → mobile menu
- Section padding: 68px → 15px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary text: Ink `{colors.ink}` (#0c0c0c)
- Background: Pure White `{colors.background}`
- Link / accent: Blue `{colors.primary}` (#0082f3)
- Border: `{colors.gray-100}` hairline
- Grey card: `{colors.card-grey}` (#f2f2f2)

### Example Component Prompts
- "Create a hero on white. Headline 64px Acid Grotesk Light (300), color `{colors.ink}`, line-height 1.05. Subtitle 18px Light, color `{colors.ink-muted}`. Dark pill CTA (`{colors.ink}`, 999px radius, 12px 24px padding) plus secondary white pill with `{colors.gray-100}` border."
- "Design a project card: grey `{colors.card-grey}` surface, no border, 10px radius, 24px padding. Title 24px Acid Grotesk Book, body 15px Light in `{colors.ink-muted}`. Hover fills to `{colors.card-grey-hover}`."
- "Build an eyebrow label: uppercase, 12px Book, 1.04px letter-spacing, `{colors.ink-secondary}`."

### Iteration Guide
1. Headings render thin — use Light (300), never bold
2. Blue is for links/interaction only; everything else is grey + ink
3. Depth is tonal: grey surface or hairline border, no shadow
4. Default radius 10px; pills (999px) for buttons and badges
5. Keep ink at #0c0c0c, not pure black, for soft contrast

---

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