Keishmer Studio
Sistema de diseño y manual de marca
La única fuente de verdad sobre cómo se ve y se lee este sitio. Cada valor aquí se genera desde los tokens que el sitio realmente publica, así que esta página se mantiene sincronizada con producción.
Dos temas · EN/ES · Astro + Tailwind v4 + GSAP
01 — Identidad
Logo y marca
La marca pública es el wordmark KEISHMER STUDIO — Unbounded para display, VT323 Mono para la nav — más el monograma K, la letra K en Unbounded, para espacios reducidos y el favicon.
Espacio libre
Mantén libre al menos la altura de mayúscula del wordmark en cada lado. Nada debe tocar la marca.
Tamaño mínimo
18px de alto para el monograma, 140px de ancho para el wordmark completo. Por debajo, usa solo el monograma.
Nunca
- Deformar, rotar o recolorear la marca
- Ponerla sobre un fondo de bajo contraste
- Añadirle sombras, contornos o degradados
- Rehacerla con otra tipografía
02 — Fundamentos
Color
Dos temas — oscuro (la base) y claro — construidos con los mismos roles: superficies, una rampa de texto y un acento coral. Los componentes usan tokens semánticos, así que cada rol resuelve al valor correcto en cada tema.
Cómo leer las muestras— Cada muestra muestra el nombre del token, su valor hexadecimal y su ratio de contraste contra el fondo de página. Haz clic en cualquier muestra para copiar el hex. AA exige 4.5:1 para texto; 3:1 solo es aceptable para texto grande y elementos decorativos.
Tokens semánticos
Lo que usan de verdad los componentes. Cada rol tiene un valor oscuro y uno claro; el sitio sigue la preferencia del sistema y el selector de tema del menú puede forzar cualquiera de los dos. El contraste se mide contra el fondo de página de cada tema.
Superficies
--surface-page--surface-default--surface-panel--surface-elevated--surface-muted--surface-inverse--surface-primary
Texto
--text-primary--text-secondary--text-muted--text-subtle--text-accent--text-accent-blue--text-inverse--text-on-primary
Bordes
--border-subtle--border-default--border-strong--border-inverse
Estado
--state-success--state-danger--state-info
Efectos (canvas)
--fx-line--fx-particle--fx-glow--fx-scanline--fx-cursor
Paleta primitiva
Los valores crudos detrás del tema oscuro. Se mantienen como referencia y para decoración; la UI nueva debe usar los tokens semánticos de arriba.
Marca y acento
El coral primario es el único acento. El azul aparece solo en el brillo del call-to-action; el rosa es un tinte suave reservado para destacados.
El único acento. Uno por vista.
Coral más profundo para hover/pressed fuertes.
Usado solo en la animación de brillo del CTA.
Tinte suave para destacados sutiles.
Superficies
Neutros casi negros. La página siempre pinta negro; los paneles se elevan con grises ligeramente más claros.
El fondo de página en todo el sitio.
Placeholder de imágenes y paneles discretos.
Texto
Una rampa clara para superficies oscuras. text-white es la voz de cuerpo por defecto; white es para iconos y el wordmark.
Texto de cuerpo por defecto.
Iconos y wordmark.
Tinte para canvas y shaders.
Texto oscuro sobre acentos claros.
Grises neutros
La escala de trabajo para bordes, texto atenuado, divisores y superficies secundarias.
Estado
Feedback para formularios y mensajes del sistema. Nunca es la única señal: siempre va acompañado de texto.
Validación de formulario — éxito.
Validación de formulario — errores.
Mensajes informativos.
03 — Fundamentos
Tipografía
Tres voces: Unbounded para display, Albert Sans para cuerpo y VT323 Mono para etiquetas y el wordmark. Tamaño y peso son ejes independientes.
Familias
- Unbounded, sans-serif
Sistemas de diseño que convierten
Display. Titulares, héroe y números grandes.
- Albert, sans-serif
Sistemas de diseño que convierten
Cuerpo. Párrafos y texto largo.
- Albert-Italic, sans-serif
Sistemas de diseño que convierten
Cuerpo en itálica. Énfasis dentro de párrafos.
- VT323 Mono, monospace
Sistemas de diseño que convierten
Etiquetas. Botones, breadcrumbs, eyebrows y el wordmark — siempre en mayúsculas con tracking amplio.
Las etiquetas mono van en mayúsculas con tracking-widest. Los titulares display van en mayúsculas en Unbounded bold.
Escala
- text-xs· 0.75rem / 12pxSistemas de diseño que convierten
- text-sm· 0.875rem / 14pxSistemas de diseño que convierten
- text-base· 1rem / 16pxSistemas de diseño que convierten
- text-lg· 1.125rem / 18pxSistemas de diseño que convierten
- text-xl· 1.25rem / 20pxSistemas de diseño que convierten
- text-2xl· 1.5rem / 24pxSistemas de diseño que convierten
- text-3xl· 1.875rem / 30pxSistemas de diseño que convierten
- text-4xl· 2.25rem / 36pxSistemas de diseño que convierten
- text-5xl· 3rem / 48pxSistemas de diseño que convierten
- text-6xl· 3.75rem / 60pxSistemas de diseño que convierten
Pesos
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
900
04 — Fundamentos
Espaciado
Una escala base de 4px de Tailwind. El padding de componentes vive entre 8 y 32px; el ritmo de sección es mayor y consistente.
Escala
- 00px
- 14px
- 28px
- 416px
- 624px
- 832px
- 1248px
- 1664px
- 2080px
- 2496px
Ritmo de sección
El padding horizontal crece con el viewport: px-4 → md:px-8 → lg:px-24. Las secciones verticales abren con py-16 → lg:py-20. El contenido se limita a max-w-6xl.
05 — Fundamentos
Radio y borde
Bordes casi siempre rectos. El radio se reserva para chips y pills; los bordes son líneas finas.
Radio
- rounded · 0.25rem
- rounded-lg · 0.5rem
- rounded-full · 9999px
Borde
- 1px
- 2px
Los bordes usan opacidad mediante tres tokens (border-subtle → default → strong) que cambian con el tema. La línea fina es el default para divisores y tarjetas.
06 — Fundamentos
Elevación y sombra
La profundidad se construye primero con superficies y después con sombras. La única sombra de marca es el brillo coral en el hover del CTA primario.
Plano por defecto: las superficies y los bordes llevan la jerarquía.
hover:shadow-lg shadow-primary/50 — el brillo coral, reservado para la acción principal.
drop-shadow sobre logos encima de imágenes para legibilidad.
07 — Fundamentos
Movimiento
GSAP gobierna las entradas, el scroll-scrub y el pin de proyectos destacados. Todo colapsa a sin movimiento con prefers-reduced-motion.
Duraciones
- duration-300300ms
- duration-500500ms
- duration-700700ms
Con prefers-reduced-motion, las animaciones se omiten y el contenido se muestra en su estado final.
Easings
- powercubic-bezier(0.25, 0.46, 0.45, 0.94)
Micro-interacciones y hovers.
- powercubic-bezier(0.215, 0.61, 0.355, 1)
Entradas estándar.
- powercubic-bezier(0.645, 0.045, 0.355, 1)
Paneles grandes y el overlay del menú.
- powercubic-bezier(0.19, 1, 0.22, 1)
Apertura del menú y entradas enfatizadas.
08 — Fundamentos
Layout y breakpoints
Los cinco breakpoints canónicos de Tailwind. El contenido se centra y se limita; el rail de proyectos destacados hace scroll horizontal bajo lg.
| Breakpoints | min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Las secciones usan mx-auto max-w-6xl como medida principal. El carrusel destacado cambia a un rail horizontal con scroll-snap bajo lg.
09 — Fundamentos
Iconografía
SVG en línea al estilo Material Symbols, siempre relleno con currentColor para heredar el color del texto que acompañan.
Los tamaños se emparejan con la escala tipográfica: 20px dentro de botones, 24px en navegación y listas. Los iconos decorativos son aria-hidden; los informativos llevan etiqueta.
10 — Fundamentos
Efectos
La capa discreta: degradados, el marquee y fondos generativos en canvas.
Degradados
- bg-linear-to-r from-surface-page via-surface-page/50 to-surface-page
- bg-linear-to-t from-surface-page/85 via-surface-page/40 to-surface-page/20
- bg-radial from-surface-page via-surface-page/50 to-surface-page
Degradados lineales y radiales de Tailwind v4 (bg-linear-to-*, bg-radial). Sirven para desvanecer bordes y para apoyar el texto sobre imágenes.
Fondos en canvas
BlackHoleBG, CursorParticles y MeshText renderizan visuales generativos. Son decorativos y siempre van detrás del contenido.
Marquee
Un scroll infinito de servicios (ServiceBanner). Se pausa al pasar el cursor y se desactiva con prefers-reduced-motion.
11 — Patrones
Componentes
Los bloques de construcción en vivo, renderizados con las mismas clases que publica el sitio.
Botones
Campos de formulario
Tarjetas y bloques
Cuando estés listo
Cuéntanos qué necesita volverse más claro
Navegación
Consentimiento y feedback
Este sitio usa analítica respetuosa con la privacidad. Acepta o rechaza.
12 — Voz
Voz y terminología
Claro, directo y seguro. La marca es Keishmer Studio; el autor es Keishmer Pérez Torres.
Reglas de escritura
- Voz activa, frases cortas
- Mostrar el trabajo antes que los adjetivos
- Sin relleno ni buzzwords
- Diseño, frontend, branding y arte visual — descritos con claridad
- Español e inglés llevan el mismo significado, no una traducción literal
Terminología
- Keishmer Studio — la marca pública
- Keishmer Pérez Torres — el autor
- Nunca inventes otro nombre de estudio en el copy ni en el SEO