---
version: alpha
name: Gabriel Veres
description: Near-black gallery canvas with one electric lime accent (#ddfa42) — FK Display grotesque headlines at billboard scale (up to 108px) over Mabry humanist body, pill and soft-corner shapes, and a restrained two-weight system. Portfolio minimalism where a single charged color does all the talking.

colors:
  # Canvas + ink
  background: "#0d0d0d"
  surface: "#0d0d0d"
  surface-light: "#d9d9d9"
  ink: "#ffffff"
  ink-pure: "#000000"
  ink-secondary: "#9ca3af"
  ink-muted: "#6b7280"

  # Signature accent
  accent: "#ddfa42"       # electric lime — the one charged color
  link: "#2563eb"         # functional link blue

  # On-color
  on-accent: "#0d0d0d"    # near-black text on lime
  on-ink: "#0d0d0d"       # near-black on white surfaces
  on-light: "#0d0d0d"     # text on light grey surface

  # Neutral
  border: "#6b7280"
  border-soft: "#9ca3af"

typography:
  display-hero:
    fontFamily: "var(--font-fk-display), sans-serif"
    fontSize: 108px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -2px
  display-large:
    fontFamily: "var(--font-fk-display), sans-serif"
    fontSize: 91px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px
  display:
    fontFamily: "var(--font-fk-display), sans-serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  heading-1:
    fontFamily: "var(--font-fk-display), sans-serif"
    fontSize: 51px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading-2:
    fontFamily: "var(--font-fk-display), sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.4px
  heading-3:
    fontFamily: "var(--font-mabry), sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "var(--font-mabry), sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "var(--font-mabry), sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "var(--font-mabry), sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  label:
    fontFamily: "var(--font-mabry), sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  mono-caption:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  md: 12px
  lg: 16px
  full: 9999px

components:
  # Primary CTA — lime fill, near-black text
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 14px 28px

  # Secondary — outline on dark
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.full}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Pill tag / chip
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.full}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  # Project card — soft corners on dark
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  # Light feature card — inverted
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    rounded: "{rounded.md}"
    padding: 24px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.accent}"

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px
---

# Gabriel Veres Design System

## Overview

Gabriel Veres's portfolio is a dark room with one light on. The entire site sits on a near-black canvas (`{colors.background}`) — not pure black, a softer `#0d0d0d` that reads as deliberate rather than default — with crisp white (`{colors.ink}`) text. Against that void, a single electric lime accent (`{colors.accent}`) does all the emotional work: it marks the primary call to action, highlights the name, and punctuates the page like a held note. This is the discipline of the one-color portfolio — restraint everywhere so that one charged hue can carry the brand.

Typography is the other half of the identity. Headlines run in FK Display, a sharp grotesque cut with tight apertures, set at genuinely billboard scale — the hero pushes past 100px with negative tracking so the words feel sculpted into the canvas rather than typed onto it. Body and UI text switch to Mabry, a warm humanist sans that softens the technical edge and keeps long reading comfortable. The pairing is intentional contrast: a cold, architectural display face over a friendly workhorse body.

The shape language is gentle. Buttons and tags are full pills (`{rounded.full}`); cards and inputs use a soft 12px corner (`{rounded.md}`). Nothing is sharp-cornered except where the layout demands an edge. Weights stay minimal — 400 for everything that reads, 500 for the few labels and links that need to assert — so the page never feels loud. Loud is the accent's job, and the accent is used sparingly.

**Key Characteristics:**
- Near-black `#0d0d0d` canvas with white text — gallery darkness, not pure black
- One electric lime accent (`{colors.accent}`) carrying every emphasis moment
- FK Display grotesque headlines at billboard scale (up to 108px) with negative tracking
- Mabry humanist sans for body and UI — warm counterweight to the cold display face
- Strict two-weight system: 400 (read) and 500 (assert)
- Pill shapes for actions and tags, soft 12px corners for cards and inputs
- Near-black text on the lime accent for maximum punch and legibility

## Colors

### Canvas & Ink
- **Near Black** (`{colors.background}`): The universal canvas and surface — `#0d0d0d`, a chosen dark rather than `#000`.
- **White** (`{colors.ink}`): Primary text, headings, logo.
- **Light Grey** (`{colors.surface-light}`): Inverted feature panels and image placeholders.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted captions, metadata.
- **Ink Muted** (`{colors.ink-muted}`): Lowest-priority text, fine print.

### Accent
- **Electric Lime** (`{colors.accent}`): The signature. Primary CTA fill, name highlight, accent punctuation. Used sparingly — its power is its scarcity.
- **Link Blue** (`{colors.link}`): Functional inline links.

### On-Color
- **On Accent** (`{colors.on-accent}`): Near-black text on the lime fill — high punch, fully legible.
- **On Ink / On Light** (`{colors.on-ink}`): Near-black text on white or light-grey surfaces.

