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 `design.lso.com`.
**Project:** LSO Design Guidelines
**Route:** `/guidelines/design-styles`
**Stack:** Next.js 15 App Router, React 19, Tailwind CSS v4, next-auth, shadcn-style UI
## What this project actually uses
- The app shell is defined in `app/layout.tsx`
- `app/providers.tsx` only wraps `SessionProvider` from `next-auth/react`
- Analytics are mounted with `PostHogProvider`
- Web tools are exposed through `components/common/webmcp-provider.tsx`
- Global design tokens live in `app/globals.css`
- The default theme is light in `:root`; dark overrides live under `.dark`
- The primary UI accent is `--primary: hsl(207.0874 100% 40.3922%)`
- The site font is `Helvetica Now Display` with `Helvetica Neue` fallback
## design-styles viewer
- The page UI lives in `components/design-styles/design-styles-viewer.tsx`
- Primary tabs switch between the four documentation sections
- Secondary tabs switch between compact and extended markdown
- Copy and `.md` export actions always use the active section and active view
- Tab highlights use LSO-aligned accents instead of generic placeholder colors
## Active tab highlight colors
- `DESIGN.md`: `var(--primary)`
- `Tailwind v4`: `#0EA5E9` Light Blue
- `CSS Variables`: `#CF8A3F` Caramel
- `Design Tokens`: `#264866` Sapphire