Logos

The design system ships SVG wordmarks 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.

Wordmarks

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

The same three files are exposed at the URLs above on the DX Playbook itself, so you can <img src="/toyota.svg"> from any prototype hosted alongside the docs without copying the file in.

File formats

Use SVG everywhere it’s an option — the wordmarks 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.

Sizing

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.

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

Where to find them

The wordmarks ship in two places that are kept in sync:

• Brand assets bundle — packaged with the fonts and favicon under Get started → Assets for download outside of an @tmedxp/styleguide install.
• DX Playbook public folder — served directly at /toyota.svg, /lexus.svg, /kinto.svg for use within the docs site itself.

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.