Overview
This is the design-system source project for Barton apps: Kiddos, CLEP/study tools, Mission Control dashboards, CTB viewers and operational cockpits. It is not a product app and not a marketing site.
You are hereOverview50kWhole treeDraftsource: design-system source · sample data onlynext: review tokens
What this project is
hub / spoke
Current node
50kDraft
Barton Design System
Documents and demonstrates reusable primitives, semantic tokens, layout and CTB navigation patterns, and the verification rules a Barton app must pass before it is called done.
- Type
- design-system source
- Consumers
- Barton apps
- Data
- sample only
- Backend
- none
CTB and source data are external truth. This project renders structure; it does not own business doctrine, schema relationships or app state.
Governing sources
- Barton CTB contractSourced· ctb-contract.md
- Design system referenceSourced· design-system.md
- Domain skin values for KiddosNo source· not supplied
- Mission Control dark skinPlanned· planned
Sections
descend into a spoke
Source and safety rules
visible in-app on purpose
| Rule | What it means | Where it shows up |
|---|---|---|
| CTB is the contract | Navigation, relationships and supported sections come from the active CTB, not from page code. | FractalShell, CTBMiniMap, ScopeBreadcrumb |
| Verified vs gap | Visual CTBs and flow maps must draw unproven relationships differently from verified ones. | DataFlowMap, EvidenceBadge |
| Dashboards are read surfaces | A panel renders what it was given and shows provenance. It is not a data store. | StatPanel, DataTable caption |
| Templates are not doctrine | Copy structure; never copy sample values into production configuration. | sample-data.ts labelling |
| No silent green | Unknown state is draft, gap or blocked — never verified. | StatusBadge, VerificationChecklist |
| Dave approves releases | No publishing, production backends, secrets or overwriting live source material without explicit approval. | This project stays a source project |
How to consume it
import pattern
Import
import {
FractalShell,
ScopeBreadcrumb,
OrientationStrip,
HubCard,
SpokeCard,
StatusBadge,
} from "@/design-system/barton";Render a hub with its spokes
<FractalShell productName="Mission Control" nav={nav}>
<ScopeBreadcrumb path={path} onUp={goUp} />
<HubCard
name={node.name}
altitude={node.altitude}
state={node.state} // real state, never hardcoded
/>
{children.map((c) => (
<SpokeCard
key={c.id}
{...c}
onDescend={c.route ? () => descend(c) : undefined} // no route => placeholder
/>
))}
</FractalShell>Not doctrineCopy the shell and primitives; bind them to that project's active CTB. Sample values insample-data.ts must never ship as configuration.