### Neutral
- **Border** (`{colors.border}`): Outline buttons, card edges, input borders on the dark canvas.
- **Border Soft** (`{colors.border-soft}`): Lighter dividers.

## Typography

### Font Family
- **Display**: FK Display (a sharp grotesque) — `var(--font-fk-display), sans-serif`. Headlines only.
- **Text**: Mabry (humanist sans) — `var(--font-mabry), sans-serif`. Body, UI, labels.
- **Mono**: `ui-monospace, SFMono-Regular, Menlo, monospace` for technical captions.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 108px hero name — billboard impact |
| `display-large` | Large section openers |
| `display` | Section headlines |
| `heading-1` | Major headings |
| `heading-2` | Sub-section headings |
| `heading-3` | Mabry sub-heads, card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Captions, secondary copy |
| `label` | Buttons, nav, UI labels |
| `mono-caption` | Technical tags, metadata |

### Principles
- **Two faces, two jobs**: FK Display is cold and architectural for headlines; Mabry is warm and humanist for everything readable. Never blur the line.
- **Scale as voice**: The display face only earns its character at large sizes — push headlines big, let negative tracking compress them.
- **Two weights only**: 400 reads, 500 asserts. No bold-as-decoration.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous vertical rhythm — sections separated by `{spacing.3xl}`–`{spacing.4xl}` of dark space. White space (dark space, here) is the design.

### Grid & Container
- Single-column hero with a massive name set in the display face
- Project work in stacked full-width blocks or simple 2-column grids
- Generous margins; content rarely fills edge to edge

### Whitespace Philosophy
- **Gallery darkness**: Vast stretches of `{colors.background}` between elements — the void frames the work.
- **One light**: The lime accent appears rarely, so each appearance reads as intentional.
- **Big over busy**: A single oversized headline does more than a dense grid.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image edges, full-bleed blocks |
| `xs` | 4px | Small inline elements |
| `md` | 12px | Cards, inputs, panels |
| `lg` | 16px | Larger feature containers |
| `full` | 9999px | Buttons, tags, chips |

## Components

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

### Buttons
- **`button-primary`** — Lime fill, near-black text, full pill. On hover, inverts to white fill.
- **`button-secondary`** — Transparent on dark with a `{colors.border}` outline, full pill.

### Tags & Badges
- **`badge`** — Pill chip, mono caption text, subtle border. Used for project tags and tech labels.

### Cards
- **`card`** — Dark surface with a soft 12px corner and a thin border.
- **`card-light`** — Inverted light-grey panel for feature highlights and image placeholders.

### Inputs
- **`input`** — Dark surface, bordered, 12px corner. Focus swaps the border to the lime accent.

### Navigation
- **`nav-bar`** — Minimal dark header. Mabry 13px weight 500 links, white text, lime accent on the active/CTA item.

## Do's and Don'ts

### Do
- Keep the canvas near-black `{colors.background}`, never a flat pure black
- Reserve the lime accent for one or two moments per view — scarcity is the point
- Set headlines genuinely large in FK Display with negative tracking
- Use Mabry for everything readable; keep weights to 400 and 500
- Put near-black text on the lime fill for punch and legibility
- Use full pills for actions and tags, soft 12px corners for cards

### Don't
- Don't scatter the lime accent across many elements — it loses its charge
- Don't set body text in the display face
- Don't use bold weights as decoration — 500 is the ceiling for UI
- Don't put white text on the lime accent (low contrast) — use near-black
- Don't crowd the layout; the dark space is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down sharply, tighter padding |
| Tablet | 600–1024px | 2-column work grids begin |
| Desktop | 1024–1400px | Full layout, billboard hero at full scale |
| Large | >1400px | Centered, generous dark margins |

### Collapsing Strategy
- Hero name: 108px → scales down proportionally, keeps negative tracking
- Navigation: inline links → minimal menu
- Work grid: 2-column → single column
- Section spacing: 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near Black `{colors.background}`
- Text: White `{colors.ink}`
- Accent / CTA: Electric Lime `{colors.accent}`
- Text on accent: Near Black `{colors.on-accent}`
- Border: `{colors.border}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Name at 108px FK Display weight 400, line-height 1.0, letter-spacing -2px, white. One word highlighted in lime `{colors.accent}`. Subtitle 20px Mabry weight 400 in `{colors.ink-secondary}`."
- "Primary button: lime `{colors.accent}` fill, near-black `{colors.on-accent}` text, full pill, 14px 28px padding, 13px Mabry weight 500. Hover inverts to white fill."
- "Project card: dark `{colors.background}` surface, 12px radius, `{colors.border}` border, 24px padding. Title 26px Mabry weight 500 white, tags as mono pill badges."

---

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