153 lines
4.1 KiB
Markdown
153 lines
4.1 KiB
Markdown
# 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.
|