Sistema de diseño de BiiLinx
Esta página no describe el sistema: lo usa. Los colores se pintan con las variables reales y el hexadecimal lo lee el navegador; los iconos salen del mismo archivo que dibuja el menú; las banderas, del mismo generador que el selector de idiomas. Si alguien cambia un token, esta página cambia sola.
Color
El teal es el color rector. Cada muestra dice su contraste medido contra blanco: es el número que decide si un color puede llevar texto encima, y es el motivo por el que los botones son Verde Linx y no Teal Linx.
Marca
--blx-verde-linx
Titulares y nombres · Pantone 3155 C
--blx-teal-linx
Color del logo y superficies · 321 C
--blx-verde-profundo
Texto y datos de contacto · 3165 C
--blx-menta-linx
Acentos y CTA · 3265 C
--blx-verde-senal
Iconos e ilustración · 3285 C
--blx-verde-bosque
Tarjetas sobre fondo oscuro · 3298 C
--blx-negro-verde
Fondos oscuros · Black 6 C
Neutros y estado
--blx-divisor
Líneas de 1px y separadores
--blx-fondo-claro
Tarjetas y superficies claras
--blx-blanco
Fondo por defecto
--blx-error
Error de formulario
--blx-ok
Confirmación
Papeles funcionales
Los de arriba nombran colores. Estos nombran trabajos, y son los únicos que el CSS del theme usa. Un color se cambia en un solo lugar y el sitio entero lo sigue.
--blx-marca
Botones y enlaces
--blx-marca-oscuro
Titulares de tarjeta
--blx-acento
Enlaces dentro de texto
--blx-icono
Iconos, nunca texto
--blx-tinta
Texto de cuerpo
--blx-tinta-suave
Texto secundario
--blx-linea
Bordes
--blx-fondo-alt
Banda alterna
Gradiente
--blx-gradiente-linx
Hay uno solo y nunca se le inventa una parada intermedia. Con texto blanco encima, su extremo claro mide 3,79: sirve para titulares grandes y no para texto de cuerpo.
Tipografía
Dos familias con papeles separados. Montserrat es la fuente de la marca y sostiene titulares, navegación y botones; Inter es la del cuerpo. Noto Sans SC sostiene el chino. Las dos van autohospedadas, nunca desde Google, porque el sitio tiene que cargar desde China continental.
Tus ojos en Asia
Oficina y equipo propios en Shenzhen
Buscamos, auditamos y seguimos a los fabricantes en el terreno, sin intermediarios entre el cliente y la fábrica. El ancho de este párrafo es --blx-ancho-texto, 52 caracteres, que es la medida cómoda de lectura.
我们是 BiiLinx，深圳有自己的办公室和团队。
Espaciado
Seis pasos. Todo el aire del sitio sale de acá: no hay márgenes escritos en píxeles sueltos.
--blx-esp-1
--blx-esp-2
--blx-esp-3
--blx-esp-4
--blx-esp-5
--blx-esp-6
Superficies y elevación
La sombra siempre lleva desplazamiento y difuminado: un halo de color centrado en el elemento no es profundidad, es decoración. Sobre banda oscura las opacidades van plenas; sobre fondo claro, a la mitad.
1px solid var(--blx-linea)var(--blx-fondo-alt)0 1px 2px / 0 12px 28px -8pxvar(--blx-negro-verde)Botones y llamadas a la acción
Van en Verde Linx y no en Teal Linx, y no es gusto: blanco sobre teal mide 3,79 de contraste y no pasa el 4,5 que WCAG AA pide para texto normal. El menta se reserva para acentos sin texto chico encima.
Solicitar cotización CTA sobre banda oscura Enlace dentro de texto
Iconos · 59 en el set
Phosphor, licencia MIT, incrustados como SVG en el HTML. Cero peticiones, que
es la regla del sitio: una petición que no responde desde China continental
cuelga hasta expirar. Todos toman currentColor, todos van
aria-hidden, y ninguno lleva texto propio: acompañan a un título
que ya dice lo mismo.
oficina
fabrica
auditoria
ojos
escudo
idioma
briefing
propuesta
muestras
produccion
logistica
entrega
acuerdo
maritimo
aereo
terrestre
almacen
servicios
globo
fuego
legal
ahorro
blog
cerrar
casa
sobre
calendario
reloj
ojo
tipografia
enlace
flecha
flecha-derecha
idioma-globo
menu-barras
orden-antiguo
orden-reciente
instagram
facebook
linkedin
whatsapp
ph-envelope
ph-map-pin
ph-whatsapp
ph-linkedin
ph-instagram
ph-facebook
ph-arrow-up-right
ph-users-three
ph-newspaper
ph-lupa
ph-ciclo
ph-bodega
ph-barco
ph-avion
ph-camion
ph-grilla
ph-paquete
ph-pregunta
Banderas
Del paquete oficial flag-icons, rasterizadas a WebP e incrustadas como data URI. Nunca emoji: un emoji de bandera no se dibuja en Windows y dependería de la fuente del sistema. El SVG oficial de México pesa 84.753 bytes por el escudo; así pesa 340, y el dibujo sigue siendo el oficial porque sale de ese SVG.
mx · México 
us · Estados Unidos 
cn · China 
pa · Panamá 
hk · Hong Kong 
co · Colombia 
eu · Unión Europea Arquetipos de sección · 12
Las páginas del sitio no tienen plantilla propia: se arman declarando qué
arquetipos van y en qué orden, en inc/paginas-disenadas.php. Por eso
una página nueva es una entrada en un mapa y no un archivo más.
Acá no hay muestras de los arquetipos, y es a propósito.
Un arquetipo lee su contenido de content/*.php. Montarlo en esta
página con texto inventado daría algo que se parece al arquetipo sin serlo, y
que dejaría de parecerse el día que el arquetipo cambie. Cada ficha enlaza a
una página donde el arquetipo está funcionando de verdad.
Reglas que no se ven en una muestra
Nada llega por CDN. Fuentes, iconos y banderas van autohospedados o incrustados. El sitio le habla a China continental, donde una petición que no responde cuelga hasta expirar.
Ninguna animación usa librería. Decisión del 2026-08-20. Los revelados, los fondos animados y las micro-interacciones son CSS, y todos se apagan con prefers-reduced-motion.
El texto nunca va sobre una foto pelada. Va sobre una capa de color conocida, porque una foto no garantiza contraste en ninguna parte y la legibilidad terminaría dependiendo de qué píxel le toque detrás a cada letra.
Un alt vacío puede ser correcto. Una imagen decorativa lleva alt="" para que el lector de pantalla la saltee. Lo que no se hace nunca es describir una imagen que no se vio.
El diseño aguanta que el editor escriba de más. Cada sección se piensa con texto corto, texto largo, con imagen, sin imagen, con tres ítems y con siete. Y el chino es más corto y más alto que el español.
Newsletter de BiiLinx
Lo que vemos en las fábricas de China, en tu correo
Las fechas que frenan la producción, ferias como la de Cantón y cómo verificar a un proveedor antes de pagarle. Te das de baja cuando quieras.
Te vamos a escribir a este correo. Puedes darte de baja cuando quieras.
- 01 Briefing Qué producto, qué volumen, qué especificación técnica.
- 02 Propuesta Fábricas candidatas, precios y condiciones sobre la mesa.
- 03 Muestras Verificas el producto físico antes de comprometer el pedido.
- 04 Producción Seguimiento en planta, con avances reportados.
- 05 Control de calidad Inspección y reporte antes de que la carga salga de fábrica.
- 06 Logística Consolidación en bodega, transporte y trámites aduanales.
- 07 Entrega La mercancía llega a tu destino final.