vtuber-awards/DESIGN.md

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:

• 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.
• 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 and 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.