Design system | Zach Blevins

Color Ramps

Every ramp in the Figma library, every step a card. Click any card to copy its hex. Steps that ship carry their CSS token; the rest are in the library, ready for when the site needs them.

Brand / Primary

Figma Brand/Primary · --ds-brand-*, 11 of 11 ship

The solid neutral ramp: ink, borders and every grey surface.

Brand / Secondary

Figma Brand/Secondary · --ds-accent-*, 1 of 11 ship

The lime. Arrows, the accent button and dark mode highlights.

Ink

Figma Ink · --ds-black-*, 21 of 21 ship

Ink at every opacity in steps of 5%, for anything laid over a light ground.

Chalk

Figma Chalk · --ds-white-*, 21 of 21 ship

Chalk at every opacity in steps of 5%, for anything laid over a dark ground.

Lime

Figma Lime · Library only

The lime at every opacity in steps of 5%. The dark mode button glow reads 150 and 200.

Gray

Figma Gray · Library only

The same values as Brand / Primary under the library's generic name.

Slate

Figma Slate · Library only

A cool neutral for data and secondary surfaces.

Red

Figma Red · --ds-red-*, 3 of 11 ship

Danger. Errors, failed states and destructive actions.

Green

Figma Green · Library only

Success and positive change.

Yellow

Figma Yellow · Library only

Warnings and pending states.

Blue

Figma Blue · Library only

Information and links outside the brand.

Primitive Tokens

The 57 primitives css/styles.css ships, in the 8-digit hex Figma uses. Components never read these directly; semantic tokens do.

Ink

--ds-black-000#0e0f1000
--ds-black-050#0e0f100d
--ds-black-100#0e0f101a
--ds-black-150#0e0f1026
--ds-black-200#0e0f1033
--ds-black-250#0e0f1040
--ds-black-300#0e0f104d
--ds-black-350#0e0f1059
--ds-black-400#0e0f1066
--ds-black-450#0e0f1073
--ds-black-500#0e0f1080
--ds-black-550#0e0f108c
--ds-black-600#0e0f1099
--ds-black-650#0e0f10a6
--ds-black-700#0e0f10b2
--ds-black-750#0e0f10bf
--ds-black-800#0e0f10cc
--ds-black-850#0e0f10d9
--ds-black-900#0e0f10e5
--ds-black-950#0e0f10f2
--ds-black-1000#0e0f10

Chalk

--ds-white-000#ffffff00
--ds-white-050#ffffff0d
--ds-white-100#ffffff1a
--ds-white-150#ffffff26
--ds-white-200#ffffff33
--ds-white-250#ffffff40
--ds-white-300#ffffff4d
--ds-white-350#ffffff59
--ds-white-400#ffffff66
--ds-white-450#ffffff73
--ds-white-500#ffffff80
--ds-white-550#ffffff8c
--ds-white-600#ffffff99
--ds-white-650#ffffffa6
--ds-white-700#ffffffb2
--ds-white-750#ffffffbf
--ds-white-800#ffffffcc
--ds-white-850#ffffffd9
--ds-white-900#ffffffe5
--ds-white-950#fffffff2
--ds-white-1000#ffffff

Brand / Primary

--ds-brand-50#f3f3f3
--ds-brand-100#e7e7e7
--ds-brand-200#cfcfcf
--ds-brand-300#b7b7b7
--ds-brand-400#9f9f9f
--ds-brand-500#868787
--ds-brand-600#6e6f70
--ds-brand-700#565758
--ds-brand-800#3e3f40
--ds-brand-900#262728
--ds-brand-1000#0e0f10

Brand / Secondary

--ds-accent-50#d7ff38

Red

--ds-red-200#fdc1ba
--ds-red-500#fc655a
--ds-red-700#c22826

Semantic Tokens

The tokens components actually use. Each card shows the token in Light on the left and Dark on the right, the Figma variable it binds to, and what it points at. Dark mode only remaps this layer.

Core

Text, ground, lines and the accent: what nearly every component reads.

--c-inkBrand/Primary/1000Light #0e0f10Dark #0e0f10--ds-brand-1000 · Same in both
--c-white Light #ffffffDark #ffffff--ds-white-1000 · Same in both
--c-accentBrand/Secondary/50Light #d7ff38Dark #d7ff38--ds-accent-50 · Same in both
--c-bgBackground/Default/PrimaryLight #ffffffDark #0e0f10--ds-white-1000 · Changes with the theme
--c-bg-hoverBackground/Default/Primary Hover: Ink/050, Chalk/050 in DarkLight #0e0f100dDark #ffffff0d--op-050 · Changes with the theme
--c-textTypography/Default/PrimaryLight #0e0f10Dark #ffffff--ds-black-1000 · Changes with the theme
--c-text-2Typography/Default/SecondaryLight #0e0f10bfDark #ffffffb2--op-750 · Changes with the theme
--c-text-3Typography/Default/TertiaryLight #0e0f1099Dark #ffffff80--op-600 · Changes with the theme
--c-linkOpacity/900, both modesLight #0e0f10e5Dark #ffffffe5--op-900 · Changes with the theme
--c-lineBorder/Default/PrimaryLight #e7e7e7Dark #ffffff1a--ds-brand-100 · Changes with the theme
--c-overlayOpacity/050, Button/Background/TertiaryLight #0e0f100dDark #ffffff0d--op-050 · Changes with the theme
--c-navBackground/Default/Nav: Ink/100 here, Chalk/100 in DarkLight #0e0f101aDark #ffffff1a--op-100 · Changes with the theme
--c-overlay-hoverOpacity/150, Button/Background/Tertiary HoverLight #0e0f1026Dark #ffffff26--op-150 · Changes with the theme
--c-overlay-pressOpacity/100, Button/Background/Tertiary PressedLight #0e0f101aDark #ffffff1a--op-100 · Changes with the theme
--c-blanketBackground/Utilities/Blanket, under the nav and menu tintsLight #ffffffb2Dark #0e0f10b2--ds-white-700 · Changes with the theme

Components

Bound separately in the library because they diverge from the core set.

--c-btn-iconIcon/Button/Tertiary + GhostLight #0e0f10Dark #d7ff38--ds-brand-1000 · Changes with the theme
--c-btn-primaryButton/Background/PrimaryLight #0e0f10Dark #ffffff--ds-brand-1000 · Changes with the theme
--c-btn-primary-hoverButton/Background/Primary HoverLight #0e0f10Dark #e7e7e7--ds-brand-1000 · Changes with the theme

Danger

Error text and borders.

--c-danger-text Light #c22826Dark #fdc1ba--ds-red-700 · Changes with the theme
--c-danger-border Light #c22826Dark #fc655a--ds-red-700 · Changes with the theme

On dark

Text on surfaces that stay dark in both themes, the footer and primary buttons, so both halves sit on ink.

--c-on-darkButton/Typography/PrimaryLight #ffffffccDark #ffffffcc--ds-white-800 · Same in both
--c-on-dark-3Chalk/200, footer legal lineLight #ffffff33Dark #ffffff33--ds-white-200 · Same in both

Opacity scale

--op-* is ink in Light and white in Dark, so a percentage of the text color works in both.

--op-000 Light #0e0f1000Dark #ffffff00--ds-black-000 · Changes with the theme
--op-050 Light #0e0f100dDark #ffffff0d--ds-black-050 · Changes with the theme
--op-100 Light #0e0f101aDark #ffffff1a--ds-black-100 · Changes with the theme
--op-150 Light #0e0f1026Dark #ffffff26--ds-black-150 · Changes with the theme
--op-200 Light #0e0f1033Dark #ffffff33--ds-black-200 · Changes with the theme
--op-250 Light #0e0f1040Dark #ffffff40--ds-black-250 · Changes with the theme
--op-300 Light #0e0f104dDark #ffffff4d--ds-black-300 · Changes with the theme
--op-350 Light #0e0f1059Dark #ffffff59--ds-black-350 · Changes with the theme
--op-400 Light #0e0f1066Dark #ffffff66--ds-black-400 · Changes with the theme
--op-450 Light #0e0f1073Dark #ffffff73--ds-black-450 · Changes with the theme
--op-500 Light #0e0f1080Dark #ffffff80--ds-black-500 · Changes with the theme
--op-550 Light #0e0f108cDark #ffffff8c--ds-black-550 · Changes with the theme
--op-600 Light #0e0f1099Dark #ffffff99--ds-black-600 · Changes with the theme
--op-650 Light #0e0f10a6Dark #ffffffa6--ds-black-650 · Changes with the theme
--op-700 Light #0e0f10b2Dark #ffffffb2--ds-black-700 · Changes with the theme
--op-750 Light #0e0f10bfDark #ffffffbf--ds-black-750 · Changes with the theme
--op-800 Light #0e0f10ccDark #ffffffcc--ds-black-800 · Changes with the theme
--op-850 Light #0e0f10d9Dark #ffffffd9--ds-black-850 · Changes with the theme
--op-900 Light #0e0f10e5Dark #ffffffe5--ds-black-900 · Changes with the theme
--op-950 Light #0e0f10f2Dark #fffffff2--ds-black-950 · Changes with the theme
--op-1000 Light #0e0f10Dark #ffffff--ds-black-1000 · Changes with the theme

Type + Size Tokens

The Figma Typography and Size collections as the site ships them: every font, size, line height, gap and inset, read from the stylesheet at each breakpoint.

Type

44 tokens. Numbers are px at each breakpoint; anything computed shows its formula.

Token	390	768	1200	Figma / note
--f-display	"Clash Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif	"Clash Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif	"Clash Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif
--f-sans	"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif	"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif	"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
--f-mono	"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace	"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace	"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace
--fs-hero	40	72	72
--lh-hero	48	80	80	Title Header/MD (Title Hero above 390)
--title-min	40	40	99	the ramp's floor at this width
--title-ramp	min(11.28vw, 7.8125rem)	min(calc(80px + (100vw - 768px) * 0.037), 7.8125rem)	99
--title-scale	1	1	1	the height rules' only lever
--fs-page-title	max(var(--title-min), calc(var(--title-ramp) * var(--title-scale)))	max(var(--title-min), calc(var(--title-ramp) * var(--title-scale)))	max(var(--title-min), calc(var(--title-ramp) * var(--title-scale)))
--lh-page-title	1.18	1.1	1.0808
--lead-max	768	768	1064
--fs-lead	16	22	24
--lh-lead	30	38	40	Body/MD: a step over Body/SM, the body text here
--fs-card-lg	24	32	32
--lh-card-lg	36	40	40	Card Header/SM
--fs-card	24	24	24
--lh-card	36	36	36	Card Header/SM
--fs-body	14	16	16
--lh-body	24	30	30	Body/SM
--ps-lead	12	14	16	Title Body paragraph spacing
--fs-intro	32	32	48
--lh-intro	40	40	56	`headers` title, Title Header/SM
--fs-skill-title	24	24	32
--lh-skill-title	36	36	40	Card Header/SM
--fs-cta	24	32	40
--lh-cta	36	40	48	closing CTA, Card Header/SM
--fw-cta	500	600	600
--fs-quote2	32	32	40
--lh-quote2	40	40	48	Title Header/SM
--fs-stat2	32	40	48
--lh-stat2	40	48	56	Title Header/SM
--fs-stat-label	20	24	24
--lh-stat-label	30	34	34	Card Subheader/SM
--fs-strip-value	32	40	48
--lh-strip-value	40	48	56	Title Header/SM
--fs-strip-label	20	24	24
--lh-strip-label	30	34	34	Card Subheader/SM
--ps-quote	20	20	24	Title Header/SM paragraph spacing
--fs-h3	24	32	40
--lh-h3	36	40	48
--fs-skill	18	20	32
--lh-skill	24	30	40
--fs-stat	48	64	72
--lh-stat	56	72	80

