# Creatives that look like your brand made them

> One design profile per workspace, read from your website’s stylesheets, a design system or Figma file, and reference images. Every image, slide, video scene, landing page and hosted blog post is drawn from it.

Demander has no house template. Each workspace has one design profile (colours by role, heading and body fonts with their files, corner radius, button style, density, alignment, logo and images), and every renderer reads only that profile.

## Where the profile comes from, strongest first

A weaker source only fills what a stronger one left open, and the Brand page shows which source set each field.

| Source | What Demander reads |
| --- | --- |
| Your overrides | Anything you set on the Brand page beats every source, and each field can be reset to its source |
| Design system | W3C design tokens and Tokens Studio JSON; a CSS custom-properties file or URL (globals.css, shadcn HSL values, Tailwind v4 @theme); Figma published styles, plus local variables on Figma Enterprise plans; uploaded fonts (TTF, OTF, WOFF, WOFF2) and logos (SVG, PNG, JPEG, WebP) |
| Reference images | Your own ads, brand sheets and screenshots (PNG, JPEG or WebP, up to 10 MB each, 24 per workspace). The palette is measured from the pixels and mapped to roles. With AI on, a vision model reads the four newest images for corner radius, button style, density, alignment, heading case, imagery and typeface character, and never guesses a font name |
| Website | Read on every product crawl and whenever you press Re-read website: the homepage’s stylesheets, evaluated the way a browser applies them |
| Default | Plain and neutral: white, near-black, square corners, a system sans, no decoration |

## What it reads from your website

1. **Samples of the page.** The homepage is reduced to samples of the body, headings h1 to h3, the most prominent buttons, cards, sections, the hero, the header and a content link, each with its classes and ancestors.
2. **The stylesheets.** Same-site sheets, site-builder asset hosts and Google Fonts, following imports two levels deep: at most 12 sheets, 1.5 MB each and 4 MB in total, within 25 seconds, all through the same guarded client as the crawler.
3. **A small cascade.** Specificity, inheritance, variables with fallbacks, calc(), layers, media queries and nesting are evaluated for those samples. Hover, focus and dark-mode rules do not count.
4. **Colours by role.** From named custom properties, the primary button’s background and text, body colours, the link colour, theme-color and how often each colour appears. Each role gets a contrast check: text 4.5:1, muted text 3:1, text on the primary colour 3:1.
5. **Type, shape and layout.** The heading and body families with weight, case, tracking, line height and scale; font files from @font-face or Google Fonts. Button radius (pills detected) and style, card radius and borders, rules between sections, shadows, section padding and hero alignment.
6. **Logo and images.** An inline SVG or the header image, SVG preferred. The Open Graph image, hero and feature images, each classified as a photo, a screenshot or an illustration.

## Rules every creative follows

- **Colours by role.** Background, surface, text, muted text, primary, text on primary, accent and border. Every text colour keeps at least 4.5:1 contrast on the field behind it, and black or white always qualifies.
- **Shapes as your brand draws them.** Square brands stay square and pills appear only for pill brands. The call to action uses your button style, and is left out of paid social images where the platform draws its own button.
- **Decoration only if you use it.** Dividers and shadows appear only when your site uses them. No blobs, circles, accent bars or quote glyphs, and no words added that you did not write.
- **Real text measurement.** Text is measured with the glyph widths of the font that renders it, broken between words (between characters for Chinese and Japanese), shrunk before a word is ever cut and truncated only as a last resort.
- **Your images only.** Only the logo and images in your profile or your uploads. SVG logos are stripped of scripts and external references before they are drawn, and a dark logo on a dark field gets a backdrop.

## Eight layouts

| Layout | What it does |
| --- | --- |
| Editorial | Large type and generous margins |
| Poster | One statement filling the frame |
| Product | Your screenshot or photo dominant |
| Split | Image and text, or the two sides of a comparison in two brand colours |
| Number | One figure, large |
| Testimonial | A quote in plain type, with no quote glyph |
| List | Numbered or plain points |
| Logo minimal | Your logo with very little else |

The layout follows the content (a statistic gets the number layout, a quote the testimonial layout) and your brand’s traits, varies across a campaign’s set, and is never one that needs an image or logo you do not have. Document slides and video scenes know whether they are the cover, the body or the closing page.

## Fonts

Renderers need the font file itself. Demander takes it from your uploads (WOFF and WOFF2 are decoded in-house), from your site’s @font-face rules, or from Google Fonts by family name. If nothing loadable exists, it uses a system font of the same genre (Liberation, DejaVu or Noto) and the Brand page says so. Fonts are used only to render your own creatives.

Every change to the profile raises its version number, and the version is part of every render’s cache key, so a new colour or font redraws your creatives without anyone asking.

## The Brand page

It shows the resolved profile with the source of every field, colour roles with their contrast checks, live specimens of your fonts, shape and layout traits, the logo on the background and on the primary colour, your reference images with their measured palettes, and a strip of your creatives that reloads when the profile changes. Design-system import, font and logo uploads and Re-read website all live there.

A single creative can still differ from the brand: the editor in the [creative studio](https://demander.to/features/creative-studio/) sets overrides per creative, card, slide or scene, each with reset to brand.

## Questions

**Do I need a design system or a Figma file?**

No. Your website is read on the first crawl and is enough to start. A token file, a Figma file or reference images make the profile more exact, and they take precedence over what the site gave.

**What if our site’s colours have poor contrast?**

Each colour role is checked when it is read, and every text colour in a creative must reach 4.5:1 on its field. Where a brand colour fails, the renderer picks another of your colours that passes, or white or near-black.

**Do landing pages and the hosted blog use the same design?**

Yes. Landing pages are rendered from the profile with your fonts, colours, corners, buttons and logo, and the hosted blog uses your brand fonts and colours, falling back to the colours found on your site.

**What does Figma import read?**

Published styles and their values through a personal access token, and local variables when your Figma plan is Enterprise. If Figma refuses the variables request, that is noted on the Brand page and the styles are still used.

## Related

- [Creative studio](https://demander.to/features/creative-studio/)
- [Blog and landing pages](https://demander.to/features/blog-and-landing-pages/)
- [Human-sounding copy](https://demander.to/features/human-copy/)
- [Product intelligence](https://demander.to/features/product-intelligence/)
- [Free snapshot](https://demander.to/snapshot/)

---
Source: https://demander.to/features/brand-design/ · Demander · reviewed 2026-10-02