AcademIA
Para los que sienten que el mundo va más rápido que ellos.
Manual de Marca Edición 2026No enseñamos IA.
Devolvemos potencia laboral.
AcademIA es el escalón cero antes de cualquier otro curso. Para trabajadores no técnicos de LATAM que necesitan que alguien les explique las cosas desde el principio.
01
Dignidad
No es un alumno que "no sabe". Es un profesional que no tuvo acceso a la herramienta que le falta.
02
Claridad
Todo se entiende a la primera. Si el usuario piensa dos veces para entender algo, fallamos.
03
Cercanía
La marca se siente como un cuaderno preparado con cariño. No como Silicon Valley ni como un template.
«Lo que te lleva 40 minutos, en 5. Eso es IA aplicada.»
Hablamos en vos/tú. Español LATAM. Sin jerga sin explicar. Humor seco. Nunca aspiracionales vacíos.
AcademIA
"Academ" en text-primary + "IA" en rojo accent. Fraunces 600. Proporciones definidas por H = cap height.
Construction Spec
H = cap height del wordmark
Isotipo: 1.5H · Gap: 0.4H · Clearance: H · Alineación: centrado óptico
Isologotipo (isotipo + wordmark)
Isologotipo — tamaños de referencia
AcademIA24px
AcademIA32px
AcademIA40px (ref)
AcademIA48px
Wordmark (sin isotipo)
Marca gráfica
Gorra de graduación + cerebro circuital. Flat, single-color. Favicon, app icon, avatar, sello.
Rojo #C0392B
Principal · fondos claros
Negro #1F1A15
Formal · impresión
Blanco
Fondos oscuros
Un solo color con presencia
El rojo AcademIA es el ÚNICO color protagonista. Todo lo demás son neutrales warm con undertone consistente (hue 30-42).
Stone (neutrales cálidos)
10 pasos de near-white a near-black. Los tokens del design system caen en posiciones naturales.
Red (accent)
Semantic (armonizados)
Colores funcionales con warm undertone. Todos pasan WCAG AA (4.5:1) contra blanco.
Fraunces + DM Sans
Fraunces para headlines (warm, wonky). DM Sans para body (legible 40+). JetBrains Mono para accents.
Editorial Ink — Cuaderno Argentino
Hand-drawn black ink con UN objeto rojo por ilustración. New Yorker meets cuaderno argentino.
Sprite de referencia
12 viñetas en estilo fine-line con accent rojo. Rango completo de personajes del target.
✓ SÍ
Tinta negra · Cross-hatching · UN rojo · 3/4 view · Fondo vacío · Editorial, no caricatura
✗ NO
Flat vector · Múltiples colores · Sonrisas · Robots · Backgrounds detallados · Corporate stock
Signature Patterns
Elementos visuales que definen la identidad de AcademIA. Cada uno tiene un propósito funcional, no decorativo.
01 — Checklist visual
El SIGNATURE ELEMENT. Requisitos, features, beneficios. Checkbox + separador dot.
02 — Eyebrow + headline
Estructura: label rojo uppercase numerado → título Fraunces → subtítulo DM Sans muted.
Un curso para quienes sienten que todo arranca demasiado adelante.
03 — Small caps metadata
DM Sans uppercase, tracking wide, muted. Para metadata de cursos, timestamps, contexto.
04 — Ornamental rules
Líneas horizontales como puntuación visual. Tres variantes por intensidad.
Sutil (stone-300)
Accent (red-400)
Doble (section divider)
05 — Numbered steps
Números grandes faded como background + título + descripción. Progresión visible.
06 — Red accent object
Exactamente UN objeto rojo en cada composición. El acento que guía el ojo.
Tinta negra monocromática + un objeto en #C0392B: el cuaderno, el delantal, la corbata, el lápiz.
Un solo CTA rojo por viewport. Un solo eyebrow rojo por sección. Un solo dot rojo activo en el slider.
07 — Overlapping card
Card blanca con shadow que cruza el boundary entre dos secciones. Invitación a scrollear. Se usa en cada transición de sección.
Ejemplo 1: Cream → White (transición de sección)
Cada capítulo resuelve una pregunta que tenías pero no sabías cómo formular.
Ejemplo 2: White → Cream (capítulo siguiente)
...y eso es todo lo que necesitás saber sobre qué es una IA. En el próximo capítulo vas a ponerlo en práctica.
Empezamos con las preguntas correctas.
Ejemplo 3: Dark → Cream (footer → next section)
"Nadie nació sabiendo. Tampoco de IA."
Personas como vos que ya dieron el primer paso.
08 — Dot progress indicator
Dots del hero slider. El activo en rojo, el resto en stone-300. Escala 1.25x el activo.
09 — Quote / manifesto block
Fraunces italic para citas y manifesto. Fondo cream, con hr rojo arriba.
"Lo que te lleva 40 minutos, en 5. Eso es IA aplicada."
— Filosofía AcademIA
10 — Left border indicator
Borde izquierdo de 3px en color semántico para indicar estado sin ocupar espacio.
El usuario tiene acceso.
Acceso completo pagado.
Acción requerida.
11 — Alternancia cream / white
Secciones impares en cream (#F5F0E4), pares en white. Genera ritmo sin decoración.
Anti-patrones
✗ Purple gradients
AI slop genérico.
✗ 3-column icon grids
Cookie-cutter SaaS.
✗ Smiling stock photos
Falso. Territorio Domestika.
✗ Robot illustrations
Cliché que asusta al target.
✗ Centered-everything
Sin jerarquía = genérico.
✗ Course marketplace cards
Somos on-ramp, no marketplace.
✗ Multiple accent colors
Solo rojo. Siempre.
✗ English-first copy
Español LATAM. Punto.
Componentes UI
Specs de todos los componentes para páginas públicas. Cada ejemplo usa los tokens exactos del design system.
Buttons
Badges / Tags
Form Fields
Este campo es requerido
Course Card
Compact variant
Course Card — Action States
El footer de la course card cambia según el estado de compra/enrollment. Cada fila es un card footer completo.
Price Sidebar (course detail)
Sidebar sticky en la página de detalle. 4 estados principales, cada uno con su CTA y messaging.
Probá los capítulos gratuitos
Featured Course Card (category landings)
News Cards
Accordion (FAQ / Chapters)
Pagination
Empty State
No encontramos resultados
Intentá con otro término de búsqueda o explorá nuestros cursos.
Toast / Alerts
Service Card
Capacitaciones
Programas a medida para equipos de trabajo.
MasterClasses
Sesiones intensivas con expertos del sector.
Implementaciones
Llevamos la IA a tu empresa paso a paso.
Tool Card
ChatGPT Plus
-20%El chatbot más usado del mundo, ahora con acceso a GPT-4.
Claude Pro
IA avanzada para escritura, análisis y código.
Midjourney
Generación de imágenes con IA de alta calidad.
Loading Skeleton
Wheel Navigation
Indice flotante siempre visible con efecto wheel. La seccion actual es prominente, las adyacentes se desvanecen. Pull-handle para expandir a lista completa.
Wheel mode (default)
- Fixed left, centrado vertical
- Linea vertical ornamental (gradient fade)
- Dots en la linea: activo rojo 9px + glow, adyacente 7px stone, lejano 5px fade
- Muestra 5 items (2 arriba + actual + 2 abajo)
- Actual: scale 1, opacity 1, num 14px red, label 13px bold
- +1: scale 0.92, opacity 0.55, translateX(-2px)
- +2: scale 0.82, opacity 0.25, translateX(-4px)
- Transition: 400ms cubic-bezier(0.25, 0.1, 0.25, 1)
Expanded mode (pull handle)
- Flechita a la derecha del wheel, click para expandir
- Card con bg surface/95 + backdrop-blur + border + shadow
- Todos los items visibles, opacity 1, scale 1
- El activo mantiene dot rojo + label bold
- Click en item: navega + cierra expanded
- Click fuera: cierra expanded
- Mobile: expande full-height desde la izquierda
Responsive
- >768px: Wheel completo con nums + labels. Handle visible.
- 768px: Solo dots + nums, labels ocultos. Expanded muestra full panel desde left edge.
- 480px: Solo dots, nums ocultos. Expanded es el unico modo con texto.
Contour Lines
Líneas topográficas sutiles. Cartographic warmth. Mismo fondo para todos los slides.
Aplicado con bg-cover bg-center bg-no-repeat.
Favicon, OG, y configuracion
Todo lo que el browser y las redes necesitan saber sobre AcademIA antes de renderizar la pagina.
Favicon — todos los tamaños
El SVG favicon es adaptivo: isotipo rojo en light mode, isotipo blanco en dark mode. Los PNG fallbacks usan blanco sobre rojo (funciona en ambos).
Adaptive favicon — preview en tabs
El SVG usa @media (prefers-color-scheme: dark) para cambiar entre isotipo
rojo y blanco.
OG Image (social sharing)
1200x630. Cream bg + contour lines + isotipo + logotipo. Se usa como preview cuando se comparte en redes.
Meta tags
Theme color
#C0392B colorea la barra del browser en mobile (Android Chrome, Safari
iOS). El favicon rojo + theme color rojo = identidad inmediata en el tab switcher.
Guía de uso en redes
Reglas para mantener consistencia visual en Instagram, LinkedIn, Twitter/X, YouTube, y WhatsApp.
Avatar / Profile picture
Isotipo solo, centrado, con padding.
Rojo sobre cream (default) o blanco sobre dark (modo oscuro). NUNCA el logotipo completo, es ilegible en thumbnails.
Post templates
3 formatos base para posts de redes sociales.
"Lo que te lleva 40 minutos, en 5."
AcademIA
Pedile a ChatGPT que te explique como si tuvieras 10 años
AcademIA
Curso nuevo
IA aplicada para tu trabajo
5 capítulos · En español
Reglas para redes
Si
- Cream (#F5F0E4) o dark (#1F1A15) como fondo base
- Fraunces para headlines, DM Sans para body
- UN solo acento rojo por post
- Isotipo como watermark (opacity 8%)
- Español LATAM, voseo, sin jerga
No
- Gradientes, neon, colores random
- Stock photos de gente sonriendo
- Robots, cerebros 3D, neural networks
- Logo completo en thumbnails chicos
- Ingles, emojis excesivos, hashtags spam
Cover / Banner
LinkedIn, YouTube, Twitter. Aspect ratio 3:1 o 16:9. Mismo pattern que el hero: contour bg + logo centrado.
AcademIA
Header, Footer, Menus
Specs de los elementos de navegacion globales que enmarcan cada pagina publica.
Header (sticky)
Estado: top (scroll = 0)
Fondo transparente. Sin shadow. Logo + nav visible.
Estado: scrolled
Fondo cream/95 + backdrop-blur(12px) + shadow-landing-sm. Sticky top:0.
Specs: height 64px. Logo: isologotipo (isotipo 28px + Fraunces 20px). Nav: DM Sans 500, 14px, stone-600, hover stone-900. Dropdown: shadow-landing-md, radius-md, items hover bg stone-100. Login btn: secondary size S. Mobile: hamburger icon, full-screen menu slide from right.
Mobile menu
Specs: Slide from right, overlay dark 50%. Full height. Links: 16px, weight 500. Close: X icon top-right. CTA bottom sticky.
Footer
AcademIA
Para los que sienten que el mundo va mas rapido que ellos.
© 2026 Rodrigo Gonzalez. Todos los derechos reservados.
Specs: Fondo #08080C. Logo: isologotipo white 18px. Links: 13px, white/50, hover white/70. Tagline: 13px, white/40. Border: white/8. Copyright: 11px, white/25.
Dropdown menu (cursos/servicios)
Specs: Width auto (min 200px). Shadow landing-md. Radius 8px. Items: 14px, stone-900, hover bg stone-100. Separator: hr stone-300. "Ver todos": red-400, weight 500.
Responsive breakpoints
AcademIA
Manual de Marca · Edicion 2026
© Rodrigo Gonzalez (kheprai). Todos los derechos reservados.