Name: MyClaude
Author: MyClaude

Complete reference for MyClaude's design system: color tokens, typography scale, surfaces, glow shadows, motion, z-index, spacing, component inventory, and the token-only enforcement policy.

ReferenceUpdated 2026-03-26

MyClaude's design system uses OKLCH color tokens, a Minor Third typography scale, glow-only shadows, step-based motion, and a strict token-only policy that prohibits all inline values.

Philosophy

Three principles govern every pixel:

Dark terminal aesthetic. The UI is a hacker's terminal, not a SaaS dashboard. Warm terracotta primary, warm neutral backgrounds, phosphor-tinted category colors. Dark-only for v1.
Glow, not shadow. No traditional box-shadow elevation. Depth is communicated through luminous glow effects that reinforce the terminal identity.
Token-only enforcement. Zero inline colors, font sizes, or shadows in component code. Every visual property references a design token. This is enforced by code review rules, not just convention.

All color values use OKLCH color space. All tokens are defined in globals.css via @theme inline.

Color tokens

Semantic colors

Token	Tailwind class	Purpose
`--background`	`bg-background`	Page background (L0 surface)
`--foreground`	`text-foreground`	Primary text
`--card`	`bg-card`	Card surface (L1)
`--card-foreground`	`text-card-foreground`	Text on cards
`--popover`	`bg-popover`	Popover/dropdown surface (L2)
`--popover-foreground`	`text-popover-foreground`	Text in popovers
`--primary`	`bg-primary`, `text-primary`	Warm terracotta — brand color
`--primary-foreground`	`text-primary-foreground`	Text on primary backgrounds
`--secondary`	`bg-secondary`	Secondary surface
`--secondary-foreground`	`text-secondary-foreground`	Text on secondary
`--muted`	`bg-muted`	Muted/disabled surface
`--muted-foreground`	`text-muted-foreground`	Muted text, metadata
`--accent`	`bg-accent`	Accent surface (hover states)
`--accent-foreground`	`text-accent-foreground`	Text on accent
`--destructive`	`bg-destructive`, `text-destructive`	Error/danger actions
`--border`	`border-border`	All borders
`--input`	`bg-input`	Input field backgrounds
`--ring`	`ring-ring`	Focus rings

Phosphor category palette

Each product category has a dedicated color for instant visual identification.

Token	Tailwind class	Category
`--vault-green`	`text-vault-green`	Skills
`--vault-cyan`	`text-vault-cyan`	Squads
`--vault-amber`	`text-vault-amber`	Agents
`--vault-violet`	`text-vault-violet`	Workflows
`--vault-magenta`	`text-vault-magenta`	Design Systems
`--vault-gold`	`text-vault-gold`	CLAUDE.md
`--vault-blue`	`text-vault-blue`	Prompts
`--vault-lime`	`text-vault-lime`	Applications
`--vault-rose`	`text-vault-rose`	Systems

The --vault-green-muted variant provides a 15% opacity version for background tints.

Status colors

Token	Tailwind class	Purpose
`--vault-success`	`text-vault-success`	Success states (maps to green)
`--vault-warning`	`text-vault-warning`	Warnings (maps to gold)
`--vault-error`	`text-vault-error`	Errors (maps to destructive)
`--vault-info`	`text-vault-info`	Informational (maps to blue)

Chart colors

Five chart colors (--chart-1 through --chart-5) are provided for data visualization. chart-1 maps to primary terracotta.

Typography scale

Font: Geist Mono (primary), Geist Sans (fallback). Scale follows Minor Third ratio (1.2) from a 14px base.

Level	Class	Size	Line height	Letter spacing	Weight	Use
Display	`text-xl` / `text-2xl` + `font-semibold`	20-24px	1.2	-0.02em	600	Hero titles, page titles
Heading	`text-sm` + `font-semibold`	14px	1.3	-0.01em	600	Section titles, card titles
Body	`text-xs`	12px	1.5	normal	400	Content, descriptions, nav, buttons
Caption	`text-micro`	10px	1.4	0.02em	400	Metadata, timestamps
System	`text-system`	10px	1.15	0.08em	500	Labels, tags, table headers (uppercase)
Nano	`text-nano`	8px	1.2	0.04em	400	Fine print, version numbers

The text-mini utility (11px, lh 1.4, 0.01em tracking) sits between Body and Caption for edge cases.

Rule: Navigation chrome and buttons always use text-xs (Body), never Caption. Caption is for metadata only.

Custom utilities

Defined in globals.css via @utility:

