# Design Guidelines

This guide keeps new pages, modals, and components visually aligned with the VTuber Star Awards product. The brand can be magical and expressive, but every surface should still feel like part of one system.

## Design Personality

The shared identity is soft, celebratory, and operationally clear:

- Public pages may feel theatrical: stars, glow, gradients, character art, glass panels, and animated voting moments.
- Admin pages should feel calm and work-focused: dense cards, clear status, restrained motion, and predictable navigation.
- Both surfaces use the same violet, lavender, blush, and gold family. Avoid introducing unrelated color themes.

## Foundations

Use the global fonts from [frontend/src/style.css](/Users/azu/Desktop/VTubeAwards/frontend/src/style.css):

- Body and admin UI: `Outfit`.
- Display headlines: `Cormorant Garamond`.
- Friendly labels, counters, and brand accents: `Fredoka`.
- Script accents only for special public hero moments: `Great Vibes` or `Sacramento`.

Core colors:

- Deep text: `#3f3556`, `#1f2337`, `#0f172a`.
- Brand violet: `#8b6cdb`, `#7355c8`, `#5f44ad`.
- Lavender surfaces: `#f4eefb`, `#f6f0fe`, `#fbf8ff`.
- Gold accent: `#e7b13e`, `#ffd27a`.
- Blush accent: `#e9a8c9`, `#ff8fc0`.
- Status colors: emerald for healthy, amber for pending/warning, rose for risk/error.

Use soft borders (`violet-100`/`violet-200`), translucent white surfaces, and shadows tinted violet rather than neutral black.

## Layout System

Use generous spacing on public pages and tighter rhythm in admin.

- Public sections: full-width bands, immersive backgrounds, `max-width: 1200px`, `24px` desktop side padding, `16px` mobile padding.
- Admin pages: `space-y-6` page rhythm, card grids with `gap-4` or `gap-6`, and the sidebar/content grid from [AdminLayoutView.vue](/Users/azu/Desktop/VTubeAwards/frontend/src/views/admin/AdminLayoutView.vue).
- Admin desktop layout should keep navigation at `292px` and content fluid.
- Prefer one primary task area per card. Do not nest cards inside cards unless the inner item is a repeated list item or metric tile.

## Public Landing Page Style

Follow the patterns in [HomeHeroMasthead.vue](/Users/azu/Desktop/VTubeAwards/frontend/src/components/home/HomeHeroMasthead.vue) and [homeLandingExperience.css](/Users/azu/Desktop/VTubeAwards/frontend/src/components/home/homeLandingExperience.css).

Public pages can use:

- Radial gradients, star particles, soft glow, character art, and glass cards.
- Hero headlines in `Cormorant Garamond`, with gold gradient accents for award wording.
- Rounded interactive controls: `14px` to `24px`; pill CTAs use `999px`.
- Voting and nomination flows with wizard rails, sticky footers, and celebration bursts.

Keep copy readable over decorative backgrounds. Every hero must still expose the main action, current phase/status, and one clear next step.

## Admin Panel Style

Admin screens should use the reusable UI layer first:

- `Card.vue` for main panels.
- `Button.vue` for actions.
- `Modal.vue` for dialogs.
- `AdminPageHeader.vue` for page headers.

Admin cards use white or `white/80` surfaces, violet borders, `rounded-2xl` to `rounded-[28px]`, and soft shadows. Headers use compact uppercase eyebrows (`text-[11px]`, bold, wide tracking) and short operational descriptions. Icons should come from `@lucide/vue`, placed in `h-9 w-9` or `h-11 w-11` rounded squares.

Use dense but scannable layouts: metrics in grids, filters in bars, forms in grouped sections, and status badges near the affected data.

## Components & States

Buttons:

- Primary: violet background, white text, slight lift on hover.
- Secondary: amber tint for supportive actions.
- Ghost: white/violet outline for neutral actions.
- Disabled states must remove lift and reduce opacity.

Forms:

- Labels are uppercase, `text-xs` or `text-[11px]`, semibold/bold, with slate or violet text.
- Inputs use rounded corners (`xl`/`2xl`), violet border, white-to-lavender background, and focus rings in violet.
- Error states use rose border/background plus clear text.

Modals:

- Use `Modal.vue` unless a public landing flow needs the custom home modal shell.
- Header gradient should stay lavender-to-warm cream.
- Use `md`, `lg`, or `xl` sizes; avoid one-off modal widths.

## Motion

Motion should feel soft and intentional:

- Standard admin transitions: `160ms` to `200ms`.
- Preferred easing: `cubic-bezier(0.22, 1, 0.36, 1)`.
- Hover lift: `translateY(-1px)` or `translateY(-2px)`.
- Public decorative loops can be slower (`3s` to `9s`) and subtle.
- Always respect `prefers-reduced-motion`; decorative star/burst effects should stop or simplify.

## Responsive Rules

Design mobile first for admin usability and public readability.

- Check `360px`, `390px`, `768px`, and desktop widths.
- No horizontal overflow: compare `document.documentElement.scrollWidth` to `window.innerWidth`.
- Admin navigation becomes a drawer below `xl`.
- Public hero text, host cards, modal rails, and sticky controls must wrap instead of shrinking into unreadable text.
- Use stable dimensions for icon buttons, badges, counters, and grid tiles so hover or loading states do not shift layout.

## Implementation Checklist

Before adding a new UI surface:

1. Reuse existing components before creating a new visual pattern.
2. Pick the surface mode: expressive public page or operational admin page.
3. Use the shared fonts, violet/lavender/gold palette, rounded cards, and tinted shadows.
4. Include empty, loading, disabled, success, warning, and error states where relevant.
5. Verify mobile layout and text wrapping.
6. Run `npm run build` after frontend changes.