Initial commit: NovelasVM platform with multi-engine support and Umineko Web integration
This commit is contained in:
152
docs/DESIGN.md
Normal file
152
docs/DESIGN.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user