shared · Used on several pages

PageIntro

components/site/PageIntro.tsx

preview

Gallery

Design systems, extracted.

Real products, read into tokens and components you can import into your own app.

usage · in this app

app/gallery/page.tsx

import { PageIntro } from '@/components/site/PageIntro'

<PageIntro eyebrow="DESIGN.md Gallery" title="The tokens behind sites you know — portable.">
  <p>
    Each entry is a{' '}
    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-ui text-foreground">DESIGN.md</code> — colour
    roles, type scale, spacing and shape, distilled from a live site by Coherent. Read the teardown, download the
    file, and hand it to any AI tool as a design seed — or install it into a real Next.js project with the CLI.
  </p>
  <p className="text-ui text-[var(--fg-dim)]">Tokens and prose only — no assets, no markup. A description of a design, not a copy of it.</p>
</PageIntro>

props

{ eyebrow: ReactNode title: ReactNode /** Beside the title, right-aligned: a source link, a status. */ actions?: ReactNode className?: string children?: ReactNode }

used on · 8

/agent /errors/errors/[code]/gallery/gallery/[slug]/lab/logos /tools /tools/designmd-extractor

tokens · 9

referenced in its file

--fg-muted --foreground --leading-copy --leading-display --text-body --text-display-lg --text-display-sm --text-display-xs --tracking-heading

history · 2

verified

Previews for the multi-component files (Orbit, Logo, Reveal) as named <Name>Preview exports, and PageIntro

2026-10-22

verified

Inner pages: one PageIntro (eyebrow, title, lead) in the home page's heading style

2026-10-21

Coherent Design MethodGitHubDesign system read from this app's code