@motor-cms/ui-admin 1.0.1-alpha.0

package/app/pages/motor-admin/theme-preview/themes/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 12, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #24590 | 5:12 PM | 🟣 | Neon Violet Theme Specification Complete with Dual-Mode Support | ~623 |
+</claude-mem-context>

package/app/pages/motor-admin/theme-preview/themes/asymmetric-brutalist.md

@@ -0,0 +1,381 @@
+# Asymmetric Brutalist Theme
+
+> A raw, high-contrast admin panel theme that breaks conventional UI symmetry. Thick black borders, hard offset shadows, one-sided rounded corners, and oversized typography create an interface that feels tactile, bold, and unapologetically expressive. Inspired by neobrutalist web design, Arc Browser's colored borders, and Notion's content-first hierarchy.
+
+---
+
+## Color Palette
+
+### Primary: Black + Off-White (The Foundation)
+
+True brutalism starts with maximum contrast. Stark black borders, shadows, and text against warm off-white backgrounds form the structural skeleton. Every other color is a deliberate accent punched into this monochrome frame.
+
+| Token            | Tailwind Class   | Hex       | Usage                                   |
+|------------------|------------------|-----------|-----------------------------------------|
+| base-black       | `neutral-950`    | #09090b   | Borders, shadows, primary text          |
+| base-white       | `neutral-50`     | #fafafa   | Page background, card fills             |
+| warm-white       | `stone-50`       | #fafaf9   | Alternate background, sidebar bg        |
+| off-white        | `stone-100`      | #f5f5f4   | Card hover states, table stripes        |
+| border-gray      | `stone-300`      | #d6d3d1   | Secondary borders, dividers             |
+
+### Accent: Electric Lime (Tailwind `lime`)
+
+A jarring, high-energy accent that screams against black. Used sparingly for active states, CTAs, and interactive highlights. This is not a polite green -- it is neon, aggressive, impossible to ignore.
+
+| Token            | Tailwind Class   | Hex       | Usage                                   |
+|------------------|------------------|-----------|-----------------------------------------|
+| accent-300       | `lime-300`       | #bef264   | Active sidebar item bg, highlight fills |
+| **accent-400**   | **`lime-400`**   | **#a3e635** | **Primary CTA buttons, active states**|
+| accent-500       | `lime-500`       | #84cc16   | Hover on accent elements                |
+| accent-600       | `lime-600`       | #65a30d   | Pressed / active accent                 |
+
+### Secondary Accent: Hot Pink (Tailwind `pink`)
+
+A secondary punch color for destructive actions, notifications, and badges. Creates electric tension when paired with lime.
+
+| Token            | Tailwind Class   | Hex       | Usage                                   |
+|------------------|------------------|-----------|-----------------------------------------|
+| secondary-400    | `pink-400`       | #f472b6   | Notification badges, warning highlights |
+| **secondary-500**| **`pink-500`**   | **#ec4899** | **Destructive buttons, error states** |
+| secondary-600    | `pink-600`       | #db2777   | Hover on destructive elements           |
+
+### Semantic Colors
+
+| Purpose   | Color             | Hex       | Notes                                    |
+|-----------|-------------------|-----------|------------------------------------------|
+| Success   | `lime-400`        | #a3e635   | Ties to primary accent intentionally     |
+| Warning   | `amber-400`       | #fbbf24   | High visibility against black borders    |
+| Error     | `pink-500`        | #ec4899   | Ties to secondary accent                 |
+| Info      | `sky-400`         | #38bdf8   | Cool contrast against warm palette       |
+
+---
+
+## Typography
+
+### Font Pairing: Space Grotesk (Oversized) + JetBrains Mono
+
+**Heading Font: Space Grotesk** (Google Fonts)
+- Style: Geometric grotesque with quirky letterforms -- the slight irregularities feel intentionally raw
+- Weights: **700 (Bold)** exclusively for headings. No medium, no light. Bold or nothing.
+- Use for: Page titles at MASSIVE sizes, section headers, stat numbers, sidebar labels, button text
+- Character: Technical, blunt, unapologetic. The geometric shapes pair perfectly with the hard edges of brutalist borders.
+
+**Body + Code Font: JetBrains Mono** (Google Fonts)
+- Style: Monospaced typeface originally designed for code, repurposed here for ALL body text
+- Weights: 400 (Regular) for body, 500 (Medium) for labels and emphasis
+- Use for: Body text, table data, form inputs, metadata, descriptions -- everything that isn't a heading
+- Character: Using a monospaced font for body text is a deliberate brutalist choice. It references raw HTML, terminal output, the "undesigned" web. Every character occupies equal space, creating a visible grid rhythm.
+
+### Google Fonts Import
+
+```
+https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@700&display=swap
+```
+
+### Type Scale (OVERSIZED)
+
+This theme deliberately breaks the "14-16px body text" convention. Everything is bigger.
+
+| Element               | Font            | Weight | Size (rem)  | Size (px) | Tracking     | Notes                              |
+|-----------------------|-----------------|--------|-------------|-----------|--------------|-------------------------------------|
+| Page title (h1)       | Space Grotesk   | 700    | **3.0**     | **48px**  | -0.04em      | MASSIVE. Dominates the viewport.   |
+| Section title (h2)    | Space Grotesk   | 700    | **2.0**     | **32px**  | -0.03em      | Still commanding.                  |
+| Card header (h3)      | Space Grotesk   | 700    | **1.375**   | **22px**  | -0.02em      | Bold only, no medium weight.       |
+| Stat number           | Space Grotesk   | 700    | **3.75**    | **60px**  | -0.05em      | Enormous KPI numbers.              |
+| Body text             | JetBrains Mono  | 400    | **1.0**     | **16px**  | 0            | Monospaced, grid-aligned.          |
+| Label                 | JetBrains Mono  | 500    | **0.8125**  | **13px**  | 0.05em       | UPPERCASE, letterspaced.           |
+| Small / caption       | JetBrains Mono  | 400    | 0.75        | 12px      | 0.02em       | Metadata, timestamps.              |
+| Nav item (sidebar)    | Space Grotesk   | 700    | **1.125**   | **18px**  | -0.01em      | Bold nav, bigger than usual.       |
+| Button text           | Space Grotesk   | 700    | **1.0**     | **16px**  | 0.02em       | UPPERCASE on primary buttons.      |
+
+---
+
+## Shape Language
+
+### The Core Idea: Asymmetric Corners
+
+Every shape in this theme has **intentional asymmetry**. No element has four matching corners. This is the defining visual signature -- it makes the entire interface feel off-kilter, hand-crafted, and confrontational.
+
+### Border Radius Recipes
+
+| Shape Name           | CSS `border-radius`                    | Tailwind (approximate)                        | Used On                      |
+|----------------------|----------------------------------------|-----------------------------------------------|-------------------------------|
+| **Slash Card**       | `0 24px 0 24px`                        | `rounded-none rounded-tr-3xl rounded-bl-3xl`  | Cards, modals, dialogs        |
+| **Tab Shape**        | `16px 16px 0 0`                        | `rounded-t-2xl rounded-b-none`                | Tab bars, header sections     |
+| **Pill-Left**        | `9999px 4px 4px 9999px`               | `rounded-l-full rounded-r-sm`                 | Primary buttons               |
+| **Pill-Right**       | `4px 9999px 9999px 4px`               | `rounded-l-sm rounded-r-full`                 | Secondary / ghost buttons     |
+| **Notch Top-Left**   | `24px 0 0 0`                           | `rounded-tl-3xl`                              | Sidebar active indicator      |
+| **Bottom-Heavy**     | `0 0 16px 16px`                        | `rounded-b-2xl rounded-t-none`                | Dropdown menus, popovers      |
+| **Sharp**            | `0`                                    | `rounded-none`                                | Inputs, table cells, badges   |
+
+### Thick Borders (The Brutalist Signature)
+
+Every interactive element has a visible, thick black border. No subtle 1px hairlines here.
+
+| Element        | Border                                      | CSS                                   |
+|----------------|---------------------------------------------|---------------------------------------|
+| Cards          | 3px solid black                             | `border-[3px] border-neutral-950`     |
+| Buttons        | 3px solid black                             | `border-[3px] border-neutral-950`     |
+| Inputs         | 3px solid black                             | `border-[3px] border-neutral-950`     |
+| Sidebar        | Right edge: 3px solid black                 | `border-r-[3px] border-neutral-950`   |
+| Table          | 2px solid black on all cells                | `border-2 border-neutral-950`         |
+| Badges         | 2px solid black                             | `border-2 border-neutral-950`         |
+
+### Hard Offset Shadows (No Blur, No Subtlety)
+
+The defining neobrutalist shadow: a solid-color rectangle offset from the element. Zero blur. Creates a tactile, sticker-like, pseudo-3D effect.
+
+| Element        | Shadow CSS                                  | Tailwind Custom                        | Notes                         |
+|----------------|---------------------------------------------|----------------------------------------|-------------------------------|
+| Cards          | `box-shadow: 6px 6px 0 0 #09090b`          | `shadow-[6px_6px_0_0_#09090b]`         | Strong 3D pop                 |
+| Buttons (rest) | `box-shadow: 4px 4px 0 0 #09090b`          | `shadow-[4px_4px_0_0_#09090b]`         | Smaller offset                |
+| Buttons (hover)| `box-shadow: 2px 2px 0 0 #09090b`          | `shadow-[2px_2px_0_0_#09090b]`         | Shrinks on hover (pressed)    |
+| Buttons (active)| `box-shadow: 0 0 0 0 #09090b`             | `shadow-none`                          | Fully pressed down            |
+| Inputs (focus) | `box-shadow: 4px 4px 0 0 #a3e635`          | `shadow-[4px_4px_0_0_#a3e635]`         | Lime shadow on focus          |
+| Modals         | `box-shadow: 8px 8px 0 0 #09090b`          | `shadow-[8px_8px_0_0_#09090b]`         | Maximum depth for overlays    |
+
+### Button Press Animation
+
+Buttons translate down + right on hover/active to match the shrinking shadow, creating a physical "press" effect:
+
+```css
+/* Rest state */
+.btn-brutal {
+  box-shadow: 4px 4px 0 0 #09090b;
+  transform: translate(0, 0);
+  transition: all 0.1s ease;
+}
+
+/* Hover */
+.btn-brutal:hover {
+  box-shadow: 2px 2px 0 0 #09090b;
+  transform: translate(2px, 2px);
+}
+
+/* Active (pressed) */
+.btn-brutal:active {
+  box-shadow: 0 0 0 0 #09090b;
+  transform: translate(4px, 4px);
+}
+```
+
+---
+
+## Component Styling Notes
+
+### Sidebar
+
+- **Off-white background** (`bg-stone-50`) with a thick right border (`border-r-[3px] border-neutral-950`)
+- Navigation items use Space Grotesk Bold at 18px -- bigger than typical admin sidebars
+- **Active item**: `bg-lime-300` fill with `rounded-tl-3xl` (only top-left corner rounded) + `border-l-4 border-neutral-950` left accent
+- **Hover item**: `bg-stone-100` with the same asymmetric radius
+- Section labels: JetBrains Mono, UPPERCASE, letterspaced, `text-stone-400`, 13px
+- Bottom of sidebar: thick horizontal rule (`border-t-[3px] border-neutral-950`) separating user profile area
+- Sidebar width: **280px** (wider than typical 240px to accommodate larger text)
+- Inspired by: Arc Browser's bold colored sidebar borders, Notion's content hierarchy
+
+### Buttons
+
+- **Primary CTA**: `bg-lime-400 text-neutral-950 border-[3px] border-neutral-950` with `rounded-l-full rounded-r-sm` (pill on left, sharp on right). Uses Space Grotesk Bold UPPERCASE. Hard offset shadow.
+- **Secondary**: `bg-neutral-50 text-neutral-950 border-[3px] border-neutral-950` with `rounded-l-sm rounded-r-full` (sharp on left, pill on right -- mirrors primary). Hard offset shadow.
+- **Destructive**: `bg-pink-500 text-white border-[3px] border-neutral-950` with same pill-left shape as primary.
+- **Ghost**: `bg-transparent text-neutral-950 border-[3px] border-neutral-950` with `rounded-none`. No shadow.
+- All buttons: `px-8 py-3` (generous padding), min-height 48px
+- Press animation on all buttons with shadows (see animation section above)
+
+### Cards
+
+- `bg-white border-[3px] border-neutral-950` with **Slash Card** corners (`rounded-none rounded-tr-3xl rounded-bl-3xl`)
+- Hard offset shadow: `shadow-[6px_6px_0_0_#09090b]`
+- Card header: Space Grotesk Bold, 22px, with a thick bottom border (`border-b-[3px] border-neutral-950`) separating header from body
+- Card body: generous padding `p-8` (32px)
+- **Stat cards**: Background fill `bg-lime-300` with enormous 60px stat numbers in Space Grotesk Bold. Slash Card shape with black shadow.
+- Hover state: shadow shifts to `shadow-[4px_4px_0_0_#09090b]` + `translate(2px, 2px)` -- subtle press effect on cards too
+- No gradient. No subtle shadows. No soft edges. Raw.
+
+### Tables / Data Grids
+
+- **Full grid lines**: Every cell has `border-2 border-neutral-950`. This is intentional -- brutalism shows structure.
+- Header row: `bg-neutral-950 text-white` with Space Grotesk Bold. Inverted color scheme for maximum contrast.
+- Header text: UPPERCASE, letterspaced (`tracking-wider`)
+- Body cells: JetBrains Mono Regular, 16px. Monospaced data alignment is a feature, not a bug.
+- Alternating rows: `even:bg-stone-50` -- subtle warmth
+- Row hover: `bg-lime-100` highlight
+- Action column: icon buttons with `border-2 border-neutral-950 rounded-none` and hover `bg-lime-300`
+- Sort indicators: `text-pink-500` arrows
+
+### Form Inputs
+
+- **Sharp corners** (`rounded-none`) -- inputs are intentionally angular while cards are asymmetric
+- `border-[3px] border-neutral-950` thick black border
+- Focus state: `border-lime-500` + `shadow-[4px_4px_0_0_#a3e635]` (lime offset shadow appears on focus)
+- Placeholder text: JetBrains Mono, `text-stone-400`
+- Labels: JetBrains Mono Medium, UPPERCASE, `tracking-wider`, positioned above input with `mb-2`
+- Input padding: `px-4 py-3` (generous)
+- Input text: JetBrains Mono Regular, 16px
+- Select dropdowns: sharp corners with `border-[3px]`, dropdown panel uses **Bottom-Heavy** radius (`rounded-b-2xl rounded-t-none`)
+- Checkbox / Radio: replaced with `w-6 h-6` squares/circles with `border-[3px] border-neutral-950`, checked fill `bg-lime-400`
+- Error state: `border-pink-500` + `shadow-[4px_4px_0_0_#ec4899]` (pink offset shadow)
+
+### Badges / Tags
+
+- **Completely sharp** (`rounded-none`) -- no pills, no rounded corners
+- `border-2 border-neutral-950 px-3 py-1`
+- Primary: `bg-lime-300 text-neutral-950`
+- Danger: `bg-pink-500 text-white`
+- Neutral: `bg-stone-200 text-neutral-950`
+- Info: `bg-sky-300 text-neutral-950`
+- Font: JetBrains Mono Medium, UPPERCASE, 13px, `tracking-wider`
+- Look like tiny labels / stamps -- deliberately anti-pill
+
+### Notifications / Toasts
+
+- `bg-white border-[3px] border-neutral-950` with hard offset shadow
+- **Tab Shape** radius (`rounded-t-2xl rounded-b-none`) -- rounded top, flat bottom
+- Left color bar: `border-l-[6px]` (extra thick) in semantic color
+- Success: `border-l-[6px] border-lime-400`
+- Error: `border-l-[6px] border-pink-500`
+- Warning: `border-l-[6px] border-amber-400`
+- Info: `border-l-[6px] border-sky-400`
+- Toast text: JetBrains Mono, body size
+
+### Modals / Dialogs
+
+- **Slash Card** shape with extra-heavy shadow: `shadow-[8px_8px_0_0_#09090b]`
+- `border-[3px] border-neutral-950`
+- Overlay: `bg-neutral-950/60` (dark, high opacity)
+- Modal header: Space Grotesk Bold 32px with bottom border
+- Close button: `rounded-none border-[3px] border-neutral-950` square button in top-right
+
+### Pagination
+
+- Square buttons (`rounded-none`) with `border-2 border-neutral-950`
+- Active page: `bg-neutral-950 text-white`
+- Hover: `bg-lime-300`
+- JetBrains Mono for page numbers
+
+---
+
+## Dark Mode Adjustments
+
+| Element              | Light Mode                         | Dark Mode                               |
+|----------------------|------------------------------------|-----------------------------------------|
+| Page background      | `stone-50` (#fafaf9)               | `neutral-950` (#09090b)                 |
+| Card background      | `white`                            | `neutral-900` (#171717)                 |
+| Card border          | `neutral-950` (3px)                | `neutral-300` (3px) -- inverted borders |
+| Hard shadow          | `#09090b` (black)                  | `#d6d3d1` (stone-300) -- light shadows  |
+| Sidebar bg           | `stone-50`                         | `neutral-900`                           |
+| Sidebar border       | `neutral-950` right border         | `neutral-300` right border              |
+| Primary text         | `neutral-950`                      | `stone-100`                             |
+| Body text            | `neutral-700`                      | `stone-300`                             |
+| Heading text         | `neutral-950`                      | `white`                                 |
+| Accent (lime)        | `lime-400`                         | `lime-300` (slightly lighter)           |
+| Secondary (pink)     | `pink-500`                         | `pink-400`                              |
+| Table header         | `neutral-950 bg, white text`       | `neutral-800 bg, stone-100 text`        |
+| Input focus shadow   | `#a3e635` (lime)                   | `#bef264` (lighter lime)                |
+| Active nav item      | `bg-lime-300`                      | `bg-lime-400/20` (translucent)          |
+
+Key dark mode principle: **Invert the shadows.** In light mode, shadows are black on white. In dark mode, shadows become light stone on dark backgrounds, maintaining the same hard offset aesthetic but with inverted contrast.
+
+---
+
+## Spacing & Layout Principles
+
+| Aspect               | Value                              | Notes                                    |
+|----------------------|------------------------------------|-----------------------------------------|
+| Page padding         | `p-10` (40px)                      | More breathing room than typical admin   |
+| Card gap             | `gap-8` (32px)                     | Generous spacing between cards           |
+| Card inner padding   | `p-8` (32px)                       | Spacious card interiors                  |
+| Section gap          | `mt-12` (48px)                     | Clear section separation                 |
+| Sidebar width        | 280px                              | Wider for larger nav text                |
+| Content max-width    | 1400px                             | Wide content area                        |
+| Grid columns         | 12-column grid                     | Standard but with bigger gutters         |
+
+---
+
+## Mood & Inspiration
+
+### Visual Identity Keywords
+Raw, tactile, confrontational, grid-structured, high-contrast, anti-corporate, expressive, physical
+
+### Inspiration References
+
+- **Arc Browser** -- The thick colored border around the entire UI, bold sidebar design, and per-Space theming. Arc proves thick borders can feel premium, not clunky. Our sidebar takes Arc's "bold border as identity" concept and pushes it further with asymmetric corner shapes.
+
+- **Raycast** -- The confidence of a focused, opinionated interface. Bold iconography with thicker strokes. Our oversized type and high-contrast palette share Raycast's "designed with conviction" ethos.
+
+- **Notion** -- Content hierarchy through typography scale rather than decorative elements. Our oversized headings (48px page titles) and monospaced body text create hierarchy through pure typography, similar to how Notion lets content structure speak for itself.
+
+- **Linear** -- Strict grid adherence, high contrast, minimal decoration. Linear's dark mode with vivid accent colors influenced our lime-on-black dark mode palette. The hard offset shadows are the brutalist inversion of Linear's subtle depth.
+
+- **Neobrutalist Web Movement** -- The broader trend of thick black borders, offset shadows, bright accent colors, and monospaced fonts in web design. Sites like Gumroad's redesign and various indie SaaS tools pioneered this aesthetic.
+
+### What Makes This Theme "Asymmetric Brutalist"
+
+1. **Asymmetric corners** -- No element has four matching corners. Cards slash diagonally (top-right + bottom-left rounded), buttons are pill on one side and sharp on the other, dropdowns round at the bottom only. This is the single most distinctive element -- it makes every component feel intentionally off-balance.
+
+2. **Hard offset shadows** -- Zero-blur, solid-color shadows create a tactile, sticker/stamp effect. Elements feel like they are physically stacked on the page. The press animation reinforces this physical metaphor.
+
+3. **Thick black borders on everything** -- 3px black borders on every interactive element give the interface a visible skeleton. Nothing is hidden or subtle. The structure is the decoration.
+
+4. **Monospaced body text** -- Using JetBrains Mono for all body text is a deliberately transgressive choice for an admin panel. It references terminal output and raw HTML, reinforcing the brutalist ethos while providing excellent data alignment in tables.
+
+5. **Oversized typography** -- 48px page titles and 60px stat numbers are 2-3x larger than conventional admin panels. The typography IS the layout. It demands attention and creates hierarchy through sheer scale.
+
+6. **Electric color accents** -- Lime and hot pink against black/white create maximum visual voltage. These colors are not "professional" in the traditional sense -- they are aggressive, youthful, and impossible to ignore.
+
+---
+
+## NuxtUI 4 Configuration Hint
+
+```typescript
+// In app.config.ts or nuxt.config.ts
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'lime',
+      secondary: 'pink',
+      neutral: 'stone'
+    }
+  }
+})
+```
+
+Note: NuxtUI 4's color system will handle the primary lime and secondary pink mapping. The thick borders, hard shadows, and asymmetric radii will need custom CSS classes or Tailwind utility composition, as they go beyond the default NuxtUI component styling. The button press animation requires custom transition utilities.
+
+### Key Custom CSS Required
+
+```css
+/* Brutalist shadow utilities */
+.shadow-brutal { box-shadow: 6px 6px 0 0 #09090b; }
+.shadow-brutal-sm { box-shadow: 4px 4px 0 0 #09090b; }
+.shadow-brutal-hover { box-shadow: 2px 2px 0 0 #09090b; }
+.shadow-brutal-lime { box-shadow: 4px 4px 0 0 #a3e635; }
+.shadow-brutal-pink { box-shadow: 4px 4px 0 0 #ec4899; }
+.shadow-brutal-lg { box-shadow: 8px 8px 0 0 #09090b; }
+
+/* Dark mode inverted shadows */
+.dark .shadow-brutal { box-shadow: 6px 6px 0 0 #d6d3d1; }
+.dark .shadow-brutal-sm { box-shadow: 4px 4px 0 0 #d6d3d1; }
+.dark .shadow-brutal-hover { box-shadow: 2px 2px 0 0 #d6d3d1; }
+
+/* Asymmetric card shape */
+.shape-slash { border-radius: 0 24px 0 24px; }
+.shape-tab { border-radius: 16px 16px 0 0; }
+.shape-pill-left { border-radius: 9999px 4px 4px 9999px; }
+.shape-pill-right { border-radius: 4px 9999px 9999px 4px; }
+.shape-notch-tl { border-radius: 24px 0 0 0; }
+.shape-bottom-heavy { border-radius: 0 0 16px 16px; }
+
+/* Button press animation */
+.btn-brutal {
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+.btn-brutal:hover {
+  transform: translate(2px, 2px);
+}
+.btn-brutal:active {
+  transform: translate(4px, 4px);
+  box-shadow: 0 0 0 0 #09090b !important;
+}
+```

package/app/pages/motor-admin/theme-preview/themes/bold-modern.md

@@ -0,0 +1,231 @@
+# Bold & Modern Theme
+
+> A high-energy admin panel theme with a confident visual identity. Deep violet primary, warm amber accents, and a distinctive heading font create an interface that feels cutting-edge and alive.
+
+---
+
+## Color Palette
+
+### Primary: Violet (Tailwind `violet`)
+
+The heart of the theme. Deep, saturated violet conveys creativity, innovation, and premium quality. Used for the sidebar, primary buttons, active states, and key navigation elements.
+
+| Token            | Tailwind Class   | Hex       | Usage                            |
+|------------------|------------------|-----------|----------------------------------|
+| primary-50       | `violet-50`      | #f5f3ff   | Subtle tinted backgrounds        |
+| primary-100      | `violet-100`     | #ede9fe   | Hover states on light surfaces   |
+| primary-200      | `violet-200`     | #ddd6fe   | Light borders, dividers          |
+| primary-300      | `violet-300`     | #c4b5fd   | Disabled / muted primary         |
+| primary-400      | `violet-400`     | #a78bfa   | Secondary buttons, tags          |
+| **primary-500**  | **`violet-500`** | **#8b5cf6** | **Main primary color**         |
+| **primary-600**  | **`violet-600`** | **#7c3aed** | **Primary hover / sidebar bg** |
+| primary-700      | `violet-700`     | #6d28d9   | Active / pressed states          |
+| primary-800      | `violet-800`     | #5b21b6   | Dark sidebar variant             |
+| primary-900      | `violet-900`     | #4c1d95   | Deep backgrounds, overlays       |
+
+### Secondary / Accent: Amber (Tailwind `amber`)
+
+Warm amber creates a striking contrast against violet. Used sparingly for call-to-action highlights, notification badges, status indicators, and interactive emphasis.
+
+| Token            | Tailwind Class   | Hex       | Usage                            |
+|------------------|------------------|-----------|----------------------------------|
+| accent-50        | `amber-50`       | #fffbeb   | Warning / accent backgrounds     |
+| accent-100       | `amber-100`      | #fef3c7   | Light badges                     |
+| accent-200       | `amber-200`      | #fde68a   | Highlight backgrounds            |
+| accent-300       | `amber-300`      | #fcd34d   | Secondary tag fills              |
+| **accent-400**   | **`amber-400`**  | **#fbbf24** | **Main accent color**          |
+| **accent-500**   | **`amber-500`**  | **#f59e0b** | **CTA buttons, badges**        |
+| accent-600       | `amber-600`      | #d97706   | Hover on accent elements         |
+| accent-700       | `amber-700`      | #b45309   | Active / pressed accent          |
+
+### Neutral: Slate (Tailwind `slate`)
+
+Slate has a subtle blue undertone that harmonizes naturally with violet, preventing the neutral palette from feeling disconnected.
+
+| Token            | Tailwind Class   | Hex       | Usage                            |
+|------------------|------------------|-----------|----------------------------------|
+| neutral-50       | `slate-50`       | #f8fafc   | Page background (light mode)     |
+| neutral-100      | `slate-100`      | #f1f5f9   | Card backgrounds                 |
+| neutral-200      | `slate-200`      | #e2e8f0   | Borders, dividers                |
+| neutral-300      | `slate-300`      | #cbd5e1   | Disabled text, placeholders      |
+| neutral-400      | `slate-400`      | #94a3b8   | Muted / secondary text           |
+| neutral-500      | `slate-500`      | #64748b   | Body text (secondary)            |
+| neutral-700      | `slate-700`      | #334155   | Body text (primary)              |
+| neutral-800      | `slate-800`      | #1e293b   | Headings on light bg             |
+| neutral-900      | `slate-900`      | #0f172a   | High-contrast text               |
+| neutral-950      | `slate-950`      | #020617   | Dark mode backgrounds            |
+
+### Semantic Colors
+
+| Purpose   | Color             | Hex       | Notes                           |
+|-----------|-------------------|-----------|----------------------------------|
+| Success   | `emerald-500`     | #10b981   | Confirmations, positive states   |
+| Warning   | `amber-500`       | #f59e0b   | Shares accent color intentionally|
+| Error     | `rose-500`        | #f43f5e   | Destructive actions, validation  |
+| Info      | `violet-400`      | #a78bfa   | Informational, ties to primary   |
+
+---
+
+## Typography
+
+### Font Pairing: Space Grotesk + Inter
+
+**Heading Font: Space Grotesk** (Google Fonts)
+- Style: Geometric grotesque with distinctive character - slightly quirky letterforms with personality
+- Weights: 500 (Medium) for subheadings, 700 (Bold) for main headings
+- Use for: Page titles, section headers, sidebar navigation labels, card headers, stat numbers
+- Character: Technical, confident, modern - originated from Space Mono, giving it a subtle techy edge
+
+**Body Font: Inter** (Google Fonts)
+- Style: Clean, highly legible sans-serif designed specifically for screens
+- Weights: 400 (Regular) for body, 500 (Medium) for labels/emphasis, 600 (Semi-bold) for strong emphasis
+- Use for: Body text, form labels, table content, descriptions, metadata
+- Character: Neutral, professional, extremely readable at small sizes
+
+### Google Fonts Import
+
+```
+https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap
+```
+
+### Type Scale
+
+| Element            | Font           | Weight | Size (rem) | Tracking     |
+|--------------------|----------------|--------|------------|--------------|
+| Page title (h1)    | Space Grotesk  | 700    | 1.875      | -0.025em     |
+| Section title (h2) | Space Grotesk  | 700    | 1.5        | -0.02em      |
+| Card header (h3)   | Space Grotesk  | 500    | 1.125      | -0.01em      |
+| Stat number        | Space Grotesk  | 700    | 2.25       | -0.03em      |
+| Body text          | Inter          | 400    | 0.875      | 0            |
+| Label              | Inter          | 500    | 0.75       | 0.025em      |
+| Small / caption    | Inter          | 400    | 0.75       | 0.01em       |
+| Nav item           | Space Grotesk  | 500    | 0.875      | 0            |
+
+---
+
+## Component Styling Notes
+
+### Sidebar
+
+- **Colored sidebar** with a violet-to-indigo gradient: `bg-gradient-to-b from-violet-600 to-violet-900`
+- White text on the sidebar with `text-white/80` for items and `text-white` for active
+- Active nav item: pill-shaped highlight with `bg-white/15` backdrop + left accent border in amber (`border-l-2 border-amber-400`)
+- Sidebar icons: `text-white/60`, active: `text-amber-400`
+- Logo area: white logo mark against the dark violet, with Space Grotesk app title
+
+### Buttons
+
+- **Primary**: `bg-violet-600 hover:bg-violet-700 text-white` with `rounded-lg` (8px radius)
+- **Accent/CTA**: `bg-amber-500 hover:bg-amber-600 text-slate-900` - used for high-priority actions like "Create New", "Save"
+- **Ghost**: `text-violet-600 hover:bg-violet-50` with no border
+- **Destructive**: `bg-rose-500 hover:bg-rose-600 text-white`
+- All buttons use Space Grotesk at font-weight 500 for a distinctive feel
+- Add subtle `shadow-sm` on primary and accent buttons for depth
+
+### Cards
+
+- `bg-white rounded-xl shadow-sm border border-slate-200`
+- Card headers can use a thin top accent border: `border-t-2 border-violet-500`
+- Stat cards: large Space Grotesk numbers in `text-violet-600`, with a subtle `bg-violet-50` background
+- Hover state: `hover:shadow-md` with smooth transition
+
+### Tables / Data Grids
+
+- Header row: `bg-violet-50 text-violet-900` with Space Grotesk font-weight 500
+- Alternating row backgrounds: `even:bg-slate-50`
+- Row hover: `hover:bg-violet-50/50`
+- Action column icons in `text-violet-500`
+- Sort indicators in `text-amber-500`
+
+### Form Inputs
+
+- `rounded-lg border-slate-300 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20`
+- Labels: Inter medium (500) in `text-slate-700`, uppercase tracking for field group labels
+- Select dropdowns and date pickers follow the same violet focus ring pattern
+
+### Badges / Tags
+
+- Primary: `bg-violet-100 text-violet-700 rounded-full`
+- Accent: `bg-amber-100 text-amber-800 rounded-full`
+- Neutral: `bg-slate-100 text-slate-600 rounded-full`
+- Use Space Grotesk at font-weight 500 for badge text
+
+### Notifications / Toasts
+
+- Success: left border accent `border-l-4 border-emerald-500` on white card
+- Error: left border accent `border-l-4 border-rose-500`
+- Info: left border accent `border-l-4 border-violet-500`
+
+### Gradient Accents
+
+Apply subtle gradients in key places for a bold, premium feel:
+- Page header background: `bg-gradient-to-r from-violet-600 to-violet-500` (optional hero area)
+- Loading skeleton shimmer: violet-tinted
+- Progress bars: `bg-gradient-to-r from-violet-500 to-amber-400` for a striking two-tone effect
+
+### Border Radius Strategy
+
+Use larger, softer radii throughout for a modern feel:
+- Buttons: `rounded-lg` (8px)
+- Cards: `rounded-xl` (12px)
+- Inputs: `rounded-lg` (8px)
+- Badges: `rounded-full` (pill)
+- Sidebar nav items: `rounded-lg` (8px)
+- Modals/Dialogs: `rounded-2xl` (16px)
+
+---
+
+## Dark Mode Adjustments
+
+| Element          | Light Mode                    | Dark Mode                       |
+|------------------|-------------------------------|---------------------------------|
+| Page background  | `slate-50`                    | `slate-950`                     |
+| Card background  | `white`                       | `slate-900`                     |
+| Card border      | `slate-200`                   | `slate-800`                     |
+| Sidebar          | `violet-600 to violet-900`    | `slate-900` with violet accents |
+| Primary text     | `slate-700`                   | `slate-200`                     |
+| Heading text     | `slate-800`                   | `white`                         |
+| Primary button   | `violet-600`                  | `violet-500`                    |
+| Accent button    | `amber-500`                   | `amber-400`                     |
+| Table header     | `violet-50`                   | `violet-950/50`                 |
+
+---
+
+## Mood & Inspiration
+
+### Visual Identity Keywords
+Confident, energetic, innovative, premium, tech-forward, striking
+
+### Inspiration References
+- **Pollux UI** - Purple-primary admin dashboard conveying creativity and innovation while maintaining professionalism
+- **Modern fintech dashboards** - Deep dark backgrounds with vivid violet accents, smooth gradients, bold typography, and clear modular structure
+- **Stripe Dashboard** - Clean card-based layout with confident use of a signature color throughout the interface
+- **Linear** - Bold use of purple/violet as a primary color in a professional tool, proving saturated colors work in productivity software
+- **Vercel Dashboard** - Strong typographic hierarchy with a distinctive sans-serif, minimal decoration, letting color and type do the work
+
+### What Makes This Theme "Bold"
+1. **Saturated primary color** - Violet is inherently eye-catching; not a safe blue or gray
+2. **Colored sidebar** - Instead of neutral gray sidebar, the gradient violet sidebar is a strong design statement
+3. **Warm accent contrast** - Amber against violet creates high-energy complementary tension
+4. **Distinctive heading font** - Space Grotesk has enough personality to be memorable without sacrificing readability
+5. **Gradient touches** - Subtle gradients in the sidebar, progress bars, and optional hero areas add depth and movement
+6. **Generous border radius** - Larger radii feel modern and approachable, softening the boldness
+
+---
+
+## NuxtUI 4 Configuration Hint
+
+```typescript
+// In app.config.ts or nuxt.config.ts
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'violet',
+      secondary: 'amber',
+      neutral: 'slate'
+    }
+  }
+})
+```
+
+This maps directly to NuxtUI 4's color system, making all `UButton`, `UBadge`, `UInput`, etc. components automatically use the violet/amber/slate palette.