Design System

The system behind the work.

@joeldfs/react + @joeldfs/charts — colour, type, spacing, motion, brand, and the components that compose this portfolio. A living reference, rendered from the same tokens the site ships.

At a glance

v0.2.1react@joeldfs/react

v0.1.0charts@joeldfs/charts

18Text variantsEditorial + fluid

35+ComponentsComposable blocks

50+Chart typesStatistical + DV

/01 · Foundations

Color.

Six chromatic families on a 50–900 scale. Semantic aliases the components reference. The brand is monochrome by default — the hero gradient is the only place chromatic color appears.

iris

iris-50

#f2f5ff

iris-100

#dfe7ff

iris-200

#c1ceff

iris-300

#a1b2fe

iris-400

#8295fb

iris-500

#6878ee

iris-600

#515fcf

iris-700

#3f4aa2

iris-800

#2d3673

iris-900

#1c2248

azure

azure-50

#eaf8ff

azure-100

#ceedfe

azure-200

#9fdafa

azure-300

#67c4f2

azure-400

#00adeb

azure-500

#0094dc

azure-600

#0079be

azure-700

#005f95

azure-800

#00446a

azure-900

#002b42

jade

jade-50

#ecfaf1

jade-100

#d3f1de

jade-200

#a8e1be

jade-300

#76cd9c

jade-400

#2eba7a

jade-500

#00a45b

jade-600

#008943

jade-700

#006b34

jade-800

#004d26

jade-900

#003019

amber

amber-50

#fdf4e9

amber-100

#f8e5cb

amber-200

#efca9a

amber-300

#e1ad63

amber-400

#d58e00

amber-500

#c37000

amber-600

#a65700

amber-700

#824400

amber-800

#5c3100

amber-900

#3a2000

rose

rose-50

#fff1f2

rose-100

#ffdee1

rose-200

#febdc4

rose-300

#f599a5

rose-400

#ec7385

rose-500

#da4e69

rose-600

#bb3352

rose-700

#932840

rose-800

#691f2e

rose-900

#42151d

gray

gray-50

#f9fafb

gray-100

#f3f4f6

gray-200

#e5e7eb

gray-300

#d1d5db

gray-400

#9ca3af

gray-500

#6b7280

gray-600

#4b5563

gray-700

#374151

gray-800

#1f2937

gray-900

#111827

Semantic aliases

#ffffff

#111827

muted

#6b7280

muted-soft

#9ca3af

surface-soft

#f3f4f6

border

#e5e7eb

border-soft

#f3f4f6

accent

#515fcf

Hero gradient

hero-blue

#0043fa

hero-cyan

#daf5fe

hero-purple

#54187c

hero-magenta

#ab26a5

hero-pink

#f269a7

hero-blush

#fcc9c9

hero-cream

#fff4f0

/02 · Foundations

Typography.

One component — Text — with 18 variants. Geist Sans editorial, Geist Mono for data. Fluid variants interpolate with the viewport.

Editorial scale

display

Design that reasons.

heading

A system behind the work

kicker

Built to compose

row-title

Reaction-time study

stat

128 ms

pullquote

Clarity is a feature.

Fluid scale

display-fluid

Design that reasons.

heading-fluid

A system behind the work

kicker-fluid

Built to compose

row-title-fluid

Reaction-time study

stat-fluid

128 ms

pullquote-fluid

Clarity is a feature.

Body & utility

body

Body copy is the workhorse — long-form reading set for comfort and rhythm across the measure.

body-strong

Body-strong emphasises a line without leaving the body scale.

Type scale

xs0.75remThe quick brown fox

sm0.875remThe quick brown fox

md1remThe quick brown fox

lg1.125remThe quick brown fox

xl1.25remThe quick brown fox

2xl1.5remThe quick brown fox

3xl2remThe quick brown fox

4xl2.5remThe quick brown fox

5xl3remThe quick brown fox

6xl4remThe quick brown fox

7xl5remThe quick brown fox

8xl6remThe quick brown fox

9xl7remThe quick brown fox

/03 · Foundations

Spacing & Radius.

4px base spacing scale. Zero border-radius everywhere — no rounded corners is an explicit brand rule. Depth comes from layout and dividers, not shadows or blur.

Spacing scale

10.25rem

20.5rem

30.75rem

41rem

51.25rem

61.5rem

82rem

102.5rem

123rem

164rem

205rem

246rem

328rem

Radius

none0

