fernando/ornitoweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ornitoweb/DESIGN.md
Fernando 35bd477263 feat: initial project setup with Astro + Tailwind + 1a home design 
- 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
2026-07-13 12:37:58 +02:00

3.1 KiB
Raw Permalink Blame History

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.