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
71 lines
3.1 KiB
Markdown
71 lines
3.1 KiB
Markdown
# Ornitonautas — DESIGN.md (Opción 1a · "Luminoso y limpio")
|
||
|
||
Portal de aprendizaje de informática. Formación de FP oficial en España + preparación
|
||
para el mercado laboral tech. Referencia de tono: **Brilliant** (limpio, aire, aprender
|
||
haciendo, un solo CTA por bloque). Público prioritario: **estudiantes de FP en España**.
|
||
|
||
---
|
||
|
||
## 1. Principios
|
||
|
||
- **Una idea por bloque.** Cada sección tiene un único mensaje y un único CTA.
|
||
- **Luminoso.** Fondo blanco, mucho espacio en blanco, sombras suaves.
|
||
- **FP España primero.** El CTA principal ("Ver FP de España") lleva a la sección de
|
||
FP, donde estarán los libros y materiales de los ciclos.
|
||
- **Ilustración, no decoración.** Se usa el logo (pato-astronauta) como protagonista;
|
||
el resto son estrellas ✦ y formas geométricas simples. Sin ruido gráfico.
|
||
- **Micro-interacciones sutiles.** Flotación del logo, twinkle de estrellas y
|
||
elevación (translateY) de tarjetas al hacer hover. Nada agresivo.
|
||
|
||
## 2. Color
|
||
|
||
| Rol | Token | Valor | Uso |
|
||
|---|---|---|---|
|
||
| Navy | `--color-navy` | `#13294b` | Texto principal, footer, nodos de ruta, botón secundario |
|
||
| Navy soft | `--color-navy-soft` | `#1c3a63` | Degradados, badges |
|
||
| Naranja | `--color-orange` | `#f47a20` | Marca, CTA principal, acentos |
|
||
| Naranja tinta | `--color-orange-ink` | `#e26a12` | Enlaces, hover de naranja |
|
||
| Rojo | `--color-red` | `#e5241b` | Acento puntual (paso 3 de ruta) |
|
||
| Verde | `--color-green` | `#22a05a` | Confirmaciones / "correcto" |
|
||
| Texto suave | `--color-text` | `#4a5a72` | Párrafos |
|
||
| Texto tenue | `--color-text-muted` | `#8a97a8` | Metadatos, subtítulos |
|
||
| Papel | `--color-paper` | `#ffffff` | Fondo base |
|
||
| Bruma | `--color-mist` | `#f7f9fc` | Fondo de secciones alternas |
|
||
| Línea | `--color-line` | `rgba(19,41,75,.08)` | Bordes y separadores |
|
||
|
||
## 3. Tipografía
|
||
|
||
- **Display / titulares:** `Space Grotesk` (700). letter-spacing −.01 a −.02em.
|
||
- **Texto / UI:** `Manrope` (400–800).
|
||
- Escala: H1 56px · H2 30px · H3 18–19px · cuerpo 16–18px · meta 12–14px.
|
||
- `line-height`: 1.0–1.05 en titulares, 1.55–1.6 en cuerpo.
|
||
|
||
## 4. Componentes
|
||
|
||
- **Botón primario:** naranja, texto blanco 700, radius 12px, padding 15×26.
|
||
- **Botón secundario:** contorno navy 1.5px, texto navy, radius 12px.
|
||
- **Tarjeta:** fondo blanco, borde `rgba(19,41,75,.10)`, radius 16px, padding 26px.
|
||
Hover: `translateY(-4px)` + sombra.
|
||
- **Badge/pill:** fondo tintado suave, texto 700 12.5px, radius 999px.
|
||
- **Icono de ciclo:** cuadrado 52px radius 13px, glifo mono, fondo tintado.
|
||
- **Nodo de ruta:** círculo 56px color sólido, número en Space Grotesk.
|
||
|
||
## 5. Movimiento
|
||
|
||
- `floaty` (6s): logo del hero, ±14px con leve rotación.
|
||
- `twinkle` (2.2–3s): estrellas del hero.
|
||
- Hover de tarjetas: elevación 200ms.
|
||
|
||
## 6. Layout
|
||
|
||
- Contenedor general: 1280px max-width, padding 40px lados.
|
||
- Grid tarjetas FP: 3 columnas gap 22px.
|
||
- Rutas: flex center, nodos de 200px, líneas de 90px.
|
||
- Mercado laboral: 3 columnas gap 22px.
|
||
|
||
## 7. Footer
|
||
|
||
- Background: `#13294b`.
|
||
- Texto: `#aeb9c9`.
|
||
- Logo + nombre a la izquierda, copyright a la derecha.
|
||
- Padding: 28px 40px.
|