# Design System: NovelasVM Portal

---
name: NovelasVM Portal
type: Gaming / Visual Novel Catalog
themes:
  - dark
  - light
  - immersive
principles:
  - Clean, modern, game-store aesthetic.
  - Theme switcher as a first-class feature.
  - No emojis in UI; use inline SVG icons only.
  - Animations restricted to transform and opacity.
  - Responsive, mobile-first layout.
---

## Overview

Portal para descubrir, listar y lanzar novelas visuales alojadas en NovelasVM. Debe sentirse como una tienda de juegos indie o un launcher elegante, no como un directorio de archivos.

## Color Palette

### Theme: Dark Modern
- `--bg-primary`: #0a0a0a (main background)
- `--bg-surface`: #141414 (cards, navbar)
- `--bg-elevated`: #1f1f1f (hover states, dropdowns)
- `--text-primary`: #f5f5f5
- `--text-secondary`: #a0a0a0
- `--text-muted`: #666666
- `--accent`: #4e85bf
- `--accent-hover`: #3a6da3
- `--border`: #2a2a2a
- `--shadow`: rgba(0, 0, 0, 0.4)
- `--success`: #2ecc71
- `--warning`: #f1c40f

### Theme: Light Minimal
- `--bg-primary`: #fafafa
- `--bg-surface`: #ffffff
- `--bg-elevated`: #f3f4f6
- `--text-primary`: #111827
- `--text-secondary`: #4b5563
- `--text-muted`: #9ca3af
- `--accent`: #2563eb
- `--accent-hover`: #1d4ed8
- `--border`: #e5e7eb
- `--shadow`: rgba(0, 0, 0, 0.08)

### Theme: Immersive Atmospheric
- `--bg-primary`: #050510 (deep indigo-black)
- `--bg-surface`: rgba(20, 20, 40, 0.6)
- `--bg-elevated`: rgba(30, 30, 60, 0.7)
- `--text-primary`: #ffffff
- `--text-secondary`: rgba(255, 255, 255, 0.75)
- `--text-muted`: rgba(255, 255, 255, 0.45)
- `--accent`: #8b5cf6
- `--accent-hover`: #7c3aed
- `--border`: rgba(255, 255, 255, 0.12)
- `--shadow`: rgba(0, 0, 0, 0.5)
- `--gradient-start`: #1e1b4b
- `--gradient-mid`: #4c1d95
- `--gradient-end`: #0f172a

## Typography

- **Primary font**: Inter, system-ui, sans-serif
- **Display font**: Inter, weight 700
- **Monospace**: JetBrains Mono, monospace

Scale:
- Hero title: clamp(2rem, 5vw, 3.5rem)
- Section title: 1.75rem / weight 700
- Card title: 1.125rem / weight 600
- Body: 1rem / line-height 1.6
- Caption: 0.875rem
- Small: 0.75rem

## Spacing

Base unit: 0.25rem (4px)
- xs: 0.5rem
- sm: 0.75rem
- md: 1rem
- lg: 1.5rem
- xl: 2rem
- 2xl: 3rem

Max content width: 1280px, centered, with 1rem side padding.

## Components

### Navbar
- Fixed top, full width.
- Background: `--bg-surface` with `backdrop-filter: blur(12px)` in immersive theme.
- Border-bottom: 1px solid `--border`.
- Height: 64px.
- Logo left, theme switcher right.

### Game Card
- Aspect ratio cover image (16:9 or 4:3) at top.
- Rounded corners: 12px (theme dark/light) or 16px (immersive).
- Background: `--bg-surface`.
- Border: 1px solid `--border`.
- Shadow: subtle, lifting on hover (`transform: translateY(-4px)`).
- Badge showing engine (Ren'Py, Unity, Web).
- Title, subtitle, description (2 lines max).
- Primary CTA: "Jugar" button.

### Buttons
- Primary: accent background, white text, rounded-lg (8px), padding 0.6rem 1.2rem.
- Hover: darken accent, slight lift.
- Ghost: transparent with border.

### Theme Switcher
- Pill-shaped segmented control.
- Icons: moon (dark), sun (light), sparkle/glass (immersive).

### Engine Badge
- Small pill with icon + label.
- Ren'Py: purple/indigo tint.
- Unity: dark/black tint.
- Web: blue tint.

## Layout

- Header hero with title and subtitle.
- Filter bar (optional v1: just engine badges count or simple text).
- Grid of cards: 1 column mobile, 2 tablet, 3 desktop, 4 large.
- Footer with credits.

## Motion

- Entry: fade + translateY(16px → 0), 500ms ease-out.
- Card hover: translateY(-4px) + shadow increase, 200ms ease.
- Theme transition: 300ms ease on color/background/border properties.
- Loading skeleton: shimmer animation.

## Responsive

- Breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px.
- Navbar collapses gracefully; theme switcher stays visible.
- Cards stack to single column below 640px.

## Do's and Don'ts

- Do use the CSS variables for theming.
- Do ensure WCAG AA contrast on all themes.
- Don't use emojis in the UI.
- Don't animate layout properties (width, height, margin).
- Don't use pure black (#000) in dark theme.
- Don't rely on external images for UI icons; use inline SVG.