CASE STUDY

THE SUNNYSIDE
DESIGN SYSTEM

A dark, photographic, single-accent design language that powers sunnyside.tv. Inter as the system typeface, square corners everywhere, one warm orange that carries 100% of the brand recognition.

01 / BRAND

LOGO, WORDMARK, VOICE

Square mark over a dark cinematic ground. The mark is the only place a warm light leaks through the chrome - hover the sun icon to see the signature glow effect that mimics light catching a lens.

Sun mark - 100×100
Hover for the signature drop-shadow glow + radial highlight.
Wordmark
SUNNYSIDE
Uses the same clamp-based letter spacing as the header wordmark.
Sizes in production
32px mobile nav, 48px desktop nav, 84px marketing surfaces.
HEADLINES UPPERCASE
Letter-spaced display type. SUNNY CHAN. PORTFOLIO. EXPERIENCE.
Sentence case body
Project descriptions read as full sentences, properly punctuated.
No emoji. Anywhere.
Accent color does the emotional work emoji would do elsewhere.
No marketing fluff
Specific over abstract. Name tools, clients, years. Never "helped with creative".
Implied first-person
Site never addresses "you". CTAs are nominal: RESUME, PORTFOLIO.
Tool name fidelity
ComfyUI, FLUX.1, WAN 2.2, zBrush - preserve original casing.
02 / COLOR

ONE ACCENT, MANY NEAR-BLACKS

