precision * play

Design System

A living reference for the philliple.com visual language. Swiss structure meets Japanese Ma — precision meets play.

// color tokens
Core Palette — Dark Mode
#1a1714
--background
Page background
#f0ece4
--foreground
Primary text
#211e1b
--card
Card surface
#e8533a
--rust
Accent — only accent
#c8c0b0
--body-color
Body prose
#8a8070
--meta-color
Metadata / captions
#2e2a26
--rule-color
Dividers / borders
Rust Scale — Derived from --rust
rgba(232,83,58,0.12)
--rust-light
Badge bg, subtle fills
rgba(232,83,58,0.30)
--rust-border
Badge borders, rule accents
rgba(232,83,58,0.40)
--rust-mid
Stronger fills, card accents
rgba(232,83,58,0.04)
--rust-hover
Row hover state
Overlay Scale — Text on dark image backgrounds
--overlay-primary
Heading on image
rgba(255,255,255,0.95)
--overlay-body
Body on image
rgba(255,255,255,0.88)
--overlay-meta
Meta on image
rgba(255,255,255,0.50)
--overlay-tertiary
Tertiary on image
rgba(255,255,255,0.35)
// typography
Three families. No others permitted.
Aa Bb Cc
Barlow Condensed
Display / Headings
300, 700
Aa Bb Cc
Cormorant Garamond
Body / Prose
300, 300 italic
Aa Bb Cc
IBM Plex Mono
Labels / Meta
300, 400
Type Scale
Display XL
'Barlow Condensed', sans-serif
300 · var(--text-display-xl)
tracking 0.2em
Phillip Le.
Display L
'Barlow Condensed', sans-serif
300 · var(--text-display-l)
tracking 0.12em
Legacy · Hong Kong
Display M
'Barlow Condensed', sans-serif
700 · var(--text-display-m)
tracking 0.08em
Experience
Body L
'Cormorant Garamond', serif
300 · var(--text-body-l)
tracking 0
Through words, images, and movement.
Body M / Italic
'Cormorant Garamond', serif
300 · var(--text-body-m)
tracking 0
Discipline creates space for discovery.
Label M
'IBM Plex Mono', monospace
300 · var(--text-label-m)
tracking 0.08em
Director, Product Design · Meta
Label S
'IBM Plex Mono', monospace
300 · var(--text-label-s)
tracking 0.22em
// WRITING · ESSAY · 2024
Label XS
'IBM Plex Mono', monospace
300 · var(--text-label-xs)
tracking 0.14em
24 frames · Hong Kong · 2023
// signature motifs
01 — Rust Period Pulse
Le.

The pulsing period on the home page name. The rust accent color derives its identity from this element. Used only here — never decoratively elsewhere.

02 — Parallelogram Portrait Crop
portrait
clip-path
polygon
8% offset · portrait only

The parallelogram crop is applied exclusively to portrait photography. The 8% horizontal offset creates a subtle lean that adds dynamism without distorting the subject. It appears on the Me page and KungFu instructor panels.

03 — Archival Box + Corner Marks
Historical Record
Double border: 2px outer + 1px inset outline at −5px offset
Rust Variant
Used for editorial contexts with rust accent color
04 — // Label Convention
// latest
section — left border, foreground color
// writingmeta — no border, rust color, hero strips
// essayinline — rust, 70% opacity, content blocks
// components
BackLink
← Index← ExperienceHover to see rust transition
PinnedBadge
PinnedNew
PinnedNew
light (on bg) · dark (on image)
Credential Strip
// role
Director, Product Design · Meta
// practice
Instructor / Practitioner · Jook Lum
// base
New York City
Tag Pill
HeritageMartial ArtsIdentityPhilosophyMemory
// spacing scale
--space-xs
0.25rem · 4px
--space-sm
0.5rem · 8px
--space-md
1rem · 16px
--space-lg
2rem · 32px
--space-xl
3.5rem · 56px
--space-2xl
6rem · 96px
// animations
.
.period-pulse
3s ease-in-out infinite · scale 1→1.08→1
PAGE LOAD
.page-enter
0.2s ease · opacity 0→1, Y+4px→0
A
.ticker-letter-in
0.55s cubic-bezier · blur+fade in
.photo-dream-in
1.2s cubic-bezier · blur+scale fade in
philliple.com · Design System v0.1 · May 2026
← Home