Available for work

Product Designer & Developer
Connecting Design → Code with Design Systems & Custom Plugins

Darian Rosebrook

Darian Rosebrook

Portland, Oregon

Hello! I’m Darian Rosebrook 👋🏼

I’m a seasoned Product Designer with a strong background in front-end engineering, I specialize in crafting robust design systems and developing custom design tooling for Figma that optimizes product development workflows.

I live at the intersection of design and development where I dedicate my efforts to streamlining collaboration and optimizing product development cycles.

Learn more about me →

Where I’ve been

Over the last ten years, I have spent my career building up skills at creating, maintaining, and scaling design systems across different sized initiatives.

For large and small brands alike, throughout my career, I have successfully led cross-functional teams through highly technical projects, collaborating with project managers and development leads to break down complex initiatives into manageable arcs of work. By effectively managing and delegating resources, I ensure the smooth execution of projects, delivering results that exceed expectations.

I am passionate about making things that make it easier for people to make things, and love a challenge when it comes to interesting problems to solve for.

You can see some of the places where I have worked to make their brand excel through my work with design systems

p.s. A lot of this site is still a work in progress, as is the folly of all portfolio sites. haha

View my work →

Design System Education

Red 100

--color-core-red-100

#fceaea

Red 200

--color-core-red-200

#f7c1c2

Red 300

--color-core-red-300

#f29495

Red 400

--color-core-red-400

#ea6465

Red 500

--color-core-red-500

#d9292b

Red 600

--color-core-red-600

#ae0001

Red 700

--color-core-red-700

#7b0000

Red 800

--color-core-red-800

#4b0000

Orange 100

--color-core-orange-100

#ffedcc

Orange 200

--color-core-orange-200

#ffc458

Orange 300

--color-core-orange-300

#fe9400

Orange 400

--color-core-orange-400

#d77600

Orange 500

--color-core-orange-500

#ac5c00

Orange 600

--color-core-orange-600

#824500

Orange 700

--color-core-orange-700

#593000

Orange 800

--color-core-orange-800

#331b00

Green 100

--color-core-green-100

#e4f2e0

Green 200

--color-core-green-200

#b0daa4

Green 300

--color-core-green-300

#79bf65

Green 400

--color-core-green-400

#609e41

Green 500

--color-core-green-500

#487e1e

Green 600

--color-core-green-600

#336006

Green 700

--color-core-green-700

#234104

Green 800

--color-core-green-800

#142502

Blue 100

--color-core-blue-100

#d9f3fe

Blue 200

--color-core-blue-200

#8ad9fc

Blue 300

--color-core-blue-300

#2eb9f9

Blue 400

--color-core-blue-400

#1d91fb

Blue 500

--color-core-blue-500

#0a65fe

Blue 600

--color-core-blue-600

#0042dc

Blue 700

--color-core-blue-700

#002d99

Blue 800

--color-core-blue-800

#001b5a

Violet 100

--color-core-violet-100

#ffe9fe

Violet 200

--color-core-violet-200

#ffb5fc

Violet 300

--color-core-violet-300

#ff7bfa

Violet 400

--color-core-violet-400

#f431ed

Violet 500

--color-core-violet-500

#c127bc

Violet 600

--color-core-violet-600

#931d8f

Violet 700

--color-core-violet-700

#661463

Violet 800

--color-core-violet-800

#3b0c3a

Neutral 100

--color-core-neutral-100

#efefef

Neutral 200

--color-core-neutral-200

#cecece

Neutral 300

--color-core-neutral-300

#aeaeae

Neutral 400

--color-core-neutral-400

#8f8f8f

Neutral 500

--color-core-neutral-500

#717171

Neutral 600

--color-core-neutral-600

#555555

Neutral 700

--color-core-neutral-700

#3a3a3a

Neutral 800

--color-core-neutral-800

#212121

Fundamentals
Design Tokens