DesignMDLIVEFeatured

DesignMD Showcase

DesignMD is a platform for discovering, sharing, and copying DESIGN.md files — design system references that AI coding agents can read and follow. It is also the reference implementation for the two-layer token architecture documented in Design Tokens. The patterns below are rebuilt from the app source — the live domain blocks iframe embeds.

View token system →Open designmd.directory

Source

apps/frontend/designmd

Token layer

styles/tokens.css

Brand icons

27+ in BRAND_ICON_MAP

Iframe embed

X-Frame-Options: DENY

Header

Wordmark, nav pills with active state, global search, Sign in and Create account — all using --sh-nav-height (56px) and the DesignMD token scope.

designmd

Tab sort bar

DesignMD Tabs override shadcn primitive: inset shadow highlight on list, active trigger lifts with bg-white + dual shadow, -1px vertical nudge. Click to interact.

Most upvoted today

Catalog card grid

28px radius shell, real thumbnail from designmd.directory CDN, real brand SVG from BRAND_ICON_MAP, hover-only bookmark, inline upvote pill with optimistic state, foreground CTA — click upvote to see the state flip.

Official

Vercel DESIGN.md

Vercel product shell, typography, tokens, and the UI rules an AI agent follows.

View DESIGN.md

Official

Figma DESIGN.md

Design-to-code token mapping, component anatomy, and interaction spec for AI-driven design tooling.

View DESIGN.md

Upvote interactions

Two patterns: inline horizontal pill (SiteCard bottom row) and vertical rounded-full pill (detail pages). Both are interactive — voted state inverts border + background to foreground fill.

Inline pill — CardUpvote in SiteCard

Border flips to bg-foreground on vote. Used in the card bottom row.

← click to toggle

border-border bg-background text-muted-foreground

Vertical pill — UpvoteButton on detail page

w-10 h-14 rounded-full. ChevronUp + animated count. Inverts on vote.

← click to toggle

bg-[#111] text-white border-[#111]

Copy and CTA actions

Primary CTA is a bg-foreground pill. Copy action shows a 1.2 s green flash with no modal or confirm. Both respect the auth gate — unauthenticated users redirect to /login?returnTo.

Primary CTA — View DESIGN.md

bg-foreground / text-background pill. Minimal, always high-contrast.

View DESIGN.md

Copy to clipboard

1.2 s green flash on success. No modal, no confirm — direct write to clipboard.

Brand icon system

BRAND_ICON_MAP resolves company logos from post URL, sourceDomain, or title words. Each entry stores a simple-icons SVG path and hex. Resolution walks domain parts: billing.stripe.com → stripe.

Vercel

Figma

GitHub

Stripe

Notion

Linear

Discord

Tailwind

Supabase

Framer

Anthropic

Webflow

Jira

Miro

Brand resolution — getBrandIcon(url, sourceDomain, title)

1BRAND_ICON_MAP[hostname] direct match

2Walk domain parts: billing.stripe.com → "stripe"

3Last resort: tokenise title words → "Stripe Billing"

apps/frontend/designmd/src/ui/brand-icons.ts · 14 shown, 27+ in map

Tag chips

Tags use the editorial --sh-* token layer directly: --sh-text-xs (11px) for size, --sh-color-border for the pill border, --sh-color-text-secondary for the label. Clicking routes to /tag/[tag].

Loading skeleton

SiteCard skeleton mirrors the exact card geometry — thumbnail aspect ratio, logo circle, title bar, two description lines, upvote pill, CTA pill — zero layout shift on hydration.