Nathan Smith

# Nathan Smith — Style Reference
> Raw pixels on a pure black canvas. Imagine a high-contrast terminal, where information is stark and unyielding, punctuated by sudden, vibrant bursts of color.

**Theme:** dark

This design system feels like a minimalist display terminal, prioritizing stark readability over ornamentation. Pure black backgrounds serve as an absolute void, upon which unashamedly bold, high-contrast typography in 'off-white' is projected. The deliberate absence of rounded corners across primary content elements, except for navigation pills, creates a tension between sharp utility and interactive cues. Sudden, vivid blocks of color act as dynamic project showcases, appearing almost as glitches or command line outputs against the monochrome UI.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Absolute Black | `#000000` | `--color-absolute-black` | Primary background for the entire interface, card shadows — the foundational darkness. |
| Ghost White | `#f5f4ee` | `--color-ghost-white` | Primary text color, links, and borders for subtle UI differentiation. It's an off-white, preventing the absolute harshness of pure white against black. |
| Off Black | `#333333` | `--color-off-black` | Used for some navigation elements and less prominent text, creating a slight visual hierarchy without losing clarity against Ghost White. |
| Emerald Screen | `#017051` | `--color-emerald-screen` | Project card background — a deep, rich green implying growth or nature, but stylized. |
| Neon Lemon | `#deeb52` | `--color-neon-lemon` | Project card background — a vibrant, almost artificial yellow-green providing a stark, energetic contrast. |
| Fuchsia Burst | `#fe7cd2` | `--color-fuchsia-burst` | Project card background — a vivid, playful pink that injects high energy into the monochrome canvas. |
| Blazing Orange | `#f95720` | `--color-blazing-orange` | Project card background — a fiery, direct orange, communicating immediacy and boldness. |

## Tokens — Typography

### Mabry pro — Display headlines and hero text. The singular large size and tight line height create a commanding vocal presence without excessive visual weight. This font’s character defines the raw, almost digital aesthetic. · `--font-mabry-pro`
- **Substitute:** Space Mono
- **Weights:** 400
- **Sizes:** 80px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Display headlines and hero text. The singular large size and tight line height create a commanding vocal presence without excessive visual weight. This font’s character defines the raw, almost digital aesthetic.

