Sistema de marca · v1.0

Precisión con pulso.

RODD es un laboratorio que enseña lo que construye. La marca es sobria para que el movimiento sea el protagonista: fondo oscuro, tipografía limpia y un único color de acción.

01

Esencia

Precisión

Cada píxel y cada milisegundo tienen un porqué. Nada decorativo por defecto.

Movimiento con propósito

La animación explica, guía o premia. Si no hace ninguna de las tres, sobra.

Generosidad

Enseñamos el código. La librería es abierta: la confianza se gana compartiendo.

02

Logotipo

RODD.
Monograma RODD: R. en hueso con el punto violeta
  • Logotipo: “RODD.” en Geist Semibold, tracking −7 %. El punto final, siempre en violeta señal: es la firma de la marca (en la presentación, parpadea como un cursor). Sin ® hasta registrar la marca en la OEPM.
  • Monograma: “R.” con el mismo punto violeta, sobre el negro de la marca. Para favicon, avatar, icono de app y sello en tamaños pequeños. Nunca sobre fondo blanco ni con otros colores de punto.
  • Área de respeto: la altura de la “O” alrededor de todo el logotipo.
  • Nunca: contornos, sombras, degradados sobre el logotipo ni rotaciones.

03

Color · regla 60 / 30 / 10

Tinta 60%
Hueso 30%
10%
#07070A

Tinta

Fondo. El lienzo de todo.

--color-ink

#0D0D12

Grafito

Superficies: tarjetas, paneles, código.

--color-ink-2 / 3

#EDEDEA

Hueso

Texto principal y botón primario.

--color-bone

#8A8A93

Niebla

Texto secundario, metadatos.

--color-mute

#8B7BFF

Violeta señal

Acción y foco. El único acento.

--color-violet

Colores de señal por categoría

Solo en puntos, etiquetas y códigos (≤ 2 % de la pantalla). Sirven para orientarse en la librería, nunca como fondo. El cian además indica “en vivo”.

TX · Tipografía #EDEDEA AN · Animaciones #8B7BFF CP · Componentes #3DE7FF MI · Microinteracciones #FF7A45 BG · Fondos #B8F35A SP · 3D y Spline #F472B6

Contraste (WCAG 2.1)

Hueso / Tinta

17.2:1 AAA

Cian / Tinta

13.5:1 AAA

Violeta / Tinta

6.1:1 AA

Niebla / Tinta

5.9:1 AA

04

Tipografía

Geist · UI y titulares

Diseñamos el movimiento

Titulares 500, tracking −4,5 %. Texto 400, 15–18 px, interlineado 1,6.

Instrument Serif Italic · acento

con pulso.

Máximo 1–3 palabras por titular. Es la voz emocional; si se usa en todo, pierde el efecto.

Geist Mono · datos

RODD·BG·012

Códigos, etiquetas, metadatos y código. Mayúsculas con tracking +18 % en etiquetas.

05

Movimiento

Rápido

180 ms

Hover, foco, toggles

Base

400 ms

Entradas de UI, cambios de estado

Lento

900 ms+

Titulares, transiciones de sección

  • Curva de marca: cubic-bezier(0.16, 1, 0.3, 1) (expo out): entra rápido, se posa suave.
  • Un protagonista: un único efecto WebGL en vivo por pantalla. El resto, estático hasta que se interactúa.
  • Reducir movimiento: con prefers-reduced-motion se desactivan scroll suave y animaciones largas.

06

Voz

Sí

“Pasa el ratón para verlo en vivo. Copia el código y úsalo hoy.”

No

“Soluciones disruptivas de vanguardia para dominar el mercado.”

Tuteo, frases cortas, verbos de acción. Enseñamos, no presumimos.