Design System

The visual language of dadeda.design. Every choice is deliberate — from the #DADEDA canvas color (which IS the brand name, a hex code that sounds like "data") to the OKLCH color space that ensures perceptual uniformity across brand and data visualization palettes.

Brand Canvas

#DADEDA — RGB(218, 222, 218). A sage mist with barely perceptible green undertone. 86% lightness, 1% saturation. The foundation everything lives on.

--color-canvas #DADEDA — sage mist

--color-canvas-light Light variant

--color-canvas-dark Dark variant

Brand Accents

Bold colors that pop against the sage canvas. Inspired by Philadelphia industrial patina and neon energy.

--color-accent-green Neon green — primary accent

--color-accent-blue Blueprint cyan — systems

--color-accent-hot Energy accent

Neutrals

--color-surface Surface

--color-text-primary Text primary

--color-text-secondary Text secondary

--color-text-muted Text muted

--color-border Border

Data Viz — Categorical

Okabe-Ito hue identity, re-anchored on a monotonic lightness ladder (L 0.32 → 0.92, ≥8 units between adjacent stops) so the palette also reads cleanly in grayscale. Stock Okabe-Ito collides at Sky Blue ≈ Orange in luminance; this version doesn't. CVD-safe across protan / deutan / tritan; chroma is near max sustainable at each (L, H) so the palette feels chromatic, not flat.

--viz-1 Dark sage

--viz-2 Blue

--viz-3 Vermillion

--viz-4 Bluish green

--viz-5 Reddish purple

--viz-6 Orange

--viz-7 Sky blue

--viz-8 Yellow

Compact comparison — color above, grayscale below. Each stop should remain visibly distinct in both bars when testing CVD types:

Data Viz — Card-Safe Categorical

The site's category accents already carry meaning: green signals See Work cards (H ≈ 130–170), amber signals Get to Know cards (H ≈ 50–100). Any chart that renders inside an expanded card overlay, on top of the Scrambler background, or near category UI must avoid those hue bands so data categories don't leak meaning into the surrounding interface (or absorb it).

vizCardSafe is a 7-stop monotonic-L palette restricted to reds (H 0–40), blues (H 200–280), purples / magentas (H 290–350), and low-chroma neutrals.

vizCardSafe[0] Near-black

vizCardSafe[1] Blue

vizCardSafe[2] Vermillion

vizCardSafe[3] Reddish purple

vizCardSafe[4] Purple

vizCardSafe[5] Sky blue

vizCardSafe[6] Light coral

Compact comparison — color above, grayscale below:

Data Viz — Scales

Sequential, diverging, and cyclical scales live in src/lib/tokens.ts (array-shaped, consumed directly by D3). Full swatch UI is on the Phase 8 polish list; the values are listed below for reference and copy.

Sequential single-hue (7 stops, light → dark): vizSeq.sage

vizSeq.blueprint

vizSeq.amber

vizSeq.brown

vizSeq.gray

Default to gray or brown when color would distract from the data.
Sequential multi-hue (7 stops): vizSeqMulti.cividis

vizSeqMulti.dadeda

Default: cividis (CVD-verified; no green hues that confuse protan / deutan). Brand-flavored option dadeda passes the L-monotonicity test but requires visual review under deutan / protan / tritan simulators before using it in shipped viz; if a simulation flattens or inverts the ramp, fall back to cividis.
Diverging (7 stops, neutral midpoint): vizDiv.brbg

vizDiv.rdbu

vizDiv.puor

vizDiv.gray

brbg is the project's default. gray (warm-cool through light, very low chroma) for direction without color attention.
Cyclical (12 stops, constant L, hue rotation): vizCyc

Use for time-of-day, day-of-year, angles, phase. Never use a sequential ramp for cyclical data.

Palette governance

Brand colors (DADEDA sage, neon green, blueprint blue, hot accent) stay out of viz except for ≤2–3 categorical brands where meaning is unambiguous (Fantasy red + #DADEDA being canonical), and only when the resulting set passes deuteranopia simulation.
Inside cards / on Scrambler bg: use vizCardSafe for categorical, vizSeq.blueprint / brown / gray for sequential, vizDiv.rdbu / gray for diverging. Avoid vizSeq.sage / amber, vizSeqMulti.dadeda, vizDiv.brbg / puor, and vizCyc in those contexts; their hues collide with See Work green or GTK amber.
Default to vizSeq.gray or vizSeq.brown whenever color would distract: small multiples, secondary charts, annotation layers, table-as-chart cells.
Cyclical data uses vizCyc, never a sequential ramp. For cyclical data inside cards, use a brightness-only cycle through vizSeq.gray with explicit hour / phase labels.
D3 scales import from tokens.ts; no inline hex in viz code.

Typography

DADEDA

Heading Level 2

Heading Level 3

Body large — where design and technology blur

Body — I make intelligent experiences using first principles thinking and core tenets, accelerated by AI-first engineering approaches.

Small — metadata, labels, timestamps

Mono — code, tokens, technical details

Spacing

--space-1

0.25rem

--space-2

0.5rem

--space-3

0.75rem

--space-4

1rem

--space-6

1.5rem

--space-8

2rem

--space-12

3rem

--space-16

4rem

--space-24

6rem

AI Interaction Design

The site is built for two audiences in parallel: humans who arrive at a browser, and agents who arrive on behalf of a human or alongside one. The principles below shape every WebMCP tool, every piece of structured data, and every UI affordance that participates in agent flow.

Agent transparency: Every agent action is observable and reversible. When a tool runs, the targeted control glows (amber → green) and is briefly non-interactive so the user can see "an agent is acting on this." On completion the glow recedes; nothing happens silently. The window.dadeda registry is inspectable from any console.
Cognitive amplification, not replacement: Agents extend what a user is already doing — surfacing information, navigating the site, drafting a share — but the user stays the author of intent. Drawing on Bret Victor's direct- manipulation tradition and Microsoft's HAX guidelines: the agent assists, the human chooses.
Taste-conducive interaction: The system reflects the user's choices rather than imposing a default. The Scrambler arrangement is one valid state of many; agents can rearrange it. Privacy preferences are user-controlled.
Privacy-by-design defaults: Agents access only what's needed. Privacy preferences default to off for analytics and agent storage; on for agent discovery (so the site is honest about what it offers, but doesn't write anything to the device without consent). Set or read via the setPrivacyPreferences tool, with a UI surface as a parallel control.
Markdown-first content delivery for agents: Agents read structured content faster than rendered HTML. The site exposes llms.txt at the root, JSON-LD (Person, WebSite, Organization) in <head>, and a planned .md endpoint per content page. The Scrambler card collection is agent-queryable via getSiteMap / searchCards with full content shape to alleviate a need for agents to scrape the rendered HTML.
Progressive enhancement: The site works without agents. The Scrambler navigates by mouse, keyboard, and touch; the Knob has direct human controls; cards link normally. Agent capability is additive. Bring an agent and you get more, but you don't need one.

Why These Choices

Why OKLCH?: Perceptually uniform, which means that equal numeric changes produce equal visual changes. Critical for data viz palettes where lightness differences encode meaning.
Why #DADEDA?: The brand IS the color. dadeda.design, the hex code, the sage mist canvas. One identity.
Why Tailwind + vanilla CSS?: Tailwind for layout and structural utility. Vanilla CSS for animation, D3 viz, and the Scrambler 3D transforms where programmatic control matters. Each tool where it's strongest.
Why no shadow DOM?: I plan to add D3.js works to the site. D3 needs direct DOM access for d3.select(). Svelte compiles to direct DOM operations, so there's no encapsulation barrier, no workarounds needed.