72 lines
3.1 KiB
Markdown
72 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.
|