placeholder TOOLS

data.placeholder.com/brands · via.placeholder.com/brand

Brand kits

A whole fictional brand for your mockup: name, tagline, voice, a palette with WCAG contrast, open-licence fonts, CSS custom properties, and a logo, favicon and social card to match. Pick one of the curated brands or type any name. Never a real company.

The kit (JSON and CSS)

https://data.placeholder.com/brands                 curated brands
https://data.placeholder.com/brands/<slug-or-seed>  the full kit (also .json)
https://data.placeholder.com/brands/<slug-or-seed>/tokens.css CSS custom properties + @font-face

Curated slugs include brightfjord, ledgerlark, mossgate-health, saltmeadow-bakery, northbeck-outfitters, lumenvale-energy, cindermoth-games, tarnway-freight, rookfield-legal and shipkiln; the list has them all.

What's in a kit

FieldContents
name, legal_name, tagline, descriptionWho they are, in a sentence or two
industry, domain, website, emailIndustry label; addresses on .example
voice, copyTone keywords, do and don't lists, and ready-made headline, subheadline, call to action, social post and e-mail subject
palettePrimary, secondary, accent, neutrals 50–900, background, surface, text, border and semantic colours. Each with hex, RGB, HSL, contrast against white, black, text and background, the text colour to use on it and its WCAG level; plus checked pairings
typographyHeading and body font (family, weight, CSS stack, letter spacing) and a type scale. Fonts are bundled SIL OFL files served from via.placeholder.com/brand/_fonts/
logo, assetsMark description, clear space and minimum size; URLs for every image below and tokens.css
socialHandles for the usual networks (fictional; real accounts with those names may exist, so don't link them)
usage_notes, noticeHow to use the logo and colours, and a fictional-brand notice

A generated kit also has requested (what you asked for) and canonical_url (its own slug), so /brands/42 and /brands/brightshore-learning describe the same brand.

tokens.css

<link rel="stylesheet" href="https://data.placeholder.com/brands/brightfjord/tokens.css">

/* gives you, among others: */
:root {
  --brand-primary: #1d4f91;  --brand-on-primary: #ffffff;
  --brand-secondary: …;      --brand-accent: …;
  --brand-neutral-50 … --brand-neutral-900;
  --brand-background; --brand-surface; --brand-text; --brand-text-muted; --brand-border;
  --brand-success; --brand-warning; --brand-danger; --brand-info;
  --brand-font-heading; --brand-font-heading-weight; --brand-font-body; --brand-font-body-weight;
  --brand-logo: url("https://via.placeholder.com/brand/brightfjord/logo.svg");
}

.button { background: var(--brand-primary); color: var(--brand-on-primary); font-family: var(--brand-font-body); }

Brand images

https://via.placeholder.com/brand/<slug>/<asset>.<svg|png|webp|jpg|ico>[?theme=&mono=&bg=&size=]
AssetWhatSize
logoMark plus wordmark. ?layout=stacked puts the name under the mark.?h= 16–1024, default 128; or ?w=
logomarkThe mark alone?size= 16–1024, default 256
faviconApp icon. .ico holds 16, 32 and 48 px; apple-touch-icon.png is 180?size= 16–512, default 32
og1200 × 630 social card with name and tagline. ?theme=brand (default), light or darkfixed
palette1200 × 630 sheet of the colours with hex values and contrastfixed
 
<link rel="icon" href="https://via.placeholder.com/brand/brightfjord/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://via.placeholder.com/brand/brightfjord/apple-touch-icon.png">
<meta property="og:image" content="https://via.placeholder.com/brand/brightfjord/og.png">

Names and slugs

Determinism and detection