Identidad
de marca.
Reglas visuales compartidas por todas las webs, herramientas y productos de Command. La fuente técnica es assets/css/tokens.css; el documento completo, BRAND.md.
Wordmark y símbolo
El wordmark command es la firma principal. La C es el símbolo para espacios reducidos: favicon, avatar, iconos de app y producto. La barra roja —la «línea de comando»— es inseparable de ambos.
Área de respeto y tamaños mínimos
No hacer
Negro técnico, rojo de señal
El sistema es casi monocromo. El rojo es una señal, no un relleno: úsalo para la barra del logo, la acción principal, el foco y los estados activos. Regla orientativa: 90 % neutros · 8 % blanco hueso · 2 % rojo. Haz clic en una muestra para copiar su valor.
Neutros
Rojo y estados
Tres voces
Oxanium (display) comparte la geometría de esquinas redondeadas del logotipo. Geist (texto) es neutra y muy legible. JetBrains Mono (sistema) aporta el lenguaje de terminal: etiquetas, códigos, datos. Nunca uses Oxanium para párrafos ni la mono para titulares.
Diseñamos y construimos máquinas que se pueden abrir, entender y hacer tuyas.
Cada dispositivo comparte ADN: carcasas pensadas para abrirse, electrónica documentada y software que no caduca. Línea de 60–75 caracteres.
Piezas reutilizables
Todo lo que ves aquí sale de components.css. Otras webs de Command deben importarlo en lugar de reinventarlo.
Botones
Etiquetas, estados y teclas
Tarjetas de herramienta y dispositivo
Se generan desde assets/js/links.js. Ver la landing para las versiones completas con mini-ilustración e indicador de fase.
- CMD-GRDisponible
Garage
Organiza tus proyectos de GitHub en un tablero kanban.
command-designs.github.io/garage - CMD-DTDesarrollo
Dart
Consola retro portátil.
sin web todavía - CMD-CXIdea
Sin nombre
Cámara retro.
en desarrollo
Preciso, rápido, mecánico
El movimiento imita hardware bien hecho: arranca con decisión y se asienta sin rebotes exagerados. Entradas con --ease-out, cambios de estado con --ease-in-out. Pasa el ratón por cada curva. Todo se desactiva con prefers-reduced-motion.
cubic-bezier(0.16, 1, 0.3, 1) · entradas, reveladoscubic-bezier(0.65, 0, 0.35, 1) · estados, cortinascubic-bezier(0.2, 0.9, 0.1, 1.25) · micro-interaccionesDuraciones
Usar la marca en otra web
Importa los tokens y componentes desde la landing (o cópialos al nuevo repositorio) y carga las fuentes:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=JetBrains+Mono:wght@400;500&family=Oxanium:wght@400..700&display=swap">
<link rel="stylesheet" href="https://<landing>/assets/css/tokens.css">
<link rel="stylesheet" href="https://<landing>/assets/css/components.css">