sm2px

/04 · Foundations

Motion.

Five duration tokens tuned for an editorial pace. No shadows, no blur. Motion is additive, not decorative — useReducedMotion is respected across all animated components.

instant

Micro-feedback — taps, toggles

100ms

fast

Hovers, small state changes

200ms

normal

Default transitions

300ms

slow

Larger moves, overlays

500ms

entrance

First-paint reveals

600ms

/05 · Brand

Gradients.

Eight named gradients from @joeldfs/brand. Each is two linear-gradient layers composited at hard-light, generating perceptually smooth OKLCH blends. Horizon is the editorial signature — used once, at the top of every page.

Horizon · the signature blend

The editorial hero gradient — cool over warm, hard-light. The only place chromatic color appears across the brand.

Calm · trust

Cool blue over cyan. Onboarding, security, reassurance.

Focus · clarity

Indigo over violet — the brand's intellectual core. Research, depth.

Energy · drive

Amber over ember. Momentum, launches, calls to action.

Growth · renewal

Teal over green. Progress, metrics moving up, sustainability.

Optimism · warmth

Soft yellow over coral. Community, delight, human stories.

Passion · intensity

Rose over magenta. Brand moments, emphasis, craft.

Depth · focus

Deep violet over indigo. Premium, night, concentration.

/06 · Brand

Voice & Tone.

Calm, declarative, slightly distant. Every string in the portfolio follows these rules — from nav labels to case study headings.

Tone

Calm, declarative, slightly distant. Confident without selling.

Person

First person for the author (“I led”, “I designed”); third person for the work. Never address the reader as “you” or “we”.

Headings

Sentence case with a trailing period — “Design + Data.” The period is structural, not decorative.

Eyebrows

Uppercase, 0.18em tracking — “/02”, “SELECTED WORK”, “ROLE & SCOPE”.

Punctuation

Em-dash for asides. Middle-dot · for short inline series. Smart quotes for testimonials.

Cadence

Nouns over verbs. Three-clause rhythm. Short declaratives.

Avoid

Exclamation points. Emoji. Marketing verbs: transform, unlock, supercharge, revolutionize. Hedging: just, simply, basically.

/07 · Components

Layout.

Panda-powered layout primitives. Props accept token names; styles resolve at build-time.

Grid

columns + gap token

Stack

direction + gap token

Box

generic styled primitive

Box — any element, any token

Container

max-width constrained page wrapper

Container — constrained to page max-width

/08 · Components

Text & Prose.

Eyebrow

default + strong

Default eyebrowStrong eyebrow

Prose

long-form editorial HTML

Prose wraps editorial HTML — headings, lists, and links — in the system reading styles.

Comfortable measure and reading rhythm
Consistent link and emphasis treatment

PullQuote

quote + attribution

Pull quote

“Clarity is a feature. The system exists so every page can earn it by default.”Design principles

/09 · Components

Content.

Callout

note · tip · warning

CodeBlock

lang + title + caption + copy button

tsxdesign-system.ts

import { color, space, fontSize } from "@joeldfs/tokens"

export const palette = Object.entries(color)
  .filter(([k]) => k.startsWith("iris-"))
  .map(([name, value]) => ({ name, value }))

Importing tokens directly — not through the @joeldfs/react barrel.

MathBlock · MathInline

KaTeX rendering

Inline math \log_2(n + 1) sits in a sentence; block math is centred and numbered:

RT = a + b \cdot \log_2(n + 1)(1)

Hick's Law

RefList

numbered references

References

[01]Hick, W. E. · On the rate of gain of information. Quarterly Journal of Experimental Psychology, 1952
[02]Hyman, R. · Stimulus information as a determinant of reaction time, 1953

/10 · Components

Media.

GradientBand

hero gradient at any height

ImageFrame

bordered media container — images grayscale at rest

ImageFrame fallbackGradient

hero gradient placeholder when no src

Figure

numbered exhibit — number · title · caption · source

Figure 01A framed exhibit

@joeldfs/react

Figure wraps any visual with a number, title, and caption.

GalleryStrip

pair · triple · asymmetric · wide layouts

Gallery

Visual storytelling.

AwardBadge

recognition marks

/11 · Components

Data.

MetricsRow

bordered treatment

Outcomes

+38%ActivationFirst week

−21%Time to valueMedian

4.6CSATPost-launch

MetricsRow filled

full-bleed colour-cell treatment

128 ms

