Striker

Geometría y elevación

Cuadrado por defecto, el radio como lista blanca y elevación por sombra navy.

Las cuatro formas del sistema

ContactarVer hiloIntervino una personaBuscar lead…
acción cuadrada · estado en pill · entrada en línea · presencia circular

La forma es semántica, no decorativa. Acción es cuadrada. Estado es pill. Presencia es círculo. Con tres formas distintas, un botón nunca se confunde con un badge ni con un avatar — sin depender del color.

Cuadrado por defecto: el radio es una lista blanca

No hay radio por defecto que ajustar: los tokens de superficie y control valen 0. Curvar algo nuevo exige agregarlo a esta lista, y la lista tiene dos entradas por diseño.

La claridad del botón al pasar el mouse no viene de la forma ni del movimiento: viene de la sombra que enfoca por detrás, definida en 09 · Movimiento.

  • Pills y chips de estadorounded-full · 999px
  • Presencia: agente, avatares, puntoscírculo · 50%
  • Todo lo demás0 — botones incluidos
lo único que se curva en todo el sistema

La entrada es una línea, no una caja

Escribir sucede sobre una sola línea bajo el texto — nunca dentro de un rectángulo con borde. Al hover la línea se afirma; al foco se vuelve azul y de 2px. Es toda la señal que una entrada necesita.

La línea usa el token de borde de control, el único borde que existe en el sistema — y ahora mide una dimensión, no cuatro.

Reposo

Buscar lead…

Hover — pásame el mouse

Buscar lead…

Foco

Constructora An

reposo · hover en vivo · foco

Nada de cajas dentro de cajas

Un componente nunca es un rectángulo con borde que contiene otro rectángulo con borde. Cada nivel de anidamiento con contorno suma ruido y resta pulcritud.

La composición es plana: un campo por color o sombra, y adentro tipografía, filas y controles — sin contornos intermedios. Las líneas de pelo entre filas son tipografía, no cajas, y se quedan.

Así no

Lead calificado

Contactar

Así sí

Lead calificado

Contactar
izquierda: tres bordes anidados · derecha: un campo y filas

La elevación es sombra navy, no borde

Dos alturas bastan: elevada para tarjetas y campos de trabajo, flotante para menús, popovers y diálogos. Las sombras llevan el navy de la familia, nunca negro neutro — por eso se sienten naturales sobre el papel frío.

En oscuro la proyección apenas se ve, así que la elevación cambia de motor: el paso de superficie separa, y el token de sombra lleva una luz superior sutil — como si la luz rozara la superficie levantada. Sin bordes ni anillos; el markup no cambia.

Si una superficie necesita borde para distinguirse, le falta contraste de color o le sobra anidamiento. Ni siquiera la entrada lleva caja: escribir sucede sobre una sola línea.

Reposo
al ras del canvas
Elevada
shadow-elevated
Flotante
shadow-floating
tres alturas, cero contornos

Los valores

radius-control
0
radius-panel / dialog
0
radius-round
999px · pills y presencia
shadow-elevated
0 1 2 / 0 12 32 · navy 5–9%
shadow-floating
0 2 4 / 0 20 48 · navy 7–13%
Bordes de campo
ninguno — color o sombra