I design clear product experiences for complex systemscomplex systems
--brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); }
--brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); }
Valentin Novitsky
Senior Product Designer
Herzliya, Israel
Loading …
Selected work
Developer platform
-
B2B · Web (desktop & mobile) · 1 → 2
A self-serve release pipeline for a multi-tenant developer platform, cutting DevRel release workload 75%*
View case study
-
B2B · Web (desktop & mobile), Client (desktop) · 0 → 1
A shared token foundation that merged three design languages across 17 products and 4 brands
View case study
-
B2B2C · Web (desktop & mobile) · 1 → 2
Turning a two-sided marketplace into an acquisition channel, +15pp organic share*
View case study
* Observational figures, no A/B test.
Design values
-
Decisions, not decoration
I treat every screen as a visible decision. Polish matters, but it can’t replace the thinking behind it.
-
Simple first, scalable when needed
I design for the problem at hand. Scalability comes when the evidence is there, not before.
-
Measure what you ship
Every release should include a way to verify that it worked. Shipping is only useful when we can learn from what changed.
Versatile by design
-
Senior Product Designer
2022–2026
Developer platform
B2C · Web (desktop & mobile), Client widget · 1 → 2
Routing a help system by user intent instead of taxonomy, +19pp self-service and −23% tickets*
-
Experienced Product Designer
2020–2022
Work OS
B2B2C · Mobile (iOS/Android) · 1 → 2
An onboarding redesign that increased registrations by +17% and reduced empty applications by 64%
Project snapshot
-
Product Designer
2020
Sales analytics
B2B · Web (desktop) · 0 → 1
A new transcript experience that made sales conversations easier to review, coach on, and reuse
Project snapshot
-
UX/UI Designer
2017–2020
Product agency
B2B · Web (desktop) · 0 → 1
A control platform that turned plant inefficiency into about $294K in annual savings
Project snapshot
Stack
What collaborators say
- ”
Together with Valentin, we developed a shared design system that improved design quality and consistency across the company. Valentin consistently demonstrates outstanding professionalism and a strong grasp of processes, bringing structure to complex cross-functional projects.
Miriam Moshinsky Art Director at Overwolf
- ”
Valentin is a talented designer who dives deep into projects and pays close attention to detail. On our mobile work, he paired strong craft with A/B-tested decisions that measurably improved completion rates. He also prioritizes creating a warm work environment.
Shani Frankel Director of Product at monday.com
- ”
Valentin is an extraordinary product designer. While working together under tight timelines and budgets, Valentin demonstrated his product management skills, strong UI and UX knowledge, and hands-on abilities.
Shahar Bahiri Co-founder & COO at Moonshot Space
- ”
Valentin is an exceptional product designer with a strong understanding of the product lifecycle. As a developer, I valued his precision and commitment to high-quality standards. He is professional, talented, and an excellent teammate.
Ben Koren Front End Developer at Overwolf
--brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); }
--brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); } --brand: 42 90 175; /* #2A5AAF blue/48 — the brand as a field */ --ink: 26 32 44; /* #1A202C cool/16 — body text, and text only */ --invert: 10 16 28; /* #0A101C cool/8 — the ground of anything dark */ --signal: 225 78 29; /* #E14E1D terracotta/64 — the only accent */ --on-field: 214 224 240; /* #D6E0F0 cool/112 — text on any dark field */ --muted-inv: 182 191 208; /* #B6BFD0 cool/96 — muted on a dark field */ .field-ink { background: rgb(var(--invert)); --fg: rgb(var(--on-field)); } --ink-lo: 42 48 60; /* #2A303C cool/24 — the quiet step on paper */ --rule: rgb(var(--on-field-lo)); /* the light step draws on paper */ --ease: cubic-bezier(.2, .7, .15, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* overshoots to 1.10 */ --t-fast: 160ms; /* colour, opacity, fills */ --t-move: 420ms; /* transforms */ --t-draw: 700ms; /* rules and counters */ --brand-inv: 51 117 232; /* #3375E8 the brand on a dark field */ --margin: 32px; --gutter: 24px; --header-h: 64px; .cell + .cell { border-left: 1px solid var(--rule); } .js [data-anim='wipe']::before { background: rgb(var(--signal)); } .js [data-anim='meet'] .art-l { transition: transform var(--t-move); } .lrow i { background: rgb(var(--brand)); height: var(--w); } .val-trace { opacity: 1; color: rgb(var(--brand-inv)); }
Let’s build together
Senior, Lead, or Founding Designer roles.
Complex B2B and Design Operations preferred.
On-site or hybrid.