:root {
–bg: #000;
–fg: #fff;
–muted: #b5b5b5;
–accent: #FF6B5A;
–gutter: clamp(16px, 4vw, 48px);
–maxw: 1600px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
scroll-behavior: smooth;
}
body {
background: var(–bg);
color: var(–fg);
font-family: system-ui, -apple-system, ‘Segoe UI’, Roboto, Inter, Arial, sans-serif;
overflow-x: hidden;
line-height: 1.6;
}
.wrapper {
display: block;
width: 100%;
position: relative;
}
/* Fixed Left Tabs */
.tabs {
position: fixed;
left: 0;
top: 0;
height: 100dvh;
width: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
z-index: 40;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
border-right: 1px solid rgba(255,255,255,0.06);
backdrop-filter: blur(4px);
}
.tab {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 12px;
letter-spacing: 0.14em;
color: #8a8a8a;
cursor: pointer;
user-select: none;
transition: color 0.25s, transform 0.25s;
text-transform: uppercase;
}
.tab:hover {
color: var(–fg);
}
.tab.active {
color: var(–accent);
font-weight: 700;
}
/* Sections */
.section {
min-height: 100dvh;
display: flex;
align-items: center;
position: relative;
isolation: isolate;
}
.section-inner {
width: min(100%, var(–maxw));
margin: 0 auto;
padding-block: clamp(72px, 12vh, 140px);
padding-left: calc(64px + var(–gutter));
padding-right: var(–gutter);
}
.full-bleed {
width: 100%;
padding: 0;
margin: 0;
}
/* Hero Section */
.hero {
background: var(–bg);
}
.hero .title {
font-size: clamp(42px, 12vw, 132px);
line-height: 0.92;
font-weight: 900;
color: var(–accent);
letter-spacing: -0.02em;
}
.hero .sub {
margin-top: 28px;
color: var(–muted);
font-size: 18px;
}
.cue {
position: absolute;
left: calc(64px + var(–gutter));
bottom: 32px;
color: #8a8a8a;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Two-Column Motion Section */
.motion {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(24px, 6vw, 80px);
align-items: center;
}
.motion .kicker {
color: var(–accent);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}
.motion h2 {
font-size: clamp(28px, 4vw, 52px);
line-height: 1.22;
font-weight: 900;
}
.motion p {
margin-top: 14px;
color: #cfcfcf;
line-height: 1.75;
}
/* Image Track */
.track {
width: 100%;
height: clamp(320px, 52vh, 620px);
background: linear-gradient(135deg, #2a2a2a, #0f0f0f);
border-radius: 14px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.track .img-sim {
color: #9a9a9a;
font-size: 20px;
text-align: center;
}
/* Marquee */
.marquee-wrap {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
padding: 44px 0;
}
.marquee {
display: flex;
gap: 48px;
white-space: nowrap;
animation: mar 18s linear infinite;
color: var(–accent);
font-weight: 900;
font-size: clamp(28px, 6vw, 64px);
}
@keyframes mar {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Brands Grid */
.brands h3 {
font-size: clamp(28px, 6vw, 60px);
margin-bottom: 48px;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.card {
border-radius: 12px;
background: #111;
padding: 32px 26px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 700;
color: #e7e7e7;
transition: transform 0.25s, background 0.25s, color 0.25s;
cursor: pointer;
min-height: 120px;
}
.card:hover {
transform: translateY(-8px);
background: var(–accent);
color: #000;
}
/* CTA Section */
.cta {
display: grid;
place-items: center;
min-height: 100dvh;
text-align: center;
}
.cta h2 {
font-size: clamp(42px, 10vw, 120px);
line-height: 0.95;
margin-bottom: 36px;
font-weight: 900;
}
.btn {
display: inline-block;
background: var(–accent);
color: #fff;
padding: 18px 48px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
letter-spacing: 0.02em;
transition: transform 0.2s, background 0.2s, color 0.2s;
font-size: 18px;
}
.btn:hover {
transform: scale(1.05);
background: #fff;
color: #000;
}
/* Footer */
.footer {
padding: 50px;
text-align: center;
background: #111;
color: #8a8a8a;
font-size: 14px;
}
/* Responsive */
@media (max-width: 980px) {
.motion {
grid-template-columns: 1fr;
gap: 28px;
}
.section-inner {
padding-left: calc(64px + 16px);
padding-right: 16px;
}
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.tabs {
width: 52px;
}
.section-inner {
padding-left: calc(52px + 14px);
padding-right: 14px;
}
.hero .title {
font-size: clamp(32px, 10vw, 72px);
}
}
INTRO
ABOUT
WORK
BRANDS
CONTACT
EDUCATOR
Design mentorship by Your Name
SCROLL TO DISCOVER →
SAME PASSION. NEW MISSION.
After years of designing solutions for industry giants and game-changing startups…
My focus has shifted from client projects to coaching exceptional designers who are ready to lead, innovate, and create meaningful change.
My mission is to help create the next generation of design leaders who think differently, challenge boldly, and create with purpose.
OVER 20 YEARS •
HELPING STARTUPS •
DISRUPT MARKETS •
FORTUNE 500S •
INNOVATE AT SCALE •
OVER 20 YEARS •
HELPING STARTUPS •
DISRUPT MARKETS •
FORTUNE 500S •
INNOVATE AT SCALE •
SHOWREEL
Design by Won
Creating meaningful experiences that connect with people and drive real impact.
From concept to execution, every project tells a story of innovation and purpose.
Brand Experience
American Express
Porsche
ESPN
The Home Depot
Intel
Cadillac
Discovery
IBM