Size + Layout

57 tokens. Numbers are px at each breakpoint; anything computed shows its formula.

Token	390	768	1200	Figma / note
--page-max	1440	1440	1440	widest a page's content (and a bleed figure) gets
--pad	18	32	64
--scroll-edge	48	48	48
--nav-pad-y	18	24	24
--nav-h	calc(40px + 2 * var(--nav-pad-y) + var(--safe-t))	calc(40px + 2 * var(--nav-pad-y) + var(--safe-t))	calc(40px + 2 * var(--nav-pad-y) + var(--safe-t))
--radius	4	4	4
--band-y	40	56	80	block padding of a page band
--band-gap	40	56	80	rhythm between items inside a band
--rule-space	32	56	80	divider line → its label
--hero-foot-gap	calc(var(--band-gap) * 1.5)	calc(var(--band-gap) * 1.5)	calc(var(--band-gap) * 1.5)
--arcade-end	64	64	104	404 hero → footer, Figma 390 and 768
--grid-gap	32	32	48
--grid-row-gap	56	56	80
--card-text-pr	18	32	2	Figma project details: 18 on phones, 32 at 768, 2 from 1200
--footer-pad-y	32	56	56
--footer-pad-b	32	56	56
--footer-gap	32	56	80
--footer-cta-gap	24	48	48
--cta-h	48	48	56	medium button on phones and tablets
--cta-pad-x	20	20	20	every button, Space/500
--cta-icon	22	22	24
--label-gap	40	56	48	section label → its content (Figma: 40 / 56 / 48)
--step-gap	24	32	48	step number → step text
--contact-btn-px	18	32	24
--split-gap	24	32	48
--aside-gap	40	56	64
--meta-gap	8	24	48	phones: space-between does the spacing, so the three facts Figma sets on one row still fit
--panel-gap	16	28	32
--panel-row-gap	4	16	24	icon sits above the text at 390
--panel-icon-pad	8	8	16
--panel-icon	16	24	24
--process-gap	40	56	48	heading over a card row (DSW "Process")
--cards-gap	40	56	24	the same, where the 1200 frame tightens to 24
--skill-gap	24	32	40
--card-pad	24	32	48
--marquee-tile	95	152	200
--marquee-duration	32s	52s	68s
--ease	cubic-bezier(0.22, 0.61, 0.36, 1)	cubic-bezier(0.22, 0.61, 0.36, 1)	cubic-bezier(0.22, 0.61, 0.36, 1)
--dur	220ms	220ms	220ms
--dur-fast	150ms	150ms	150ms	glyph swaps and the quickest fades
--dur-short	200ms	200ms	200ms	exits, and small things arriving
--dur-slow	300ms	300ms	300ms	what the reader opens: scrim, notice, picture
--dur-long	400ms	400ms	400ms	explanatory motion: the process map, the edge blur
--dur-light	500ms	500ms	500ms	statement words sharpening, the process map's nodes
--dur-enter	550ms	550ms	550ms	the load-in, block by block and word by word
--dur-reveal	600ms	600ms	600ms	blocks rising in as they scroll into view
--dur-settle	900ms	900ms	900ms	the slowest arrivals: the About photo, the hatch
--dur-menu-in	240ms	240ms	240ms
--dur-menu-out	180ms	180ms	180ms
--press-dur	160ms	160ms	160ms
--press-ease	ease-out	ease-out	ease-out
--arrow-rotate	45deg	45deg	45deg
--arrow-dur	260ms	260ms	260ms
--arrow-ease	cubic-bezier(0.22, 1, 0.36, 1)	cubic-bezier(0.22, 1, 0.36, 1)	cubic-bezier(0.22, 1, 0.36, 1)
--ease-out-expo	cubic-bezier(0.16, 1, 0.3, 1)	cubic-bezier(0.16, 1, 0.3, 1)	cubic-bezier(0.16, 1, 0.3, 1)
--ease-enter	cubic-bezier(0.33, 1, 0.68, 1)	cubic-bezier(0.33, 1, 0.68, 1)	cubic-bezier(0.33, 1, 0.68, 1)
--ease-overshoot	cubic-bezier(0.34, 1.56, 0.64, 1)	cubic-bezier(0.34, 1.56, 0.64, 1)	cubic-bezier(0.34, 1.56, 0.64, 1)	the sun's rays and the menu X

Typography

Three typefaces: Clash Display for headings, Inter for reading, Geist Mono for labels and code. Every text style in the Figma library is set below in its own style, then the classes the site ships and how they step up at each breakpoint.

Title Hero

XLClash Display Semibold
99 / 107
Crafting Growth
LGClash Display Semibold
72 / 80
Crafting Growth
MDClash Display Semibold
64 / 72
Crafting Growth
SMClash Display Semibold
44 / 52
Crafting Growth

Title Header

LGClash Display Semibold
48 / 56
Designing the Feed
MDClash Display Semibold
40 / 48
Designing the Feed
SMClash Display Semibold
32 / 40
Designing the Feed
XSClash Display Semibold
28 / 36
Designing the Feed

Title Body

LGInter Regular
24 / 40
I figure out what to build, then I help ship it.
MDInter Regular
22 / 38
I figure out what to build, then I help ship it.
SMInter Regular
18 / 34
I figure out what to build, then I help ship it.

Card Header

LGClash Display Medium
40 / 52
A Fractured Web Presence
MDClash Display Medium
32 / 40
A Fractured Web Presence
SMClash Display Medium
24 / 36
A Fractured Web Presence

Card Subheader

LGClash Display Medium
28 / 38
A Team of Two, Plus Partners
MDClash Display Medium
24 / 34
A Team of Two, Plus Partners
SMClash Display Medium
20 / 30
A Team of Two, Plus Partners
XSClash Display Medium
18 / 24
A Team of Two, Plus Partners

Body

XLInter Regular
20 / 34
Seed-stage startups and a $2.8 billion retailer. Different rooms, same job.
MDInter Regular
16 / 30
Seed-stage startups and a $2.8 billion retailer. Different rooms, same job.
SMInter Regular
14 / 24
Seed-stage startups and a $2.8 billion retailer. Different rooms, same job.
XSInter Regular
13 / 20
Seed-stage startups and a $2.8 billion retailer. Different rooms, same job.
2XSInter Regular
12 / 22
Seed-stage startups and a $2.8 billion retailer. Different rooms, same job.

Body Strong

XLInter Medium
20 / 34
Seed-stage startups and a $2.8 billion retailer.
LGInter Medium
18 / 26
Seed-stage startups and a $2.8 billion retailer.
MDInter Medium
16 / 30
Seed-stage startups and a $2.8 billion retailer.
SMInter Medium
14 / 24
Seed-stage startups and a $2.8 billion retailer.
XSInter Medium
13 / 20
Seed-stage startups and a $2.8 billion retailer.
2XSInter Medium
12 / 22
Seed-stage startups and a $2.8 billion retailer.

Body Italic

XLInter Italic
20 / 34
Seed-stage startups and a $2.8 billion retailer.
MDInter Italic
16 / 30
Seed-stage startups and a $2.8 billion retailer.
SMInter Italic
14 / 24
Seed-stage startups and a $2.8 billion retailer.
2XSInter Italic
12 / 22
Seed-stage startups and a $2.8 billion retailer.

Code

LGGeist Mono Regular
20 / 34
--c-text: var(--op-900);
MDGeist Mono Regular
16 / 30
--c-text: var(--op-900);
SMGeist Mono Regular
14 / 24
--c-text: var(--op-900);
XSGeist Mono Regular
13 / 18
--c-text: var(--op-900);
2XSGeist Mono Regular
12 / 22
--c-text: var(--op-900);
3XSGeist Mono Regular
11 / 16
--c-text: var(--op-900);
4XSGeist Mono Regular
10 / 16
--c-text: var(--op-900);

Code Strong

LGGeist Mono Medium
20 / 34
--c-text: var(--op-900);
MDGeist Mono Medium
16 / 30
--c-text: var(--op-900);
SMGeist Mono Medium
14 / 24
--c-text: var(--op-900);
XSGeist Mono Medium
13 / 18
--c-text: var(--op-900);
2XSGeist Mono Medium
12 / 22
--c-text: var(--op-900);
3XSGeist Mono Medium
11 / 16
--c-text: var(--op-900);
4XSGeist Mono Medium
10 / 16
--c-text: var(--op-900);

Eyebrow

2XSGeist Mono Regular
12 / 22
02 / More Work

Button

LGInter Regular
22 / 30
View all work
MDInter Regular
16 / 24
View all work
XSInter Regular
14 / 22
View all work

Button Strong

LGInter Medium
22 / 30
View all work
MDInter Medium
16 / 24
View all work
SMInter Medium
15 / 15
View all work
XSInter Medium
14 / 22
View all work

Button Italic

LGInter Italic
22 / 30
View all work
MDInter Italic
16 / 24
View all work
XSInter Italic
14 / 22
View all work

Type ramp

Size / line height in px at each breakpoint, measured from the rendered classes. Clash Display sets display and headings, Inter sets body and lead, Geist Mono sets .t-mono. .t-display stays one step under the page title, so the title always leads.

Role	Class	390	768	1200
Display	.t-display	40 / 48	72 / 80	72 / 80
Heading 3	.t-h3	24 / 36	32 / 40	40 / 48
Card title	.work-card__title	24 / 36	24 / 36	24 / 36
Skill / step title	.skill-row__title	24 / 36	24 / 36	32 / 40
Lead	.t-lead	16 / 30	22 / 38	24 / 40
Body	.t-body	14 / 24	16 / 30	16 / 30
Stat value	.stat-card__value	48 / 56	64 / 72	72 / 80
Eyebrow	.t-eyebrow	12 / 22	12 / 22	12 / 22
Section title	.intro__title	32 / 40	32 / 40	48 / 56
Closing CTA	.cta-close__title	24 / 36	32 / 40	40 / 48
Footer title	.footer__title	24 / 36	32 / 40	32 / 40
Case quote	.cs-quote__body	32 / 40	32 / 40	40 / 48
Case stat value	.cs-stat__value	32 / 40	40 / 48	48 / 56
Case stat label	.cs-stat__label	20 / 30	24 / 34	24 / 34
Skill number	.skill__num	24 / 36	24 / 36	32 / 40
Mono	.t-mono	10 / 16	10 / 16	10 / 16

