132 lines
3 KiB
Markdown
132 lines
3 KiB
Markdown
|
# DESIGN.md — Sistema Visual de Ornitonautas
|
|||
|
|
|
|||
|
|
> ⚠️ **Placeholder** — Pendiente de recibir diseño de OpenDesign.
|
|||
|
|
> Los tokens y valores aquí son provisionales.
|
|||
|
|
|
|||
|
|
## Paleta de colores
|
|||
|
|
|
|||
|
|
### Primarios
|
|||
|
|
|
|||
|
|
| Token | Valor | Uso |
|
|||
|
|
|---|---|---|
|
|||
|
|
| `--color-primary` | #2563eb | Azul principal — CTAs, links, elementos activos |
|
|||
|
|
| `--color-primary-hover` | #1d4ed8 | Azul oscuro — hover states |
|
|||
|
|
| `--color-primary-light` | #dbeafe | Azul claro — fondos sutiles |
|
|||
|
|
|
|||
|
|
### Neutros
|
|||
|
|
|
|||
|
|
| Token | Valor | Uso |
|
|||
|
|
|---|---|---|
|
|||
|
|
| `--color-ink` | #0f172a | Texto principal |
|
|||
|
|
| `--color-ink-muted` | #64748b | Texto secundario |
|
|||
|
|
| `--color-paper` | #ffffff | Fondo principal |
|
|||
|
|
| `--color-surface` | #f8fafc | Fondo secundario |
|
|||
|
|
| `--color-border` | #e2e8f0 | Bordes y líneas |
|
|||
|
|
|
|||
|
|
### Semánticos
|
|||
|
|
|
|||
|
|
| Token | Valor | Uso |
|
|||
|
|
|---|---|---|
|
|||
|
|
| `--color-success` | #16a34a | Éxito, completado |
|
|||
|
|
| `--color-warning` | #f59e0b | Advertencia |
|
|||
|
|
| `--color-error` | #dc2626 | Error, bloquado |
|
|||
|
|
|
|||
|
|
## Tipografía
|
|||
|
|
|
|||
|
|
| Elemento | Fuente | Tamaño |
|
|||
|
|
|---|---|---|
|
|||
|
|
| Display | Inter | clamp(2rem, 5vw, 3.5rem) |
|
|||
|
|
| Heading 1 | Inter | clamp(1.75rem, 4vw, 2.5rem) |
|
|||
|
|
| Heading 2 | Inter | clamp(1.5rem, 3vw, 2rem) |
|
|||
|
|
| Heading 3 | Inter | clamp(1.25rem, 2.5vw, 1.5rem) |
|
|||
|
|
| Body | Inter | 1rem (16px) |
|
|||
|
|
| Small | Inter | 0.875rem (14px) |
|
|||
|
|
| Mono | JetBrains Mono | 0.875rem |
|
|||
|
|
|
|||
|
|
## Espaciado
|
|||
|
|
|
|||
|
|
| Token | Valor |
|
|||
|
|
|---|---|
|
|||
|
|
| `--space-xs` | 0.25rem |
|
|||
|
|
| `--space-sm` | 0.5rem |
|
|||
|
|
| `--space-md` | 1rem |
|
|||
|
|
| `--space-lg` | 1.5rem |
|
|||
|
|
| `--space-xl` | 2rem |
|
|||
|
|
| `--space-2xl` | 3rem |
|
|||
|
|
| `--space-3xl` | 4rem |
|
|||
|
|
|
|||
|
|
## Bordes y Sombras
|
|||
|
|
|
|||
|
|
| Token | Valor |
|
|||
|
|
|---|---|
|
|||
|
|
| `--radius-sm` | 0.375rem |
|
|||
|
|
| `--radius-md` | 0.5rem |
|
|||
|
|
| `--radius-lg` | 0.75rem |
|
|||
|
|
| `--radius-xl` | 1rem |
|
|||
|
|
| `--shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) |
|
|||
|
|
| `--shadow-md` | 0 4px 6px rgba(0,0,0,0.1) |
|
|||
|
|
| `--shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) |
|
|||
|
|
|
|||
|
|
## Breakpoints
|
|||
|
|
|
|||
|
|
| Nombre | Ancho |
|
|||
|
|
|---|---|
|
|||
|
|
| `sm` | 640px |
|
|||
|
|
| `md` | 768px |
|
|||
|
|
| `lg` | 1024px |
|
|||
|
|
| `xl` | 1280px |
|
|||
|
|
|
|||
|
|
## Layout
|
|||
|
|
|
|||
|
|
| Elemento | Ancho máximo |
|
|||
|
|
|---|---|
|
|||
|
|
| Contenedor general | 1280px |
|
|||
|
|
| Contenido de prosa | 720px |
|
|||
|
|
| Sidebar | 280px |
|
|||
|
|
|
|||
|
|
## Componentes
|
|||
|
|
|
|||
|
|
### HeroSection
|
|||
|
|
|
|||
|
|
- Background: gradiente sutil de primary-light a paper
|
|||
|
|
- Título: Display weight bold
|
|||
|
|
- Subtítulo: Body, ink-muted
|
|||
|
|
- CTA: Botón primary
|
|||
|
|
|
|||
|
|
### CourseCard
|
|||
|
|
|
|||
|
|
- Background: paper
|
|||
|
|
- Border: border
|
|||
|
|
- Shadow: shadow-sm
|
|||
|
|
- Hover: shadow-md, primary border-left
|
|||
|
|
- Contenido: logo, título, duración, módulos
|
|||
|
|
|
|||
|
|
### StatsBar
|
|||
|
|
|
|||
|
|
- Background: primary
|
|||
|
|
- Text: white
|
|||
|
|
- Layout: 4 columnas (responsive)
|
|||
|
|
- Datos: números grandes + label
|
|||
|
|
|
|||
|
|
### FAQAccordion
|
|||
|
|
|
|||
|
|
- Border: border
|
|||
|
|
- Hover: surface background
|
|||
|
|
- Icono: +/- para expandir/colapsar
|
|||
|
|
|
|||
|
|
## Accesibilidad WCAG 2.2 AA
|
|||
|
|
|
|||
|
|
- Contraste mínimo: 4.5:1 (texto normal), 3:1 (texto grande)
|
|||
|
|
- Focus visible: ring de 2px con primary color
|
|||
|
|
- Hit targets: ≥ 44×44px
|
|||
|
|
- Alt text obligatorio en imágenes
|
|||
|
|
- Skip to content link
|
|||
|
|
|
|||
|
|
## Mobile-first
|
|||
|
|
|
|||
|
|
- Diseño base: 390px
|
|||
|
|
- Expansión progresiva: sm → md → lg → xl
|
|||
|
|
- Tipografía fluida con clamp()
|
|||
|
|
- Sin overflow horizontal
|
|||
|
|
- Navegación hamburguesa en móvil
|