La marca Carfit
Un sistema visual simple y consistente: dos colores propios —navy y verde— sobre blanco, tipografía Inter, y el lenguaje de componentes de Material 3. Del sistema Material tomamos forma, elevación y componentes; el logotipo y los colores son siempre de Carfit.
El símbolo y el wordmark
Un cuadrado redondeado con dos puntos —la vista frontal abstracta de dos autos en el patio— acompañado del wordmark en Inter semibold. Existe en dos variantes según el fondo; nunca se redibuja ni se recolorea.
Principal — sobre blanco: símbolo verde, puntos y texto navy.
Inversa — sobre navy: símbolo blanco, puntos verdes, texto blanco.
Sobre verde — usar solo en piezas de acento, con la variante inversa.
Construcción y área de resguardo
El área de resguardo mínima equivale a la altura de un punto del símbolo en todos los lados. El tamaño mínimo del símbolo es 20 px en pantalla; bajo ese tamaño se usa solo el símbolo, sin wordmark.
Usos incorrectos
El logotipo no se estira, no se rota, no cambia de colores y no se usa sobre fondos que comprometan su contraste.
No estirar ni deformar.
No rotar.
No recolorear fuera de la paleta.
Navy, verde y blanco
Tres colores definen la marca. El navy da seriedad y es el color de la palabra; el verde es la acción y el acento; el blanco es el lienzo. Cada uno tiene una escala tonal completa para estados, fondos y textos.
Escala navy
Escala verde (leaf)
Roles tonales
En las áreas de producto (vendedor, comprador) los colores se aplican vía roles de Material 3, generados con semilla en el verde Carfit. Cada rol tiene su par «on-» que garantiza contraste accesible.
Superficies
Inter, en todo
Una sola familia tipográfica para producto y marketing: Inter, con tracking apretado en titulares y números tabulares para cifras. Los pesos de trabajo son 400, 500, 600 y 700.
Cifras y montos siempre con font-variant-numeric: tabular-nums para que las columnas de números alineen.
Botones y controles
Los componentes siguen Material 3: botones pill, contenedores tonales, radios de la escala de forma M3 (4–28 px). El color primario de producto es el verde tonal; el verde leaf y el navy se reservan para la landing y CTAs de marketing.
Botones Material 3 (producto)
Filled para la acción principal de la vista; tonal para acciones secundarias frecuentes; outlined y text para acciones de menor jerarquía; danger solo para acciones destructivas.
FAB extendido
Botones de marketing (landing)
En la landing el CTA principal es navy sólido y el acento verde lleva un brillo (shimmer) al hover. Radio 8 px, peso 500.
Chips y campos
Escala de forma M3
Botones pill (radio completo), cards en lg (16 px), diálogos y sheets en xl (28 px), campos en xs (4 px).
Cards y elevación
La elevación es sutil: sombras de 1–3 px en reposo. El énfasis se logra con el tono de superficie, no con sombras grandes.
Aplicaciones en degradado
Los degradados de Carfit son siempre sutiles y monocromos dentro de una misma escala: verde sobre verde, o veladuras radiales del verde y el navy sobre blanco. Nunca se mezclan tintes ajenos a la paleta.
linear-gradient(135°, leaf-600 → leaf-400). Badges numerados, íconos destacados y superficies pequeñas de acento.
linear-gradient(135°, navy-700 → navy-500). Paneles hero oscuros y piezas institucionales.
Dos veladuras radiales (verde al 10 %, navy al 6 %) sobre blanco. Fondo de secciones hero de la landing.
linear-gradient(180°, blanco → verde casi imperceptible). Fondo de feature cards y paneles.
Reglas de uso
- Máximo dos pasos de color por degradado.
- Siempre dentro de la misma escala tonal (o veladuras al 6–12 %).
- El texto sobre degradado verde o navy es siempre blanco.
- Nunca degradado navy → verde directo en superficies grandes.
- Ángulo estándar 135° en lineales pequeños, 180° en fondos.
- En producto (M3) se prefieren superficies tonales planas.
La marca en uso
Ejemplos de cómo se combinan logotipo, color, tipografía y componentes en las piezas reales de la plataforma.
Superficies tonales M3, radios lg y acción tonal secundaria.
Navy de fondo, acento verde en la palabra clave, CTA verde.
Este documento es la referencia viva de la identidad Carfit. Los valores exactos (variables CSS, escalas y componentes) viven en el código de la plataforma y esta página se genera desde ellos.