Fernando
35bd477263
- Astro SSG project with Tailwind CSS v4 - Home page following DESIGN.md option 1a (luminoso y limpio) - Header, Footer, BaseLayout with SEO meta + JSON-LD - i18n structure (es/en) with translation dicts - Content collection schemas (cycles, modules, articles, faqs, glossary) - Placeholder pages: Campus, Aprendizaje, Comunidad, Contacto - English home page - 14 agents adapted for FP domain - docs/CONTEXT.md (FP ontology), DESIGN.md, SEO-GEO-STRATEGY.md - Build passes: 6 static pages generated
131 lines
3 KiB
Markdown
131 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
|