Design system / Tokens

Token contracts

Real token sources from four live products. Switch the brand above to inspect how different source architectures resolve into the same shadcn component API.

The page documents differences as they exist in the repo. It does not invent a shared layer where one is not defined.

Itmeo

itmeo.comDirect semantic shadcn tokens

01 / Contract

Itmeo: Direct semantic shadcn tokens

The marketing product defines the shadcn variables directly. Orange is an accent; primary actions remain dark on a warm canvas.

Brand values

warm neutral + orange

A small product palette lives directly in globals.css.

Semantic contract

--primary, --accent, --card

No intermediate --sh-* or --color-* namespace is present.

Shared primitives

@platform/ui

Components read the same shadcn variable names as the other products.

Marketing surfaces

newsletter, navigation, cards

Inline product patterns add fully rounded presentation where needed.

Shared shadcn contract

Same component API, scoped to Itmeo variables.

LiveDESIGN.md

Component contract

Button, Input, Badge, and Card read semantic variables without brand props.

Resolved contract

Button default: #26251e
Button text: #f2f1ed
Page canvas: #f2f1ed
Card surface: #ebeae5

No product dark-token set is defined in the current source.

02 / Semantic

Values consumed by the component layer

This table follows the actual source path from product naming into the shadcn variables or component roles used at runtime.

Product token	Component target	Current value	Role
--primary	Button default	#26251e	Dark primary actions
--primary-foreground	Button text	#f2f1ed	Warm inverse text
--background	Page canvas	#f2f1ed	Warm neutral background
--card	Card surface	#ebeae5	Raised marketing panels
--accent	Brand emphasis	#f54e00	Links and highlighted moments
--border	Component outlines	rgba(38,37,30,.10)	Low-contrast separation
--input	Form outlines	rgba(38,37,30,.08)	Quiet field boundary
--radius	Shared primitive radius	0.5rem	Base component geometry

03 / Foundations

Identity, type, spacing, and geometry

A compact source snapshot. Missing namespaces are shown as missing rather than reconstructed for the demo.

Primary--primary#26251ePrimary controls

Accent--accent#f54e00Brand emphasis

Canvas--background#f2f1edWarm product background

Display typeheading font-familyBricolage GrotesqueHeadings in globals.css

Body typelayout font variableGeistApplication copy

Radius--radius0.5remNewsletter overrides this with rounded-full

04 / Sources

Files that implement the contract

Each path is copied on click and can be opened directly from an IDE file finder.

Direct semantic variables, typography, and global surface rules.

Exact warm newsletter field and fully rounded Subscribe action.

Shared Button consumes the semantic contract without product-specific props.

05 / Compare

Four products, one shadcn interface

The comparison exposes architecture and maturity differences without turning them into four cosmetic recolors.

Product	Token strategy	Primary	Radius	Dark source
DesignMD	Editorial tokens + semantic bridge	#000000	4px / 8px	Defined
Itmeo	Direct semantic shadcn tokens	#26251e	0.5rem	Not defined
SiteHunter	Editorial tokens + semantic bridge	#000000	4px / 8px	Defined
AIdiscuss	Runtime aliases + semantic bridge	#4f46e5	0.5rem	Defined