# Danny Garcia · Design system migration spec

> Source: https://danny-garcia.com  ·  Curated by OpenDesign  ·  en

> This portfolio demonstrates how a developer can showcase technical skill through creative 3D implementation while maintaining elegant, readable design.

## 1. Identity DNA

This site is a creative engineer's digital business card, built as a dark void where 3D abstract art and bold typography converse. It represents the intersection of engineering skill and visual creativity, a portfolio that is both a demonstration of technical prowess and a piece of minimal, interactive design.

**One-liner:** A dark, sophisticated developer portfolio featuring bold typography and 3D floating spheres
**Keywords:** developer portfolio · 3D interactive · dark theme · minimalist · creative engineering
**Analogy:** A creative engineer's digital business card with 3D abstract art

## 2. Color

The palette is a study in contrast and focus, using a deep, near-black background to make warm cream typography and vibrant 3D accents command attention. The system relies on the depth of the void and the luminosity of its elements, avoiding a spectrum of UI accent colors in favor of gradients contained within the spheres themselves.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0f0f10` | main background |
| `--ink` | `#d1c5ad` | body text |
| `--ink-soft` | `#c8c8c8` | secondary text |
| `--muted` | `#a0a0a0` | placeholder |
| `--line` | `rgba(200,200,200,0.85)` | divider |

**Color principle:** Dark void with warm cream typography and vibrant 3D sphere accents

The principle is one of atmospheric depth, where the dark canvas provides the stage for light and form to interact.

## 3. Typography

Typography here is structural and expressive, using the geometric sans-serif Avenir Next to carry both dramatic headlines and readable prose. Display sizes are set with tight leading for impact, while body text opens up to a comfortable 1.5 line-height, creating a clear hierarchy from bold statement to detailed description.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 104px | 0.9 | 700 | -1px | Name/hero headline |
| heading | 48px | 1.4 | 600 | 0px | Section headings |
| subheading | 32px | 1.5 | 600 | 0px | Company names and subheadings |
| body | 24px | 1.5 | 400 | 0px | Body text and descriptions |
| small | 16px | 1.5 | 400 | 0px | Dates and metadata |

**Type rules:**
- Display sizes use tight leading (0.9) for dramatic impact
- Body text maintains comfortable 1.5 line-height
- Semi-bold (600) used for emphasis and subheadings

## 4. Spacing

Spacing follows a strict 4px base grid, but the rhythm between major sections is deliberately generous, creating pauses of 48 to 96 pixels that frame the content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous 48-96px vertical spacing between major sections

## 5. Surfaces

Depth is achieved not through traditional shadows but through subtle, colored glows and the layering of elements against the dark surface. Borders are nearly invisible, rendered in a semi-transparent gray that serves more as a subtle texture than a dividing line, letting dark-on-dark layering define the visual hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 96px
- **Shadows:**
  - 0 0 120px rgba(80,120,200,0.15) — subtle colored glow behind 3D spheres
- **Borders:** rgba(200,200,200,0.85) used as text color and border color

## 6. Layout

The layout skeleton is asymmetric, allowing large 3D visual elements to float over and beside the textual content. This creates a dynamic composition where copy and decorative spheres overlap, breaking from a rigid grid while maintaining clear left-aligned columns of information.

- **Container max:** 1200px
- **Paragraph max:** 680px
- **Grid:** 2 columns, gutter 48px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric layout with large 3D visuals overlapping text sections

## 7. Motion & Interaction

Motion is used to reinforce depth and interactivity, with 3D spheres responding to scroll with parallax and rotation. All state changes—from scrolling between sections to hovering over links—are governed by smooth transitions, creating a fluid, continuous experience.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - 3D spheres float with subtle parallax/rotation
  - Smooth scroll transitions between sections
  - Hover states on interactive elements

- **Hover:** Cursor changes to pointer on clickable elements
- **Click:** Smooth navigation to section anchors
- **Transition:** All elements have transitions defined for smooth state changes
- **Keyboard:** Standard tab navigation through interactive elements

## 8. Voice & Don'ts

The editorial voice is confident yet approachable, using bold, large-scale statements with tight letter-spacing to establish a professional personality. Calls to action are deliberately understated, favoring underlined text links over traditional button components.

- **Tone:** Confident yet approachable, professional with personality
- **Headline style:** Bold, large-scale statements with tight letter-spacing
- **CTA style:** Underlined text links rather than button components
- **Avoid:** Corporate jargon / Excessive self-promotion / Cluttered layouts

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows dark (#0f0f10) background throughout
- ❌ Don't add multiple accent colors — screenshot relies on 3D sphere gradients, not UI accent colors
- ❌ Don't use tight line-height for body text — screenshot shows generous 1.5 leading
- ❌ Don't add visible card borders — screenshot uses dark-on-dark layering without borders
- ❌ Don't center all text — screenshot shows left-aligned typography consistently
- ❌ Don't use small type for headlines — screenshot features 104px display size for name

The system deliberately forgoes corporate jargon, excessive self-promotion, and the visual noise of cluttered layouts or visible card borders.

## System Prompt (paste into AI tool)

```
This is a senior developer portfolio site with a dark, sophisticated aesthetic. Key colors are very dark background (#0f0f10), warm cream text (#d1c5ad), and muted gray (#c8c8c8) for body text. Typography uses Avenir Next, a geometric sans-serif, with bold display sizes up to 104px. The design features interactive 3D floating spheres with purple, blue, and teal gradients as decorative elements against the dark void. Critical donts: never use light backgrounds, never add visible card borders, never center all text, always maintain generous spacing (48-96px), never use small display sizes. The layout is asymmetric with content flowing around 3D visual elements. This site represents the intersection of engineering skill and visual creativity, making it valuable as a premium portfolio reference.
```