Sobre este Design System
¿Qué es esto?
Starpunk es un sistema de diseño completo basado en una única convicción estética: las interfaces oscuras e inmersivas deben sentirse como si hubieran sido forjadas dentro del mundo que representan, no ensambladas a partir de una biblioteca de plantillas.
Este sistema fue creado para acompañar a Starpunk, un juego de rol de mesa publicado por Tenzinn. Sin embargo, cada componente, cada ficha y cada regla son totalmente utilizables en cualquier producto que necesite este tipo de identidad: juegos, aplicaciones, herramientas de creación de mundos, productos editoriales, campañas de financiación colectiva o cualquier experiencia digital que aspire a ser genuinamente diferente.
Contenido
Sistema de color
Cinco escalas de color diseñadas a mano: Rojo Sangre, Ámbar Ascua, Azul Vacío, Negro Cálido Tinta y Blanco Hueso, cada una con 10 niveles y un rol narrativo en el sistema. No son opciones decorativas. El Rojo Sangre representa la fuerza vital y el peligro. El Ámbar Ascua es el último calor en un mundo moribundo. El Azul Vacío es el color del conocimiento cósmico. Cada color tiene un significado.
Tipografía
Cuatro tipografías que funcionan en conjunto: Cinzel Decorative para títulos y momentos destacados, Cinzel para todas las etiquetas de la interfaz y la navegación, Source Serif 4 para textos largos e IM Fell English Italic para descripciones, texto descriptivo y diálogos de PNJ. Escala tipográfica completa de 11 pasos, desde 11 px hasta 72 px.
Componentes
Botones (variantes × tamaños × todos los estados), campos de entrada, menús desplegables, casillas de verificación, botones de opción, interruptores, barras de navegación, pestañas, rutas de navegación, barras laterales, tarjetas, modales, menús desplegables, información sobre herramientas, ventanas emergentes, elementos de lista, tablas, alertas (4 tipos), notificaciones emergentes, avatares, insignias, iconos, indicadores de carga, indicadores de carga y barras de progreso; todo creado con Auto Layout y propiedades de componentes.
Espaciado, Sombras y Fichas de Movimiento
Una escala de espaciado de 13 pasos basada en 4 píxeles, 7 fichas de sombra (incluyendo variantes de brillo para elementos arcanos), 5 duraciones de movimiento y 5 curvas de suavizado personalizadas, incluyendo Ease Dread, diseñada específicamente para animaciones de revelación de terror cósmico.
Componentes de la interfaz de usuario del juego
Todo lo necesario para crear una interfaz de juego: barras de HP/resistencia/maná con estados críticos, HUD de combate, barras de ranuras de acción con estados de enfriamiento, marcos de minimapa, rastreadores de iniciativa, indicadores de nivel de terror, cuadrículas de inventario con niveles de rareza, pantallas de subida de nivel, menús de pausa y sistemas de diálogo de PNJ.
Principios de diseño
01 — Inmersión sobre comodidad. Cada decisión prioriza mantener al usuario dentro del universo. Esquinas de trazado de recorte en lugar de radio de borde genérico. Negros cálidos en lugar del neutro #000.
02 — Peso sobre ligereza. Los elementos tienen masa. Las transiciones tienen inercia. Curvas suaves que se desaceleran con el peso físico. Sombras densas, no sutiles.
03 — Narrativa en cada decisión. Los colores tienen un papel en el mundo, no solo en la interfaz. Cuando el diseño y la narrativa se alinean, la interfaz de usuario deja de ser una capa superpuesta al contenido y se convierte en parte de él.
04 — Moderación en la ornamentación. El sistema puede resultar recargado. Los brillos, los bordes recortados y el símbolo ✦ se aplican con jerarquía e intención. La ornamentación sin jerarquía es ruido.
05 — Accesibilidad dentro del entorno. Las relaciones de contraste se mantienen funcionales en cada combinación de tonos oscuros. La atmósfera visual y la legibilidad no entran en conflicto.
Starpunk es un sistema de diseño completo basado en una única convicción estética: las interfaces oscuras e inmersivas deben sentirse como si hubieran sido forjadas dentro del mundo que representan, no ensambladas a partir de una biblioteca de plantillas.
Este sistema fue creado para acompañar a Starpunk, un juego de rol de mesa publicado por Tenzinn. Sin embargo, cada componente, cada ficha y cada regla son totalmente utilizables en cualquier producto que necesite este tipo de identidad: juegos, aplicaciones, herramientas de creación de mundos, productos editoriales, campañas de financiación colectiva o cualquier experiencia digital que aspire a ser genuinamente diferente.
Contenido
Sistema de color
Cinco escalas de color diseñadas a mano: Rojo Sangre, Ámbar Ascua, Azul Vacío, Negro Cálido Tinta y Blanco Hueso, cada una con 10 niveles y un rol narrativo en el sistema. No son opciones decorativas. El Rojo Sangre representa la fuerza vital y el peligro. El Ámbar Ascua es el último calor en un mundo moribundo. El Azul Vacío es el color del conocimiento cósmico. Cada color tiene un significado.
Tipografía
Cuatro tipografías que funcionan en conjunto: Cinzel Decorative para títulos y momentos destacados, Cinzel para todas las etiquetas de la interfaz y la navegación, Source Serif 4 para textos largos e IM Fell English Italic para descripciones, texto descriptivo y diálogos de PNJ. Escala tipográfica completa de 11 pasos, desde 11 px hasta 72 px.
Componentes
Botones (variantes × tamaños × todos los estados), campos de entrada, menús desplegables, casillas de verificación, botones de opción, interruptores, barras de navegación, pestañas, rutas de navegación, barras laterales, tarjetas, modales, menús desplegables, información sobre herramientas, ventanas emergentes, elementos de lista, tablas, alertas (4 tipos), notificaciones emergentes, avatares, insignias, iconos, indicadores de carga, indicadores de carga y barras de progreso; todo creado con Auto Layout y propiedades de componentes.
Espaciado, Sombras y Fichas de Movimiento
Una escala de espaciado de 13 pasos basada en 4 píxeles, 7 fichas de sombra (incluyendo variantes de brillo para elementos arcanos), 5 duraciones de movimiento y 5 curvas de suavizado personalizadas, incluyendo Ease Dread, diseñada específicamente para animaciones de revelación de terror cósmico.
Componentes de la interfaz de usuario del juego
Todo lo necesario para crear una interfaz de juego: barras de HP/resistencia/maná con estados críticos, HUD de combate, barras de ranuras de acción con estados de enfriamiento, marcos de minimapa, rastreadores de iniciativa, indicadores de nivel de terror, cuadrículas de inventario con niveles de rareza, pantallas de subida de nivel, menús de pausa y sistemas de diálogo de PNJ.
Principios de diseño
01 — Inmersión sobre comodidad. Cada decisión prioriza mantener al usuario dentro del universo. Esquinas de trazado de recorte en lugar de radio de borde genérico. Negros cálidos en lugar del neutro #000.
02 — Peso sobre ligereza. Los elementos tienen masa. Las transiciones tienen inercia. Curvas suaves que se desaceleran con el peso físico. Sombras densas, no sutiles.
03 — Narrativa en cada decisión. Los colores tienen un papel en el mundo, no solo en la interfaz. Cuando el diseño y la narrativa se alinean, la interfaz de usuario deja de ser una capa superpuesta al contenido y se convierte en parte de él.
04 — Moderación en la ornamentación. El sistema puede resultar recargado. Los brillos, los bordes recortados y el símbolo ✦ se aplican con jerarquía e intención. La ornamentación sin jerarquía es ruido.
05 — Accesibilidad dentro del entorno. Las relaciones de contraste se mantienen funcionales en cada combinación de tonos oscuros. La atmósfera visual y la legibilidad no entran en conflicto.
¿Para qué tipo de marca/producto?
Este design system es para productos con identidad oscura, épica e inmersiva. Específicamente:
El núcleo: Juegos de rol de mesa (TTRPGs), videojuegos de fantasía o horror, y cualquier producto de entretenimiento que viva en géneros como dark fantasy, cosmic horror, grimdark o medieval épico.
Más amplio: Cualquier marca que quiera comunicar antigüedad, peso, poder y misterio — no solo juegos. Podría funcionar para una editorial de novelas de fantasía, una productora de podcasts de horror, un estudio de tatuajes, una marca de whisky premium con identidad oscura, o una plataforma de contenido para fans de universos como Berserk, Dark Souls, o Warhammer.
El denominador común: Marcas que necesitan sentirse como si existieran desde hace siglos, no como si fueran a rediseñarse el año que viene. Marcas para audiencias que valoran el craftmanship, la profundidad narrativa, y que detectan inmediatamente cuando algo es genérico.
El núcleo: Juegos de rol de mesa (TTRPGs), videojuegos de fantasía o horror, y cualquier producto de entretenimiento que viva en géneros como dark fantasy, cosmic horror, grimdark o medieval épico.
Más amplio: Cualquier marca que quiera comunicar antigüedad, peso, poder y misterio — no solo juegos. Podría funcionar para una editorial de novelas de fantasía, una productora de podcasts de horror, un estudio de tatuajes, una marca de whisky premium con identidad oscura, o una plataforma de contenido para fans de universos como Berserk, Dark Souls, o Warhammer.
El denominador común: Marcas que necesitan sentirse como si existieran desde hace siglos, no como si fueran a rediseñarse el año que viene. Marcas para audiencias que valoran el craftmanship, la profundidad narrativa, y que detectan inmediatamente cuando algo es genérico.
Clima visual
El clima visual de Starpunk vive en la tensión entre dos fuerzas opuestas: la grandeza heroica y la amenaza cósmica.
No es oscuro por estética. Es oscuro como lo son los cielos antes de que algo enorme aparezca.
La paleta habla de materiales físicos — tinta china envejecida, pergamino quemado, carbón, hueso, metal oxidado. Los colores no flotan sobre fondos neutros: están enterrados en capas de sombra, emergiendo con esfuerzo. El rojo sangre no es el rojo de un error de interfaz — es el rojo de algo que acaba de ser herido. El ámbar no es una advertencia — es la última vela encendida en una habitación que se está apagando.
La tipografía evoca inscripciones en piedra y manuscritos de imprenta del siglo XVII. Las letras tienen masa. Fueron diseñadas para durar milenios, no para ser rediseñadas en seis meses.
Las formas tienen esquinas cortadas en diagonal — como armaduras, como escudos heráldicos, como superficies trabajadas a mano. Nada está redondeado en exceso.
No es oscuro por estética. Es oscuro como lo son los cielos antes de que algo enorme aparezca.
La paleta habla de materiales físicos — tinta china envejecida, pergamino quemado, carbón, hueso, metal oxidado. Los colores no flotan sobre fondos neutros: están enterrados en capas de sombra, emergiendo con esfuerzo. El rojo sangre no es el rojo de un error de interfaz — es el rojo de algo que acaba de ser herido. El ámbar no es una advertencia — es la última vela encendida en una habitación que se está apagando.
La tipografía evoca inscripciones en piedra y manuscritos de imprenta del siglo XVII. Las letras tienen masa. Fueron diseñadas para durar milenios, no para ser rediseñadas en seis meses.
Las formas tienen esquinas cortadas en diagonal — como armaduras, como escudos heráldicos, como superficies trabajadas a mano. Nada está redondeado en exceso.