Site classes, live

The classes above, set at your current width. Resize the window to watch them step between breakpoints.

01 / Eyebrow

Crafting Growth

A Heading Three, for Section Statements

The lead sits under a display heading and carries the one-sentence summary.

Body copy runs at a tighter line height than the lead and is capped by its container rather than a max-width.

Page title

The largest type on every page, and the same size on every page at a given width. It scales with the width on phones and tablets, and a short tablet window can step it down so the next section still peeks in. From 1200 it holds at Figma's Title Hero/XL, 99/107. Longer titles wrap to more lines instead of shrinking. tools/check_titles.py sweeps 320 to 1920px and fails any title that ends on a short last line.

Token	390	768	1200+
--fs-page-title	44	80	99
--lh-page-title	1.18	1.1	1.0808

Spacing

Every size in the Figma library drawn at true size, then the rhythm tokens the site is laid out with.

Space

49 steps from the Figma Size collection, drawn at true size. 2px apart up to 88, then 96, 104 and 160. Negative steps for overlaps: -1, -2, -4, -8, -12, -16, -24, -32, -40, -48.

00
1025
2050
4100
6150
8200
10250
12300
14350
16400
18450
20500
22550
24600
26650
28700
30750
32800
34850
36900
38950
401000
421050
441100
461150
481200
501250
521300
541350
561400
581450
601500
621550
641600
661650
681700
701750
721800
741850
761900
781950
802000
822050
842100
862150
882200
962400
1042600
1604000

Radius

Radius/0000px
Radius/0502px
Radius/1004px · site --radius
Radius/2008px
Radius/40016px
Radius/FullFull

Stroke

Stroke/Border1px
Stroke/Focus Ring2px

Icon

Icon/Small24px
Icon/Medium32px
Icon/Large40px

Rhythm

The spacing tokens the site is built on, at 390, 768 and 1200. Rhythm lives here, not in component margins: change a token and every page retunes.

3907681200
--padPage gutter183264
--grid-gapWork grid column323248
--grid-row-gapWork grid row565680
--skill-gapSkill and step rows243240
--card-padCard and panel inset243248
--meta-gapProject meta columns82448
--nav-pad-yNav vertical pad182424
--marquee-tileMarquee logo tile95152200

Breakpoints + Motion

The three frames the site is designed at, and every duration and easing curve it moves with.

Breakpoints

Two media queries for three designed frames, drawn to scale against the 1200 frame.

390BaseMobile first: no query.
768Tabletmin-width: 768px
1200Desktopmin-width: 1200px. Content caps at --page-max, 1440px.

Duration

Nine durations, drawn against 400ms. Nothing in the interface takes longer to answer a click.

--dur-fastGlyph swaps, quick fades150ms
--press-durPress160ms
--dur-menu-outPhone menu out180ms
--dur-shortExits, small arrivals200ms
--durHover, color, fades220ms
--dur-menu-inPhone menu in240ms
--arrow-durArrows turning260ms
--dur-slowOpening a scrim, notice or picture300ms
--dur-longProcess map, edge blur400ms
--dur-lightStatement words, process map nodes500ms
--dur-enterPage load-in550ms
--dur-revealScroll reveals600ms
--dur-settleAbout photo, hatch900ms

Easing

Every curve the site uses, plotted. Hover or focus a card to watch a dot travel on it, slowed to 900ms so the shape reads.

--easeEvery hover and color changecubic-bezier(0.22, 0.61, 0.36, 1)
--arrow-easeArrows, links, and everything that opens or closescubic-bezier(0.22, 1, 0.36, 1)
--ease-out-expoScroll reveals, and the theme and menu icons settlingcubic-bezier(0.16, 1, 0.3, 1)
--ease-overshootThe overshoot on the sun and the menu Xcubic-bezier(0.34, 1.56, 0.64, 1)

Elevation

Two shadows, both from the library’s effect styles. Hover lifts a button; press sets it back down.

Elevation / Hover

Figma effect style

0 2px 3px at 6%, 0 8px 12px at 12%.

Elevation / Pressed

Figma effect style

0 1px 1px at 4%.

Actions

Every way to act: buttons, icon buttons, links, and the previous / next pair that closes a case study.

Button

Figma button · 2006:9915

.btn .btn--accent / --primary / --tertiary / --secondary

Accent for the main action, primary beside it, tertiary for quiet choices. Secondary is in the library but on no page right now. Hover lifts with Elevation / Hover; press settles to Elevation / Pressed and the arrow steps away.

Get in touch View all work

<a class="btn btn--accent btn--cta" href="/contact">
  <span>Get in touch</span>
  <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
</a>
<button class="btn btn--primary" type="button" data-copy="zachblevins.design@gmail.com">
  <span data-copy-label>Copy email</span>
  <span class="icon icon--copy" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-copy"></use></svg></span>
  <span class="visually-hidden" aria-live="polite" data-copy-status></span>
</button>
<a class="btn btn--tertiary btn--cta" href="/work">
  <span>View all work</span>
  <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
</a>
<button class="btn btn--tertiary cookie-notice__btn" type="button" data-cookie-choice="declined">Decline</button>

Icon Button

Figma button-icon · 2006:10024

.tool-btn .tool-btn--tint

Icon-only, 40px square, 4px corner. The theme toggle takes the tinted ground; the menu and close buttons sit bare.

<button class="tool-btn tool-btn--tint" type="button" data-theme-toggle aria-pressed="false" aria-label="Switch to dark theme">
  <span class="icon icon--20 icon--ink theme-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><mask id="theme-bite"><rect width="24" height="24" fill="#fff"/><circle class="theme-icon__bite" cx="17" cy="7" r="6" fill="#000"/></mask><clipPath id="theme-inside"><circle class="theme-icon__core" cx="12" cy="12" r="9"/></clipPath><g class="theme-icon__body"><g mask="url(#theme-bite)"><circle class="theme-icon__core theme-icon__rim" cx="12" cy="12" r="9"/></g><g clip-path="url(#theme-inside)"><circle class="theme-icon__bite" cx="17" cy="7" r="6"/></g></g><path class="theme-icon__moon" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/><g class="theme-icon__star"><path d="M20 3v4"/><path d="M22 5h-4"/></g><g class="theme-icon__rays"><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></g></svg></span>
</button>
<button class="tool-btn nav__menu-btn" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">
  <span class="icon icon--20 icon--ink menu-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><path class="menu-icon__bar menu-icon__bar--a" d="M4 9h16"/><path class="menu-icon__bar menu-icon__bar--b" d="M4 15h16"/></svg></span>
</button>
<button class="tool-btn" type="button" data-menu-close aria-label="Close menu">
  <span class="icon icon--20 icon--ink menu-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><path class="menu-icon__bar menu-icon__bar--a" d="M4 9h16"/><path class="menu-icon__bar menu-icon__bar--b" d="M4 15h16"/></svg></span>
</button>

Link

Figma link · 2132:489

.btn-text .social-link

A text link with a trailing arrow. The hero uses it for the next page; the menu and footer use it for socials.

Find out how

<a class="btn-text" href="/approach">
  <span>Find out how</span>
  <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
</a>
<a class="social-link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>

Nav Button

Figma nav-button · 2598:306

.nav-btn

A labelled link on the nav pill's frosted ground, with a glyph on either side or both. A trailing arrow turns on hover; a leading one steps back. Contact me in the phone nav, and the way back to zachblevins.com in this page's top bar, arrow alone at 768.

Contact me

<a class="nav-btn nav__cta" href="/contact"><span>Contact me</span><span class="icon icon--20" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>

Project Actions

Figma actions · 2194:2125

.cs-actions

Previous and next at the end of a case study. Stacked full width below 768.

<nav class="cs-actions" aria-label="Case studies">
  <a class="btn btn--tertiary btn--cta" href="/work-prizepicks"><span class="icon icon--flip" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span><span>Previous project</span></a>
  <a class="btn btn--primary btn--cta" href="/work-efuse"><span>Next project</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
</nav>

Navigation

The bar, its links and dropdown, and the full-screen menu below 768.

Top Nav

Figma main-nav · nav · nav-link · logo · 2095:1620 · 2203:583 · 2159:1740 · 2203:1443

.nav .nav__pill .nav__link .nav__logo

A frosted pill with the logo and links, the theme toggle on its own. The current page carries the selector bar; hover grows it in.

Contact me

<header class="nav">
  <div class="shell nav__bar">
    <nav class="nav__pill" aria-label="Main">
      <a class="nav__logo" href="/" aria-label="Zach Blevins, home"><svg viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false"><path d="M31.25 8.75V10.8926L13.5713 28.5713H28.5713V19.4648H26.4287L29.1064 16.7861L31.25 14.6426V31.25H8.75V29.6426L18.9277 19.4648H11.4287V22.6787L8.75 25.3574V8.75H31.25ZM11.4287 11.4287V16.7861H21.6064L26.9639 11.4287H11.4287Z"/></svg></a>
      <button class="tool-btn nav__menu-btn" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Open menu">
        <span class="icon icon--20 icon--ink menu-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><path class="menu-icon__bar menu-icon__bar--a" d="M4 9h16"/><path class="menu-icon__bar menu-icon__bar--b" d="M4 15h16"/></svg></span>
      </button>
      <ul class="nav__links">
        <li class="nav__item" data-dropdown>
          <a class="nav__link" href="/work">Work</a>
          <button class="nav__caret" type="button" aria-expanded="false" aria-controls="projects-menu" aria-label="Show projects">
            <span class="icon icon--16 icon--ink" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-chevron-right"></use></svg></span>
          </button>
          
        </li>
          <li><a class="nav__link" href="/about" aria-current="page">About me</a></li>
          <li><a class="nav__link" href="/approach">My approach</a></li>
          <li><a class="nav__link" href="/contact">Contact me</a></li>
      </ul>
    </nav>
    <div class="nav__end">
      <a class="nav-btn nav__cta" href="/contact"><span>Contact me</span><span class="icon icon--20" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
      <button class="tool-btn tool-btn--tint" type="button" data-theme-toggle aria-pressed="false" aria-label="Switch to dark theme">
        <span class="icon icon--20 icon--ink theme-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><mask id="theme-bite"><rect width="24" height="24" fill="#fff"/><circle class="theme-icon__bite" cx="17" cy="7" r="6" fill="#000"/></mask><clipPath id="theme-inside"><circle class="theme-icon__core" cx="12" cy="12" r="9"/></clipPath><g class="theme-icon__body"><g mask="url(#theme-bite)"><circle class="theme-icon__core theme-icon__rim" cx="12" cy="12" r="9"/></g><g clip-path="url(#theme-inside)"><circle class="theme-icon__bite" cx="17" cy="7" r="6"/></g></g><path class="theme-icon__moon" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/><g class="theme-icon__star"><path d="M20 3v4"/><path d="M22 5h-4"/></g><g class="theme-icon__rays"><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></g></svg></span>
      </button>
    </div>
  </div>

  