Utility	Output
`text-nano`	`font-size: 0.5rem; line-height: 1.2; letter-spacing: 0.04em`
`text-micro`	`font-size: 0.625rem; line-height: 1.4; letter-spacing: 0.02em`
`text-mini`	`font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.01em`
`text-system`	`font-size: 0.625rem; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500`
`safe-bottom`	`padding-bottom: env(safe-area-inset-bottom, 0)`
`scrollbar-none`	Hides scrollbar across all browsers
`animate-blink`	Terminal cursor blink (1s step-end infinite)

Never manually compose text-micro uppercase tracking-wider — use text-system instead.

Spacing system

Tailwind v4 built-in on a 4px base grid. No custom spacing tokens.

Class	Value	Use
`p-1`, `gap-1`, `m-1`	4px	Tight internal padding
`p-2`, `gap-2`, `m-2`	8px	Standard internal padding
`p-3`, `gap-3`, `m-3`	12px	Card content padding
`p-4`, `gap-4`, `m-4`	16px	Section padding
`p-6`, `gap-6`, `m-6`	24px	Large section gaps
`p-8`, `gap-8`, `m-8`	32px	Page-level spacing

All Tailwind spacing utilities are available. Do not create custom --space-* tokens.

Surface hierarchy

Five surface levels from darkest (L0) to lightest (L4). Each level adds approximately +4 lightness in OKLCH.

Level	Token	Tailwind class	OKLCH lightness (dark)	Use
L0	`--background`	`bg-background`	0.145	Page background
L1	`--card`	`bg-card`	0.185	Cards, panels
L2	`--popover` / `--secondary`	`bg-popover`, `bg-secondary`	0.225	Popovers, dropdowns, muted areas
L3	`--accent`	`bg-accent`	0.265	Hover states, active items
L4	(border)	`border-border`	0.265	Borders, dividers

Surfaces never use opacity for layering — each level is a distinct opaque color.

Shadow and glow system

No traditional box-shadow elevation. All depth is communicated through glow.

Glow classes

Class	Effect	Use
`.glow-box`	`box-shadow: var(--glow-sm)`	Subtle container emphasis
`.glow-primary`	`text-shadow: var(--glow-text)`	Terracotta text glow
`.glow-green`	`text-shadow` with vault-green	Status/success text glow

Glow tokens

Token	Spread	Opacity
`--glow-sm`	8px	12%
`--glow-md`	16px	15%
`--glow-lg`	24px	18%
`--glow-text`	6px	35%

The Black (AMOLED) theme intensifies glow values for high-contrast displays.

Motion tokens

Terminal-native motion: instant snaps or barely perceptible transitions. No elastic easing, no spring physics.

Token	Tailwind class	Value	Use
`--transition-duration-instant`	`duration-instant`	0ms	Immediate state change
`--transition-duration-snap`	`duration-snap`	75ms	Hover/focus feedback
`--transition-duration-fast`	`duration-fast`	100ms	Transitions, reveals
`--transition-duration-normal`	`duration-normal`	150ms	Complex transitions
`--transition-duration-slow`	`duration-slow`	300ms	Layout shifts (rare)
`--transition-timing-function-terminal`	`ease-terminal`	`steps(1)`	Binary on/off (cursor blink)
`--transition-timing-function-snap`	`ease-snap`	`cubic-bezier(0.2, 0, 0, 1)`	Fast-in, immediate-out

Rule: Prefer duration-snap + ease-snap for most interactions. Use ease-terminal only for binary state toggles.

Z-index scale

Seven named layers. Never use arbitrary z-[...] values.

Token	Tailwind class	Value	Use
`--z-index-base`	`z-base`	0	Default stacking
`--z-index-raised`	`z-raised`	1	Cards above siblings
`--z-index-dropdown`	`z-dropdown`	10	Dropdowns, menus
`--z-index-sticky`	`z-sticky`	20	Sticky headers, nav
`--z-index-overlay`	`z-overlay`	30	Overlay backgrounds
`--z-index-modal`	`z-modal`	40	Modal dialogs
`--z-index-toast`	`z-toast`	50	Toast notifications
`--z-index-max`	`z-max`	9999	Emergency override only

Border radius

Terminal aesthetic: barely-rounded rectangles. Base --radius is 0.375rem (6px).

Token	Tailwind class	Computed value
`--radius-sm`	`rounded-sm`	3.6px
`--radius-md`	`rounded-md`	4.8px
`--radius-lg`	`rounded-lg`	6px (base)
`--radius-xl`	`rounded-xl`	8.4px
`--radius-2xl`	`rounded-2xl`	10.8px
`--radius-3xl`	`rounded-3xl`	13.2px
`--radius-4xl`	`rounded-4xl`	15.6px

Component inventory

Atoms (20 components)

Small UI primitives. Single responsibility, no business logic.

