---
version: alpha
name: Vilmar Fernandes
description: Gallery-grade portfolio minimalism — near-black canvas-and-ink restraint, oversized neo-grotesque display type, a loading-percentage intro, and quiet keyboard-driven project navigation where the work is the only color on the page.
colors:
  # Canvas + ink
  background: "#0c0c0c"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f3"
  ink-secondary: "#a6a6a2"
  ink-muted: "#6b6b68"

  # Accent — single warm signal used sparingly
  primary: "#e7e3da"
  accent: "#c9a98a"
  on-primary: "#0c0c0c"

  # Lines + chrome
  border: "#2a2a2a"
  border-soft: "#1f1f1f"

  # Neutral scale
  gray-100: "#e8e8e6"
  gray-300: "#bdbdba"
  gray-500: "#6b6b68"
  gray-700: "#3a3a3a"
  gray-900: "#141414"

  # On-color
  on-ink: "#0c0c0c"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1px
  project-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.5px

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

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

components:
  # Primary inverted CTA
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Ghost / outline button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"

  # Project card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.project-title}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border-soft}"

  # Project meta label
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Loading percentage counter
  loader-counter:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.display}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
---

# Vilmar Fernandes Design System

## Overview

Vilmar Fernandes' portfolio is built on the conviction that a designer's work should be the loudest thing on the page and everything else should whisper. The canvas is a near-black charcoal (`{colors.background}`) rather than pure black — warm enough to feel like a gallery wall, dark enough to make project thumbnails glow. Text is an off-white (`{colors.ink}`) with a faint warmth, never clinical `#ffffff`, so the contrast reads soft instead of harsh. The result is the kind of restrained, confident minimalism that lets photography and interface mockups carry the visual weight.

The personality lives in the type. Oversized condensed display headlines (`{typography.display-hero}`) set in a tall neo-grotesque give the home and section views a poster-like presence, while body and interface text drop to a clean humanist sans (`{typography.body}`) for legibility. A monospace label voice (`{typography.label-mono}`) handles project categories and metadata — "Mobile Application", "Smart TV Application", "Meta Quest Application" — connecting the marketing surface to the engineering reality of the work shown.

Two signature interaction moves define the experience. First, an entrance loading screen counts from 00% to 100% in large display numerals before the site reveals itself — a deliberate beat that frames the portfolio as a curated reveal rather than a scroll. Second, the project gallery is keyboard-navigable: arrow keys move between projects, reinforcing the sense of a controlled, exhibition-style sequence. Color is almost entirely absent from the chrome; the only hue on the page comes from the work itself and an occasional warm sand accent (`{colors.accent}`).

**Key Characteristics:**
- Warm near-black canvas (`{colors.background}`) with off-white warm ink (`{colors.ink}`) — gallery, not clinical
- Oversized condensed display type for poster-grade headlines
- Humanist sans for body/UI, monospace for category labels and metadata
- Loading-percentage entrance animation (00% → 100%)
- Keyboard-driven project navigation (arrow keys)
- Single restrained warm-sand accent (`{colors.accent}`); work supplies the color
- Pill-shaped CTAs and meta tags; otherwise near-zero radius and hairline borders

## Colors

### Primary
- **Charcoal Canvas** (`{colors.background}`): The page background. Warm near-black, not pure `#000`.
- **Warm Ink** (`{colors.ink}`): Headings and body text. Off-white with faint warmth.
- **Surface** (`{colors.surface}`): Cards and raised panels, one step lighter than canvas.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions, inactive nav.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, fine print, disabled states.

### Accent
- **Sand Accent** (`{colors.accent}`): The single warm signal — hover marks, active underlines, small highlights. Used sparingly.
- **Light Primary** (`{colors.primary}`): Near-white warm tone for emphasis blocks and inverted chips.

### Lines & Chrome
- **Border** (`{colors.border}`): Visible dividers, input outlines.
- **Border Soft** (`{colors.border-soft}`): Hairline section separators that barely register.

### Neutral Scale
- **Gray 100** (`{colors.gray-100}`): Bright text on dark, near-ink.
- **Gray 300** (`{colors.gray-300}`): Secondary bright text.
- **Gray 500** (`{colors.gray-500}`): Muted labels.
- **Gray 700** (`{colors.gray-700}`): Subtle strokes on dark.
- **Gray 900** (`{colors.gray-900}`): Raised surface fill.

## Typography

### Font Family
- **Display**: `Anton` (condensed neo-grotesque), with fallbacks: `Arial Narrow, sans-serif`
- **Primary**: `Inter`, with fallbacks: `Arial, sans-serif`
- **Monospace**: `Space Mono`, with fallbacks: `ui-monospace, Menlo, monospace`

### 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` | 96px condensed hero — poster-grade name/headline |
| `display` | 64px secondary display, loader numerals |
| `section-heading` | Section titles in humanist sans |
| `project-title` | Project card titles |
| `body-large` | Lead paragraphs, about intro |
| `body` | Standard reading text |
| `body-medium` | Emphasized inline text |
| `nav-link` | Navigation and buttons |
| `label-mono` | Project categories, metadata |
| `caption` | Fine print, image captions |

