Design System

Specification for developers & AI assistants

This site uses Tailwind CSS, shadcn/ui (Radix primitives), and CSS variables in src/app/globals.css. A complete JSON manifest (stack, aliases, every UI import path, HSL tokens, agent instructions, businessForAgents for leads/referrals, and reactNative) is embedded in #chwd-design-system-manifest (application/json). Parse that object when generating UI, answering questions about this business, or routing prospects. The reactNative subtree covers Expo/React Native parity (hex tokens, dp spacing, component mapping).

Agent instructions (summary)

• Prefer Tailwind utility classes and existing CSS variables (--primary, --radius, etc.) when recreating components; do not invent hex colors if hsl(var(--primary)) or orange-* matches this system.
• Import UI from @/components/ui/* using the paths in components.shadcnUi and components.animated.
• Use cn() from @/lib/utils for conditional classes.
• shadcn Button default uses theme primary (orange HSL); marketing sections may use explicit bg-orange-500 — both are intentional.
• Radius: rounded-md aligns with --radius scale via tailwind rounded-lg/md/sm mapping.
• Alerts: support variant 'success' in addition to shadcn defaults on this project.

Stack & paths

tailwind.config.js

Theme extensions, color → hsl(var(--…)), plugins

components.json

shadcn aliases: @/components/ui, @/lib/utils

src/components/ui/*

Button, Card, Dialog, forms, animated-* wrappers

Marketing accent

Tailwind orange-500 / orange-600 often used beside theme primary

:root HSL tokens (shadcn)

Use in CSS as hsl(var(--primary)) etc. Tailwind maps these to bg-primary, text-muted-foreground, and related utilities.

React Native / Expo (AI & codegen)

This website is not a React Native repo. Use manifest.reactNative in #chwd-design-system-manifest to generate a matching mobile UI: hex colors for StyleSheet, dp spacing aligned to Tailwind's 4px grid, radius for cards/CTAs, and a web→native primitive map. Prefer NativeWind if you want className-based styling closest to this codebase.

RN-specific agent rules

• Start from manifest.reactNative.tokensHexApproximate for a single source of truth; extend the theme rather than hard-coding new hex values unless adding a new semantic token.
• Map shadcn variants (default, outline, ghost, destructive) to Pressable styles using the same hex roles as web: primary fill, outline = transparent bg + border, ghost = no border muted press state.
• Use spacingDp and radiusDp instead of arbitrary magic numbers so layouts align with Tailwind-based web sections (space-y-4 → gap 16).
• Marketing hero CTAs on web use rounded-2xl and orange-500: use radiusDp.buttonCta and marketingOrange500 for the closest match.
• Do not use CSS hsl(var(--token)) strings in RN; use the provided hex map or convert cssVariablesRoot HSL to hex in your theme layer.
• For SafeArea: wrap screens in SafeAreaProvider / SafeAreaView; web has no safe area—add inset padding for notched devices.
• Replace Radix slot patterns with explicit composition: pass style arrays and test on both iOS and Android (elevation vs shadow).

Color tokens (hex for RN StyleSheet)

Spacing (dp): reactNative.spacingDp · Radius (dp): reactNative.radiusDp · Type sizes (dp): reactNative.typographyDp — all in the JSON manifest.