Itmeo UI Docs — AI-first design system

One token system. Every product.

Living documentation for a multi-product design system — components re-theme per product at runtime.

18 components · 8 surfaces · 12 products · 1 token system

Last update 2026-06-10 — Multi-product comparison: scoped themes, atomic component navigation, real usage counts, and a product coverage map.

DesignMDLIVEFlagship

A catalog of DESIGN.md files — design system references readable by AI coding agents (Claude Code, Cursor, Codex). Built on a two-layer token system: editorial --sh-* tokens bridged into shadcn. The reference implementation for this UI Docs.

Token system Component showcase designmd.directory

# DESIGN.md

tokens: --sh-bg · --sh-fg · --sh-accent

bridge: --background · --foreground · --primary

themes: light / dark · per-product

readable by: Claude Code · Cursor · Codex

Products

Click a product — the whole UI Docs re-themes through its tokens

How it works

01Product tokens--sh-* CSS vars›

02shadcn bridge--primary, --background›

03Theme switchingper-product at runtime›

04Componentsshadcn + @platform/ui›

05AI docsDESIGN.md readable

Explore

Login Pagesauth surfaces by product Profile & Accountdropdowns, dashboards, signed-in state DesignMD ShowcaseDesignMD UI patterns, rebuilt from source Navbarstop-level shell navigation Footersreal legal/product footer rows Design Systemplatform palettes, type, shadows, icons TokensDesignMD --sh-* tokens and shadcn bridge EmailsReact Email previews and props

Components

18 documented

Icons

lucide + simple-icons sets

Button

variants, sizes, icons

Card

header, content, footer

Dialog

modal with trigger

Tabs

with content panels

Badge

default, secondary, destructive, outline

Input

real product field patterns by app

Textarea

multiline input

Select

dropdown select

Checkbox

with label

Switch

toggle

Table

data table

Dropdown Menu

profile menu, context actions by product

Tooltip

hover info

Alert

default, destructive

Progress

fill levels

Skeleton

loading placeholders

Avatar

with image and fallback