A single warm accent (#ff6b1a) carries every brand moment: active nav, focus rings, hover underbars, link color, eyebrow labels. Backgrounds are three layered near-blacks sitting on top of a dimmed full-bleed photograph.

--accent
#FF6B1A
Brand sun-orange. The ONE color that signals brand.
--bg-primary
#030305
Page base behind everything.
--bg-secondary
#0A0A14
Lifted surfaces.
--bg-card
#0A0A12
Hover-card body.
--bg-card-poster
#06060E
Poster placeholder.
--text-primary
#FFFFFF
Headlines, active state.
--fg-2
#C0C0C0
Body copy, paragraph lead.
--text-secondary
#777777
Mono meta / labels.
--text-muted
#555555
Muted, dim.
--border-subtle
#151520
Hairline dividers.
--border-card
#1A1A28
Card edges.
--border-button
#252535
Button rest state.

Accent opacity ramp

accent-12
Button focus ring
accent-16
Button press ring
accent-24
Tag fill
accent-36
Logo glow
accent-44
Sustain hover
accent
Full strength

Background photography

One fixed full-bleed photo per page (CMS-configurable), dimmed to 78% opacity with a near-black scrim so chrome stays legible.

space_bg_01
Default - deep space field
moon_bg_01
Lunar surface, blue-black
moon_bg_02
Lunar surface, alt angle
moon_bg_03
Lunar surface, soft
03 / TYPE

INTER, FULL FAMILY

Inter is the single system typeface, used across nav, headlines, body, and meta. Weights 100 through 900 are loaded; production leans on Medium (500) for display and Regular (400) for body. The site never mixes more than two weights in one block.

BODY COPY
Inter Regular
weight 400
Real-time technology and agentic AI amplify how ideas are built.
DISPLAY HEADLINES / PAGE H1 / NAV
Inter Medium
weight 500
THE SUNNYSIDE DESIGN SYSTEM
RESUME ROLE TITLES
Inter SemiBold
weight 600
SENIOR PRODUCT DESIGNER
CARD TITLES / EDU CHIP / BUTTONS
Inter Bold
weight 700
SKYRIM SET EXTENSIONS
EYEBROW LABELS (EXPERIENCE, EDU)
Inter ExtraBold
weight 800
EXPERIENCE

Type scale

display-1
64px / 500
SUNNY CHAN
display-2
48px / 500
PORTFOLIO
display-3
28px / 500
SUNNYSIDE
body-md
16px / 400
A dark, photographic, single-accent design language powers sunnyside.tv.
mono-sm
14px / 500
2024 to PRESENT
mono-xxs
11px / 700
RESUME
04 / SPACE & MOTION

FREE-FORM PIXELS, ONE EASE

Spacing is a 4-rooted pixel scale used freely. Corners are zero everywhere except small pills. Every transition uses the same long, decelerating quint-out curve - no bounces, no springs, no parallax.

Spacing scale
4px
7px
10px
14px
18px
22px
28px
32px
36px
48px
60px
Common pixel values harvested from production layout.
Corner radii
RADIUS-NONE · 0pxRADIUS-PILL · 999px
Sunnyside is square. Exceptions are small pills (volume slider, resume dot, social glyph background).
Signature ease
LOOPS · 1.4s
cubic-bezier(0.22, 1, 0.36, 1) - 160 to 520ms durations.
Popover shadow
The site's only drop shadow. Cards and buttons never use shadows.
Nav underline expansion
HOMERESUMEPORTFOLIO
Hover any item: 2px orange bar scales from 0 to 1 from center, 250ms ease.
Hover card animation
VFX
HOVER ME
TITLE SLIDES UP
Hover: image dims, underbar sweeps left to right (400ms), title slides up + fades in (350ms).
05 / COMPONENTS

ATOMS YOU'LL SEE ON THE SITE

Each specimen below is the actual production component, rebuilt inline. Hover them to see the real transitions - orange underbars sweeping in, border colors lifting, dots glowing.

Primary button
border: 1px var(--accent) · 320ms ease
Secondary button
border: 1px #252535 to #555 on hover
Eyebrow label
EXPERIENCE
Inter Bold (800), letter-spacing 3px.
Category chip
VFXFILMPRODUCT
Top-left of every hover card.
Skill chip
ComfyUIFLUX.1WAN 2.2AnimateDiffzBrushHoudiniAfter EffectsCinema 4D
Hover any chip: color #777 to #fff, border lifts to #555, background fades in. 1s ease - deliberately slow.
Social glyph
Only iconography in production besides the audio control.
Hover card volume
Bottom-left audio atom. Hover or focus to reveal the vertical volume slider; drag or use arrow keys to set volume.
Resume timeline entry
2024 to PRESENT
SENIOR PRODUCT DESIGNER
Apple Maps: Indoor Maps, AR Arriving Vehicle Interface.
2018 to 2024
LEAD 3D MODELER
Texturing, set extensions, real-time pipelines.
Hover the row: dot turns orange with a 4px glow, the vertical line fills top-down over 520ms after a 120ms delay.
Summary block

Designing intelligent creative systems that bridge visual storytelling, real-time technology, and agentic AI to amplify how ideas are built, experienced, and scaled.

2px orange left border, used for the resume lede.
Hover card
VFX
SKYRIM SET EXTENSIONS
BETHESDA · 2011
Image dims, underbar sweeps in, title slides up. Other cards in the grid dim too.
Nav buttonClick between HOME and PORTFOLIO to see the active underline animate in. Inactive #777, active #fff with a 2px orange under-bar.
06 / SURFACES

THE FOUR SHIPPING PAGES

One shipping product: the marketing / portfolio site. Click any surface to see the system live in the context it was designed for.

07 / MISC

SHOWCASE CANDIDATES

A scratchpad of ideas worth surfacing in the design-system case study. Review and promote any that earn their place into the sections above.

Z-INDEX LAYERS
z: 9999Cookie / audio overlay
z: 1000Project popover scrim
z: 100Sticky nav
z: 2Hover-card chrome (bar, title)
z: 1Hover-card image
z: 0Page background photo
Worth documenting once the popover and audio control land in the case study.
RESPONSIVE SCALING
nav padding: clamp(7px, 1.35vw, 24px)logo: min(var(--logo-max-height), 18vw)SUNNYSIDE: clamp(16px, 2.8vw, 28px)nav label: clamp(10px, 1.05vw, 14px)
Nav height, padding, logo, headlines all use clamp(min, vw, max) for fluid scaling without breakpoints.
IMAGE ASPECT RATIOS
16:9
1:1
3:4
Three ratios cover the entire site. 16:9 dominates portfolio + BTS; 1:1 is hero + logo only.
TEXT SELECTION

Highlight any portion of this paragraph and watch the selection paint orange instead of the OS default blue.

::selection is one of the few places the accent paints a large area. Try dragging across the line.
FOCUS RING
Keyboard focus uses a 2px accent outline with a 2px offset on every interactive element. Tab around to see it.
GLASS SURFACES
STICKY NAV — 18PX BLUR
backdrop-filter: blur(18px) on the sticky nav and project popover header is the only place the site uses blur.
BACKGROUND OVERLAY STACK
1. Photo at 100%
2. Near-black scrim at 78% (background-overlay-opacity)
3. Grid dim at 70% while a card is hovered (grid-dim-overlay-opacity)
4. Popover dim at 85% when modal opens (popover-dim-overlay-opacity)
The full-bleed photo passes through three CMS-tunable opacity layers before chrome lands on top.
HOVER INTENT TIMING
40ms mouse-enter dwell before scrim begins fading in
140ms mouse-leave dwell before scrim fades out
320ms button border sweep
520ms resume timeline line fill
1000ms skill chip fade
Production hover cards wait before showing the overlay - prevents flicker when the mouse just passes over.
PAGE ENTRY: FADEUP
CONTENT RISES 14PX + FADES IN
Every page wraps content in a fadeUp 0.5s ease animation. Refresh the page to see it on this whole document.
STICKY EDU + SKILLS SIDEBAR
EDUSKILLSSTICKS
The resume's left rail uses position: sticky to keep credentials in view while the right column scrolls through 20+ years of work.
VOLUME SLIDER — RARE PILL
VOL
One of only two places the site uses border-radius. The full-round track sells it as an audio control without an icon explanation.
NUMERIC RENDERING
2024 to PRESENT
2018 to 2024
24 PROJECTS · 9 EXPERIMENTS
v2.0 · BUILD 2026.05
Years, ranges, counts always render in mono with explicit 'to' instead of an en-dash. Avoids any ambiguity between hyphen / dash / minus.
SOURCE / SunnysideTV_2026_DesignSystem← BACK TO HOME