Logo

Logo e Isotype son la firma de Carvuk. Se pintan con primary o blanco según el fondo y escalan sin perder proporción.

Anatomía

El isotipo es la C con la rueda. Junto al nombre forma el logo completo. Ambos son SVG y toman el color del texto, así que se pintan con clases de color.

  1. Isotipo
  2. Nombre

Variantes

LogoLa versión completa. Para navbars, footers, correos y documentos.
IsotypeCuando el espacio es reducido: app icon, favicon o avatar.

Fondos

Solo dos colores para el logo: primary o blanco. Elige el que tenga más contraste.

Sobre claroPrimary sobre blanco o fondos tint.
Sobre primaryBlanco sobre el color de marca.
Sobre oscuroBlanco sobre fondos oscuros y fotos.

Tamaños

Logo: h-6, h-8 y h-12h-8 es el default. h-6 es el mínimo para que el nombre se lea bien.
Isotype: h-6, h-10 y h-14h-6 es el default. Escala libre manteniendo la proporción.

Uso

Sí
Primary sobre fondos claros, con aire alrededor.
No
No deformes el logo ni cambies sus proporciones.
Sí
Isotype dentro de un contenedor cuando el espacio es chico.
No
Primary sobre fondos oscuros. Pierde contraste y no se lee.

Código

import { Logo } from '@carvuk/design-system/components/logo';
import { Isotype } from '@carvuk/design-system/components/isotype';

<Logo className='text-primary' />
<Isotype className='h-10 text-primary-foreground' />