Live Wire
#08ff00Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Josh Warner
joshwarner.designWebsite preview
The design language
Josh Warner's portfolio operates as a near-pure black gallery wall: the interface recedes so that 3D renders, product mockups, and photographic compositions can dominate every viewport. Typography is whisper-thin and uniformly weighted at 400 across the scale, using a single sans-serif family that refuses to shout — hierarchy is built through size and generous letter-spacing (0.04em) rather than weight contrast. The entire palette is achromatic except for a single electric green status dot (#08ff00), which functions as the site's only living signal against the void. Surfaces are flat or near-flat; depth is borrowed entirely from the artwork, not from drop shadows or gradients. Components are sparse, pill-shaped, and almost weightless — ghost buttons, hairline borders on #000, circular avatars, and pill nav items. The system is a frame, not a subject.
Color palette
accent
neutral
Void
#0f0f0fPage canvas and primary surface — the base layer beneath all artwork, slightly lifted from pure black to prevent OLED banding in the dark void
Absolute
#000000Hairline borders, image containers, icon strokes, footer dividers — pure black acts as the structural ink that defines edges in the absence of visible card surfaces
Charcoal
#1a1a1aElevated footer surface and deeper UI panels — a single step up from canvas for zone separation without breaking the dark void
Faint
#080808Shadow base for subtle elevation effects — nearly invisible against canvas, used in box-shadow compositions for soft ambient lift
Bone
#f0f0f0Primary text color, nav item fills, filled button background — warm off-white replaces pure white to soften contrast against the black void and reduce eye strain
Ash
#b8b8b8Secondary body text, subdued helper labels, muted metadata — sits one step below Bone for non-emphasized copy without losing legibility on dark surfaces
Graphite
#696969Tertiary text and border accents on headings — used sparingly for fine print and inactive labels that should recede
Typography
Type scale
Major Second (1.125) · 12px basedisplay
40px · 400 · 1.2 · 1.6px trackingThe quick brown fox jumps
heading
32px · 400 · 1.25 · 1.28px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4 · 0.8px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.64px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.43 · 0.56px trackingThe quick brown fox jumps
caption
12px · 400 · 1.2 · 0.48px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter Display
- Weights
- 400
- Sizes
- 14px, 16px, 20px, 32px, 40px
- Line height
- 1.00-1.56
- Letter spacing
- 0.04em
- Fallback
- Inter
Primary typeface across all UI, body, navigation, and headings — used exclusively at weight 400 with no weight variation, creating a flat, even visual texture where size and spacing alone carry hierarchy. Substitute with Inter (free, near-identical metrics).
Additional typeface
System sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.20
- Letter spacing
- normal
- Fallback
- -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Micro-UI labels (12px) — system stack for the smallest utility text where font loading overhead isn't justified
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 60-64px
- Card padding
- 14px
- Element gap
- 10px
Border radius
badges
100pximages
4pxavatars
100pxbuttons
100pxnavPills
100pxSpacing scale
2px4px6px8px10px12px14px16px20px24px28px60px64pxGuidelines
Do
- Use Bone (#f0f0f0) for all text on the dark void — never use pure white, which clashes with the warm off-white palette
- Apply 100px border-radius to every interactive button, badge, nav item, and avatar — the pill shape is the system's signature geometry
- Keep all type at Inter Display weight 400 — never introduce bold or semibold weights; build hierarchy through size and spacing only
- Use 0.04em letter-spacing on all text — this consistent positive tracking is what makes the whisper-weight type legible and gives the system its measured, deliberate feel
- Reserve Live Wire (#08ff00) exclusively for the availability status dot — it is the only chromatic color and must appear nowhere else
- Set page backgrounds to Void (#0f0f0f), not pure black — the near-black prevents OLED smearing and creates a subtle canvas depth
- Use 4px border-radius for image containers and 100px for all interactive elements — maintain the sharp/round duality
Don’t
- Don't introduce any new accent colors beyond Live Wire green — the system is deliberately monochromatic and any additional hue will break the gallery void
- Don't use drop shadows for card or surface elevation — depth must come from the artwork itself or surface tone shifts, not from shadow stacks
- Don't bold headlines or use weight 500+ — the entire type system breathes at weight 400; adding weight disrupts the flat, even texture
- Don't use sharp corners (<12px) on buttons, nav items, or badges — the pill geometry is the system's visual identity
- Don't use pure black (#000000) as a fill background for cards or surfaces — reserve it for hairline borders and edges; use Void (#0f0f0f) for surfaces
- Don't place body text below 14px or above 40px — the type scale is deliberately compressed; deviation breaks the editorial restraint
- Don't add gradients, glows, or color washes to UI elements — the system's visual energy comes from the 3D/photographic content, not from UI decoration
Components
Pill Navigation Button
Top-center nav items (Projects, Art, Info) and ghost nav controlsGhost-style button: transparent background, Bone (#f0f0f0) text at 14-16px Inter Display 400 with 0.04em letter-spacing, 100px border-radius, 4px vertical / 14px horizontal padding, no visible border. Active state (Art in screenshots) indicated by a subtle underline or text emphasis rather than a fill change.
Filled CTA Button
Primary action — Contact, Hire meBone (#f0f0f0) fill, Void (#0f0f0f) text at 14-16px Inter Display 400, 100px border-radius, 6px vertical / 14px horizontal padding. No border, no shadow. The only filled button in the system — reserved for actions the user must see.
Status Indicator
Availability signal in footer/hero6-8px circular dot in Live Wire (#08ff00) with optional text label ('Available for hire') in Bone at 14px. The green dot is the sole chromatic element in the entire UI — a heartbeat against the void.
Avatar Badge
Brand identity mark in top-left navCircular thumbnail (100px radius) of the designer's portrait, 32-40px diameter, no border. Paired with 'Josh Warner' wordmark in Bone at 14-16px Inter Display 400.
Coming Soon Pill
Project status badge on case study previewsGhost pill: transparent background, Bone text 'Coming Soon' at 12px, 100px radius, 4px vertical / 10px horizontal padding. Communicates temporal state through the nav pill language rather than introducing a new component family.
Hero Art Container
Full-bleed 3D render or photographic artworkNo container chrome — artwork extends to viewport edges against Void (#0f0f0f) canvas. The hero is a single large composition (golden ampersands + driftwood in screenshots) that occupies the full viewport height with overlaid nav and tagline.
Project Showcase Panel
Individual case study preview (phone mockup in second screenshot)Device mockup centered or positioned within the viewport, floating over continuation of the hero artwork. No card surface, no border — the device image itself is the visual unit. Caption text overlays in Bone at 16-20px.
Footer Bar
Site footer with bio and CTACharcoal (#1a1a1a) background, one step above canvas. Contains status indicator on left, bio text in Bone/Ash at 14-16px, and Hire me button on right. 12px padding, hairline top border in Absolute (#000000).
Tagline Headline
Hero left-aligned copy blockTwo-line statement ('Product by day. / Art by night.') at 32-40px Inter Display 400, Bone (#f0f0f0), 0.04em letter-spacing, positioned in lower-left of hero with generous left margin. No bold, no gradient — the weight of the line comes from its placement against the dark void.
Subtitle/Body Text
Supporting paragraph text14-16px Inter Display 400, Ash (#b8b8b8) or Bone (#f0f0f0), 0.04em letter-spacing, 1.5-1.56 line-height. Restrained, readable, never decorative.
Image Thumbnail
Small image containers and inline media4px border-radius, Absolute (#000000) 1px border. The tight radius keeps images grounded and sharp against the void, contrasting with the 100px pill language of interactive elements.
Surfaces & elevation
Level 0
Void
#0f0f0fPage canvas — the base layer beneath all content
Level 1
Charcoal
#1a1a1aFooter surface — one step above canvas for zone separation
Level 2
Bone
#f0f0f0Filled button background — inverted surface for interactive emphasis
Buttons and interactive elements
rgba(0, 0, 0, 0.16) 0px 0px 10px 0px
Project images and artwork overlays
rgba(0, 0, 0, 0.5) 0px 1px 10px -2px
Layout & imagery
Layout
Full-bleed dark canvas with no visible page max-width constraint — the hero artwork extends edge-to-edge, and text overlays float in negative space (lower-left for the tagline, center for nav). Navigation is a single horizontal bar with brand avatar+name on far left, three nav items (Projects, Art, Info) clustered in center, and a Contact button on far right. Below the hero, the page flows into full-viewport project showcase panels, each featuring a device mockup or artwork composition centered or slightly off-center, with minimal text overlay. Footer is a single horizontal band with status indicator left-aligned, bio center-left, and CTA right-aligned. Vertical rhythm is defined by 60-64px section gaps, and the overall density is compact with generous breathing room around text overlays. The layout is editorial and gallery-like — content sections are separated by the artwork itself rather than by dividers or background color changes.
Imagery
The site is image-dominant: full-bleed 3D renders and high-end photography occupy the entire viewport. The hero features a sculptural composition of metallic golden ampersand letterforms intertwined with organic driftwood, a small flower, and ornate keys — studio-lit, high-contrast, against a pure black backdrop. Secondary sections show device mockups (iPhone displaying app UI) floating over continuation of the driftwood scene, creating a unified visual world across scroll. All imagery is photographic or 3D-rendered, never illustrated or flat. Color treatment in photography is moody and warm — golden metallics, warm wood tones, against deep black. No icons are used; navigation and status are text-only. Images have tight 4px corners, contrasting with the pill-shaped UI chrome.
Design notes
Agent Guide
## Quick Color Reference - background (canvas): #0f0f0f - text (primary): #f0f0f0 - text (secondary): #b8b8b8 - border (hairline): #000000 - accent (status dot only): #08ff00 - primary action: #f0f0f0 (filled action) ## 3-5 Example Component Prompts 1. **Pill Navigation Button (ghost):** Transparent background, 14px Inter Display weight 400, color #f0f0f0, letter-spacing 0.04em, border-radius 100px, padding 4px 14px. No border, no shadow. 2. **Filled Contact Button:** Background #f0f0f0, text 14px Inter Display weight 400, color #0f0f0f, letter-spacing 0.04em, border-radius 100px, padding 6px 14px. No border. 3. **Status Indicator Row:** 8px circular dot in #08ff00, followed by label text 'Available for hire' at 14px Inter Display 400, color #f0f0f0, letter-spacing 0.04em. Inline-flex with 8px gap. 4. **Hero Tagline Block:** Two-line headline at 32-40px Inter Display weight 400, color #f0f0f0, letter-spacing 0.04em, positioned in lower-left viewport. Subtitle below at 16px, color #b8b8b8, same letter-spacing. 5. **Footer Bar:** Background #1a1a1a, full-width, 12px padding. Status indicator on left, bio text in #f0f0f0 at 14px, 'Hire me' filled button (Bone fill, Void text, 100px radius) on right.
Similar brands
Are.na
Same achromatic dark gallery approach with whisper-weight sans-serif and zero decorative color — content as the visual subject against a near-black void
Locomotive (locomotive.ca)
Full-bleed 3D-rendered hero compositions against deep black canvas, with pill-shaped minimal nav and editorial-scale typography
Werkstatt (by Studio Apeloig)
Portfolio-as-art-gallery language: large sculptural imagery dominates, UI is reduced to text labels and pill controls, single-color palette
Rauno Freiberg
Dark-mode developer portfolio with weight-400-only type, generous letter-spacing, and near-monochromatic palette where color is reserved for a single functional signal
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
