---
version: alpha
name: Code by Jesse
description: Dark-canvas creative-developer portfolio — near-black background with oversized stacked display type, an electric lime accent for motion and emphasis, generous negative space, and minimal chrome that lets full-bleed project imagery and kinetic typography carry the page.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#121212"
  surface-soft: "#1a1a1a"
  ink: "#f5f5f5"
  ink-secondary: "#a3a3a3"
  ink-muted: "#6b6b6b"

  # Accent — electric lime
  primary: "#c8ff00"
  accent-hover: "#b4e600"

  # Lines + borders
  border: "#262626"
  border-strong: "#404040"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Functional
  link: "#c8ff00"
  focus: "#c8ff00"
  overlay: "#000000"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -2px
  display-stacked:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  card-title:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  caption:
    fontFamily: "Space Grotesk, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Code by Jesse Design System

## Overview

Code by Jesse is the portfolio of a Dutch creative developer, and its design system reads like a stage set in the dark: a near-black canvas (`{colors.background}`) where oversized display typography and full-bleed project imagery do the talking. The interface chrome is deliberately quiet so the work and the motion carry the page. This is an Awwwards-school aesthetic — bold, kinetic, confident — built on the premise that a developer who can move pixels should prove it on their own site.

Typography is the loudest voice. Headlines use a heavy condensed display face (Anton as the closest Google match) at enormous sizes, set in tight stacks of single words with line-height pulled below 1.0 so the lines lock together into a typographic block. Against this, body and UI text run in a clean geometric sans (Space Grotesk) with a monospace (Space Mono) reserved for small technical labels, section markers, and metadata — the "developer console" voice that signals the craft underneath.

Color is restrained to a monochrome dark scale punctuated by a single electric lime accent (`{colors.primary}`). That lime is the entire brand personality: it marks the primary CTA, active links, focus rings, and the occasional highlighted word. Everything else is grayscale, from the `{colors.background}` canvas through layered surfaces (`{colors.surface}`, `{colors.surface-soft}`) to near-white `{colors.ink}` text. The discipline is the point — one accent, used sparingly, hits harder than a palette.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with near-white ink — high-contrast dark mode as the default
- Oversized condensed display type set in tight word-stacks with sub-1.0 line-height
- A single electric lime accent (`{colors.primary}`) for CTAs, links, focus, and emphasis — never decorative noise
- Geometric sans (Space Grotesk) for reading, monospace (Space Mono) for technical labels
- Full-bleed project imagery on minimal surface cards with hairline borders
- Generous negative space and pill-shaped buttons
- Quiet chrome: thin `{colors.border}` lines instead of heavy dividers

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black page canvas behind everything.
- **Surface** (`{colors.surface}`): Cards, nav, raised panels — one step up from the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Project card wells and image containers.
- **Ink** (`{colors.ink}`): Primary near-white text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Accent
- **Electric Lime** (`{colors.primary}`): The signature accent — primary CTA fill, active links, highlighted words.
- **Lime Hover** (`{colors.accent-hover}`): Darker lime for CTA hover states.

### Lines
- **Border** (`{colors.border}`): Hairline dividers and card outlines.
- **Border Strong** (`{colors.border-strong}`): Ghost-button outlines, input borders.

### Functional
- **Link** (`{colors.link}`): Inline links — lime, matching the accent.
- **Focus** (`{colors.focus}`): Keyboard focus ring — lime for high visibility on dark.
- **On Primary** (`{colors.on-primary}`): Near-black text on the lime accent fill.

## Typography

### Font Family
- **Display**: `Anton` (heavy condensed), fallback `Arial Narrow, sans-serif`
- **Sans (UI + body)**: `Space Grotesk`, fallback `Helvetica Neue, sans-serif`
- **Monospace**: `Space Mono`, fallback `ui-monospace, 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 hero word-stacks — billboard impact |
| `display-stacked` | Stacked headline lines |
| `section-heading` | Section titles |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and links |
| `label-mono` | Uppercase technical labels, section markers |
| `caption` | Metadata, small print |

### Principles
- **Condensed display, tight leading**: Anton at sub-1.0 line-height locks stacked words into a single typographic mass — the hero is built, not floated.
- **Two voices**: Space Grotesk for human reading, Space Mono for the technical/console register (labels, indices, timestamps).
- **Accent as punctuation**: A single word or link in lime against the grayscale text is the emphasis system — used sparingly.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) for section breaks — negative space is part of the identity.

### Grid & Container
- Wide content container with generous side gutters
- Hero: oversized stacked type, often left-aligned or asymmetric
- Project showcase: full-bleed imagery in minimal surface cards
- Footer: multi-column (pages, socials, contact)

### Whitespace Philosophy
- **Dark emptiness**: Massive vertical space between sections lets each block breathe.
- **Type as object**: Headlines are spatial elements, not just labels — their scale defines the rhythm.
- **Quiet separation**: Sections divide by spacing and hairline `{colors.border}` lines, never heavy rules.

## 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. The single loud CTA.
- **`button-ghost`** — Transparent on canvas with a `{colors.border-strong}` outline, near-white text.

### Cards
- **`card`** — `{colors.surface}` panel with a hairline `{colors.border}`, 16px radius.
- **`card-project`** — Edge-to-edge imagery (0 padding) in a `{colors.surface-soft}` well; title and mono label sit below.

### Pills & Badges
- **`badge`** — Surface chip with lime mono text, full pill — used for category/role tags.

### Inputs
- **`input`** — `{colors.surface}` field with `{colors.border-strong}` outline; focus swaps the border to lime `{colors.focus}`.

### Navigation
- **`nav-bar`** — Transparent-to-canvas header, near-white links in Space Grotesk, lime CTA right, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas near-black and the ink near-white — high contrast is the system
- Use Anton (condensed display) at large sizes with sub-1.0 line-height for stacked headlines
- Reserve lime (`{colors.primary}`) for CTAs, links, focus, and the occasional emphasized word
- Let project imagery go full-bleed inside minimal surface cards
- Separate with spacing and hairline `{colors.border}` lines, not heavy dividers
- Use Space Mono for small technical labels and section markers

### Don't
- Don't introduce a second accent color — lime alone carries the brand
- Don't put lime on large surfaces or body text — it's a punctuation accent
- Don't use heavy borders or drop shadows — chrome stays quiet
- Don't set display type with loose line-height — the stack must lock together
- Don't lighten the canvas toward gray — the near-black is the stage

---

## 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 Code by Jesse. Brand names and trademarks belong to their respective owners.