# Zera Brandkit — AI Instructions

You are working with the Zera Education brand kit. This file is the single
source of truth for everything you need to know. **Read it end-to-end
before producing any branded output** (slides, web pages, social posts,
documents). All asset paths in this file are relative to the folder this
zip was unpacked into.

If `brand.json` is also present in this folder, it carries the same data
in machine-readable form — read it for programmatic access. Otherwise,
this file alone is sufficient.

---

## 1. Identity

| Field | Value |
|---|---|
| Organization | Zera Education |
| Slogan (main) | **Finest education for all.** |
| Brand line / visual identity | *From a seed to a mighty tree.* |
| Campaign tagline | *Unlocking Potential: Belonging, Passion, Strength.* |
| Vision | We are a school that shapes students' character and inspire them to be leaders of tomorrow. |
| Mission | Providing top-quality education in a nurturing environment that celebrates three core elements: **Curiosity, Creativity, and Collaboration**. |
| Philosophy | Education is about more than academics — it's about shaping **Courageous, Compassionate, and Committed** leaders of tomorrow. |
| Website | https://zera.edu.my |
| Phone | +60 13-205 8869 |
| Address | Eco Palladium Block C #04-23, Pusat Perdagangan Ekoflora, Jalan Ekoflora 7/5, Taman Ekoflora, 81100 Johor Bahru, Malaysia |

### Core values — ZERAOS acrostic

- **Z**ealous
- **E**xcellence
- **R**esilience
- **A**uthenticity
- **O**pen-mindedness
- **S**ustainability

### Brand naming rule

Always write **`zera`** (lowercase) or **`ZERA`** (all caps). Never *Zera*
(title case) — never use sentence-case in headings or body copy.

---

## 2. Sub-brands

Zera Education is the umbrella brand. Five sub-brands sit under it:

| Sub-brand | Color | Asset folder | Default logo |
|---|---|---|---|
| **Zera Education** (DEFAULT) | `#0A4F29` | `logos/edu/`  | `logos/edu/Hrz_Color.png`  |
| Zera International           | `#668C4A` | `logos/intl/` | `logos/intl/Hrz_LtBG_v1.png` |
| Zera Pre                     | `#3A7A5E` | `logos/pre/`  | `logos/pre/Hrz_LtBG_v1.png`  |
| Zera Plus Education          | `#27829E` | `logos/plus/` | `logos/plus/Hrz_LtBG_v1.png` |
| Zera Music (Msc)             | `#F7B917` | `logos/msc/`  | `logos/msc/Hrz_LtBG_v1.png`  |

If the user does not specify a sub-brand, **use Zera Education**.

Zera Music (Msc) also carries 4 sub-program icons inside `logos/msc/`:
`Space_Icon.png` / `Space_Long.png`, `Maker_Icon.png` / `Maker_Long.png`,
`Music_Icon.png` / `Music_Long.png`, `Media_Icon.png` / `Media_Long.png`.

---

## 3. Color tokens (canonical, from the 2024 PDF master)

```
--edu:    #0A4F29   /* Zera Education green — primary brand color */
--intl:   #668C4A   /* Zera International green */
--pre:    #3A7A5E   /* Zera Pre green */
--music:  #F7B917   /* Zera Music yellow */
--plus:   #27829E   /* Zera Plus blue */

--white:  #FFFFFF
--ink:    #0D0D0D   /* ink black */
--silver: #DFDFE7
```

Use **RGB** values for digital, **CMYK** for print, **PMS** for spot color.
Full CMYK / RGB / PMS triplets are in `brand.json` under `subbrands.*` and
`neutrals`.

---

## 4. Typography

Primary typeface: **Oakes Grotesk** (custom typeface, abbreviated **OG**).

Self-hosted under `fonts/` — 5 weights × roman/italic = 10 TTF files:

| Weight | Roman | Italic |
|---|---|---|
| Light · 300 | `fonts/OG_Light.ttf` | `fonts/OG_LightItal.ttf` |
| Regular · 400 | `fonts/OG_Regular.ttf` | `fonts/OG_RegItal.ttf` |
| Medium · 500 | `fonts/OG_Medium.ttf` | `fonts/OG_MedItal.ttf` |
| SemiBold · 600 | `fonts/OG_SemiBold.ttf` | `fonts/OG_SBoldItal.ttf` |
| Bold · 700 | `fonts/OG_Bold.ttf` | `fonts/OG_BoldItal.ttf` |

Primary working weights: **Light, Regular, Medium**. Use SemiBold/Bold
sparingly for emphasis only.

Fallbacks when OG isn't available:
- **Web:** DM Sans (Google Fonts)
- **MS Office / docs:** Verdana

CSS quick-start:

