Skip to content

Documentation The asset library

The asset library

Placeholder avatars and brand marks served from assets.designer.dev — every URL, every parameter, and the catalog that lists what exists.

Designer serves a small library of placeholder assets from https://assets.designer.dev: portraits of people who do not exist, and geometric brand marks for companies that do not exist. They are what the Designer skills reach for when a testimonial needs a face or a header needs a logo, and you can use the same URLs by hand.

Everything is a plain GET. There is no key and no sign-up. Responses are cached at the edge for a year and allow any origin, so you can hotlink them, fetch them from a script, or paste them into a design tool.

They are placeholders. Swap them for the real people and the real brand before a site goes live.

The catalog

https://assets.designer.dev/index.json

One address that says what the library holds right now. For each set it gives the URL pattern, the ids that exist, the parameters with a sentence each, example URLs, and how the asset is meant to go into a page. An agent should read it before writing an asset URL and never write an id it does not list — the sets grow, and the catalog is how you find out.

{
  "sets": {
    "avatars": {
      "url": "https://assets.designer.dev/avatars/{id}.webp",
      "ids": [1, 2, 3, "…", 36],
      "formats": ["webp", "jpg", "png"],
      "params": { "size": "Square, in pixels, 16–1024.", "…": "…" },
      "similar": [[7, 36], [8, 26], [31, 32]]
    },
    "marks": {
      "url": "https://assets.designer.dev/marks/{id}.svg",
      "ids": [1, 2, 3, "…", 24],
      "two_tone": [1, 2, 3, "…", 16]
    }
  }
}

The catalog is cached for five minutes, not a year.

Avatars

https://assets.designer.dev/avatars/{id}.webp

Square portraits, ids 1–36. The extension picks the format: .webp, .jpg or .png. Use WebP unless something cannot read it.

Parameter What it does
size A square of this many pixels, 16–1024.
w, h Both: fill that box, cropping from the center. One: that side, proportions kept. 16–1024.
grayscale Black and white. A flag — no value needed. 
<!-- a 48px testimonial avatar, sharp on a retina screen -->
<img src="https://assets.designer.dev/avatars/12.webp?size=96" width="48" height="48" alt="" class="rounded-full">

<!-- a portrait card for a team grid -->
<img src="https://assets.designer.dev/avatars/5.webp?w=480&h=600" alt="">

<!-- muted, for a logo-cloud style strip of faces -->
<img src="https://assets.designer.dev/avatars/20.webp?size=160&grayscale" alt="">

Good to know:

  • Ask for twice the size you display (size=96 for a 48px avatar). Sizes snap to the nearest multiple of 8.
  • Some portraits are the same person. 7 and 36, 8 and 26, 31 and 32 — do not put both of a pair on one site. The catalog lists them under similar.
  • An id does not tell you whose face it is, so give placeholder people names that work for anyone — Alex Morgan, Jordan Lee — unless you have looked.
  • An id can be written with or without leading zeros: /avatars/7.webp and /avatars/007.webp are the same image.

Marks

https://assets.designer.dev/marks/{id}.svg

Geometric brand marks, ids 1–24, as SVG. Marks 1–16 are drawn in two tones; 17–24 in one.

Parameter What it does
color The color of the whole mark. On a two-tone mark the lighter tone stays lighter — it is the same color at a lower opacity. Default currentColor.
accent-color Gives the lighter tone a color of its own, at full strength. Only two-tone marks have one; on the others it changes nothing.
size The height in pixels, 8–2048. The width follows the mark's own proportions, so marks of different shapes line up by height beside a company name.
width, height One: the other follows. Both: taken as given. 
<!-- hotlinked, in one color -->
<img src="https://assets.designer.dev/marks/3.svg?color=blue-800&size=32" alt="">

<!-- two colors -->
<img src="https://assets.designer.dev/marks/4.svg?color=slate-900&accent-color=orange-500&size=32" alt="">

Inline is better than hotlinked

With no color, a mark comes back filled with currentColor. In an <img> that is black. Pasted into the page as markup, it takes the color of the text around it — so it follows your theme, your dark mode and your hover states, and needs no request at all:

<a href="/" class="flex items-center gap-2 text-slate-900 dark:text-white">
  <!-- the response from https://assets.designer.dev/marks/3.svg, pasted in -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 50" fill="none" class="h-7 w-auto">…</svg>
  <span class="font-semibold">Fieldwork</span>
</a>

That is how the Designer skills place a mark in a template: fetch the URL with no parameters, paste the SVG, size it with a class.

Colors

color and accent-color take:

Form Example Note
A Tailwind color name blue-800, slate-900, orange-500 Any color and shade from the default Tailwind palette.
A hex color, without the # 0f172a, fff A # in a URL starts the fragment and never reaches the server. %230f172a also works.
A color function rgb(14,165,233), hsl(200 90% 48%) URL-encode the spaces.
A CSS color name black, white, rebeccapurple
currentColor The default.

Anything that does not read as a color is ignored and the default is used; the request still succeeds.

How requests behave

  • An id that does not exist is a 404. Parameters that do not exist are ignored.
  • Every size is clamped to the range in the tables above rather than refused.
  • Images answer with Cache-Control: public, max-age=31536000 and an ETag. A URL always names the same bytes, so browsers and the CDN keep it.
  • Access-Control-Allow-Origin: * on everything, and no cookies.
  • SVG responses can run nothing: they are sent with a Content-Security-Policy of default-src 'none' and X-Content-Type-Options: nosniff.