CoherentDS
shared · Page blocks

ToolsSection

components/landing/tools-section.tsx

preview
[06]Also in the box

Design tokens, in and out.

Standalone tools from earlier releases, still maintained.

Extract

Pull the design system of a live site into a portable DESIGN.md.

coherent extract <url>
Try it in the browser
Export tokens

One token model out to W3C DTCG JSON, CSS variables and a Tailwind config.

coherent export tokens
See the docs
Gallery

Design systems extracted from well-known sites: tokens, type, motion, surfaces.

getcoherent.design/gallery
Browse the gallery
usage · in this app
app/page.tsx
import { ToolsSection } from '@/components/landing/tools-section'

<ToolsSection />
props
{}
used on · 1
/
tokens · 16
referenced in its file
--accent--background--border--border-strong--fg-dim--fg-muted--foreground--leading-compact--leading-copy--leading-display--surface--text-body--text-display-lg--text-display-sm--text-ui--tracking-heading
history · 2
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