#FBF6E9
Crema
Fondo principal
--cream / --background
Base cálida que aporta calidez editorial al sitio.
Branding · Caso de estudio
La identidad de EdurArte.
Esta página es el manual de marca vivo del estudio: logotipos, paleta, tipografía, cursor compás y los principios que dan coherencia a cada pantalla del sitio.
01 · Logotipos
Dos versiones, un mismo gesto.
El logotipo principal combina el monograma con el lockup horizontal. La versión oro se reserva para fondos oscuros, prensa y cierre de pieza.
Principal
Tinta sobre crema
Uso por defecto en web, papelería y comunicación diaria.
Oro sobre negro
Versión footer / prensa
Para cierres, footer del sitio, merchandising y fondos oscuros.
01b · Variaciones
Otros logotipos de la marca.
Exploraciones y versiones alternativas que amplían la identidad visual en contextos específicos.
Monograma firma
EA con firma manuscrita
Versión decorativa con monograma turquesa/magenta y firma "EdurArte" sobre fondo claro.
Marco sobre negro
Lockup con marco compositivo
Versión nocturna con marco blanco, tipografía a color y "Digital Studio" en oro.
02 · Paleta cromática
Crema, tinta y oro — magenta como firma.
Tres colores principales sostienen el sistema. El magenta aparece sólo en el semicírculo del logo y en el cursor compás, como guiño recurrente.
#27231B
Tinta
Texto, logo y footer
--ink / --foreground
Color principal de tipografía, iconografía, logotipo y fondo del footer del sitio.
#E2B85B
Oro
Acento
--gold / --accent
Highlights, subrayados, hover de menú y CTAs.
#E050A0
Magenta
Firma
logo · cursor compás
Color del semicírculo del logotipo y del cursor personalizado.
#D9D2BE
Borde
Líneas y tarjetas
--border
Bordes sutiles, divisores y contenedores.
#6F6856
Texto suave
Subtítulos
--muted-foreground
Cuerpo secundario, microcopy y captions.
03 · Tipografía
Serif editorial, sans neutra y mono técnica.
Instrument Serif aporta el carácter editorial en titulares; Work Sans sostiene el cuerpo y la interfaz con neutralidad y excelente legibilidad; JetBrains Mono se reserva para detalles técnicos, tokens y captions.
Display
Instrument Serif
Aa Aa
"Diseño con cuidado, hasta el último píxel."
- H1 · clamp(48 → 96 px)
- H2 · 36 px
- H3 · 24 px
Texto
Work Sans
Aa
Cuerpo de texto, navegación, botones y microcopy. Pesos 300–700 con números proporcionales y excelente rendering en pantalla.
- Body · 16 px / 1.6
- Small · 14 px
- Caption · 12 px · uppercase
Mono
JetBrains Mono
Aa
Tokens, etiquetas técnicas, valores hex y captions. Aporta ritmo tabular y refuerza el carácter de cuaderno de diseño.
- #E2B85B · --accent
- 0.25em · tracking
- 12 px · meta
04 · Detalles que hacen marca
Cursor, glass y micro-interacciones.
Cursor personalizado
Un compás magenta.
Sustituye al cursor del sistema en escritorio. Usa el mismo #E050A0 que el semicírculo del logo para reforzar la firma visual en cada interacción.
#E050A0 · cursor-dot
Header glass
Cristal sutil.
El header flota con un blur ligero y un velo crema al 85 %. Discreto sobre cualquier sección, sin romper el ritmo de lectura.
color-mix(in oklab, --cream 85%, transparent) · blur(14px)
Menú
Subrayado oro animado.
Los enlaces del menú revelan un subrayado en oro al hacer hover, con una transición suave de izquierda a derecha. Estado activo persistente para orientación.
Fondo del sitio
Rejilla + halos.
Rejilla técnica de 48 px con halos suaves en oro y tinta. Recuerda al papel de un cuaderno de diseño sin restar protagonismo al contenido.
05 · Sistema
Espaciado, radios y tono de voz.
Espaciado
Escala basada en 4 px · 4, 8, 12, 16, 24, 32, 48, 64, 96.
Radio
Base 0.75 rem · rounded-full en CTAs · 2xl en cards.
Tono de voz
Cercano, claro y cuidado. Sin floritura innecesaria.