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.

DS Components

The components used to build this page. Previews, code blocks, prop tables.

DSBlock

Atom

Example

Demo Title

Content inside DSBlock

Props

Prop	Type	Default	Description
`title`	string	required	Section heading (h3)

Usage

<DSBlock title="Section Title">
  <DSPreview>
    <!-- Component preview -->
  </DSPreview>
  <DSCode>code example</DSCode>
</DSBlock>

DSBlock provides consistent 32px margin-top spacing between sections. Use it to wrap each documentation section.

DSPreview

Atom

Example

Props

Prop	Type	Default	Description
`class`	string	-	Additional CSS classes

Usage

<DSPreview>
  <Button>Click me</Button>
</DSPreview>

<DSPreview class="custom-class">
  <!-- Custom styling via class -->
</DSPreview>

DSPreview uses 32px padding and 16px gap. Pass custom classes to override flex direction or alignment.

DSCode

Atom

Inline Example

<Button variant="solid" />

Block Example

const greeting = "Hello";
console.log(greeting);

Props

Prop	Type	Default	Description
`inline`	boolean	false	Renders as inline code snippet

Usage

<!-- Inline code -->
<DSCode inline>&lt;Button /&gt;</DSCode>

<!-- Block code -->
<DSCode>
const foo = "bar";
console.log(foo);
</DSCode>

DSPropsTable

Atom

Example

Name	Value
Primary	Orange button
Secondary	Outline style

With Code Cells

Prop	Type	Description
`title`	string	Main heading
`items`	array	List of items

Props

Prop	Type	Default	Description
`headers`	string[]	required	Table header labels
`rows`	Cell[][]	required	Array of rows, each row is array of cells

Cell can be a string or { code: string } for code formatting.

Usage

<DSPropsTable
  headers={["Prop", "Type", "Default", "Description"]}
  rows={[
    [{ code: "title" }, "string", "required", "The title text"],
    [{ code: "disabled" }, "boolean", "false", "Disables the component"],
  ]}
/>

DSStructure

Atom

Hierarchy diagram for displaying component structure or DOM tree.

Example

<Card>Container component

<CardTitle>Title section

<CardContent>Main content

<p>Text paragraph

Props

Prop	Type	Default	Description
`rows`	StructureRow[]	required	Array of structure rows

StructureRow: { code: string, description: string, indent?: number }

Usage

<DSStructure
  rows={[
    { code: "<section>", description: "Container" },
    { code: "<header>", description: "Header area", indent: 1 },
    { code: "<main>", description: "Main content", indent: 1 },
  ]}
/>

DSNote

Atom

Example

This is a note with inline code support. Use it for tips and additional context.

Props

Prop	Type	Description
(slot)	any	Content to display as note

Usage

<DSNote>Note text with <code>code</code></DSNote>

DSNote has 12px margin-top and 70% opacity. Supports inline <code> tags.

DSWipNotice

Atom

Notice for flagging incomplete or evolving sections.

Preview

Something is cooking.

Usage

<DSWipNotice>Notice text</DSWipNotice>

ChromaticPreview

Atom

Preview container with a color dot bar. Switches --accent-color on its content.

Preview

React

TypeScript

Astro

Usage

<ChromaticPreview>...chromatic content...</ChromaticPreview>

Replaces repeated color-wrapper divs in DS docs. One component, one dot bar, all colors.

DSColorSwatch

Atom

Compact swatch with color block on the left, variable name and hex on the right.

Preview

--orange#f8ba88

--purple#9c85d3

--border-colorrgba(255, 255, 255, 0.1)

Props

Prop	Type	Default	Description
`var`	string	required	CSS variable name
`hex`	string	required	Display value (hex or rgba)
`border`	boolean	false	Dashed border style for semi-transparent colors

Usage

<DSColorSwatch var="--orange" hex="#f8ba88" />