# Sunflower AI — brand kit

Everything you need to put Sunflower AI on a slide deck, a social profile, or a
partner page — logos, fonts, and colours, on-brand out of the box.

Every file here is **generated** from the design system by
`scripts/generate-brand-kit.py`, so it always matches the live site. Don't edit
the assets by hand; re-run the script (see [Regenerating](#regenerating)).

```
brand-kit/
├─ logo/      logos — vector lockups, icon-only, square app-icon framing
├─ social/    profile pictures / avatars on transparent + solid backdrops
├─ color/     the palette (colours.md + a one-page visual sheet)
├─ slides/    ready-to-present session-QR slide deck (PowerPoint, 19 languages)
└─ fonts/     Fredoka + Mulish variable fonts, with licenses
```

## Which file do I use?

### Slide decks, docs, partner sites → the lockup

The full mark: sunflower icon + “Sunflower AI” wordmark.

| File | Best for |
|---|---|
| `logo/sunflower-lockup-light.svg` | **Default.** Light/white backgrounds. Vector — scales to any size. |
| `logo/sunflower-lockup-dark.svg` | Dark backgrounds (wordmark in stone-50). Vector. |
| `logo/sunflower-lockup-light.png` | When SVG isn't accepted (some older tools). 3388 × 546, transparent. |
| `logo/sunflower-lockup-dark.png` | Same, for dark backgrounds. |

**Reach for the SVG first** — it stays crisp at any size. The PNGs are a
fallback for tools that won't take SVG.

### Social profile picture / avatar → square

| File | Best for |
|---|---|
| `social/sunflower-avatar-on-white-1024.png` | Most platforms — icon framed on white. |
| `social/sunflower-avatar-on-dark-1024.png` | Dark-themed profiles — icon on stone-900. |
| `social/sunflower-avatar-light-1024.png` | Transparent square, light gradient. |
| `social/sunflower-avatar-dark-1024.png` | Transparent square, dark gradient (for dark UIs). |

The `-on-white` / `-on-dark` versions include the padding social platforms
expect; the transparent ones are for when you control the background.

### Icon alone (favicons, app tiles, decorative) → icon

| File | Best for |
|---|---|
| `logo/sunflower-icon.svg` / `-dark.svg` | Scalable icon-only wrapper. |
| `logo/sunflower-icon-light-1024.png` / `-dark` | Square with app-icon padding. |
| `logo/sunflower-icon-light-tight.png` / `-dark` | Icon cropped flush to the petals (no padding) — for overlays and tight compositions. 534 × 547, native resolution. |

### Putting a session QR on screen → the slide deck

`slides/sunflower-session-qr-slides.pptx` — a 16:9 PowerPoint: a clickable
contents/how-to slide, an English cover, and one **bilingual** slide (target
language + English) for each of 19 languages (Chinese — Mandarin, Simplified and
Traditional, Cantonese, Korean, Spanish, Japanese, German, Indonesian, Italian,
French, Filipino, Afrikaans, Persian (Farsi), Swahili, Nepali, Hindi, Urdu, Tamil, Telugu).
Sunflower translates a talk live into 83 languages (you enable some per session);
these slides cover 19 of the most common audience languages. Each slide tells the
audience they can follow the talk in their language — reading it or hearing it,
both translated; drop your QR onto the (large) card and present. From the
contents slide, click a language to jump straight to its slide. The brand fonts
are **embedded**, so it stays on-brand on any machine. How-to in
`slides/README.md`.

## What's actually vector?

There is **no vector master of the sunflower icon** — the artwork is a raster
illustration with gradient petals, and its native resolution is 534 × 547 px
(its hard ceiling; there is no higher-res source).

So the deliverables split:

- **The lockup SVGs are part-vector.** The **wordmark** is true vector (Fredoka
  glyph outlines, so no font needs to be installed to view it) and the
  **layout** — gap, alignment, proportions — is fully resolution-independent.
  The **icon inside** is the native-resolution PNG embedded inline.
- **The icon SVGs** are a scalable wrapper around that same raster.

### The resolution ceiling (important for big renders)

- The icon is **pixel-crisp up to ~534 px wide / ~178 px on a 3× display.**
- The `*-tight.png` icons and the `*-lockup-*.png` files are at this native
  ceiling — **downscale these freely**, they'll look perfect smaller.
- The `*-1024.png` square icons are **upscaled past native** for convenience
  (app stores often want ≥ 512–1024). They're fine for app tiles and avatars,
  but if you need a genuinely large, sharp icon (e.g. a poster), the artwork
  can't deliver it — that's a limit of the source, not the export.

**Rule of thumb:** start from the SVG lockup, or downscale a native-resolution
PNG. Avoid blowing the icon up past ~530 px.

## Colours & fonts

- **`color/colours.md`** — the palette with hex + OKLCH values and usage notes.
  `color/sunflower-colors.png` is the same as a one-page visual.
- **`fonts/`** — Fredoka (display + wordmark) and Mulish (body) variable fonts,
  with licenses and setup in `fonts/FONTS.md`.

One-line version: **amber is the brand**, the orange → amber → yellow gradient
is the hero, sky-blue is the accent, stone is the neutral. Display type is
**Fredoka**; body type is **Mulish**; the wordmark is **Fredoka Bold**.

## Do / don't

- **Do** keep clear space around the mark — at least the height of the icon on
  every side.
- **Do** use the dark variants on dark backgrounds (the light wordmark
  disappears on dark, and vice-versa).
- **Don't** retype “Sunflower AI” in another font — use a lockup file so the
  wordmark is always real Fredoka Bold.
- **Don't** recolour the icon, add effects, stretch it, or rotate it.
- **Don't** upscale the icon past its native resolution (see the ceiling above).
- **Don't** put the mark on a busy photo without a solid or scrim backdrop.

## Regenerating

After any change to the logo (`scripts/recolor-logo.py`), the colours
(`design-system/colors_and_type.css`), or the fonts:

```bash
python3 scripts/generate-brand-kit.py
```

It rewrites everything under `logo/`, `social/`, and `color/` from the design
system. The font files in `fonts/` are copied/fetched once and aren't touched
by the script.

The **`slides/` deck** is built by its own pipeline (it needs a headless browser
to render 19 scripts correctly), which also refreshes the kit zip:

```bash
pnpm brand:qr-slides          # → scripts/build-qr-slides.sh
```
