Skip to content

Logos

The design system ships SVG logos for the three brands it supports — Toyota, Lexus, and Kinto. They are colour-correct, single-path marks intended for small-to-medium application contexts (page headers, footers, brand pickers, document mastheads). Detailed brand-application rules — clear-space, co-branding, lock-ups, motion, photography overlays — sit with the brand team, not in this guide.

Brand File Preview
Toyota toyota.svg Toyota
Lexus lexus.svg Lexus
Kinto kinto.svg Kinto

Use SVG everywhere it’s an option — the logos are vector and will stay crisp at any size. The bundle does not ship raster (PNG / JPG) versions; if you need a raster for a tool that won’t accept SVG, export from the SVG at the size you need rather than scaling up a small bitmap.

The marks are designed to sit on the same optical baseline as a line of UI text. As a rough starting point:

  • Inline next to a heading or in a header bar: match the cap-height of the surrounding text.
  • Standalone in a footer or splash: 24–48px tall is typical.

Logo widths differ by brand — Toyota is roughly square, Lexus is wider, Kinto is wider still. Lock the height and let the width follow naturally.

The logos are packaged with the fonts and favicon in the brand assets bundle under Setup → Static, for download outside of an @tmedxp/styleguide install.

If you’re consuming the design system through @tmedxp/styleguide in a product, prefer importing the marks through the package; the bundle is for the cases where that isn’t an option.