Claridad primero
La jerarquía, el copy y el espacio explican antes de decorar.
Marca · Sistema · Recursos
Todo Rium en un lugar. Crea con intención.
El espacio donde la marca se entiende, se usa y evoluciona. Consulta el sistema, encuentra recursos y crea piezas visuales con inteligencia artificial.
EXPERIENCE CREATOR
Tu idea
empieza aquí.
empieza aquí.
Completa el brief para generar una pieza visual.
Diseñando con el sistema Rium
Interpretando el brief…
El copy se compone localmente para mantener la identidad y puede editarse sin volver a consumir IA.
02 · Principios
Una identidad que se reconoce por cómo funciona.
El sistema equilibra claridad editorial, energía tecnológica y evidencia. Cada decisión visual debe ayudar a entender, actuar o confiar.
Tecnología visible
Flujos, señales, sistemas y datos convierten lo técnico en algo comprensible.
Movimiento con sentido
El motion representa actividad, progreso y coordinación; nunca ruido.
Evidencia sobre promesas
Proyectos, métricas y aprendizaje sostienen la narrativa de marca.
03 · Color
Contraste editorial. Energía controlada.
Cada bloque tiene un color dominante. Acid dirige la atención; Blue representa el sistema; Paper aporta calidez; Ink sostiene la autoridad.
Proporción recomendada
Un color domina. Otro dirige.
No todos los elementos necesitan competir por atención.
60%
25%
10%
5%
04 · Tipografía
Editorial en la voz. Precisa en la lectura.
Space Grotesk construye personalidad y escala. Manrope mantiene claridad en textos, navegación y controles.
Aa
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789
abcdefghijklmnñopqrstuvwxyz
0123456789
Aa
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789
abcdefghijklmnñopqrstuvwxyz
0123456789
Display / 01
Productos digitales que funcionan.
Space Grotesk 600 · 0.86
Heading / 02
Investigar. Diseñar. Mejorar.
Space Grotesk 600 · 0.96
Body / 03
Convertimos lo complejo en experiencias claras, coherentes y listas para crecer.
Manrope 400 · 1.7
Label / 04
ESTRATEGIA · PRODUCTO · TECNOLOGÍA
Manrope 700 · 0.18em05 · Layout
Espacio suficiente para que cada idea respire.
Una retícula flexible, un contenedor amplio y un ritmo vertical generoso sostienen composiciones expresivas sin perder orden.
032064076810241400
P
01
G
02
G
03
G
04
P
Padding: 16–32pxContenedor: 1400pxBase: mobile first
Spacing
Una base de 4. Un ritmo de 8.
Los espacios grandes separan capítulos. Los pequeños organizan relaciones.
06 · Componentes
Patrones reconocibles, combinaciones flexibles.
Los componentes mantienen comportamiento y jerarquía consistentes, incluso cuando cambia el contenido.
Propósito único
Cada componente resuelve una tarea principal y deja claro qué ocurrirá.
Estados completos
Default, hover, focus, active, loading, error y disabled se diseñan desde el inicio.
Contenido flexible
La estructura soporta traducciones, datos reales y distintos largos de texto.
Acceso universal
Semántica, teclado, foco visible, contraste y objetivos táctiles son obligatorios.
01 / Actions
Botones
Inician una acción o cambian el estado. El label siempre comienza con un verbo.
Variantes
Usar“Solicitar diagnóstico”
Evitar“Haz clic aquí”
Una acción primaria por contexto. Las secundarias no deben competir con ella.
02 / Inputs
Formularios
Recopilan información con contexto suficiente, validación cercana y estados inequívocos.
01Label persistente
02Control de 48px mínimo
03Ayuda o validación
04Foco visible
03 / Navigation
Navegación
Orienta, muestra ubicación y mantiene las acciones frecuentes al alcance.
04 / Cards
Tarjetas
Agrupan información relacionada. La variante depende del objetivo, no del gusto visual.
01 / Servicio↗
Estrategia e investigación
Encontrar el problema correcto antes de diseñar una respuesta.
Impacto medible
+42%
Más claridad en la experiencia.
ServiceExplica una capacidad
MetricDestaca una evidencia
ProjectConecta problema y resultado
05 / Feedback
Estado y feedback
Confirma lo que ocurrió, explica qué sigue y nunca depende únicamente del color.
Toast
✓
Mensaje enviado
Te responderemos en menos de 24 horas.
!
No pudimos enviarlo
Revisa tu conexión e intenta de nuevo.
Progress
Skeleton
Preparando propuesta68%
Analizando objetivos y señales del producto.
Cómo ayudamos
Design systems Research Coordinando En revisión
06 / Shape & anatomy
Forma y construcción
La escala de radios expresa jerarquía; la anatomía mantiene consistencia.
12px
Small
Small
24px
Card
Card
32px
Feature
Feature
999px
Pill
Pill
1
2
3
4
◇
Nombre del componente
Descripción que explica valor o estado.
- 1Container
- 2Icono
- 3Contenido
- 4Acción
07 · Motion
El sistema se mueve porque está trabajando.
Las animaciones muestran actividad, progreso y coordinación. Deben ser suaves, legibles y opcionales.
Herramientas
Datos
Equipos
Agente
Decisiones
Acciones
Entrance550–800ms[0.22, 1, 0.36, 1]
Interaction200–300msease-out
Ambient4–12sease-in-out
Flow2.2–3.4slinear
08 · Voz
Experta sin distancia. Ambiciosa sin exagerar.
La voz es constante: clara, experta y humana. El tono se adapta al contexto sin perder credibilidad ni convertirse en otra marca.
Personalidad verbal
Sabemos de qué hablamos.
Sabemos de qué hablamos.
Lo explicamos sin complicarlo.
Rium no intenta impresionar con jerga. Traduce complejidad, demuestra criterio y ayuda a que la siguiente decisión sea más clara.
AccesibleExperta
Con conocimiento, nunca académica ni condescendiente.
DirectaCálida
Va al punto, pero reconoce a las personas detrás del problema.
AudazPrudente
Tiene una postura clara sin prometer lo que aún no puede probar.
TécnicaCotidiana
Usa precisión técnica y la explica con lenguaje reconocible.
SíDirecto y demostrable
“Medimos lo que ocurre y mejoramos con evidencia, no con opiniones.”
- Usa verbos activos.
- Explica términos nuevos.
- Habla de resultados observables.
- Una idea principal por bloque.
NoGenérico y grandilocuente
“Creamos soluciones innovadoras de clase mundial para transformar tu futuro.”
- Evita promesas sin evidencia.
- No acumules jerga.
- No hables solo de Rium.
- No uses “conoce más” como CTA por defecto.
El tono cambia con el momento
La misma voz.
La misma voz.
Distinta intensidad.
No hablamos igual al presentar una visión que al explicar un error. Ajustamos energía, detalle y cercanía de acuerdo con lo que la persona necesita.
“Diseñamos productos digitales que funcionan.”
Presenta valor con convicción. Evita superlativos y declaraciones imposibles de demostrar.
“Antes de proponer, entendemos qué está frenando el producto.”
Formula buenas preguntas. No asume causas ni adelanta una solución.
“Guarda los cambios para continuar.”
Prioriza la tarea. Elimina contexto que la interfaz ya comunica.
“No pudimos guardar los cambios. Tu información sigue aquí; inténtalo de nuevo.”
Explica qué ocurrió, protege la confianza e indica una salida concreta.
“Listo. Tu solicitud fue enviada.”
Confirma el resultado y, si aporta valor, explica qué sucederá después.
Vocabulario
Palabras que construyen confianza.
PreferirEntenderen lugar deDescubrir insights
PreferirMejoraren lugar deRevolucionar
PreferirConectaren lugar deTransformar digitalmente
PreferirProbaren lugar deGarantizar
PreferirResultadoen lugar deSolución innovadora
Microcopy
La acción debe anticipar el resultado.
ContactoHablemos de tu productoEnviar
ExploraciónVer cómo trabajamosConoce más
FormularioSolicitar diagnósticoContinuar
DescargaDescargar la guíaHaz clic aquí
ConfirmaciónGuardar cambiosAceptar
Reglas editoriales
01Una idea por oración
02Verbos antes que sustantivos
03Específico antes que espectacular
04Primera persona plural con medida
05Español natural
06Traducción por intención
Si una frase necesita tres comas, probablemente necesita dos frases.
“Medimos y mejoramos” es más claro que “optimización basada en medición”.
Tiempo, claridad y conversión dicen más que “impacto extraordinario”.
Usamos “nosotros” para asumir responsabilidad, no para protagonizar el mensaje.
Conservar términos en inglés solo cuando el equipo o la industria realmente los utiliza.
La versión inglesa mantiene sentido y tono; no replica palabra por palabra.
Storytelling
- 01Qué hacemosClaridad inmediata
- 02Cómo ayudamosCapacidades
- 03Qué nos hace distintosMétodo
- 04Qué lo demuestraEvidencia
- 05Cuál es el siguiente pasoAcción
09 · Microilustraciones
Pequeñas escenas que hacen visible el sistema.
Las microilustraciones explican relaciones, estados y movimiento. Traducen conceptos técnicos sin depender de fotografías ni de recursos genéricos.
Explican
Cada escena representa una idea: flujo, análisis, producto, coordinación o resultado.
Simplifican
Usan la menor cantidad de formas necesarias para que la relación sea comprensible.
Se mueven
El motion muestra actividad real: una señal avanza, un nodo responde o un dato cambia.
Pertenecen
Color, geometría, trazo y ritmo siempre se reconocen como parte de Rium.
Representa coordinación entre herramientas, datos, personas y resultados.
Representa investigación, auditoría, diagnóstico y aprendizaje.
Representa diseño de producto, interfaces, prototipos y sistemas.
Representa medición, experimentación, evolución y crecimiento.
Construcción
Un vocabulario geométrico limitado.
La consistencia surge de repetir pocas reglas. No es necesario que todas las ilustraciones sean iguales; sí deben compartir el mismo ADN.
1.5–3px
Terminales redondeadas. El trazo fino conecta; el grueso enfatiza.
Circle · Rect · Path
Círculos para señales, rectángulos para sistemas y rutas para relaciones.
2 + 1 accent
Un fondo, un color estructural y Acid únicamente para actividad o foco.
2.4–8s
Loops lentos, recorridos lineales y respiración suave. Siempre reducible.
SíComunicar una relación
“Los datos entran, el agente interpreta y una acción avanza.”
- Una idea principal.
- Jerarquía clara.
- Movimiento funcional.
NoRellenar un espacio vacío
Una composición compleja sin relación con el contenido.
- Formas aleatorias.
- Demasiados colores.
- Motion constante sin significado.
10 · Accesibilidad
Diseñar para más personas mejora el producto.
Accesibilidad no es una capa final. Contraste, lectura, teclado, motion y tamaño táctil forman parte de la definición de terminado.
Contraste AA
Texto y controles mantienen legibilidad en todas las combinaciones.
Foco visible
Todo elemento interactivo puede encontrarse y operarse con teclado.
44 × 44px
El área táctil mínima se conserva en navegación, iconos y controles.
Reduced motion
La información nunca depende de una animación para aparecer o entenderse.
Definition of done
- Funciona desde 320px
- No depende del hover
- Respeta safe areas
- Contenido crítico visible
- Semántica y labels correctos
- Movimiento reducible