novelasvm/docs/DESIGN.md

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.