CoherentDS
shared · Page blocks

DesignSystemSection

components/landing/design-system-section.tsx

preview
[02]The design system

Your app ships with its design system.
Read from the code, updated with every edit.

Open /design-system in your app: every token, every component with its ID, how it is used in your code, the pages it is on, the tokens it uses and its history. Coherent rebuilds it inside every edit and checks it with the edit, so the docs keep up with the product.

Every edit, on the record

What the system holds at a glance, and each Coherent edit with its verdict, on a timeline.

localhost:3000/design-system
Every edit, on the record: a page of the generated design system

Screenshots from Orbit, the app in the hero, built with Claude and Coherent: these pages are its real /design-system, and every edit in its history was verified. This site is built the same way: open its own design system →

usage · in this app
app/page.tsx
import { DesignSystemSection } from '@/components/landing/design-system-section'

<DesignSystemSection />
props
{}
used on · 1
/
tokens · 12
referenced in its file
--accent--background--border--fg-dim--fg-muted--foreground--leading-copy--leading-display--text-body--text-display-lg--text-display-sm--tracking-heading
history · 3
verified
Hero: "See the design system" opens this site's own design system; the section links to it too
2026-10-21
verified
Previews for the site components
2026-10-21
verified
Home: every section is its own component; the page composes them
2026-10-21
Coherent Design MethodGitHubDesign system read from this app's code