p95 latency

99.95%

Uptime

Sev-1s

DataTable

caption · columns · rows · footnote

Column	Type	Meaning
set_size	int	Number of on-screen choices
rt	float	Reaction time in ms
correct	bool	Whether the response matched

Trial schemaSynthetic sample data.

MetaStrip

labelled key-value row

RoleProduct Designer

Year2024

ScopeResearch · Design · Delivery

StatusLive

/12 · Components

Editorial Blocks.

Larger compositions for case studies — challenge/approach/outcome, journey maps, team credits.

CAOBlock

Challenge · Approach · Outcome

ChallengeDesigners and developers worked from separate sources of truth, causing drift and rework on every release.

ApproachConsolidated all component definitions into a single design-to-code token pipeline, with Panda CSS as the bridge.

OutcomeSingle handoff artefact per component; rework eliminated; ship velocity increased by 40%.

RoleScope

role + scope label pair

RoleProduct Designer

Research · Design · Prototyping · Delivery

JourneyStrip

numbered process phases

Process

/01Discovery.Stakeholder interviews, audit
/02Definition.Problem framing, scope
/03Design.Concepts, prototypes
/04Delivery.Handoff, QA, launch

TeamCredits

role + name team list

Team

Product DesignJoel D'Silva
Engineering—
Product Strategy—

/13 · Components

Utility.

Link

default + muted

Default link Muted link

BackLink

detail-page return affordance

Back to overview

Divider

section rule

Above the rule.

Below the rule.

/14 · Charts

Stats & Sparklines.

Inline stat blocks, sparklines, and proportion strips — the glanceable layer used in study result summaries.

DVStatBlock

value · label · sub · delta · trend

p95 latency

128 ms

baseline

R²

0.94+0.03

variance explained

Time to value

-21%

vs control

DVSparkline

mini trend line

165

DVRatioStack

proportional horizontal bar

Mobile58%Desktop32%Tablet10%

Traffic by device
Segment	Value	Share
Mobile	58	58%
Desktop	32	32%
Tablet	10	10%

/15 · Charts

Line & Area.

Time-series and trend charts. Multi-series with annotations, single-series area, and stacked area with palette control.

DVLineChart

multi-series with annotations + legend

ConversionBaseline

Line chart
Series	Week	Rate (%)
Conversion	0	12
Conversion	1	15
Conversion	2	11
Conversion	3	18
Conversion	4	22
Conversion	5	20
Conversion	6	27
Baseline	0	10
Baseline	1	10
Baseline	2	10
Baseline	3	10
Baseline	4	10
Baseline	5	10
Baseline	6	10

DVAreaChart

single-series area

Area chart
Month	Volume
0	4
1	7
2	6
3	9
4	12
5	10
6	14
7	16

StackedArea

multi-series stacked area

Stacked area
x	Mobile	Desktop	Tablet
Jan	30	55	15
Feb	35	50	15
Mar	38	48	14
Apr	40	45	15
May	43	42	15
Jun	48	38	14
Jul	52	35	13

/16 · Charts

Bar & Distribution.

Categorical bars, frequency distributions, heatmaps. The workhorse layer for data journalism.

DVBarChart

labelled horizontal bars

Bar chart
Label	Value
Discover	100
Activate	72
Engage	51
Retain	38
Refer	19

DVDistribution

dot-plot distribution

Distribution of RT (ms)
Bin start	Count
238	1
243.11	2
248.22	2
253.33	1
258.44	3
263.56	4
268.67	6
273.78	8
278.89	8
284	8
289.11	5
294.22	3
299.33	2
304.44	2
309.56	1
314.67	2
319.78	0
324.89	2

Histogram

binned frequency with optional KDE

Histogram
Bin start	Bin end	Count
253	257.2	3
257.2	261.4	0
261.4	265.6	2
265.6	269.8	3
269.8	274	8
274	278.2	11
278.2	282.4	11
282.4	286.6	4
286.6	290.8	7
290.8	295	6
295	299.2	7
299.2	303.4	5
303.4	307.6	6
307.6	311.8	4
311.8	316	3

DVHeatmap

grid heatmap — rows × cols × values

Heatmap
Row	09:00	11:00	13:00	15:00	17:00
Mon	12	18	25	22	8
Tue	15	24	31	28	12
Wed	10	20	28	25	9
Thu	8	16	22	19	7
Fri	5	9	14	11	4

/17 · Charts

Statistical.