Component	File	Purpose
AsciiText	`ascii-text.tsx`	ASCII art text rendering
BreadcrumbNav	`breadcrumb-nav.tsx`	Navigation breadcrumbs
ClaudeCodeLogo	`claude-code-logo.tsx`	Brand logo mark
ClaudeMascot	`claude-mascot.tsx`	Static mascot illustration
ClaudeMascotAnimated	`claude-mascot-animated.tsx`	Animated mascot
LevelBadge	`level-badge.tsx`	User level indicator
McsBadge	`mcs-badge.tsx`	MCS certification badge
PriceTag	`price-tag.tsx`	Price display (free/paid)
RankBadge	`rank-badge.tsx`	User rank display
RoleBadge	`role-badge.tsx`	User role indicator
StarRating	`star-rating.tsx`	1-5 star display
StatCounter	`stat-counter.tsx`	Numeric stat with label
StatusDot	`status-dot.tsx`	Status indicator dot
ThemeProvider	`theme-provider.tsx`	Theme context wrapper
ThemeSwitcher	`theme-switcher.tsx`	Dark/light/black toggle
VaultBadge	`vault-badge.tsx`	Branded badge component
VaultLogo	`vault-logo.tsx`	Full logo with wordmark
VaultTag	`vault-tag.tsx`	Category/tag pill
VerifyEmailBanner	`verify-email-banner.tsx`	Email verification prompt
XpBar	`xp-bar.tsx`	XP progress bar

Molecules (12 components)

Composed from atoms. Handle local interaction state.

Component	File	Purpose
AuthModal	`auth-modal.tsx`	Login/register modal
CategoryFilter	`category-filter.tsx`	Category selection bar
MarkdownRenderer	`markdown-renderer.tsx`	Markdown to HTML
MobileProductList	`mobile-product-list.tsx`	Mobile product listing
NavBar	`nav-bar.tsx`	Main navigation bar
ProductCard	`product-card.tsx`	Product preview card
ReportDialog	`report-dialog.tsx`	Content report form
ReviewAggregate	`review-aggregate.tsx`	Rating summary display
ReviewForm	`review-form.tsx`	Write a review
ReviewList	`review-list.tsx`	Review listing
SearchBar	`search-bar.tsx`	Search input with filters
UserCard	`user-card.tsx`	User preview card

Organisms (12 components)

Complex sections. May fetch data or manage significant state.

Component	File	Purpose
AskSellerDialog	`ask-seller-dialog.tsx`	Buyer-seller messaging
ExploreClient	`explore-client.tsx`	Explore page client shell
HeroSection	`hero-section.tsx`	Landing page hero
MessagesPanel	`messages-panel.tsx`	Conversation message list
ProductActions	`product-actions.tsx`	Buy/download/like bar
ProductContent	`product-content.tsx`	Product page body
ProductGrid	`product-grid.tsx`	Grid layout for products
ProductTable	`product-table.tsx`	Table layout for products
ProfileClient	`profile-client.tsx`	Profile page client shell
ProfileHeader	`profile-header.tsx`	User profile header
PurchasesList	`purchases-list.tsx`	User purchase history
RelatedProducts	`related-products.tsx`	Related product suggestions

UI (shadcn/ui)

The components/ui/ directory contains unmodified shadcn/ui components (base-nova theme). These are never edited directly.

Token-only policy

What is prohibited in component code

Pattern	Example	Why
Inline colors	`text-[#d97757]`, `bg-[oklch(...)]`	Use semantic tokens (`text-primary`)
Inline font-size	`text-[14px]`, `text-[0.875rem]`	Use scale classes (`text-sm`)
Inline spacing	`p-[13px]`, `m-[7px]`	Use 4px grid (`p-3`, `m-2`)
Inline shadows	`shadow-[0_0_8px_...]`	Use glow classes (`.glow-box`)
Inline z-index	`z-[100]`	Use z-scale (`z-modal`)
Inline border-radius	`rounded-[8px]`	Use radius tokens (`rounded-lg`)
Manual text-system	`text-micro uppercase tracking-wider`	Use `text-system` utility

What is permitted

All Tailwind built-in classes (text-xs, p-4, bg-primary, rounded-lg)
Custom @utility classes (text-nano, text-micro, text-mini, text-system)
Theme tokens (text-muted-foreground, bg-card, border-border, text-primary)
Glow classes (.glow-box, .glow-primary, .glow-green)
animate-blink for terminal cursor

Exceptions (require inline comment)

SVG width/height attributes (dimensional, not styling)
Animation @keyframes internal to globals.css
shadcn/ui components in components/ui/ (never edited)

All design tokens live in src/app/globals.css inside the @theme inline block. Theme variants (.dark, .light, .black) override CSS custom properties to swap palettes without changing component code.