AI Systems

The AI System provides a comprehensive design style framework, helping you standardize colors, typography, and other visual elements across your projects for a cohesive and professional user experience.

# Design Styles Reference
> Project-specific reference for the current `design.item.com` codebase.

**Display mode:** Compact  
**Theme source:** `app/globals.css`  
**Current stack:** Next.js App Router, Tailwind CSS `3.4.1`, shadcn/ui, Radix UI

## What the project actually uses

- Global canvas defaults to black because `:root` sets `--background: 0 0% 0%`
- Primary brand accent comes from `--primary: 267.0677 53.4137% 48.8235%`
- Panels use `--card: 0 0% 5.0980%` with borders from `--border: 0 0% 16.0784%`
- The global body font is `Satoshi Var`; code surfaces use the `--font-mono` stack
- Shared primitives live in `components/ui`, especially `button.tsx` and `tabs.tsx`

## design-styles viewer

- The page UI is implemented in `components/design-styles/design-styles-viewer.tsx`
- It uses nested Radix tabs for section switching and density switching
- Markdown is rendered with `react-syntax-highlighter`
- Copy and download actions use the shared shadcn `Button` component plus Lucide icons

## Important note

- The tab label says `Tailwind v4`, but this repo currently installs Tailwind CSS `3.4.1`

Need Access?

AI Systems