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-aligned reference for `design.cubework.com`.
**Display mode:** Compact
**Primary source files:** `app/globals.css`, `app/layout.tsx`, `tailwind.config.ts`, `components/design-styles/design-styles-viewer.tsx`
## What this project actually uses
- `ThemeProvider` runs with `defaultTheme="light"` and `attribute="class"`
- `:root` holds the default dark canvas tokens: `--background: #000000`, `--foreground: #ffffff`, `--card: #0d0d0d`
- `.dark` flips the app to the light canvas: `--background: #fafafa`, `--foreground: #18181b`, `--card: #ffffff`
- The body gets `Inter` from `next/font/google`; `app/globals.css` still keeps `Arial, Helvetica, sans-serif` as the plain CSS fallback
- Tailwind theme colors in `tailwind.config.ts` map directly to `var(--token)` values, not `hsl(var(--token))`
## design-styles viewer rules
- The page is implemented in `components/design-styles/design-styles-viewer.tsx`
- Viewer surfaces should use raw CSS variables like `var(--background)` and `var(--card)`
- Active tab text stays on `--foreground`; the underline carries the per-tab highlight color
- Markdown exports are generated from this component, so the text here must stay synced with the live tokens
## Active tab highlight colors
- `DESIGN.md`: `#ffffff` on the default dark canvas, `#18181b` when `.dark` is active
- `Tailwind CSS`: `#54cbcf` on the default dark canvas, `#072144` when `.dark` is active
- `CSS Variables`: `#f3e85c` on the default dark canvas, `#32a3bb` when `.dark` is active
- `Design Tokens`: `#38d430` on the default dark canvas, `#138a0a` when `.dark` is active