Box plots, violins, scatter, ECDF, Q–Q, correlation matrix — the analysis layer for study reports.

BoxPlot

box-and-whisker across groups

Box plot
Group	Min	Q1	Median	Q3	Max
n=2	260	270	275	280	291
n=4	270	283	290	298	312
n=8	285	298	307	316	338

ViolinPlot

KDE violin with IQR + median

Violin plot
Group	Q1	Median	Q3
n=2	270	275	280
n=4	283	290	298
n=8	298	307	316

ScatterPlot

bivariate relationship

Scatter plot
x	y
0	0
0.25	1.6183
0.5	2.8844
0.75	3.5325
1	3.4479
1.25	2.6954
1.5	1.5034
1.75	0.2077
2	-0.8304
2.25	-1.3126
2.5	-1.0768
2.75	-0.1366
3	1.3218
3.25	2.9854
3.5	4.491
3.75	5.514
4	5.8481
4.25	5.4555
4.5	4.4764
4.75	3.1945
5	1.9679
5.25	1.1409
5.5	0.96
5.75	1.5136
6	2.7103
6.25	4.301
6.5	5.9405
6.75	7.2714
7	8.0118
7.25	8.0247
7.5	7.3509
7.75	6.1994
8	4.8963
8.25	3.8046
8.5	3.2358
8.75	3.3731
9	4.227
9.25	5.6326
9.5	7.2896
9.75	8.8366

ECDF

empirical cumulative distribution function

Empirical CDF
Quantile	Value
Q1	270.75
Median	280.5
Q3	291.25

QQPlot

normal Q-Q plot

Q–Q plot
Theoretical	Sample (z)
-2.391	-2.285
-1.959	-1.914
-1.731	-1.755
-1.569	-1.597
-1.44	-1.544
-1.331	-1.385
-1.236	-1.173
-1.151	-1.067
-1.073	-0.962
-1.002	-0.909
-0.935	-0.803
-0.872	-0.803
-0.812	-0.697
-0.756	-0.644
-0.701	-0.591
-0.649	-0.538
-0.598	-0.538
-0.549	-0.485
-0.501	-0.432
-0.454	-0.379
-0.408	-0.379
-0.363	-0.326
-0.319	-0.326
-0.275	-0.273
-0.232	-0.221
-0.189	-0.168
-0.147	-0.168
-0.105	-0.115
-0.063	-0.115
-0.021	-0.062
0.021	-0.009
0.063	-0.009
0.105	0.044
0.147	0.097
0.189	0.097
0.232	0.15
0.275	0.15
0.319	0.203
0.363	0.256
0.408	0.256
0.454	0.309
0.501	0.362
0.549	0.415
0.598	0.468
0.649	0.52
0.701	0.573
0.756	0.626
0.812	0.679
0.872	0.732
0.935	0.838
1.002	0.891
1.073	1.05
1.151	1.103
1.236	1.261
1.331	1.42
1.44	1.526
1.569	1.791
1.731	1.95
1.959	2.32
2.391	2.585

CorrelationMatrix

Pearson r heatmap with hatch for negatives

Correlation matrix
Variable	RT	Set size	Accuracy	Fatigue
RT	1	0.87	-0.34	0.21
Set size	0.87	1	-0.28	0.18
Accuracy	-0.34	-0.28	1	-0.42
Fatigue	0.21	0.18	-0.42	1

/18 · Charts

UX Flows.

Funnel, Sankey, node-link diagram, treemap — mapping how users move through a product or system.

Funnel

conversion funnel with % of top step

Funnel
Step	Value	% of top
Visited	1000	100.0%
Signed up	520	52.0%
Activated	310	31.0%
Retained	180	18.0%

Sankey

multi-column flow diagram

Sankey diagram
Source	Target	Value
a	c	300
a	d	150
b	d	200
c	e	250
d	e	180

DVNodeGraph

manual-layout SVG node-link diagram

Node graph
From	To	Relation
ds	re	solid
ds	da	solid
re	en	dashed
da	en	solid

Treemap

recursive slice-and-dice area map

Treemap
Label	Value
Discovery	40
Definition	25
Design	20
Delivery	15

/19 · Charts

Survey.

Likert diverging bars, NPS strip, SUS gauge — standardised UX measurement instruments rendered as composable chart components.

LikertStack

diverging Likert bar chart