</header>

Figma menu · 2165:1836

.menu .dropdown

The Work dropdown: projects, socials and the legal line on a frosted panel.

<div class="menu dropdown" id="projects-menu" hidden>
  <ul class="menu__links" aria-label="Projects">
    <li><a class="menu__link" href="/work-prizepicks"><span>PrizePicks</span></a></li>
    <li><a class="menu__link" href="/work-dsw"><span>DSW Inc.</span></a></li>
    <li><a class="menu__link" href="/work-efuse"><span>efuse</span></a></li>
    <li><a class="menu__link" href="/work-erena"><span>erena</span></a></li>
    <li><a class="menu__link" href="/work-esportsgg"><span>esports.gg</span></a></li>
    <li><a class="menu__link" href="/work-sidekick"><span>sidekick</span></a></li>
  </ul>
  <div class="menu__foot">
    <div class="menu__social">
      <a class="social-link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
      <a class="social-link" href="https://dribbble.com/zachblevins" target="_blank" rel="noopener noreferrer"><span>Dribbble</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
      <a class="social-link" href="https://twitter.com/zblevins_" target="_blank" rel="noopener noreferrer"><span>X (Twitter)</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
      <a class="social-link" href="https://github.com/blev-commits" target="_blank" rel="noopener noreferrer"><span>GitHub</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
    </div>
    <p class="t-mono">&copy; Zach Blevins. All Rights Reserved 2026</p>
  </div>
</div>

Figma menu · 2165:1836

.menu .mobile-menu

Below 768 the same links fill the screen, Work folding open like a group.

<div class="menu mobile-menu" id="mobile-menu" role="dialog" aria-modal="true" aria-label="Menu" hidden>
  <div class="mobile-menu__head">
    <a class="nav__logo" href="/" aria-label="Zach Blevins, home"><svg viewBox="0 0 40 40" width="40" height="40" aria-hidden="true" focusable="false"><path d="M31.25 8.75V10.8926L13.5713 28.5713H28.5713V19.4648H26.4287L29.1064 16.7861L31.25 14.6426V31.25H8.75V29.6426L18.9277 19.4648H11.4287V22.6787L8.75 25.3574V8.75H31.25ZM11.4287 11.4287V16.7861H21.6064L26.9639 11.4287H11.4287Z"/></svg></a>
    <button class="tool-btn" type="button" data-menu-close aria-label="Close menu">
      <span class="icon icon--20 icon--ink menu-icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><path class="menu-icon__bar menu-icon__bar--a" d="M4 9h16"/><path class="menu-icon__bar menu-icon__bar--b" d="M4 15h16"/></svg></span>
    </button>
  </div>
  <nav class="mobile-menu__body" aria-label="Mobile">
    <button class="mobile-menu__link" type="button" data-work-toggle aria-expanded="false" aria-controls="mobile-projects">
      Work <span class="icon icon--20" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-chevron-right"></use></svg></span>
    </button>
    <ul class="menu__links" id="mobile-projects" hidden>
          <li><a class="menu__link" href="/work-prizepicks"><span>PrizePicks</span></a></li>
          <li><a class="menu__link" href="/work-dsw"><span>DSW Inc.</span></a></li>
          <li><a class="menu__link" href="/work-efuse"><span>efuse</span></a></li>
          <li><a class="menu__link" href="/work-erena"><span>erena</span></a></li>
          <li><a class="menu__link" href="/work-esportsgg"><span>esports.gg</span></a></li>
          <li><a class="menu__link" href="/work-sidekick"><span>sidekick</span></a></li>
    </ul>
    <div class="mobile-menu__primary">
        <a class="mobile-menu__link" href="/about" aria-current="page">About me</a>
        <a class="mobile-menu__link" href="/approach">Approach</a>
        <a class="mobile-menu__link" href="/contact">Contact me</a>
    </div>
  </nav>
  <div class="menu__foot">
    <div class="menu__social">
          <a class="social-link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
          <a class="social-link" href="https://dribbble.com/zachblevins" target="_blank" rel="noopener noreferrer"><span>Dribbble</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
          <a class="social-link" href="https://twitter.com/zblevins_" target="_blank" rel="noopener noreferrer"><span>X (Twitter)</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
          <a class="social-link" href="https://github.com/blev-commits" target="_blank" rel="noopener noreferrer"><span>GitHub</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a>
    </div>
    <p class="t-mono">&copy; Zach Blevins. All Rights Reserved 2026</p>
  </div>
</div>

Headers + Dividers

How a section starts: the title header, the section header, and the rules and labels between them.

Title Header

Figma headers / type=title · 2065:1718

.intro .intro__title

An eyebrow, a section title and a lead. Opens every band on the main pages.

The Short Version

I Figure Out What to Build, Then I Help Ship It.

Seed-stage startups and a $2.8 billion retailer. Different rooms, same job. Find what’s actually broken, talk to the people living with it, and leave the team something they can keep building on. Here’s what that looked like.

<div class="intro">
  <p class="t-eyebrow">The Short Version</p>
  <h2 class="intro__title">I Figure Out What to Build, Then I Help <span class="nb">Ship It.</span></h2>
  <p class="t-lead">Seed-stage startups and a $2.8 billion retailer. Different rooms, same job. Find what&rsquo;s actually broken, talk to the people living with it, and leave the team something they can keep building on. Here&rsquo;s what that looked like.</p>
</div>

Section Header

Figma headers / type=section · 2065:1718

.cs-sub .skill__title

The case study version: smaller title, body copy in place of a lead.

The Hurdles

<div class="cs-sub">
  <p class="t-eyebrow">The Hurdles</p>
</div>

Divider Row

Figma divider-row · 2182:276

.section-label

A rule with a numbered eyebrow on the left and a value on the right.

02 / More Work

2015 / 2023

<div class="section-label">
  <h2 class="t-eyebrow" id="more-work-label">02 / More Work</h2>
  <p class="t-eyebrow">2015 / 2023</p>
</div>

Project Notes

Figma divider-items / type=project-notes · 2182:277

.cs-meta

The hero meta row: Company, Role, Duration, Industry, Website. It wraps, so a fifth item never squeezes the rest.

Company: DSW Inc.
Role: UX Designer
Duration: 2015–2017
Industry: Retail & Ecommerce
Website: DSW.com

<dl class="cs-meta">
  <div class="cs-meta__item"><dt class="t-eyebrow">Company</dt><dd class="cs-meta__value">DSW Inc.</dd></div>
  <div class="cs-meta__item"><dt class="t-eyebrow">Role</dt><dd class="cs-meta__value">UX Designer</dd></div>
  <div class="cs-meta__item"><dt class="t-eyebrow">Duration</dt><dd class="cs-meta__value">2015–2017</dd></div>
  <div class="cs-meta__item"><dt class="t-eyebrow">Industry</dt><dd class="cs-meta__value">Retail &amp; Ecommerce</dd></div>
  <div class="cs-meta__item"><dt class="t-eyebrow">Website</dt><dd><a class="btn-text cs-meta__value" href="https://www.dsw.com/" target="_blank" rel="noopener noreferrer"><span>DSW.com</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></dd></div>
</dl>

Cards

Everything that repeats. Each collection wraps on a minimum width, so the column count comes from the space, not a breakpoint.

Work Card

Figma card-work · 2077:692

.work-card in .work-grid

Image, title and company. The whole card is the link.

Designing the Feed, Profiles, and Tail Flow

+56% tailed lineups, +15% WoW retention

PrizePicks

<div class="work-grid"><a class="work-card" href="/work-prizepicks">
  <div class="work-card__media">
    <img src="assets/img/prizepicks-feature.jpg" srcset="assets/img/prizepicks-feature-640.webp 640w, assets/img/prizepicks-feature-768.webp 768w, assets/img/prizepicks-feature-960.webp 960w, assets/img/prizepicks-feature-1280.webp 1280w, assets/img/prizepicks-feature-1920.webp 1920w" sizes="(min-width: 1568px) 704px, (min-width: 768px) 50vw, 100vw" alt="PrizePicks wordmark on a deep purple wave pattern" width="1920" height="1080">
  </div>
  <div class="work-card__foot">
    <div class="work-card__text">
      <h3 class="work-card__title">Designing the Feed, Profiles, and Tail Flow</h3>
      <p class="work-card__result">+56% tailed lineups, +15% WoW retention</p>
      <p class="work-card__company">PrizePicks</p>
    </div>
    <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
  </div>
</a></div>

Info Card

Figma card-info · 2076:680

.cs-cards .cs-card .cs-card--dark

Bordered text cards. The goal card turns to ink with an accent title.

A Fractured Web Presence:

Desktop and m-dot ran as separate properties, splitting SEO equity and letting the two experiences drift. Every feature had to be built and maintained twice.

An App That Could Not Sell:

Shopping was not possible in it, and most reviewers never got past the launch screen. Anyone who did hit friction the moment they moved between the app and the site.

A Five-Month Scope Shift:

A native iOS app was requested five months from launch. Two products now had to ship on a timeline built for one, forcing tight MLP scoping alongside the Angular rebuild.

Goal:

One unified platform, replacing a split that cost twice to maintain.

<div class="cs-cards">
  <div class="cs-card">
    <h3 class="skill__title">A Fractured Web Presence:</h3>
    <p class="skill__detail">Desktop and m-dot ran as separate properties, splitting SEO equity and letting the two experiences drift. Every feature had to be built and maintained twice.</p>
  </div>
  <div class="cs-card">
    <h3 class="skill__title">An App That Could Not Sell:</h3>
    <p class="skill__detail">Shopping was not possible in it, and most reviewers never got past the launch screen. Anyone who did hit friction the moment they moved between the app and the site.</p>
  </div>
  <div class="cs-card">
    <h3 class="skill__title">A Five-Month Scope Shift:</h3>
    <p class="skill__detail">A native iOS app was requested five months from launch. Two products now had to ship on a timeline built for one, forcing tight MLP scoping alongside the Angular rebuild.</p>
  </div>
  <div class="cs-card cs-card--dark">
    <h3 class="skill__title">Goal:</h3>
    <p class="skill__detail">One unified platform, replacing a split that cost twice to maintain.</p>
  </div>
</div>

Stat Card

Figma card-stat · 2060:908

.cs-stats .cs-stat

A value, a label and a line of context, in bordered cards.

$2.8B

Total Company Revenue

A new company high, closing the year on record digital performance.

1.5m

App Downloads in Year One

A product with nothing to inherit, reaching scale from a standing start.

+26%

Digital Demand Growth

The strongest growth in digital demand DSW had seen in nine years.

4.8

iOS App Rating

Ranked #88 in Shopping, across 63.4K reviews.