```css
@font-face { font-family: "Oakes Grotesk"; font-weight: 300; src: url("fonts/OG_Light.ttf")    format("truetype"); }
@font-face { font-family: "Oakes Grotesk"; font-weight: 400; src: url("fonts/OG_Regular.ttf")  format("truetype"); }
@font-face { font-family: "Oakes Grotesk"; font-weight: 500; src: url("fonts/OG_Medium.ttf")   format("truetype"); }
@font-face { font-family: "Oakes Grotesk"; font-weight: 600; src: url("fonts/OG_SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Oakes Grotesk"; font-weight: 700; src: url("fonts/OG_Bold.ttf")     format("truetype"); }

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

### Hierarchy

| Role | Font | Size (pt) | Rule |
|---|---|---|---|
| Headline | Oakes Grotesk Medium | 48 | 2× subhead |
| Subhead  | Oakes Grotesk Regular | 24 | 2× body |
| Body     | Oakes Grotesk Regular | 12 | — |

Scale these proportionally for digital.

---

## 5. Logos

### Naming convention

- **Type:** `Logo_` (full lockup) · `Hrz_` (horizontal) · `Vrt_` (vertical) · `Mark_` (emblem only)
- **Variant:** `Color` · `Black` · `White` · `LtBG` (light bg) · `DkBG` (dark bg)
- **Format:** `.png` (transparent) · `.jpg` (with background baked in)

Example: `logos/edu/Hrz_Color.png` = Zera Education horizontal lockup,
color, transparent PNG.

### Choosing the right variant

| Background | Use |
|---|---|
| White / light surface | `Color` (Edu) or `LtBG` (other sub-brands) |
| Dark surface (incl. brand gradients) | `White` or `DkBG` |
| Single-color print / monochrome | `Black` |

### Clear space and minimum size

- **Clear space:** keep at least `x` margin on every side, where `x` =
  half the emblem width.
- **Minimum size:** 50 px wide for digital, 2 cm wide for print.

### Do not

- Shade, angle, warp, stretch, ghost, or outline the logo.
- Recolor in non-brand colors.
- Take apart or rearrange the lockup.
- Use the color logo on a dark background (use a White/DkBG variant).

### Logo bleed — IMPORTANT

All logo PNGs ship with large built-in whitespace around the artwork.
Without compensation, logos appear roughly half their expected size with
excessive empty space.

Approximate bleed per type:

| Type | Top | Bottom | Left | Right | Visible artwork |
|---|---|---|---|---|---|
| `Logo_` (full lockup) | 18% | 22% | 12% | 12% | ~60% of canvas |
| `Hrz_` (horizontal)   | 20% | 35% |  8% |  8% | ~45% of canvas, bottom-heavy bleed |
| `Mark_` (icon only)   | 18% | 18% | 25% | 25% | ~50% of canvas |
| `Vrt_` (vertical)     | 12% | 20% | 18% | 18% | ~65% of canvas |

CSS compensation — apply negative margins:

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

Or scale up inside a fixed container:

```css
.logo-container { width: 200px; height: 80px; overflow: hidden; }
.logo-container img {
  width: 140%; height: 140%;
  object-fit: contain;
  object-position: center;
  margin: -20%;
}
```

In Figma / Keynote / PowerPoint: drag the corner of the placed logo
beyond the visible frame and crop, until the visible artwork fills your
container.

---

## 6. Gradients

Two distinct sets in `gradients/`:

### Set A — PDF-mapped (12 files, sub-brand specific)

Pair the matching gradient with each sub-brand's logo.

| Files | Sub-brand |
|---|---|
| `Grd_01.jpg`, `Grd_02.jpg` | Main / multi-brand |
| `Grd_03.jpg`, `Grd_04.jpg` | Zera Education |
| `Grd_05.jpg`, `Grd_06.jpg` | Zera International |
| `Grd_07.jpg`, `Grd_08.jpg` | Zera Music |
| `Grd_09.jpg`, `Grd_10.jpg` | Zera Plus |
| `Grd_Maker_01.png`, `Grd_Maker_02.png` | Zera Maker (sub-program) |

### Set B — Extended pool (13 free-form, 2025)

`Zera_Gradient_11.jpg` through `Zera_Gradient_23.jpg`. No fixed sub-brand
mapping — pick freely by mood, composition, color match. (Files 01–10
were lower-res duplicates of `Grd_01–10` and were removed 2026-06;
numbering starts at 11 by design.)

### Set C — Full-bleed backgrounds (2)

`Zera_Background_01.png`, `Zera_Background_02.jpg`. Use as full-page or
hero covers.

### Usage rule

When placing a logo on a gradient:
- Use the **`White`** logo variant (not `Color`).
- Apply the bleed compensation from §5.

---

## 7. Style and tone

- Voice: warm, confident, plain-spoken. Avoid corporate jargon.
- Visual feel: organic (rooted in growth metaphor) with disciplined
  typography. Generous whitespace.
- Emphasize **journey, growth, character, leadership**, not test scores.
- Show students and learning environments wherever possible.

---

## 8. Quick checklists

### Before publishing any branded output

- [ ] Sub-brand chosen (default: Zera Education)
- [ ] Logo variant matches background (Color/LtBG on light, White/DkBG on dark)
- [ ] Logo bleed compensated (negative margin or container scale)
- [ ] Clear space ≥ ½ emblem width on every side
- [ ] OG font in use (or DM Sans / Verdana fallback)
- [ ] Brand color matches the chosen sub-brand
- [ ] Gradient (if used) matches the sub-brand or comes from extended pool
- [ ] "zera" / "ZERA" — never title case
- [ ] Required statements (vision/mission) cited verbatim if quoted

### Reference the latest source

This bundle is a static export. The live, always-current versions are:

- Brand guide: https://zera.axon.commun.cloud/brand/
- Manifest:    https://zera.axon.commun.cloud/brand/brand.json

If any value here disagrees with the live brand.json, the live version
wins.

---

*Bundle generated 2026-04-29. Replaces the legacy S3 brandkit at
`http://zera-market.s3-website-ap-southeast-1.amazonaws.com/`.*