Likert responses
Question	Strongly disagree	Disagree	Neutral	Agree	Strongly agree
Easy to navigate	5	8	12	38	37
Clear information hierarchy	3	10	18	42	27
Would recommend	4	6	14	44	32

NPSStrip

NPS score + proportion strip

Net promoter score
Segment	Count	Share
Detractors	25	25%
Passives	25	25%
Promoters	50	50%

SUSGauge

System Usability Scale gauge with zones

SUS score
Band	Range
Not acceptable	0–51
Marginal	51–68
Acceptable	68–80
Excellent	80–100

/20 · Charts

UX Research.

Priority matrix, task success matrix, radar, gaze plot, journey map — synthesis tools for qualitative and usability studies.

RadarChart

multi-axis polygon chart

Radar chart
Axis	Current	Target
Visual design	0.8	0.9
Usability	0.72	0.85
Performance	0.65	0.8
Accessibility	0.58	0.9
Content	0.75	0.85

PriorityMatrix

2x2 effort-impact matrix

Priority matrix
Item	High effort	High impact
Onboarding	0.8	0.9
Search	0.6	0.7
Notifications	0.3	0.5
Settings	0.2	0.2
Export	0.5	0.3

TaskSuccessMatrix

pass / partial / fail / skip per task x user

Task success matrix
Task	Pass rate
Find account settings	88%
Export data	63%
Invite a team member	88%

GazePlot

eye-tracking fixation plot with scan path

Gaze plot
Order	Dwell (ms)	Label
1	320	Logo
2	480	Nav
3	920	Hero
4	640	CTA
5	280	Image

JourneyMap

phased CX journey with sentiment curve

Journey map
Phase	Goal	Sentiment	Pain	Opportunity
Aware	Discover the product	1	Too much noise	Clearer positioning
Consider	Evaluate fit	0	Missing comparison	Add feature matrix
Activate	Get started	-1	Long onboarding	Shorten flow
Use	Achieve value	2		Upsell tier

/21 · Charts

Retention.

Cohort retention curves and heatmap grid — the standard instrument for measuring product stickiness over time.

RetentionCurve

multi-cohort retention curves

Retention curve
Week	Avg retention
0	100.0%
1	71.7%
2	57.7%
3	47.3%
4	40.7%
5	35.7%
6	31.7%

CohortGrid

heatmap-style cohort retention table

Cohort retention grid
Cohort	Size	W0	W1	W2	W3	W4	W5
Jan	240	10000%	7200%	5800%	4700%	4000%	3500%
Feb	310	10000%	6800%	5400%	4400%	3800%	3300%
Mar	280	10000%	7500%	6100%	5100%	4400%	3900%
Apr	195	10000%	7000%	5600%	4500%	3800%	3300%

/22 · Charts

Wrappers & Diagnostic.

Accessible chart containers, presentational frames, and ML evaluation charts — ROC curve, calibration, confusion matrix.

ChartFigure

accessible wrapper — figure + aria + visually-hidden table

ConversionBaseline

Line chart
Series	Week	Rate (%)
Conversion	0	12
Conversion	1	15
Conversion	2	11
Conversion	3	18
Conversion	4	22
Conversion	5	20
Conversion	6	27
Baseline	0	10
Baseline	1	10
Baseline	2	10
Baseline	3	10
Baseline	4	10
Baseline	5	10
Baseline	6	10

DVFrame

eyebrow · title · caption · source

Figure 1

Reaction-time distribution

Hicks-law study

Distribution of RT (ms)
Bin start	Count
238	1
243.75	2
249.5	3
255.25	1
261	5
266.75	6
272.5	9
278.25	8
284	8
289.75	6
295.5	3
301.25	2
307	2
312.75	2
318.5	0
324.25	2

Pooled across 6 set sizes — right skew is typical of RT data.

ROC curve

receiver operating characteristic with AUC

ROC curve
FPR	TPR
0	0
0.05	0.42
0.1	0.62
0.2	0.78
0.35	0.88
0.5	0.93
0.7	0.97
1	1

Calibration

predicted vs observed probability — circle radius proportional to bin n

Calibration curve
Predicted	Observed	n
0.1	0.08	120
0.3	0.27	95
0.5	0.48	80
0.7	0.74	65
0.9	0.91	40

ConfusionMatrix

2x2 matrix with accuracy · precision · recall · F1

Confusion matrix
Actual ╲ Predicted	Pred Negative	Pred Positive
Actual Negative	42	8
Actual Positive	5	45