# Brand and design

> Apply the client's brand kit to a MakoDeck deck — colours, logo and fonts — follow the quality rules every deck needs, and fall back to MakoDeck's default look when there is no brand kit.

The client's brand kit leads. Design freely within it; the skeleton's look is only the default when there is no brand kit.

## Map the brand kit to the skeleton's tokens

Every colour and font comes from the BRAND TOKENS block at the top of the skeleton (https://makodeck.com/ai/skeleton.md). Replace the values; keep the names. Adding tokens is fine.

| Token | Brand kit value |
|---|---|
| `--brand-font`, `--brand-heading-font` | the body font, and the font for titles and big numbers (the same one if the brand has one) |
| `--brand-accent` | the brand colour exactly, as a FILL: highlighted bars, shapes, rules |
| `--brand-accent-strong` | the brand colour as TEXT: kickers, key numbers, table headers. Must reach 4.5:1 on `--brand-paper`, `--brand-soft` and `--brand-accent-tint` |
| `--brand-accent-tint` | a very light tint of the accent: table headers, soft fills |
| `--brand-ink`, `--brand-muted` | body text, and secondary text (labels, captions, footers) |
| `--brand-rule`, `--brand-quiet` | hairlines and chart axes; de-emphasised chart marks |
| `--brand-soft`, `--brand-paper` | card backgrounds; the slide background |
| `--brand-dark`, `--brand-on-dark` | a dark brand colour for section slides, and the text on it |
| `--status-good`, `--status-watch`, `--status-risk` (+ `-tint`) | only if the brand defines status colours; keep the contrast |

Match the layout, shapes and imagery to the brand's own slides when you have examples. The content area of a slide is about 1728 × 750 px.

**Contrast beats brand for text.** Text needs 4.5:1 against its background; chart marks and icons that carry meaning need 3:1. So for `--brand-accent-strong` use a darker shade of the brand colour that reaches 4.5:1 on paper, soft and tint, or the brand's own dark colour. A brand colour that fails as text (a light copper, a yellow) still works for large fills, rules and chart marks — at 3:1 where the mark carries meaning.

**A thin brand kit** (only a primary colour, say): derive the rest — neutrals from ink and paper, the tint and the strong shade from the accent. List every derived value in the handover.

**Logo:** bundle the file and show it with a relative path — `<img class="logo" src="assets/logo.png" alt="Client name">` on the title slide or in the footer. Never hotlink it.

- An SVG logo whose text uses a font can't load that font inside `<img>`. Use the brand's PNG export, or paste the SVG inline in the HTML so it uses the page's fonts. Don't redraw or outline its letters yourself.
- Text inside a logo is exempt from the minimum text size.
- No logo supplied: use none. Never invent a brand mark; decorative shapes in the brand's colours are fine.

## Fonts

The site reads each `font-family` list from the left and stops at the first family it can supply. A family is supplied from the first of these that has it:

1. **Generic families and system fonts** (`system-ui`, `sans-serif`, Arial, Helvetica, Segoe UI, emoji…): left to the viewer's computer.
2. **Inter:** the site's own copy. Just name it — no `@font-face` needed.
3. **The deck's own `@font-face`** with a relative `url()` to a file in the upload.
4. **The workspace's fonts:** brand fonts the workspace's owners or admins uploaded under **Fonts** (in the workspace menu), matched by the family name typed there. Only for decks uploaded into that workspace.
5. **The Google Fonts library:** any Google Fonts family, from the site's own copy. Name the family, or keep a `fonts.googleapis.com` `<link>` or `@import` as written.

Names match ignoring case, but otherwise exactly: `"Open Sans"` is not `"OpenSans"`. So put the brand font FIRST in every list — `--brand-font` and `--brand-heading-font` each — as `font-family: Arial, "Brand Sans"` always shows Arial.

Examples:

```css
:root { --brand-font: "Inter", system-ui, sans-serif; }          /* Inter: nothing else needed */
:root { --brand-font: "Source Sans 3", system-ui, sans-serif; }  /* a Google Fonts family, by name */

/* A bundled font: one @font-face per weight and style, WOFF2 preferred */
@font-face { font-family: "Brand Sans"; src: url("fonts/BrandSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Brand Sans"; src: url("fonts/BrandSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root { --brand-font: "Brand Sans", system-ui, sans-serif; }
```

- Bundle a font only when its licence allows embedding it in documents or on the web, and keep its licence beside it as `OFL.txt` or `LICENSE.txt` (a file with no extension is skipped). If the licence doesn't allow that, name the family as it is in the workspace's fonts, or use the closest Google Fonts family and say so.
- Workspace fonts: TTF, OTF, WOFF or WOFF2, one face per file, at most 20 MB; fonts whose licence restricts embedding are refused.
- Never an `@font-face` with only `local()` or a font URL on another site. A `data:` font works but is moved into a file, with a `font_externalized` warning: bundle the font as a file instead.
- Keep each face under 5 MB, and a deck's library fonts under 64 MB in all.
- Fonts used only from canvas or script (Chart.js, D3, `ctx.font`) must also be named in the CSS, and loaded before drawing: `await document.fonts.load('700 48px "Brand Sans"')`.
- An SVG shown with `<img>` can't load fonts: convert its text to outlines in the program that made it, or put the SVG inline.

## Quality rules for every deck

- **Nothing scrolls, clips or overflows** the 1920×1080 frame. When content doesn't fit, split it across slides titled "… (cont.)" rather than shrinking it.
- **Text size:** body text at least 20px; nothing under 18px on a slide — footers, captions and chart labels included.
- **Contrast:** at least 4.5:1 for all text against its background, including text on images and on status fills.
- **Status never by colour alone:** write the word ("On track", "Watch", "At risk").
- **One idea per slide**, with a title that states the point ("August was the strongest month of the year", not "Orders").
- **Charts:** inline SVG with `<title>` and `<desc>`, or a site library (https://makodeck.com/ai/interactive.md). Label values directly; highlight what matters in `--brand-accent` and keep the rest in `--brand-quiet`.
- **Tables** for exact numbers: right-aligned, tabular figures, units in the header.
- **Speaker notes** carry the talk track; the slide carries the evidence.
- **Sources and dates** on data slides (a footer line), and `dataAsOf` in the manifest.
- **Never invent data:** no made-up figures, names, dates or sources, not even to fill a layout (https://makodeck.com/ai/workflow.md). Label sample content "Fictional example", and recommendations the brief didn't give "Draft for discussion".
## When there's no brand kit: the default look

Use the skeleton exactly as it is:

- **Colours:** a white slide, dark ink text, one blue accent, dark navy section slides — the token values as shipped. Colour only where it carries meaning: the key number, the highlighted bar, a status.
- **Type:** Inter. Kicker 20px, uppercase, letter-spaced, in `--brand-accent-strong`; slide titles 52px at weight 680; body 24px; footer 18px in the muted colour above a 1px rule. Title slide heading 96px, section heading 80px, big numbers 88px.
- **Frame:** padding of 72px at the top, 96px at the sides, 56px at the bottom; header, then body, then footer.
- **No MakoDeck branding** on the slides: the deck is the client's.