<div class="cs-stats">
  <div class="cs-stat"><p class="cs-stat__value">$2.8B</p><div class="cs-stat__text"><p class="cs-stat__label">Total Company Revenue</p><p class="skill__detail">A new company high, closing the year on record digital performance.</p></div></div>
  <div class="cs-stat"><p class="cs-stat__value">1.5m</p><div class="cs-stat__text"><p class="cs-stat__label">App Downloads in Year One</p><p class="skill__detail">A product with nothing to inherit, reaching scale from a standing start.</p></div></div>
  <div class="cs-stat"><p class="cs-stat__value">+26%</p><div class="cs-stat__text"><p class="cs-stat__label">Digital Demand Growth</p><p class="skill__detail">The strongest growth in digital demand DSW had seen in nine years.</p></div></div>
  <div class="cs-stat"><p class="cs-stat__value">4.8</p><div class="cs-stat__text"><p class="cs-stat__label">iOS App Rating</p><p class="skill__detail">Ranked #88 in Shopping, across 63.4K reviews.</p></div></div>
</div>

At a Glance

Figma stat-strip · 2379:12

.cs-glance .cs-statline .cs-rows

At a Glance: a ruled stat strip over ruled title and detail rows, no boxes. On a locked case study it hides once the full story is open.

2

Person Design Team

70%

Site Pages I Designed

100%

App Designed In-House

The Website

IBM iX joined for the early concept work and designed about 30% of the pages. I carried that system through the rest.
The Testing

Lextant ran most of the website’s usability testing, and I was in the room for it. The app’s testing I ran myself.
The App

Ours. I designed it in-house and led its user research, from the first studies to the sessions that shaped what shipped.

<div class="cs-glance">
  <div class="cs-statline">
    <div class="cs-statline__item"><p class="cs-stat__value">2</p><p class="cs-stat__label">Person Design Team</p></div>
    <div class="cs-statline__item"><p class="cs-stat__value">70%</p><p class="cs-stat__label">Site Pages I Designed</p></div>
    <div class="cs-statline__item"><p class="cs-stat__value">100%</p><p class="cs-stat__label">App Designed In-House</p></div>
  </div>
  <ul class="skills cs-rows">
    <li class="skill-row">
      <h3 class="skill-row__title">The Website</h3>
      <p class="skill-row__detail">IBM iX joined for the early concept work and designed about 30% of the pages. I carried that system through the rest.</p>
    </li>
    <li class="skill-row">
      <h3 class="skill-row__title">The Testing</h3>
      <p class="skill-row__detail">Lextant ran most of the website&rsquo;s usability testing, and I was in the room for it. The app&rsquo;s testing I ran myself.</p>
    </li>
    <li class="skill-row">
      <h3 class="skill-row__title">The App</h3>
      <p class="skill-row__detail">Ours. I designed it in-house and led its user research, from the first studies to the sessions that shaped what shipped.</p>
    </li>
  </ul>
</div>

Panel

Figma card-panel · panel-row · 2060:937 · 2066:1849

.cs-panel .cs-panel__row

A bordered panel of ruled rows for testing results and mechanics.

Cognitive Load

Neutral / Unchanged

Rewards and store features sat alongside the shopping flow without slowing it down.

Loyalty Visibility

Positive Signal

Testers expected points and offers surfaced during browsing, not after checkout.

<div class="cs-panel">
  <div class="cs-panel__cell">
    <p class="t-eyebrow">Cognitive Load</p>
    <div class="cs-panel__row">
      <div class="cs-panel__text">
        <h4 class="skill__title">Neutral / Unchanged</h4>
        <p class="skill__detail">Rewards and store features sat alongside the shopping flow without slowing it down.</p>
      </div>
    </div>
  </div>
  <hr class="cs-rule" aria-hidden="true">
  <div class="cs-panel__cell">
    <p class="t-eyebrow">Loyalty Visibility</p>
    <div class="cs-panel__row">
      <div class="cs-panel__text">
        <h4 class="skill__title">Positive Signal</h4>
        <p class="skill__detail">Testers expected points and offers surfaced during browsing, not after checkout.</p>
      </div>
    </div>
  </div>
</div>

Result Cards

Figma stat-cards · stat-card · 2323:906 · 2323:758

.stat-cards .stat-card

The joined result cards on About. A card that links somewhere is clickable all over and hatches on hover.

PrizePicks

+56%

Tailed Lineups

The first social feed, for 20 million accounts. I led the design. Gross handle up 1.9%.

Read the case study

HubiFi · 2025 to Now

3x

ARR, $1M to $3M

I was the only designer, from the first screen to the sales deck.

HubiFi

$9.5M

Series A

Then I built the decks and demos for the raise.

READY Robotics

$24M

Series B

At READY Robotics, the interface work I led was critical to closing it.

<div class="stat-cards stat-cards--joined">
  <div class="stat-card hatch">
    <p class="t-eyebrow">PrizePicks</p>
    <p class="stat-card__value">+56%</p>
    <p class="stat-card__label">Tailed Lineups</p>
    <p class="stat-card__text">The first social feed, for 20 million accounts. I led the design. Gross handle up 1.9%.</p>
    <a class="btn btn--primary stat-card__link" href="/work-prizepicks">
      <span>Read the case study</span>
      <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
    </a>
  </div>
  <div class="stat-card hatch">
    <p class="t-eyebrow">HubiFi &middot; 2025 to Now</p>
    <p class="stat-card__value">3x</p>
    <p class="stat-card__label">ARR, $1M to $3M</p>
    <p class="stat-card__text">I was the only designer, from the first screen to the sales deck.</p>
  </div>
  <div class="stat-card hatch">
    <p class="t-eyebrow">HubiFi</p>
    <p class="stat-card__value">$9.5M</p>
    <p class="stat-card__label">Series A</p>
    <p class="stat-card__text">Then I built the decks and demos for the raise.</p>
  </div>
  <div class="stat-card hatch">
    <p class="t-eyebrow">READY Robotics</p>
    <p class="stat-card__value">$24M</p>
    <p class="stat-card__label">Series B</p>
    <p class="stat-card__text">At READY Robotics, the interface work I led was critical to closing it.</p>
  </div>
</div>

Image + Quote

Pictures and the words around them.

Image

Figma image · 2057:76

.cs-figure

A 16:9 image with a right-aligned mono caption. Click to open it full screen.

The same DSW product page on desktop and on the m-dot site — Fig 1.0. The same product page on desktop and m-dot. Two codebases, two content updates, and SEO equity split between them.

<figure class="cs-figure">
  <img src="assets/img/work/dsw/fig1-0.jpg" srcset="assets/img/work/dsw/fig1-0-640.webp 640w, assets/img/work/dsw/fig1-0-768.webp 768w, assets/img/work/dsw/fig1-0-1024.webp 1024w, assets/img/work/dsw/fig1-0-1440.webp 1440w, assets/img/work/dsw/fig1-0-1920.webp 1920w" sizes="(min-width: 1568px) 1440px, 100vw" alt="The same DSW product page on desktop and on the m-dot site" width="1920" height="1080" loading="lazy" decoding="async">
  <figcaption>Fig 1.0. The same product page on desktop and m-dot. Two codebases, two content updates, and SEO equity split between them.</figcaption>
</figure>

Image Split

Figma image-split · 2213:655

.cs-split .cs-split--image-first

Text and image side by side from 1200, stacked below. The image side can lead.

My Part

A Team of Two, Plus Partners

Design was my manager and me. I did the visual lifting on both products, with partners where the website needed scale.

<div class="cs-split">
  <div class="cs-sub">
    <p class="t-eyebrow">My Part</p>
    <h3 class="skill__title">A Team of Two, Plus Partners</h3>
    <div class="cs-sub__body">
      <p class="skill__detail">Design was my manager and me. I did the visual lifting on both products, with partners where the website needed scale.</p>
    </div>
  </div>
  <figure class="cs-figure">
    <img src="assets/img/work/dsw/fig1-0.jpg" srcset="assets/img/work/dsw/fig1-0-640.webp 640w, assets/img/work/dsw/fig1-0-768.webp 768w, assets/img/work/dsw/fig1-0-1024.webp 1024w, assets/img/work/dsw/fig1-0-1440.webp 1440w, assets/img/work/dsw/fig1-0-1920.webp 1920w" sizes="(min-width: 1568px) 704px, (min-width: 1200px) 50vw, 100vw" alt="The same DSW product page on desktop and on the m-dot site" width="1920" height="1080" loading="lazy" decoding="async">
    <figcaption>Fig 1.0. The same product page on desktop and m-dot. Two codebases, two content updates, and SEO equity split between them.</figcaption>
  </figure>
</div>

Quote

Figma quote · 2066:2098

.cs-quote

A pull quote with an optional attribution.

“Our total company revenues set a new high of $2.8 billion. We had positive footwear comp at Designer Shoe Warehouse for the third quarter in a row. We delivered our strongest growth in digital demand in the last 9 years.”

Roger Rawlins, CEO

<figure class="cs-quote">
  <blockquote class="cs-quote__body">
    <p>&ldquo;Our total company revenues set a new high of $2.8 billion. We had positive footwear comp at Designer Shoe Warehouse for the third quarter in a row. We delivered our strongest growth in digital demand in the last 9 years.&rdquo;</p>
  </blockquote>
  <figcaption class="cs-quote__attr">Roger Rawlins, CEO</figcaption>
</figure>

Skill + Step

Rows that read top to bottom.

Skill

Figma skill · 2182:291

.skills .skill-row

Title and detail side by side from 768, ruled between. On Home and About the titles light up word by word as they scroll in.

Finding the Real Problem

Usability testing / Research that never stops / Journey mapping / Information architecture / Knowing what to fix first
Designing the System

Wireframes / Figma component libraries / Design tokens / Interaction and visual design / Prototyping fast
Building It Live

Design engineer by default / Directing coding agents / Pixel-accurate live prototypes / Figma to front end / Web, iOS, whatever ships
Deciding What Gets Built

Working with founders / Roadmaps / Tying design to the business / Cutting the backlog down
Leading the Work

Creative direction / Managing contractors / Fixing the process / Getting teams pointed the same way
Building the Brand

Identity / Marketing sites / Collateral / Brand guidelines
Keeping Things Moving

Mentoring / Helping dev ship faster / The parts of agile that actually help / Working across teams

<ul class="skills skills--lit" aria-labelledby="what-i-do-label">
  <li class="skill-row">
    <h3 class="skill-row__title">Finding the Real Problem</h3>
    <p class="skill-row__detail">Usability testing / Research that never stops / Journey mapping / Information architecture / Knowing what to fix first</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Designing the System</h3>
    <p class="skill-row__detail">Wireframes / Figma component libraries / Design tokens / Interaction and visual design / Prototyping fast</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Building It Live</h3>
    <p class="skill-row__detail">Design engineer by default / Directing coding agents / Pixel-accurate live prototypes / Figma to front end / Web, iOS, whatever ships</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Deciding What Gets Built</h3>
    <p class="skill-row__detail">Working with founders / Roadmaps / Tying design to the business / Cutting the backlog down</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Leading the Work</h3>
    <p class="skill-row__detail">Creative direction / Managing contractors / Fixing the process / Getting teams pointed the same way</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Building the Brand</h3>
    <p class="skill-row__detail">Identity / Marketing sites / Collateral / Brand guidelines</p>
  </li>
  <li class="skill-row">
    <h3 class="skill-row__title">Keeping Things Moving</h3>
    <p class="skill-row__detail">Mentoring / Helping dev ship faster / The parts of agile that actually help / Working across teams</p>
  </li>
