Design System

Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.

Diagram

Colored inline diagrams for structured data. Stacked rows or arrow layouts, usable in MDX articles.

Diagram

Molecule

Figure wrapper with optional caption. Contains layout sub-components for different diagram types.

Wrapper only

Layout content goes here

A simple caption

<Diagram caption="...">...</Diagram>

Props

Prop	Type	Description
caption	`string`	Centered caption below the diagram

DiagramStack

Molecule

Vertical column of labeled rows with optional detail text and badges.

Basic

Presentation

Logic

Data

<DiagramStack rows={[{ label, color }]} />

With badges

TypeScript strict

CSS Modules scoped

HTML static

Build output per layer

With detail

Server-rendered (fast) SSR

Client-hydrated (deferred) island

Static (zero JS) HTML

Props

Prop	Type	Description
rows	`DiagramRow[]`	Array of row data

DiagramRow	Type
label	`string`	Main text
badge	`string`	Colored pill on the right
detail	`string`	Muted text next to badge
color	`DiagramColor`	purple, orange, red, green, pink, blue, cyan

DiagramArrow

Molecule

Two-box layout connected by an arrow, with optional label.

Basic

Source emits event

event →

Target reacts

<DiagramArrow from={node} to={node} label="event" />

Bidirectional

Client sends request

← HTTP →

Server sends response

<DiagramArrow from={node} to={node} label="HTTP" bidirectional />

Props

Prop	Type	Description
from	`DiagramNode`	Left box (label, detail?, color)
to	`DiagramNode`	Right box (label, detail?, color)
label	`string`	Text between boxes
bidirectional	`boolean`	Show arrows in both directions

DiagramFlow

Molecule

Horizontal step chain with arrows between each step.

Preview

MDX author

→

Astro build

→

HTML output

<DiagramFlow steps={[{ label, detail?, color }]} />

Props

Prop	Type	Description
steps	`DiagramFlowStep[]`	Array of step data

DiagramTree

Molecule

Indented hierarchy with recursive nesting.

Preview

src/

└ components/

└ Button.tsx

└ Card.astro

└ layouts/

└ Layout.astro

└ pages/

└ index.astro

<DiagramTree nodes={[{ label, color, children? }]} />

Props

Prop	Type	Description
nodes	`DiagramTreeNode[]`	Root nodes (recursive)

DiagramCompare

Molecule

Side-by-side columns for comparing options.

Preview

SSR

Fast TTFB

SEO friendly

Server cost

CSR

Rich interactions

Offline capable

Slow initial load

SSG

Zero runtime

CDN cacheable

Build-time only

Rendering strategies

<DiagramCompare columns={[{ title, color, items }]} />

Props

Prop	Type	Description
columns	`DiagramCompareColumn[]`	Array of column data

DiagramCycle

Molecule

Circular loop with arrows wrapping around.

Preview

Plan

→

Build

→

Test

→

Deploy

→

Development cycle

<DiagramCycle steps={[{ label, color }]} />

Props

Prop	Type	Description
steps	`DiagramCycleStep[]`	Array of cycle step data

DiagramPageMap

Molecule

Nested page wireframe showing component regions. Blocks can contain children laid out in rows or columns, up to 3 levels deep.

Preview

Header statique

Logo

Nav

Recherche island

Panier island

Contenu

Galerie

Zone d'achat island

Taille

Ajout panier

Footer statique

Architecture islands · fiche produit

<DiagramPageMap blocks={[{ label, color, badge?, children?, direction? }]} />

Props

Prop	Type	Description
blocks	`PageMapBlock[]`	Root-level page regions

PageMapBlock	Type
label	`string`	Region name
color	`DiagramColor`	Color variant
badge	`string`	Badge label (e.g. 'island', 'statique')
detail	`string`	Muted detail text
children	`PageMapBlock[]`	Nested blocks (up to 3 levels)
direction	`'row' \| 'column'`	Children layout direction (default: column)

Diagram Colors

Foundation

All available color variants for diagram elements.

Preview

purple

orange

red

green

blue

cyan

pink