DesignSystemComponent
Each component on /system embeds a <script type="application/ld+json"> block describing itself as a DesignSystemComponent. This page documents that type.
The schema is designed for consumption by LLMs, RAG pipelines, and agents evaluating this portfolio — not just browsers rendering the page.
The complete executable contract is available as a JSON manifest, and the canonical token exchange file is served separately as DTCG JSON. Repository agents query the same contract through npm run system.
Properties
@type
"DesignSystemComponent"
name
Human-readable component name. e.g. "Button"
description
Why this component exists — rationale for humans and agents.
tier
"component" | "pattern" | "view"
sourceFile
Path to the .astro source file. e.g. "/src/components/shared/Button.astro"
foundations
Design tokens consumed. Real token names — copy directly into code.
colour: CSS custom properties. spacing: spacing tokens. type: typographic classes.
composition
Assembly rules. contains: child components. containedBy: valid parents. slots: named insertion points. placement: the exact flow and column utilities used by the component.
constraints
Array of {rule, reason} — rules agents and humans must follow when using this component.
accessibility
role: ARIA role. keyboard: interaction model. wcag: compliance notes.
agentContext
when: when to reach for this component. notWhen: when to use something else. prefer: the alternative.
spacing
internal: how the component spaces its children. external: how it expects to be spaced by its parent.
Entries
36 entries currently expose this schema.