### Fk Display — Primary body text, navigation items, links, and all smaller UI elements. Its clean, geometric form ensures clarity across various sizes, acting as a functional workhorse that complements the display font's boldness. · `--font-fk-display`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 14px, 16px, 24px
- **Line height:** 1.20, 1.50
- **Letter spacing:** normal
- **Role:** Primary body text, navigation items, links, and all smaller UI elements. Its clean, geometric form ensures clarity across various sizes, acting as a functional workhorse that complements the display font's boldness.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.2 | — | `--text-caption` |
| body | 16px | 1.2 | — | `--text-body` |
| heading | 24px | 1.5 | — | `--text-heading` |
| display | 80px | 1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 32 | 32px | `--spacing-32` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |
| 224 | 224px | `--spacing-224` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 0px |
| buttons | 100px |
| general | 8px |
| navItems | 4px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.75) 0px 24px 30px 3px` | `--shadow-xl` |

### Layout

- **Section gap:** 128px
- **Card padding:** 0px
- **Element gap:** 8px

## Components

### Primary Navigation Pill
**Role:** Interactive element allowing user navigation.

Rounded pill button with a 100px border-radius. Inactive state: Absolute Black background, Ghost White text (Fk Display 16px). Active state (inferred): Ghost White background, Off Black text. Padding is 16px horizontal, 8px vertical.

### Footer Link
**Role:** Small, functional links in the footer.

Ghost White text (Fk Display 14px) on an Absolute Black background. Features a leading arrow (→) as a visual cue. No padding or borders.

### Award Notification Box
**Role:** Small, toast-like notification for achievements.

A small, rounded rectangle (4px radius) with an Absolute Black background and Ghost White text (Fk Display 14px). Features a subtle inline image of pencils to signify awards. Contains a right-aligned '4 more' link in Off Black.

### Hero Headline
**Role:** Dominant text on the initial screen, establishing brand identity.

Large, uppercase Mabry Pro text at 80px, weight 400, Ghost White color (#f5f4ee), with a tight line height of 1.0. Appears centered on the Absolute Black background.

## Do's and Don'ts

### Do
- Do use Absolute Black (#000000) as the primary background for all page sections and elevated components.
- Do use Ghost White (#f5f4ee) for all primary text content and interactive element states to ensure maximum contrast.
- Do apply 0px border-radius to all content-bearing elements like Project Cards to maintain a sharp, utilitarian aesthetic.
- Do use the Mabry pro font (weight 400, size 80px, line-height 1.0) for all main headlines to establish a bold, direct tone.
- Do punctuate the monochrome design with single, vivid accent colors (#017051, #deeb52, #fe7cd2, #f95720) only for project cards and other intentional focal points.
- Do use a consistent 100px border-radius for all navigation pills to distinguish interactive elements with softness against the prevailing angularity.

### Don't
- Don't introduce any soft-edged shapes or general rounded corners outside of explicit navigation elements.
- Don't use gradients; stick to solid color blocks for backgrounds and accents.
- Don't introduce subtle background patterns or textures; maintain pure, flat color fields.
- Don't use desaturated or muted colors for accents; only vivid, high-chromatic colors are permitted where color is used.
- Don't vary font weights for Fk Display; it should remain weight 400 across all its usage.
- Don't break the tight line-height (1.0) for Mabry pro headlines; its impact relies on close text packing.

## Elevation

- **Project Preview Card:** `rgba(0, 0, 0, 0.75) 0px 24px 30px 3px`

## Imagery

The visual language is dominantly UI-focused, with minimal use of external imagery. When present, imagery (like the small pencil icons in the award notification) is functional and iconographic, not lifestyle. Project showcases utilize bold, solid color blocks (Emerald Screen, Neon Lemon, Fuchsia Burst, Blazing Orange) instead of traditional images or product screenshots. These color blocks are presented full-bleed within their respective card areas, with raw, sharp edges, acting as abstract placeholders or categorical signifiers rather than detailed visual content. The site is text-dominant, relying on typography and stark color contrasts to convey information and atmosphere.

## Layout

The site uses a full-bleed layout on an Absolute Black background. The hero section features large, centered typographic elements (Mabry Pro) that demand attention. Content sections appear to stack vertically, with substantial vertical spacing (sectionGap: 128px) providing breathing room. Project showcases are presented as distinct, vivid color blocks, sometimes overlapping partially, breaking the rigid grid. The overall layout is centered-content with flexible margins that adjust to viewport size, rather than a fixed maximum width container for the main content. The navigation is a minimalist top-bar on the left, featuring pill-shaped buttons. The footer contains left-aligned and right-aligned text links, maintaining the high-contrast aesthetic.

## Agent Prompt Guide

### Quick Color Reference
- Text: #f5f4ee (Ghost White)
- Background: #000000 (Absolute Black)
- Accent Green: #017051 (Emerald Screen)
- Accent Yellow: #deeb52 (Neon Lemon)
- Nav Text (less prominent): #333333 (Off Black)

### 3-5 Example Component Prompts
1. Create a Primary Navigation Pill for 'Projects': Absolute Black background, Ghost White text (#f5f4ee), 100px border-radius, Fk Display font 16px, weight 400. Paddings should be 16px horizontal and 8px vertical.
2. Create a Project Preview Card using the Emerald Screen accent color: Background color #017051, 0px border-radius. Apply the shadow rgba(0, 0, 0, 0.75) 0px 24px 30px 3px. Ensure no internal padding.
3. Create the Hero Headline 'NATHAN SMITH': Mabry pro font 80px, weight 400, line-height 1.0, color #f5f4ee. Center it on an Absolute Black background.
4. Design a Footer Link for '→ mail@nathansmith.design': Fk Display font 14px, weight 400, color #f5f4ee, on an Absolute Black background. Include the arrow character as shown.

## Similar Brands

- **Brutalist Websites** — Employs an unornamented, functional aesthetic, raw typography, and high-contrast color choices on a stark black background.
- **Terminal.com** — Features a black background with bright, functional text and UI elements, reflecting a command-line interface feel.
- **Early Internet Art Sites** — Often utilized pure black backgrounds, simple shapes, and bold, uncompromising typography without gradients or complex layouts.
- **Some portfolio sites by graphic designers** — Exhibit a strong emphasis on typography as a primary visual element, often with a reduced color palette punctuated by strong accents.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-absolute-black: #000000;
  --color-ghost-white: #f5f4ee;
  --color-off-black: #333333;
  --color-emerald-screen: #017051;
  --color-neon-lemon: #deeb52;
  --color-fuchsia-burst: #fe7cd2;
  --color-blazing-orange: #f95720;

  /* Typography — Font Families */
  --font-mabry-pro: 'Mabry pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fk-display: 'Fk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-heading: 24px;
  --leading-heading: 1.5;
  --text-display: 80px;
  --leading-display: 1;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-32: 32px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Layout */
  --section-gap: 128px;
  --card-padding: 0px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-cards: 0px;
  --radius-buttons: 100px;
  --radius-general: 8px;
  --radius-navitems: 4px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.75) 0px 24px 30px 3px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-absolute-black: #000000;
  --color-ghost-white: #f5f4ee;
  --color-off-black: #333333;
  --color-emerald-screen: #017051;
  --color-neon-lemon: #deeb52;
  --color-fuchsia-burst: #fe7cd2;
  --color-blazing-orange: #f95720;

  /* Typography */
  --font-mabry-pro: 'Mabry pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fk-display: 'Fk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.2;
  --text-body: 16px;
  --leading-body: 1.2;
  --text-heading: 24px;
  --leading-heading: 1.5;
  --text-display: 80px;
  --leading-display: 1;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-32: 32px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-224: 224px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.75) 0px 24px 30px 3px;
}
```