brand kit
Paul Yoon
Software Engineer & Researcher
paulyoon.xyz
01brand essence
A researchnotebook
mark logic
Mark
A “PY” monogram set on a 50-unit grid. The Y's left arm and stem carry one constant stroke into a circular P-bowl. The arm meets the stem exactly on the bowl's base line.
Clear space
≥ 7u (one stroke) on every side. Never below 16px — favicon 16, nav 20.
Don't
- recolor or add a gradient
- round corners or alter the 7u stroke
- rotate, skew, or stretch it
- crowd inside the clear space
color system
Color
Ink, muted, hairline and the brand blue are oklch design tokens (app/globals.css); the hexes here are sRGB conversions for reference. The cool-blue field beneath them is a gradient hand-authored in hero-background.tsx, ramped for depth.
Field top
#F5F9FDhero air, open fieldField upper
#E8F3FBdefault body atmosphereField mid
#D6EAF8lower gradient depthField floor
#C4E0F5bottom anchor, horizonBrand
#007DB4links, present state, emphasisDesign tokens · oklch
--accent#007DB4--foreground#0D1215--muted-foreground#5E6468--border#DEE2E4--background#FCFCFC--destructive#E7000Bimage direction
soft field, precise type, visible grain.
Atmosphere
- field
- linear · 160°
- grain
- noise · 700px · 10%
- bloom
- radial · 10s drift
Photography
- warm, candid, natural light
- rounded 16px, never hard frames
- screenshots ride inside glass
typography
Type
Playfair Display for voice, Inter for function, STIX Two Text for the role line and the small machine-readable labels.
Paul Yoon
Selected work
Research notes and polished engineering.
Software Engineer & Researcher
JUN – AUG · INCOMING
motion
Motion
One curve, one timing scale. Everything enters once on a plain ease-out at 550ms. Functional surfaces fade 12px; skill columns spring 16–20px with a single soft overshoot.
550ms · ease-out · 12px550ms · ease-out · 20px spring550ms · ease-out · 16px spring550ms · ease-out · 20px springmaterial
Glass
The signature surface. A real-time filter samples whatever sits behind it, then bends and refracts it through a simulated lens. Two implementations: a heavy pill for the nav, a light button for actions.
refract
WorkProjectsResumeGlassPill · glasspill.tsx
A per-size displacement + specular map drives an SVG feDisplacementMap on backdrop-filter, bending the live page through the lens. GlassPillAuto falls back to CSS blur on Safari.
- thickness
- 80u
- bezel
- 20px
- blur
- 2px
- tint
- white · 40%
GlassButton2 · glassbutton2.tsx
Lighter glass for actions: a clipped feGaussianBlur backdrop with layered specular and shadow, composited in CSS.
- blur
- 2px
- finish
- specular + shadow
Drag the pill · live Chrome refraction
Rule: never put a transform, filter, or opacity < 1 on the pill or any ancestor — each forms a backdrop root that blanks the refraction. Position with layout, never transforms.
slide template
Slides
The same system, applied to a presentation master. Three slide types do all the work: a title lockup, a section divider, a body slide. Font fallbacks are loaded for Keynote and Google Slides, where Playfair and STIX don't install by default.
Paul Yoon
Software Engineer & Researcher
section
02
Approach
research notes
What the system tries to do
- Make ideas legible without flattening them.
- Defer to the work; the frame stays quiet.
- One accent. One curve. One held center.
Master specs
- frame
- 16 : 9 · 1920 × 1080
- safe area
- 96px inset all sides
- display font
- Playfair Display → Georgia
- body font
- Inter → system-ui
- label font
- STIX Two Text → Times
- footer mark
- PY · paulyoon.xyz · folio · year
Rules
- One accent per slide. Brand blue, never both blue + a tint.
- Body type 24pt minimum. If it shrinks below 18, split the slide.
- Footer mark on every slide; folio number tracks the talk, not the file.
- Dark variant only for section dividers and full-bleed imagery.