</ul>

Step

Figma step · 2081:800

.skill-list .skill--step

Numbered process rows on My Approach, ruled between. The number column sizes to its digits.

Step 1: Charting the Course

Before designing anything, I get clear on the objective. What’s the actual problem, who is it for, and what does success look like for the business. This is the product designer in me. I make sure the tickets that come out of it are the ones that move the business and make the experience better for users, so the team starts aligned instead of finding out in week three that we weren’t.
Step 2: Deep Dive

Real insight comes from talking to people. I run continuous research, interviews, and competitive analysis, then use LLMs to work through qualitative feedback at volume and surface patterns I would otherwise miss. The goal is strategy rooted in genuine frustration rather than assumption.
Step 3: Creative Exploration

This is where I push past the obvious answer. Tools like Claude Design, Figma Make, and Midjourney let me generate and compare a lot of directions fast. Agents can make a pile of options. Picking the right one is taste, and that part is mine.
Step 4: From Concept to Reality

The strongest direction gets finalized in Figma. That’s where I decide what good looks like. Then I point agents at it and build it for real, pixel for pixel, with real data. Variations take minutes instead of days, so I find the best path instead of defending the first one.
Step 5: Hands-On Validation

Design is a conversation, not a handoff. I get the live prototype in front of users early, a site in a real browser or an app on TestFlight, to see what people actually do rather than what they say they’d do. The risky assumptions get tested before anyone commits engineering time to them.
Step 6: Engineering the Gap

I work closely with development to make sure what I design can be built. Pairing design system knowledge with Claude Code, I generate front-end prototypes to test implementation ideas early. Agents do the typing, I hold the result to the design, and engineering gets something they can run instead of a spec to interpret. Speaking the same language as engineers removes an enormous amount of friction, and on one team it cut dev cycles by 25%.
Step 7: Launch & Beyond

Launch is the start. I track live data, optimize conversion, and keep the design infrastructure scaling as the product grows. Agents help me ship the next iteration fast. Whether it should ship is still my call.

<ol class="skill-list" aria-labelledby="method-label">
<li class="skill skill--step" id="step-01">
  <p class="skill__num" aria-hidden="true">01</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 1: </span>Charting the Course</h3>
    <p class="skill__detail">Before designing anything, I get clear on the objective. What&rsquo;s the actual problem, who is it for, and what does success look like for the business. This is the product designer in me. I make sure the tickets that come out of it are the ones that move the business and make the experience better for users, so the team starts aligned instead of finding out in week three that we weren&rsquo;t.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-02">
  <p class="skill__num" aria-hidden="true">02</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 2: </span>Deep Dive</h3>
    <p class="skill__detail">Real insight comes from talking to people. I run continuous research, interviews, and competitive analysis, then use LLMs to work through qualitative feedback at volume and surface patterns I would otherwise miss. The goal is strategy rooted in genuine frustration rather than assumption.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-03">
  <p class="skill__num" aria-hidden="true">03</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 3: </span>Creative Exploration</h3>
    <p class="skill__detail">This is where I push past the obvious answer. Tools like Claude Design, Figma Make, and Midjourney let me generate and compare a lot of directions fast. Agents can make a pile of options. Picking the right one is taste, and that part is mine.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-04">
  <p class="skill__num" aria-hidden="true">04</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 4: </span>From Concept to Reality</h3>
    <p class="skill__detail">The strongest direction gets finalized in Figma. That&rsquo;s where I decide what good looks like. Then I point agents at it and build it for real, pixel for pixel, with real data. Variations take minutes instead of days, so I find the best path instead of defending the first one.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-05">
  <p class="skill__num" aria-hidden="true">05</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 5: </span>Hands-On Validation</h3>
    <p class="skill__detail">Design is a conversation, not a handoff. I get the live prototype in front of users early, a site in a real browser or an app on TestFlight, to see what people actually do rather than what they say they&rsquo;d do. The risky assumptions get tested before anyone commits engineering time to them.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-06">
  <p class="skill__num" aria-hidden="true">06</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 6: </span>Engineering the Gap</h3>
    <p class="skill__detail">I work closely with development to make sure what I design can be built. Pairing design system knowledge with Claude Code, I generate front-end prototypes to test implementation ideas early. Agents do the typing, I hold the result to the design, and engineering gets something they can run instead of a spec to interpret. Speaking the same language as engineers removes an enormous amount of friction, and on one team it cut dev cycles by 25%.</p>
  </div>
</li>
<li aria-hidden="true"><hr class="skill-list__rule"></li>
<li class="skill skill--step" id="step-07">
  <p class="skill__num" aria-hidden="true">07</p>
  <div class="skill__body">
    <h3 class="skill__title"><span class="visually-hidden">Step 7: </span>Launch &amp; Beyond</h3>
    <p class="skill__detail">Launch is the start. I track live data, optimize conversion, and keep the design infrastructure scaling as the product grows. Agents help me ship the next iteration fast. Whether it should ship is still my call.</p>
  </div>
</li>
  </ol>

Input

The one form on the site: the access code for a locked case study.

Input

Figma input · 2146:903

.field .field__input .field__toggle

A label, the input and a show / hide toggle, inside the access card. An error swaps the hint for a message in Danger red.

<form class="gate-card" data-gate-form="prizepicks" novalidate>
  <button class="tool-btn gate-card__close" type="button" aria-label="Close" data-gate-close><span class="icon icon--20 icon--ink" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-x"></use></svg></span></button>
  <div class="gate-card__header">
    <h2 class="gate-card__title" id="gate-title">Enter Password</h2>
    <p class="gate-card__desc" id="gate-desc">This project is password-protected. Please enter the access code provided to view the case study.</p>
  </div>
  <div class="field">
    <label class="field__label" for="gate-code">Access code</label>
    <div class="field__control">
      <input class="field__input" id="gate-code" name="code" type="password" autocomplete="current-password" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go" required aria-describedby="gate-error">
      <button class="tool-btn tool-btn--xs field__toggle" type="button" aria-label="Show access code" aria-pressed="false" data-gate-reveal><span class="icon icon--16 icon--ink" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-eye-off"></use></svg></span></button>
    </div>
    <p class="field__error" id="gate-error" role="alert"></p>
  </div>
  <button class="btn btn--primary btn--cta gate-card__submit" type="submit"><span>Submit</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></button>
  <p class="gate-card__request"><span>Don&rsquo;t have the access?</span><a class="gate-card__link" href="/contact">Request access</a></p>
</form>

Marquee

The only component that moves on its own.

Marquee

Figma marquee · marquee__item · 2066:2090 · 2179:517

.marquee .marquee__item

Two identical sets slide in a loop with no JavaScript, edges fading out. Hover or tap a logo to light it: full color, lifted, name underneath. Stops for reduced motion.

