Resumen
Ruda es una herramienta de seguimiento de documentos y captación de leads, con CRM integrado, para equipos de ventas y marketing de empresa.
- Producto
- Ruda
- Publicado por
- Rexplore Inc.
- Sistema de diseño
- Vercel Geist
- Tipografías
- Geist Sans, Geist Mono
La interfaz de Ruda se basa en el sistema de diseño Vercel Geist. El color, la escala tipográfica, los radios y el movimiento siguen el original de Geist, y cuando nuestra implementación y el original no coinciden, manda el original.
Geist Sans y Geist Mono, de Vercel, con licencia SIL Open Font License 1.1.
Logotipo
El logotipo es la palabra RUDA, compuesta en Geist Sans. No tiene símbolo ni recuadro con inicial.
Normas
- Siempre en mayúsculas: RUDA. En el texto corrido, el producto se escribe Ruda.
- Peso 600 (SemiBold). Nunca más grueso.
- El espaciado entre letras es fijo, 0.64px en todos los tamaños, por lo que la proporción disminuye a medida que el logotipo crece.
- Tamaño mínimo: 12px.
- Área de respeto: deja libre al menos una altura de mayúscula (0.71 × tamaño de letra) en cada lado.
- Color: #171717 sobre fondos claros, blanco sobre fondos oscuros. Ningún otro color.
- Los lectores de pantalla anuncian el nombre como Ruda, no letra por letra. En textos alternativos, pies de foto y documentos, escribe Ruda.
- El logotipo se lee siempre de izquierda a derecha, también en páginas en árabe, y nunca se traduce ni se translitera.
Tamaños
| Tamaño | Espaciado | Proporción | Muestra |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
Qué no hacer
IncorrectoMinúsculas
IncorrectoMayúsculas y minúsculas
IncorrectoEspaciado alterado
IncorrectoCursiva
IncorrectoContorno
IncorrectoSombra
IncorrectoDegradado
IncorrectoColor ajeno a la marca
IncorrectoRecuadro con inicial o símbolo
Color
Primero, el neutro. El negro es el color de la marca y el azul se reserva para enlaces y estados. El contraste se calcula para cada token sobre blanco y sobre negro.
AA significa 4,5:1 o más, suficiente para texto corrido. AA texto grande significa 3:1 o más, solo para texto grande y elementos de interfaz.
| Token | HEX | Sobre blanco (#ffffff) | Sobre negro (#000000) | |
|---|---|---|---|---|
| Marca | ||||
| primaryPrincipal: botones, logotipo, texto principal | #171717 | 17.93:1AA | 1.17:1Por debajo de AA | |
| primary (dark)Rellenos principales en modo oscuro | #2e2e2e | 13.58:1AA | 1.55:1Por debajo de AA | |
| cta (dark)Botones principales en modo oscuro | #ededed | 1.17:1Por debajo de AA | 17.94:1AA | |
| Azul | ||||
| linkTexto de enlaces | #0068d6 | 5.31:1AA | 3.95:1AA texto grande | |
| link-darkTexto de enlaces en modo oscuro | #52a8ff | 2.50:1Por debajo de AA | 8.40:1AA | |
| toggle-on · toast-success · infoInterruptor activado, aviso de éxito, relleno informativo | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkInsignia Beta, texto blanco | #bd2864 | 5.75:1AA | 3.65:1AA texto grande | |
| badge-pink-darkInsignia Beta en modo oscuro | #b31a57 | 6.56:1AA | 3.20:1AA texto grande | |
| Desactivado | ||||
| disabled-bgRelleno desactivado | #f2f2f2 | 1.12:1Por debajo de AA | 18.76:1AA | |
| disabled-fgTexto desactivado | #8f8f8f | 3.23:1AA texto grande | 6.49:1AA | |
| Gris | ||||
| gray-50Fondo | #f2f2f2 | 1.12:1Por debajo de AA | 18.76:1AA | |
| gray-100Fondo al pasar el cursor | #ebebeb | 1.19:1Por debajo de AA | 17.62:1AA | |
| gray-200Fondo activo | #e6e6e6 | 1.25:1Por debajo de AA | 16.83:1AA | |
| gray-300Borde | #ebebeb | 1.19:1Por debajo de AA | 17.62:1AA | |
| gray-800Texto secundario | #4d4d4d | 8.45:1AA | 2.48:1Por debajo de AA | |
| gray-900Texto principal | #171717 | 17.93:1AA | 1.17:1Por debajo de AA | |
| gray-500 (dark)Texto secundario en modo oscuro | #a0a0a0 | 2.61:1Por debajo de AA | 8.03:1AA | |
| Estado | ||||
| successPunto e insignia de éxito | #45a557 | 3.10:1AA texto grande | 6.77:1AA | |
| warningAdvertencia | #f5a623 | 2.03:1Por debajo de AA | 10.36:1AA | |
| errorErrores y acciones destructivas | #e5484d | 3.91:1AA texto grande | 5.37:1AA | |
Los controles desactivados están exentos del contraste mínimo (WCAG 1.4.3) y siempre llevan disabled o aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Tipografía
Geist Sans compone todos los textos de la interfaz y del marketing. Geist Mono se usa para código y valores como los HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Títulos
| Token | Tamaño | Interlineado | Peso | Espaciado |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
Texto
| Token | Tamaño | Interlineado |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
Peso
Pesos: 400 para el texto, 500 para botones, 550 para énfasis, 600 para títulos y el logotipo. 700 o más no se usan, y una comprobación en el build los rechaza.
Otras escrituras
- El coreano, el japonés y el chino usan, después de Geist, la fuente del sistema de cada idioma (coreano: Pretendard). Los títulos de 24px o más se estrechan -0,02em; los de 20px o menos quedan en 0.
- Los títulos en tailandés y árabe mantienen el espaciado en 0 para no romper los signos tonales ni las uniones. Los títulos tailandeses de 48px y 56px usan un interlineado de 1,2.
- Las páginas en árabe van de derecha a izquierda. El logotipo, los valores HEX y el código siguen de izquierda a derecha.
Forma y espacio
Radio
- 6pxControles y campos
- 8pxTarjetas, popovers, menús
- 12pxVentanas modales
Sombra
Las tarjetas usan una línea de 1px en lugar de sombra, y las tablas nunca proyectan una. Las sombras quedan para las capas flotantes:
- Popovers y menús0 8px 24px rgba(0,0,0,.12)
- Ventanas modales0 16px 48px rgba(0,0,0,.16)
Espaciado
El espaciado avanza en múltiplos de 4px.
Movimiento
- La respuesta visual solo cambia color, opacidad o sombra. Nada se agranda ni se desplaza al pulsar o al pasar el cursor.
- Las transiciones duran de 150 a 200ms con la curva de desaceleración de Geist.
- Los popovers y las ventanas modales aparecen con un fundido. Los fondos nunca se desenfocan.
- Con la reducción de movimiento activada, todo desplazamiento se convierte en un fundido simple.
cubic-bezier(0, 0, 0.2, 1)
Contacto
Si tienes preguntas sobre el uso del nombre o el logotipo de Ruda, escribe a help@rexplore.xyz.