Sistema de diseño

Una sola referencia de marca para todas las pantallas de clavo.mx: el sitio público, el buscador, y los paneles de técnico, cliente, socio y ALIVA. Todo lo que ves aquí carga clavo-styles.css, la misma hoja que usa el resto del sitio — si algo cambia ahí, cambia aquí también, así que esta página nunca queda desactualizada.

Colores Tipografía Botones Insignias Tarjetas y contenedores Formularios Otros componentes Reglas de uso

Colores

Variables definidas en :root de clavo-styles.css. El azul es la acción primaria de navegación/confianza, el naranja es la acción principal (botones de conversión), el navy es el color de marca en textos y títulos.

--azul#1d4ed8 · enlaces, acciones secundarias

--azul-oscuro#1e3a8a · hover / énfasis

--naranja#f97316 · botón primario (.btn)

--naranja-oscuro#ea580c · hover del botón primario

--navy#0f1b2d · logo, títulos, marca

--verde#16a34a · éxito, disponible, WhatsApp

--morado#7c3aed · filtros de marca/tema

--gris-900#111827 · texto principal

--gris-700#374151 · texto secundario

--gris-500#6b7280 · texto muted / hints

--gris-200#e5e7eb · bordes, separadores

--gris-100#f5f6f8 · fondo de página

✓ HacerUsar naranja solo para LA acción principal de la pantalla (pagar, publicar, enviar). Nunca dos botones naranjas compitiendo en la misma vista.

✗ EvitarIntroducir un color nuevo para un botón o insignia sin agregarlo primero aquí como variable. Todo color hardcodeado fuera de esta paleta es deuda de diseño.

Tipografía

Playfair Display (serif) para títulos y logo — le da a clavo.mx un aire de oficio establecido, no de app genérica. Inter (sans) para todo el texto de trabajo: formularios, tablas, botones, párrafos.

H1 — Playfair Display 900

H2 — título de sección

H3 — subtítulo

H4 — nombre de tarjeta / técnico

Texto de párrafo en Inter — este es el cuerpo de texto normal que se usa en toda la plataforma para descripciones, mensajes y contenido de tablas.

Texto secundario (.hint) — para aclaraciones, ayudas contextuales y metadatos.

Botones

Un solo botón primario naranja por pantalla. El secundario (borde azul) para acciones alternas. Nunca menos de 44px de alto — es el mínimo táctil definido en clavo-styles.css para toda la plataforma.

💬 WhatsApp 📞 Llamar

Insignias (badges)

Cada insignia comunica un solo estado. Nunca se combinan colores fuera de esta lista, y nunca se inventa una insignia de confianza (p. ej. "verificado") sin que el dato detrás sea real — ver Sobre nosotros sobre reputación no fabricada.

Ramo Registrado por usuario Autónomo Taller ⏸ No disponible por ahora 🆕 Perfil nuevo Sin reclamar 📱 Teléfono verificado ⭐ Premium

Tarjetas y contenedores

Toda superficie de contenido va en .card (fondo blanco, sombra suave, radio de 12px) — es lo que le da al sitio su unidad visual entre el buscador público y los paneles internos.

.card

Contenedor base: formularios, secciones de panel, bloques informativos.

.mini-cardpara listas densas (clientes, hilos de mensajes)

Formularios

Bordes gris-200, radio de 8px, mínimo 44px de alto. Mismo estilo en todo el sitio: registro, cotizador, filtros de búsqueda.

Campo de texto Selector

Otros componentes

Ficha pública del técnico (reputación y portafolio, ver clavo-data.js → tarjetaTaller)

Refrigeración García

★★★★★4.8(23 reseñas)

📱 Teléfono verificado

📍 Guadalajara, Jal.

Refrigeración

Calendario mensual (Agenda)

Septiembre 2026

Modo oscuro

Cada componente de esta página tiene su variante en html[data-tema="oscuro"]. El interruptor está disponible en cada panel (esquina inferior derecha).

Reglas de uso

✓ Reutilizar clases existentesAntes de escribir CSS nuevo para una pantalla, revisar si ya existe una clase aquí (.card, .badge, .btn, .cal-*, .taller-*). La mayoría de lo que se necesita ya está resuelto.

✗ No duplicar reglasNo definir de nuevo una clase que ya vive en clavo-styles.css desde otro archivo o bloque — genera reglas en conflicto y hace más difícil mantener el sitio. Editar la regla existente, no crear una paralela.

✓ Mobile primero en lo nuevoToda fila con columnas fijas en px (como las partidas del cotizador) necesita su variante de pantalla angosta en @media (max-width:480px).

✗ No inventar insignias de confianza"Verificado", "Premium" y calificaciones siempre deben reflejar un dato real guardado en el sistema — nunca un adorno visual sin datos detrás.