<div class="marquee hatch">
  <div class="marquee__view" tabindex="0">
    <ul class="marquee__track" role="list" aria-label="Programs I use">
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Slack" style="mask-image:url(assets/img/tools/slack.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/slack.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Slack</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Linear" style="mask-image:url(assets/img/tools/linear.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/linear.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Linear</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="ClickUp" style="mask-image:url(assets/img/tools/clickup.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/clickup.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">ClickUp</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Jira" style="mask-image:url(assets/img/tools/jira.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/jira.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Jira</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Notion" style="mask-image:url(assets/img/tools/notion.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/notion.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Notion</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Coda" style="mask-image:url(assets/img/tools/coda.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/coda.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Coda</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Figma" style="mask-image:url(assets/img/tools/figma.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/figma.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Figma</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Claude" style="mask-image:url(assets/img/tools/claude.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/claude.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Claude</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Gemini" style="mask-image:url(assets/img/tools/gemini.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/gemini.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Gemini</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Cursor" style="mask-image:url(assets/img/tools/cursor.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/cursor.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Cursor</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Midjourney" style="mask-image:url(assets/img/tools/midjourney.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/midjourney.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Midjourney</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Adobe Photoshop" style="mask-image:url(assets/img/tools/photoshop.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/photoshop.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe Photoshop</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Adobe Illustrator" style="mask-image:url(assets/img/tools/illustrator.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/illustrator.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe Illustrator</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Adobe InDesign" style="mask-image:url(assets/img/tools/indesign.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/indesign.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe InDesign</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Jitter" style="mask-image:url(assets/img/tools/jitter.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/jitter.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Jitter</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Hotjar" style="mask-image:url(assets/img/tools/hotjar.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/hotjar.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Hotjar</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Optimal Workshop" style="mask-image:url(assets/img/tools/optimal-workshop.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/optimal-workshop.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Optimal Workshop</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="UserTesting" style="mask-image:url(assets/img/tools/usertesting.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/usertesting.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">UserTesting</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="User Interviews" style="mask-image:url(assets/img/tools/userinterviews.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/userinterviews.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">User Interviews</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Framer" style="mask-image:url(assets/img/tools/framer.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/framer.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Framer</span></li>
      <li class="marquee__item"><span class="marquee__logo" role="img" aria-label="Webflow" style="mask-image:url(assets/img/tools/webflow.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/webflow.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Webflow</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/slack.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/slack.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Slack</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/linear.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/linear.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Linear</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/clickup.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/clickup.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">ClickUp</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jira.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/jira.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Jira</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/notion.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/notion.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Notion</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/coda.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/coda.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Coda</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/figma.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/figma.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Figma</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/claude.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/claude.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Claude</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/gemini.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/gemini.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Gemini</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/cursor.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/cursor.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Cursor</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/midjourney.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/midjourney.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Midjourney</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/photoshop.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/photoshop.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe Photoshop</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/illustrator.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/illustrator.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe Illustrator</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/indesign.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/indesign.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Adobe InDesign</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jitter.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/jitter.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Jitter</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/hotjar.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/hotjar.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Hotjar</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/optimal-workshop.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/optimal-workshop.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Optimal Workshop</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/usertesting.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/usertesting.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">UserTesting</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/userinterviews.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/userinterviews.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">User Interviews</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/framer.svg?v=3)"></span><span class="marquee__color marquee__color--mono" aria-hidden="true" style="mask-image:url(assets/img/tools/color/framer.svg?v=3)"></span><span class="marquee__name" aria-hidden="true">Framer</span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/webflow.svg?v=3)"></span><img class="marquee__color" src="assets/img/tools/color/webflow.svg?v=3" alt="" loading="lazy" decoding="async"><span class="marquee__name" aria-hidden="true">Webflow</span></li>
    </ul>
  </div>
  <div class="marquee__view marquee__view--blur" aria-hidden="true">
    <ul class="marquee__track" aria-hidden="true">
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/slack.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/linear.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/clickup.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jira.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/notion.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/coda.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/figma.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/claude.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/gemini.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/cursor.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/midjourney.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/photoshop.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/illustrator.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/indesign.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jitter.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/hotjar.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/optimal-workshop.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/usertesting.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/userinterviews.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/framer.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/webflow.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/slack.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/linear.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/clickup.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jira.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/notion.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/coda.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/figma.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/claude.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/gemini.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/cursor.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/midjourney.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/photoshop.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/illustrator.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/indesign.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/jitter.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/hotjar.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/optimal-workshop.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/usertesting.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/userinterviews.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/framer.svg?v=3)"></span></li>
      <li class="marquee__item" aria-hidden="true"><span class="marquee__logo" style="mask-image:url(assets/img/tools/webflow.svg?v=3)"></span></li>
    </ul>
  </div>
</div>

Media Player

Custom controls over a native video.

Media Player

Figma player · 2066:2270

.player

Lime controls and scrubber over a dark frame. Without JavaScript the browser's controls stay, so it always plays. This demo shows the poster only; the footage is behind the PrizePicks access code.

<div class="player">
  <video class="player__video" controls preload="metadata" playsinline
         poster="assets/img/commercial-poster.jpg" width="1280" height="720">
    <source src="assets/video/clip.mp4" type="video/mp4">
    <p class="t-body">Your browser can&rsquo;t play this video. <a href="assets/video/clip.mp4">Download the video</a> instead.</p>
  </video>
</div>

Footer

The same footer closes every page.

Footer, Desktop

Figma footer · 2182:162

.footer

Desktop, 1200 and up. The call to action on the left, page and social links in two columns on the right, and the legal line, credit and llms.txt along the bottom. Dark in both themes.

<footer class="footer">
  <div class="shell footer__inner">
    <div class="footer__top">
      <div class="footer__cta">
        <div class="footer__cta-head">
          <p class="t-eyebrow t-eyebrow--accent">Contact</p>
          <p class="footer__title">Looking for a Designer Who Can Do All of It?</p>
        </div>
        <a class="btn btn--accent btn--cta" href="/contact">
          <span>Get in touch</span>
          <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
        </a>
      </div>
      <nav class="footer__links" aria-label="Footer">
        <ul class="footer__col">
        <li><a class="footer__link" href="/work">Work</a></li>
        <li><a class="footer__link" href="/about">About me</a></li>
        <li><a class="footer__link" href="/approach">My approach</a></li>
        <li><a class="footer__link" href="/contact">Contact me</a></li>
        </ul>
        <ul class="footer__col">
        <li><a class="footer__link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://twitter.com/zblevins_" target="_blank" rel="noopener noreferrer"><span>X (Twitter)</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://dribbble.com/zachblevins" target="_blank" rel="noopener noreferrer"><span>Dribbble</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://github.com/blev-commits" target="_blank" rel="noopener noreferrer"><span>GitHub</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        </ul>
      </nav>
    </div>
    <div class="footer__bottom">
      <div class="footer__meta">
        <p class="footer__legal">&copy; Zach Blevins. All Rights Reserved 2026</p>
        <p class="footer__legal">Made with <svg class="footer__heart" role="img" aria-label="love" viewBox="0 0 24 24"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg> in Figma built with Claude</p>
      </div>
      <a class="footer__agents" href="llms.txt" type="text/plain">llms.txt</a>
    </div>
  </div>
</footer>

Footer, Tablet

Figma footer · 2182:162

.footer

Tablet, 768 to 1199. The same parts with tighter gaps; the links keep their two columns beside the call to action.

<footer class="footer">
  <div class="shell footer__inner">
    <div class="footer__top">
      <div class="footer__cta">
        <div class="footer__cta-head">
          <p class="t-eyebrow t-eyebrow--accent">Contact</p>
          <p class="footer__title">Looking for a Designer Who Can Do All of It?</p>
        </div>
        <a class="btn btn--accent btn--cta" href="/contact">
          <span>Get in touch</span>
          <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
        </a>
      </div>
      <nav class="footer__links" aria-label="Footer">
        <ul class="footer__col">
        <li><a class="footer__link" href="/work">Work</a></li>
        <li><a class="footer__link" href="/about">About me</a></li>
        <li><a class="footer__link" href="/approach">My approach</a></li>
        <li><a class="footer__link" href="/contact">Contact me</a></li>
        </ul>
        <ul class="footer__col">
        <li><a class="footer__link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://twitter.com/zblevins_" target="_blank" rel="noopener noreferrer"><span>X (Twitter)</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://dribbble.com/zachblevins" target="_blank" rel="noopener noreferrer"><span>Dribbble</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://github.com/blev-commits" target="_blank" rel="noopener noreferrer"><span>GitHub</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        </ul>
      </nav>
    </div>
    <div class="footer__bottom">
      <div class="footer__meta">
        <p class="footer__legal">&copy; Zach Blevins. All Rights Reserved 2026</p>
        <p class="footer__legal">Made with <svg class="footer__heart" role="img" aria-label="love" viewBox="0 0 24 24"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg> in Figma built with Claude</p>
      </div>
      <a class="footer__agents" href="llms.txt" type="text/plain">llms.txt</a>
    </div>
  </div>
</footer>

Footer, Phone

Figma footer · 2182:162

.footer

Phone, up to 767. Everything stacks: the call to action and its full-width button, then the two link columns, then the legal lines.

<footer class="footer">
  <div class="shell footer__inner">
    <div class="footer__top">
      <div class="footer__cta">
        <div class="footer__cta-head">
          <p class="t-eyebrow t-eyebrow--accent">Contact</p>
          <p class="footer__title">Looking for a Designer Who Can Do All of It?</p>
        </div>
        <a class="btn btn--accent btn--cta" href="/contact">
          <span>Get in touch</span>
          <span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>
        </a>
      </div>
      <nav class="footer__links" aria-label="Footer">
        <ul class="footer__col">
        <li><a class="footer__link" href="/work">Work</a></li>
        <li><a class="footer__link" href="/about">About me</a></li>
        <li><a class="footer__link" href="/approach">My approach</a></li>
        <li><a class="footer__link" href="/contact">Contact me</a></li>
        </ul>
        <ul class="footer__col">
        <li><a class="footer__link" href="https://www.linkedin.com/in/zachblevins" target="_blank" rel="noopener noreferrer"><span>LinkedIn</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://twitter.com/zblevins_" target="_blank" rel="noopener noreferrer"><span>X (Twitter)</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://dribbble.com/zachblevins" target="_blank" rel="noopener noreferrer"><span>Dribbble</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        <li><a class="footer__link" href="https://github.com/blev-commits" target="_blank" rel="noopener noreferrer"><span>GitHub</span><span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span></a></li>
        </ul>
      </nav>
    </div>
    <div class="footer__bottom">
      <div class="footer__meta">
        <p class="footer__legal">&copy; Zach Blevins. All Rights Reserved 2026</p>
        <p class="footer__legal">Made with <svg class="footer__heart" role="img" aria-label="love" viewBox="0 0 24 24"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg> in Figma built with Claude</p>
      </div>
      <a class="footer__agents" href="llms.txt" type="text/plain">llms.txt</a>
    </div>
  </div>
</footer>

Icons + Texture

Lucide icons inlined as symbols, 24px grid, 2px strokes, round caps and joins. Color follows the text.

Icon

Figma icon · 2116:644

.icon

All 50 glyphs in Figma's set. The ones the site's sprite does not carry are listed with where they went.

arrow-left

arrow-right

arrow-ul

arrow-ur

check

chevron-down

chevron-right

chevrons-left-right

controls

copy

cycle

eye

eye-off

feed

gamepad

grip

hand-point

hand-wave

heart

joystick

key

knight

link

mail-pen

maximize

menu

minimize

moon

ninja

ohio

pause

play

repeat-2

rotate-ccw

ruler

send

send-horizontal

send-mail

spline

sun

terminal

ticket

toolbox

trophy

volume

volume-1

volume-2

volume-x

wand

x

arrow-ul: drawn as arrow-ur flipped (.icon--flip)
chevrons-left-right: not used on the site
controls: not used on the site
cycle: drawn inline as an eyebrow icon (.ico-cycle)
feed: drawn inline as an eyebrow icon (.ico-feed)
gamepad: drawn inline as an eyebrow icon (.ico-gamepad)
grip: not used on the site
hand-point: not used on the site
hand-wave: not used on the site
heart: the footer credit draws its own heart
joystick: drawn inline as an eyebrow icon (.ico-joystick)
key: drawn inline as an eyebrow icon (.ico-key)
knight: drawn inline as an eyebrow icon (.ico-knight)
moon: the theme toggle draws its own sun and moon
ninja: drawn inline as an eyebrow icon (.ico-ninja)
ohio: not used on the site
rotate-ccw: not used on the site
ruler: not used on the site
send: not used on the site
send-horizontal: not used on the site
send-mail: drawn inline as an eyebrow icon (.ico-send)
spline: drawn inline as an eyebrow icon (.ico-spline)
sun: the theme toggle draws its own sun and moon
terminal: drawn into the Agent Guide overview card
toolbox: drawn inline as an eyebrow icon (.ico-toolbox)
trophy: drawn inline as an eyebrow icon (.ico-trophy)
volume: the player uses volume-2 and volume-x
volume-1: the player uses volume-2 and volume-x
wand: drawn inline as an eyebrow icon (.ico-wand)

<span class="icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24"><use href="#i-arrow-ur"></use></svg></span>

Texture

Figma hatch · 2402:2

.hatch

The diagonal hatch behind page titles and the marquee, and on a linked result card when you hover it.

<div class="hatch" style="height:160px"></div>

Figma Parity

Every component in the Figma library, the CSS that ships it, and where it lives on this page. Figma owns anatomy and states; the stylesheet owns what ships.

Components

33 library components, all shipping. Node IDs from u7Woeg2PGHsjKAyaGKuKf2.

Figma	Node	Variants	CSS	On this page
button	2006:9915	primary, secondary, tertiary, ghost × large, medium × static, hover, active	.btn .btn--accent / --primary / --tertiary / --secondary	Actions
button-icon	2006:10024	primary, secondary, tertiary, ghost × large, medium, small, x-small, xx-small × static, hover, active	.tool-btn .tool-btn--tint	Actions
link	2132:489	primary, secondary × static, hover, pressed	.btn-text .social-link	Actions
nav-button	2598:306	Show label, Left icon, Right icon × static, hover, active	.nav-btn	Actions
actions	2194:2125	1440, 768, 390	.cs-actions	Actions
main-nav · nav · nav-link · logo	2095:1620 · 2203:583 · 2159:1740 · 2203:1443	1200, 768, mobile · 768 above, 767 below · primary, secondary, tertiary × static, hover, active · static, hover, pressed	.nav .nav__pill .nav__link .nav__logo	Navigation
menu	2165:1836	default, open, dropdown, dropdown-wide × 767 below, 768+	.menu .dropdown	Navigation
menu	2165:1836	open, 767 below	.menu .mobile-menu	Navigation
headers / type=title	2065:1718	title, section × 1440, 768, 390	.intro .intro__title	Headers + Dividers
headers / type=section	2065:1718	title, section × 1440, 768, 390	.cs-sub .skill__title	Headers + Dividers
divider-row	2182:276	divider, break, header × all, 1440, 768, 390	.section-label	Headers + Dividers
divider-items / type=project-notes	2182:277	divider, text labels, project-notes	.cs-meta	Headers + Dividers
card-work	2077:692	767 below, 768 above × default, hover, active	.work-card in .work-grid	Cards
card-info	2076:680	info, goal × 1440, 768, 390	.cs-cards .cs-card .cs-card--dark	Cards
card-stat	2060:908	1440, 768, 390	.cs-stats .cs-stat	Cards
stat-strip	2379:12	row, stacked · text properties Value 1 to 3, Label 1 to 3	.cs-glance .cs-statline .cs-rows	Cards
card-panel · panel-row	2060:937 · 2066:1849	1440, 768, 390 · 1200, 768, 390	.cs-panel .cs-panel__row	Cards
stat-cards · stat-card	2323:906 · 2323:758	1440, 768, 390 · 1440, 768, 390 × default, hover	.stat-cards .stat-card	Cards
image	2057:76		.cs-figure	Image + Quote
image-split	2213:655	right, left, bottom × 1440, 768, 390	.cs-split .cs-split--image-first	Image + Quote
quote	2066:2098	1440, 768, 390	.cs-quote	Image + Quote
skill	2182:291	1440, 768, 390 × lit, unlit	.skills .skill-row	Skill + Step
step	2081:800	1440, 768, 390	.skill-list .skill--step	Skill + Step
input	2146:903	default, hover, active, input, error-default, error-hover	.field .field__input .field__toggle	Input
marquee · marquee__item	2066:2090 · 2179:517	1440, 768, 390 × default, hover × gray, full	.marquee .marquee__item	Marquee
player	2066:2270	idle, playing	.player	Media Player
footer	2182:162	1200	.footer	Footer
footer	2182:162	768	.footer	Footer
footer	2182:162	390	.footer	Footer
icon	2116:644	50 glyphs	.icon	Icons + Texture
hatch	2402:2		.hatch	Icons + Texture

Design System Site

41 more library components that build this page: the chrome, the playground and the specimens.

Figma	Node	Variants	CSS	On this page
ds-topbar	2323:2576	390, 768, 1440	.ds-topbar	Every page
ds-nav	2324:329	closed, foundations, components, references open; dropdowns	.ds-nav	Every page
ds-pager	2332:71	1440, 390 × middle, first	.ds-pager	Every page
ds-section-head	2325:3020		.ds-section__title .ds-section__note	Every page
ds-hero	2325:3019	1440, 390	.ds-hero	Overview
ds-overview-card	2326:4002	small, wide, xl × lime, blue, green, yellow, red, slate × default, hover	.ds-ill	Overview
ds-head-facts	2348:51		.ds-head__facts	Overview
ds-map-head	2348:67		.ds-map__head	Overview
ds-group-head	2325:3023		.ds-ramp-group__head	Color Ramps
ds-ramp-filter	2331:26	all, swatch, swatch-white × default, hover, selected	.ds-ramp-filter	Color Ramps
ds-color	2331:126	shipped, library × default, hover, copied	.ds-color	Color Ramps
ds-prim	2332:2		.ds-prim	Primitive Tokens
ds-sem	2332:16		.ds-sem	Semantic Tokens
ds-table-row	2348:45	head, body	.ds-table tr	Type + Size Tokens, Figma Parity
ds-ts	2372:7	row, stacked	.ds-ts	Typography
ds-item	2348:46		.ds-item	Spacing, Elevation
ds-space-step	2345:8		.ds-space__step	Spacing
ds-shape	2345:26	radius, stroke, icon	.ds-radius .ds-stroke	Spacing
ds-rhythm	2345:50	row, head × inline, stacked	.ds-rhythm	Spacing
ds-frame-row	2348:13		.ds-frame-row	Breakpoints + Motion
ds-dur	2345:51		.ds-dur	Breakpoints + Motion
ds-ease	2355:35	ease, arrow-ease, ease-out-expo, spring	.ds-ease	Breakpoints + Motion
ds-elev	2348:22	flat, hover, pressed	.ds-elev	Elevation
ds-story	2330:212	playground, code, stacked	.ds-story	Every component page
ds-controls	2419:4953	side, inline	.ds-controls	Every component page
ds-ctl	2329:22	segmented, text, switch, select, range × stacked, inline	.ds-ctl	Every component page
ds-tab	2328:36	default, selected	.ds-tab	Every component page
ds-tools	2420:1298		.ds-tools	Every component page
ds-tool	2328:30	text, icon × default, selected	.ds-tool	Every component page
ds-ui-icon	2327:31	sun, outline, measure, code, reset, copy, check, chevron, chevron-up	.ds-tool svg	Every component page
ds-seg-option	2328:17	text, icon × default, hover, selected	.ds-seg__opt	Every component page
ds-input	2328:41	default, focus, hover × desktop, touch	.ds-input	Every component page
ds-input-paragraph	2420:1238	default, focus, hover × desktop, touch	.ds-input--area	Every component page
ds-select	2344:31	default, hover, focus, selected, active × desktop, touch	.ds-select	Every component page
ds-list	2614:5362	desktop, touch	.ds-list	Every component page
.selection-link	2458:7388	default, hover, selected × desktop, touch	.ds-option	Every component page
ds-switch	2344:18	false, true	.ds-switch	Every component page
ds-range	2344:32		.ds-range	Every component page
ds-mini-button	2328:56	default, hover, selected	.ds-reset .ds-copy	Every component page
ds-fig	2328:57		.ds-fig	Every component page
ds-iconview	2348:70		.ds-iconview	Icons + Texture

Variables + Styles

Every collection and style set in the library, and where it shows here.

Figma	Count	Modes	CSS	On this page
Color Primitives	151	Value	--ds-*	Color Ramps, Primitive Tokens
Colors	192	Light, Dark	--c-, --op-	Semantic Tokens
Typography + Typography Primitives	135 + 62	Mode 1	--f-, --fs-, --lh-*	Type + Size Tokens, Typography
Size	134	Mode 1	--pad, --*-gap, --card-pad …	Type + Size Tokens, Spacing
Responsive	3	Desktop, Tablet, Mobile	@media 768, 1200	Breakpoints + Motion
Text styles	58		.t-*, component type	Typography
Effect styles: Elevation / Hover, Elevation / Pressed	2		.btn:hover, .btn:active	Elevation

Agent Guide

How a coding agent should build with this system. The same rules ship as plain files an agent can read, written from the stylesheet and the component catalog on every build, so they never describe a version that is gone.

Files

Served from the site root. Point an agent at the first one before it writes anything.

File	What it holds
design-system.md	The guide. Rules, 31 semantic tokens in both themes, type and spacing at every frame, and all 31 components with their Figma nodes, classes and real markup.
design-tokens.json	The same tokens as data in the W3C design tokens shape: color with Dark under $extensions, and 108 type, layout and motion tokens with their 768 and 1200 steps.
llms.txt	The site for language models. Points here, so an agent that finds the site finds the system.

Prompt

Paste it at the top of a task.

Prompt

You are building with Zach Blevins' design system. Before you write markup or CSS, read https://zachblevins.com/design-system.md, and take values from https://zachblevins.com/design-tokens.json. Load the site's stylesheet and reuse its classes and CSS custom properties instead of writing new ones. Use the semantic color tokens (--c-*) and never hard-code a hex value. Use the type and spacing tokens, which already step at 768 and 1200, and do not add breakpoints. Copy a component's markup from the guide rather than rebuilding it, and do not invent variants the library does not have. Check every change in Light and Dark, keep text at WCAG AA, and keep em dashes out of the copy.

Rules

What an agent gets wrong without being told.

Reuse before you write. Every component in the system ships on the site. Copy its markup and classes as they are. If what you need is not here, say so rather than inventing a variant the Figma library does not have.
Color comes from semantic tokens. Use the --c-* tokens, and --op-* when you want a share of the foreground. Never type a hex value, and never reach for a --ds-* primitive inside a component: primitives do not flip with the theme, semantic tokens do.
Every screen has two themes. Dark mode is <html data-theme="dark">. Anything you add has to read in both, and a dark value goes in the :root[data-theme="dark"] block, not beside the rule that uses it.
Type and spacing are tokens too. Font families come from --f-display, --f-sans and --f-mono. Sizes and line heights come from --fs-* and --lh-*, spacing from --pad, --band-y, --band-gap and the gap tokens. They already step at 768 and 1200.
Two breakpoints, mobile first. The base styles are the 390 frame. @media (min-width: 768px) and (min-width: 1200px) are the only queries. Do not add one; retune a token in the :root block for that width instead.
Icons are Lucide symbols. Reference the sprite with <svg><use href="#i-name"></use></svg> inside .icon. Strokes are 2px on a 24px grid and the color follows the text.
Motion uses the motion tokens. --dur and --ease for state changes, --press-dur and --press-ease for presses, --arrow-* for arrows. Every other duration is a step of the scale (--dur-fast, --dur-short, --dur-slow, --dur-long), or for entrances --dur-light, --dur-enter, --dur-reveal and --dur-settle, never typed by hand. Anything the reader opens or closes moves on --arrow-ease; --ease-out-expo is for scroll reveals and icons settling. Everything stops under prefers-reduced-motion.
Accessible in both themes. Text clears WCAG AA on its real background in Light and in Dark. Keep visible focus, real heading order, aria-current on the current page and alt text on every image.
Safe areas go through tokens. Anything pinned to an edge pads with --safe-t, --safe-r, --safe-b or --safe-l, never env() directly.
Write like Zach. First person, plain words, varied sentence length. No em dashes anywhere in copy.

Color Ramps

Brand / Primary

Brand / Secondary

Ink

Chalk

Lime

Gray

Slate

Red

Green

Yellow

Blue

Primitive Tokens

Ink

Chalk

Brand / Primary

Brand / Secondary

Red

Semantic Tokens

Core

Components

Danger

On dark

Opacity scale

Type + Size Tokens

Typography

Title Hero

Title Header

Title Body

Card Header

Card Subheader

Body

Body Strong

Body Italic

Code

Code Strong

Eyebrow

Button

Button Strong

Button Italic

Spacing

Space

Radius

Stroke

Icon

Rhythm

Breakpoints + Motion

Breakpoints

Duration

Easing

Elevation

Actions

Navigation

Headers + Dividers

I Figure Out What to Build, Then I Help Ship It.

02 / More Work

Cards

Designing the Feed, Profiles, and Tail Flow

A Fractured Web Presence:

An App That Could Not Sell:

A Five-Month Scope Shift:

Goal:

The Website

The Testing

The App

Neutral / Unchanged

Positive Signal

Image + Quote

A Team of Two, Plus Partners

Skill + Step

Finding the Real Problem

Designing the System

Building It Live

Deciding What Gets Built

Leading the Work

Building the Brand

Keeping Things Moving

Step 1: Charting the Course

Step 2: Deep Dive

Step 3: Creative Exploration