Logo

The <CardanLogo /> component renders the Cardan logo: two interlocking links (green and purple) with the wordmark to the right. Its colors are fixed brand artwork and never follow the theme tokens. The logo has an accessible name ("Logo Cardan", or "Logo Cardan Academy" for a lockup); add decorative when a visible name is right next to it.

Forms

form="full" (default)
form="symbol"
form="tile"
form="tile" round

Use the full logo everywhere the library shows a brand logo: headers, app shells and footers. The tile is only for favicons, app icons and profile images, never in a website header.

Variants

The default variant="auto" shows the color logo in light mode and the color-negative logo in dark mode.

variant="color"
variant="purple"
variant="black"
variant="negative"
variant="white"

Lockups

Sub-brands are lockups, not new logos: the product name follows the logo in lowercase, in purple.

Usage rules

  • Keep clear space around the logo of at least the width of one link.
  • The logo is 16px high by default, which fits a header on a 320px screen; set the height prop for a larger logo.
  • Never stretch, recolor or rotate the logo, never put the color logo on purple, and never place it on a busy area.
  • On photos, use the white or black one-color logo only.