Reference implementation

Design System

Architecture overview for the multi-product token system: typography, color, shadows, icons, and product theme previews. For individual CSS variable values, see the Tokens page →

Product theme:

Typography

DM SansBody / UI labels / navigation--font-dm-sans

xsMeta / label / caption text

smThe quick brown fox jumps over the lazy dog

baseBody copy, card descriptions, secondary content

lg / mediumSection headings and panel titles

2xl / semiboldPage headline, product name

Instrument SerifDisplay / hero / editorial headings--font-instrument-serif

2xl italicForm follows function.

3xlLess, but better.

4xl italicGood design is as little design as possible.

Bricolage GrotesqueDisplay alternative / product names / bold UI--font-bricolage

2xl / 600Display heading

3xl / 700Bold product name.

4xl / 800Hero statement.

Geist MonoCode / token names / paths--font-geist-mono

sm / 400--sh-color-primary: #111111; /* brand black */

Color

DesignMD uses a monochrome base with a single orange interaction accent. Full CSS variable docs on Tokens →

Black

#111111

Primary / brand / text

White

#ffffff

Background

Surface

#f8f8f6

Card / input background

Border

#e5e5e5

Borders, dividers, separators

Muted

#6b7280

Secondary copy, placeholders

Upvote

#f97316

Vote / interaction accent

Shadows

shadow-sm

Cards, inputs

shadow-md

Popovers

shadow-lg

Modals, dropdowns

shadow-xl

Floating panels

Icons

UI icons from lucide-react — subset used across Itmeo products.

Bookmark

Loader2

Trash2

MessageCircle

Moon

Sun

Plus

Check

ChevronUp

ChevronDown

ArrowRight

ArrowLeft

ArrowUpRight

AlertCircle

AlertTriangle

Settings

LogOut

Share2

Download

Copy

Bell

Monitor

User

Users

Upload

TrendingUp

Sparkles

Star

MoreHorizontal

ExternalLink

Eye

EyeOff

Mail

Lock

Pencil

FileText

CheckCircle2

Brand Icons

Brand logos from simple-icons SVG paths — used in DesignMD's BRAND_ICON_MAP for catalog card thumbnails. Resolution walks domain parts to match company logos.

Vercel

Figma

GitHub

Stripe

Notion

Linear

Discord

Tailwind

Supabase

Framer

Anthropic

Webflow

Jira

Miro