Automotive logos for leasing and finance applications

New makes quoted the same day

When an EV brand enters your lease book, it is a slug in the JSON API rather than a request to design. Sales quotes it the day the pricing lands.

Replaces a design ticket for every new make

Fewer wrong-make applications

Applicants confirm the badge before they type a model. A mismatched make caught at step two costs a click; caught at underwriting it costs a re-key and a callback.

Replaces manual correction after submission

Documents that match the car

The mark on the quote PDF is the mark on the vehicle. A document assembled from a stale or off-brand logo costs trust at exactly the moment a customer is deciding whether to sign.

Replaces a hand-maintained PNG set for templates

Rebrands without a template audit

When a manufacturer refreshes its logo, the asset behind the URL changes and every quote, portal card, and email picks it up within a day. Nobody opens forty templates to check.

Replaces a template sweep after every rebrand

Application form

A 20px badge inside the make select, so applicants confirm the brand before they type a model.

type=badge&size=xs

Quote and offer summary

The make badge beside the vehicle on the card a customer reviews and signs.

type=badge&size=md

Customer portal

Each agreement under My vehicles carries its badge, so a two-car household tells them apart at a glance.

type=badge&size=sm

Broker and portfolio tables

A 16px wordmark per row instead of a text-only make column in dense tables.

type=wordmark&size=xs&aspect=height

PDF quotes and emails

PNG for PDF renderers and email clients that do not decode WebP.

type=badge&size=sm&format=png

1. 01

   Load the make list on the server

   The JSON API returns every published brand with its id (the slug) and name. Fetch it with the secret key on your server, revalidate daily, and hand the client a plain list.

   The application form never needs the secret key, and the make list never goes stale between deploys.

   export async function GET() {
     const res = await fetch("https://api.motomarks.io/brands", {
       headers: { Authorization: `Bearer ${process.env.MOTOMARKS_SECRET_KEY}` },
       next: { revalidate: 86400 },
     });
     if (!res.ok) return Response.json([], { status: 502 });
   
     const brands: { id: string; name: string }[] = await res.json();
     return Response.json(brands.map(({ id, name }) => ({ slug: id, name })));
   }

2. 02

   Render the badge in the form and the summary

   One helper builds the URL; each surface passes the size it needs. The select uses xs, the summary card md. Same slug, same key, no image assets in the repository.

   const badge = (slug: string, size: "xs" | "sm" | "md") =>
     `https://motomarks.io/img/${slug}?type=badge&size=${size}&token=${process.env.NEXT_PUBLIC_MOTOMARKS_KEY}`;
   
   export function VehicleSummary({ make, model }: { make: Make; model: string }) {
     return (
       <div className="summary">
         <img src={badge(make.slug, "md")} alt={`${make.name} badge`} width={48} height={48} />
         <div>
           <strong>{make.name}</strong>
           <span>{model}</span>
         </div>
       </div>
     );
   }

3. 03

   Use PNG in generated documents

   PDF renderers and many email clients do not decode WebP. Request format=png for anything that leaves the browser. Same slug, same size scale, different container.

   A fixed width and height keeps the document layout stable while the image loads.

   <!-- rendered to PDF and attached to the offer email -->
   <img
     src="https://motomarks.io/img/{{ make_slug }}?type=badge&size=sm&format=png&token=pk_YOUR_PUBLISHABLE_KEY"
     alt="{{ make_name }}"
     width="32"
     height="32"
   />

4. 04

   Keep the two keys apart

   Publishable pk_ keys are designed for client-side image requests. Secret sk_ keys authenticate the JSON API and never leave the server.

   On Pro, restrict the publishable key to your portal hostnames so a key lifted from a quote PDF cannot be reused elsewhere.

   # server only: JSON API (brand list, metadata, colours)
   MOTOMARKS_SECRET_KEY=sk_live_...
   
   # browser, PDFs, emails: image CDN
   NEXT_PUBLIC_MOTOMARKS_KEY=pk_live_...

Questions before you integrate