← Back homev1 · 2026
● Design system

Style guide

Pulled straight from the home page: the 3D room hero with its game-style overlay, and the work section beneath it. Warm near-blacks, off-white type, one orange accent, and two typefaces: Geist for what you read, Geist Mono for labels, metadata and the room's interface.

● 01 · Color

Color palette

Two near-blacks (room and work), one warm off-white, and a ladder of warm grays for secondary text. Orange is the only accent.

Base
Room Black
#070605
3D room hero background
Work Black
#050505
Work section background
Ink
#F3EFE8
Headline, nav, work titles
Signal Orange
#FF4D1A
Rotating word, dots, focus rings, hover underline
Text tones
Stone
#CFC8BE
Extra links (e.g. Logos)
Sand
#A8A197
Work outcomes
Dust
#9C958B
Title descriptor after the dash
Ash
#9A938A
Hero subtitle, hint secondary line
Clay
#8D867C
Section kicker
Meta
#7A746B
Roles and years
Edge
#3A3632
Link underlines
Room interface
UI Text
#E6E6E6
Nametag, explorer text
Window
#121212
JALEN_OS window
Chrome
#1B1B1B
Window title bar
Window Line
#2C2C2C
Window borders
Overlay
rgba(0, 0, 0, 0.8)
Nametag, hint pill (72%), cards (85%)
XP Blue
#245ED1
Taskbar, Notepad title bar
XP Green
#37A137
Start button
LED Blue
#2F8CFF
Room LED strips, keyboard glow
● 02 · Typography

Typefaces

Helvetica for the headline, nav and work titles. Geist Mono, uppercase with open tracking, for kickers, meta, the hint, the nametag and the explorer.

Primary · Helvetica
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@?!
Regular 400Semibold 600
Secondary · Geist Mono
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 · → ↗
Regular 400Uppercase +8%
● 03 · Typography

Type scale

Every text style used on Home. Display sizes are tight (0.92–0.95, −4.5%); mono labels open up to +4–10% tracking.

Hero headlineHelvetica 600 · 40–104px · 0.92 · −4.5%
UX Designer
Section headingHelvetica 600 · 44–96px · 0.95 · −4.5%
Project Showcase
Work titleHelvetica 600 · 20–28px · 1.15 · −2% (descriptor 400, Dust)
Spotify Redesign — Rethinking artist-page discovery
OutcomeHelvetica 400 · 15px · 1.55 · max 48ch
Found where listeners get lost on artist pages, then redesigned discovery around it.
NavHelvetica 400 · 14px (name 600, −2%)
Jalen Marcelino   Work   About   Resume   Contact
KickerGeist Mono 400 · 12px · 1 · +10% · UPPERCASE
● Selected work · 04
Meta / linkGeist Mono 400 · 12px · 1.4 · +8% · UPPERCASE
UX Research + Interaction Design · Skip to work
Hero subtitleGeist Mono 400 · 12px · +4% · UPPERCASE
Los Angeles · UX Research · Interaction Design
NametagGeist Mono 600 · 11px · +8% · UPPERCASE
BENTLEY
ExplorerGeist Mono 400 · 12px · 1.35 (meta 11px)
C:\JALEN\PROJECTS · Spotify Redesign
Card titleHelvetica 600 · 28px · +4%
ABOUT ME
● 04 · Layout

Spacing

The work section sits on a 12-column grid (max 1240px, 24px gutter). Cards alternate 5 and 7 columns, and every other card drops by up to 220px. Values with ranges flex from phone to desktop.

4px
Nav link underline offset
8px
Explorer gaps, taskbar gap
10px
Outcome gap, folder grid
12px
Hint inner gap
14px
Meta gap, subtitle gap
16px
Kicker to heading, extra link
18px
Nav padding, caption gap
24px
Page gutter, nav links
48px
Column gap (max)
96px
Heading to list (max)
120px
Row gap (max)
150px
Work section top padding (max)
220px
Stagger offset (max)
● 05 · Surfaces

Corners, borders & shadows

Mostly square and flat; depth comes from light (glows) rather than drop shadows, except the explorer window.

Square corners0px radius almost everywhere: work media, explorer, buttons, nametag
Soft XP bitsStart button 0 12 12 0 · taskbar tab 3px · hint mouse 8px
Window shadow0 18px 50px rgba(0,20,60,.45), 6px 6px 0 rgba(0,0,0,.55)
Media glowradial light behind each mockup, dark ellipse beneath
Link glowtext-shadow 0 0 6px / 16px / 28px white on hover
Focus ring2px solid Signal Orange, 8px offset
● 06 · Components

Home building blocks

The hero's top bar and headline, and the work section's card, as they appear on the page.

Top bar
Jalen MarcelinoWorkAboutResumeContact● Open to work
14px Geist · hover: white glow + underline drawing in
Hero headline
Product Designer
creating designs
from insight
to interface.
Los Angeles · UX Research · Interaction Design
Work card
Leyenda Legal Group — Bilingual law firm website

Rebuilt an immigration firm's site around trust and fast answers.

UX + Web Design
Section header & extra link● Selected work · 04
Project Showcase
Logos ↗
● 07 · Room interface

The game-style overlay

Everything drawn over the 3D room: the nametag, scroll hint, the JALEN_OS explorer with its XP-style taskbar, the Notepad, and the profile cards.

Nametag (hover)
BENTLEY
Black 80% · Geist Mono 11/600 · +8%
Scroll hint & skip link
SCROLL TO EXPLOREThe room moves as you go↓
SKIP TO WORK ↓
JALEN_OS explorer
C:\JALEN\PROJECTS×
▦ Projects▦ Graphic Design▦ Education▤ About▤ Contact
Spotify RedesignUX Case Study
Canvas RedesignUX Case Study
Leyenda LegalUX Case Study
3 ITEMSJALEN_OS
startFile Explorer10:18 PM
Notepad (contact.txt)
contact.txt - Notepad×
EMAIL    jalenmarcelino@gmail.com STATUS   Open to work
Profile card
About me · about_me.txt
ABOUT ME

Black 85% panel, Geist title, Geist Mono labels, 1px gray tag chips.

MinecraftValorantNY Giants
Clickable glow
Soft white blurred outline, gentle pulse, brighter on hover
● 08 · Principles

How it all fits

  • Two worlds, one palette: a playful pixel room on top, a calm editorial list below, both on warm near-black.
  • One accent. Signal Orange marks the rotating role, dots, focus and hover underlines.
  • Mono kicker above a big Geist heading: a small tag, then the statement.
  • Media floats on soft light, not boxes; corners stay square.
  • The room's UI can borrow retro chrome (XP taskbar, Notepad, nametag) but keeps Geist type.
  • Everything clickable in the room gets the same white glow and a nametag on hover.
  • Motion is quiet: lifts, fades, glows and a slow-scrolling camera, all off for reduced motion.
  • On phones: one column, swipe to move the room, nothing wider than the screen.