### Principles
- **Condensed display, humanist body**: The tall condensed face is reserved for billboard moments; everything readable drops to Inter.
- **Mono as the metadata voice**: Categories and technical labels always set in `{typography.label-mono}` with positive tracking and slight uppercase feel.
- **Tight display tracking**: Negative letter-spacing at display sizes (-1.5px to -2px), neutral at body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px with a large jump from `{spacing.3xl}` (64px) to `{spacing.4xl}` (120px) for gallery-grade vertical breathing room.

### Grid & Container
- Generous full-bleed project grid; thumbnails dominate
- Max content width ~1280px for text sections, edge-to-edge for imagery
- Sticky minimal nav: Work · About · email contact

### Whitespace Philosophy
- **Exhibition spacing**: Large vertical gaps frame each project like a hung piece
- **Dark negative space**: The charcoal canvas itself is the primary spatial element
- **One accent maximum**: Restraint in color means spacing and type carry the rhythm

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Canvas, text blocks |
| Surface (Level 1) | `{colors.surface}` fill + `{colors.border-soft}` hairline | Cards, panels |
| Hover (Level 2) | Slight brightness lift + `{colors.accent}` mark | Active project tile |

**Shadow Philosophy**: On a dark canvas, depth comes from surface brightness steps and hairline borders rather than drop shadows. Cards lift by getting lighter, not by casting shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Image edges, full-bleed media |
| `xs` | 2px | Inline marks |
| `sm` | 4px | Inputs, small containers |
| `md` | 8px | Project cards |
| `lg` | 12px | Featured panels |
| `pill` | 9999px | CTAs, category tags |

## Components

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

### Buttons
- **`button-primary`** — Inverted: warm-ink fill, dark text, pill radius. The contact/CTA.
- **`button-secondary`** — Ghost on canvas with a hairline `{colors.border}` outline.

### Cards
- **`card`** — Surface-fill project tile, near-zero chrome so the thumbnail leads. Title in `{typography.project-title}`, category as a mono label below.

### Badges
- **`badge`** — Monospace category chip ("Mobile Application", "Meta Quest Application") in muted ink on a soft surface.

### Navigation
- **`nav-bar`** — Minimal sticky header, three items (Work · About · email), hairline bottom border.

### Distinctive Components
- **Loader Counter** (`{components.loader-counter}`): Full-screen entrance counting 00% → 100% in display numerals before the reveal.
- **Keyboard Navigation**: Arrow-key project stepping for an exhibition-sequence feel.

## Do's and Don'ts

### Do
- Use the warm charcoal canvas (`{colors.background}`), never pure `#000000`
- Use warm off-white ink (`{colors.ink}`), never clinical `#ffffff`
- Let project imagery supply the color; keep chrome achromatic
- Reserve condensed display type for poster moments only
- Set all category/metadata labels in the monospace voice
- Lift cards by brightening the surface, not by adding drop shadows

### Don't
- Don't introduce a second accent — one warm sand signal maximum
- Don't use condensed display type for body or UI text
- Don't put heavy borders on cards — hairlines or surface steps only
- Don't use pure-black backgrounds or pure-white text
- Don't crowd the gallery — exhibition spacing is the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column gallery, display type scales down sharply |
| Tablet | 600–1024px | 2-column project grid |
| Desktop | 1024–1400px | Full multi-column gallery, max display sizes |
| Large | >1400px | Centered, generous side margins |

### Touch Targets
- Nav links and buttons keep comfortable padding (12px+ vertical)
- Project tiles are large tap targets; arrow-key nav is desktop-only enhancement

### Collapsing Strategy
- Display hero: 96px → ~48px on mobile, tracking scales proportionally
- Project grid: multi-column → single column
- Loader counter: scales but always full-screen
- Nav: inline three-item → compact stacked

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Charcoal `{colors.background}`
- Heading/body text: Warm Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Accent: Sand `{colors.accent}`
- Border: `{colors.border}`
- CTA: inverted warm-ink fill, dark text

### Example Component Prompts
- "Create a hero on charcoal `{colors.background}`. Name set in Anton 96px, line-height 0.95, letter-spacing -2px, color `{colors.ink}`. Subtitle in Inter 20px weight 400, `{colors.ink-secondary}`."
- "Design a project card: `{colors.surface}` fill, 8px radius, full-bleed image top, title in Inter 24px weight 500, category as a Space Mono 12px label in `{colors.ink-secondary}` on a `{colors.surface-soft}` pill."
- "Build a contact CTA: warm-ink `{colors.ink}` fill, dark `{colors.on-ink}` text, pill radius, 12px 24px padding, Inter 14px weight 500."
- "Create a loading screen: charcoal background, counter from 00% to 100% in Anton 64px `{colors.ink}`, centered."

### Iteration Guide
1. Canvas is warm charcoal, ink is warm off-white — never pure black/white
2. Condensed display type for posters; Inter for everything readable
3. Monospace for every category/metadata label
4. One warm accent only; the work is the color
5. Depth via surface brightness, not shadows

---

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