# Zera Brandkit (self-hosted)

Source of truth for Zera brand assets. Replaces the legacy S3 brandkit at
`http://zera-market.s3-website-ap-southeast-1.amazonaws.com/`.

Served at `https://zera.axon.commun.cloud/brand/` (nginx, www-axon repo).

## What's here

| File / folder | Purpose |
|---|---|
| [`index.html`](index.html) | Human-readable brand guide. Self-loads OG fonts via `@font-face`. Mirrors the original PDF + adds a Claude-friendly Asset Index. |
| [`brand.json`](brand.json) | Machine-readable manifest. Tokens, sub-brand definitions, logo paths, rules. **Read this first when building a skill.** |
| [`Zera-Education-Visual-Identity-Guidelines.pdf`](Zera-Education-Visual-Identity-Guidelines.pdf) | Original Adobe Illustrator master (May 2024). Authoritative for color values. |
| `fonts/` | Oakes Grotesk (OG) — 5 weights × roman/italic, TTF. |
| `logos/{edu,intl,pre,plus,msc}/` | Logo variants per sub-brand. |
| `gradients/` | Two sets: (a) 12 PDF-mapped gradients (`Grd_*.jpg` + `Grd_Maker_*.png`) — sub-brand-specific; (b) 13 extended-pool gradients (`Zera_Gradient_11–23.jpg`, Feb 2025; 01–10 were lower-res duplicates of `Grd_01–10` and were removed 2026-06) — free-form, no sub-brand mapping. Plus 2 full-bleed backgrounds (`Zera_Background_01.png`, `Zera_Background_02.jpg` — 02 re-encoded as JPEG 2026-06, the PNG export was 4.4 MB). |
| `videos/` | Logo animation reveals (MP4, 1920×1080, ~15 s, white bg, delivered 2025-10-22): `Edu_`, `Intl_`, `Plus_`, `ECA_` + `_Logo_Animation.mp4`. Poster frames (final lockup) in `videos/posters/`. Mapped in `brand.json.logo_animations`. |

## Brand quick-reference

- **Vision —** We are a school that shapes students' character and inspire them to be leaders of tomorrow.
- **Mission —** To provide the finest education for all. · To cultivate a positive learning environment that champions Curiosity, Creativity and Collaboration. · To prepare futurist who are Courageous, Compassionate, and Committed.
- **Core Values (ZERAOS) —** Zealous · Excellence · Resilience · Authenticity · Open-mindedness · Sustainability.
- **Slogan (main) —** Finest education for all.
- **Brand line —** From a seed to a mighty tree.
- **Campaign tagline —** Unlocking Potential: Belonging, Passion, Strength.
- **Default sub-brand —** Zera Education (`#0A4F29`).
- **Default logo —** `logos/edu/Hrz_Color.png`.
- **Primary type —** Oakes Grotesk (Light 300 · Regular 400 · Medium 500). Fallbacks: DM Sans (web), Verdana (Office).
- **Address —** Eco Palladium Block C #04-23, Pusat Perdagangan Ekoflora, Jalan Ekoflora 7/5, Taman Ekoflora, 81100 Johor Bahru.
- **Statements source —** [zera.edu.my/about/welcome](https://zera.edu.my/about/welcome) (canonical for vision/mission/values; supersedes 2024 PDF wording).

| Sub-brand | Color | Folder |
|---|---|---|
| Education (default) | `#0A4F29` | `logos/edu/` |
| International | `#668C4A` | `logos/intl/` |
| Pre | `#3A7A5E` | `logos/pre/` |
| Plus | `#27829E` | `logos/plus/` |
| Music (Msc) | `#F7B917` | `logos/msc/` |

## Logo naming

- **Type —** `Logo_` (full lockup) · `Hrz_` (horizontal) · `Vrt_` (vertical) · `Mark_` (emblem)
- **Variant —** `Color` · `Black` · `White` · `LtBG` (light bg) · `DkBG` (dark bg)
- **Format —** `.png` (transparent) · `.jpg` (background baked in)
- Example: `logos/edu/Hrz_Color.png` = Edu horizontal lockup, color, transparent.

## Logo bleed (important)

All logo PNGs ship with built-in whitespace. Without compensation, logos appear roughly half their expected size. In CSS:

```css
.logo-hrz  { margin: -10% -4% -18% -4%; }   /* heaviest bleed, especially bottom */
.logo-full { margin: -10% -6% -12% -6%; }
.logo-mark { margin: -10% -15% -10% -15%; }
.logo-vrt  { margin: -6% -10% -12% -10%; }
```

Or scale the image up inside a fixed container (`transform: scale(1.2–1.3)` works on `index.html`).

## CSS quick-start

```css
@font-face { font-family: "Oakes Grotesk"; font-weight: 400; src: url("fonts/OG_Regular.ttf") format("truetype"); }
/* ... etc for 300 / 500 / 600 / 700 + italic ... */

:root {
  --edu:   #0A4F29;
  --intl:  #668C4A;
  --pre:   #3A7A5E;
  --music: #F7B917;
  --plus:  #27829E;
  --ink:   #0D0D0D;
  --silver:#DFDFE7;
}

body { font-family: "Oakes Grotesk", "DM Sans", Verdana, sans-serif; }
```

## How a skill should consume this

1. Fetch `brand.json` → read tokens, font paths, logo paths.
2. Use absolute URLs under `https://zera.axon.commun.cloud/brand/` (or relative paths if running from this folder).
3. Default to the Edu sub-brand unless told otherwise.
4. Always apply bleed compensation when placing logos.

## Updates

This is the SSOT. To replace an asset:

1. Drop the new file into the matching folder.
2. If the file *name* changes, update both `brand.json` and `index.html`.
3. Commit and push — `www-axon` deploys via `cd /var/www && git pull` on the server.