fernando/ornitoweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ornitoweb/docs/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 KiB
Raw Blame History

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