# Zendi — cherry red logo and profile export kit

Primary colors: Cherry red `#B52B46`; charcoal `#1A1F2B`; white `#FFFFFF`.

## Start here

Open **index.html** in your browser after extracting the ZIP. It is a local, searchable visual catalogue; it does not need an internet connection. `preview.png` is an overview, not an upload asset.

For Google OAuth, upload **04-google-oauth/zendi-google-oauth-120-white.png**. It is exactly **120 × 120 pixels**, PNG/RGB, **5,662 bytes** (about 5.5 KiB), with an opaque white background and just the main Z plus cherry dot. This is the recommended OAuth file. The transparent alternative is also provided, but its appearance depends on the host background.

## Which logo goes where?

| Use case | File/folder | Treatment |
|---|---|---|
| Google OAuth consent screen | `04-google-oauth/` | Z only, white background, exact 120 × 120 |
| Instagram, Facebook, Threads | Platform folder in `03-social-profiles/` | 1080 × 1080, Z only, light and dark versions |
| X | `03-social-profiles/x/` | 400 × 400, Z only |
| LinkedIn company page | `03-social-profiles/linkedin-company/` | 400 × 400, Z only |
| YouTube | `03-social-profiles/youtube/` | 800 × 800 high-resolution square, Z only |
| TikTok, Pinterest | Corresponding profile folder | 400 × 400 square, Z only |
| WhatsApp Business | `03-social-profiles/whatsapp-business/` | 640 × 640, Z only |
| Other profile services | `03-social-profiles/generic/` | 1024 × 1024 reusable avatar |
| Large company-directory / partner tile | `03-social-profiles/full-logo-tiles/` | Full stacked logo at 1080 × 1080; not recommended for tiny avatars |
| Website header, footer, brand placement | `01-vector-masters/` | Horizontal, stacked, Z-only and text-only SVGs |
| High-resolution / raster-only use | `02-large-png/` | Large light, dark and transparent PNGs |
| Apple app icon | `05-app-icons/store/` and `05-app-icons/ios/` | 1024 × 1024 opaque PNG, flat asset catalogue and separate layer sources |
| Google Play store icon | `05-app-icons/store/` | 512 × 512, 32-bit RGBA PNG, sRGB; alpha fully opaque |
| Android launcher | `05-app-icons/android/` | Adaptive color / monochrome resources, foreground sources and legacy-density PNGs |
| Browser favicon / saved website / PWA | `06-web/` | SVG, multi-resolution ICO, PNGs, Apple touch icons, regular and maskable PWA icons |
| X, LinkedIn company and YouTube covers | `07-wordmark-uses/` | Horizontal logo, light and dark covers, no domain or temporary marketing copy |
| Link previews and email | `07-wordmark-uses/` | Full horizontal logo, 1200 × 630 link image and 960 × 320 email header |

The platform folders are export presets, not a claim that every platform requires that exact resolution. X and LinkedIn use their currently documented recommended profile sizes. The other square profiles are practical high-resolution upload choices. YouTube's current help page specifies the rendered profile size, not an 800 px upload mandate.

## Padding and crop behavior

- **Social avatars:** Z height is 68% of the square canvas; top/bottom padding is 16%. Side padding is slightly wider because the Z is taller than it is wide. All artwork fits safely inside a circular crop. Upload the complete square without zooming in.
- **Google OAuth:** Z height is 76%, or 91.2 px, leaving 14.4 px above and below. No wordmark to become illegible at this size.
- **Regular app icons:** Z height is 70%. Artwork is on a full square; rounded corners and shadows are not baked into the store icons.
- **PWA maskable icons:** Z height is 56%. All corners of the artwork remain inside the required center safe circle (radius 40% of the canvas). These are separate files from the regular PWA icons.
- **Android adaptive:** 108 × 108 dp layer viewport; artwork height 48 dp; all artwork inside the central 66 dp safe circle. The foreground is transparent and the background is a separate solid layer.
- **Favicons:** Z height is 90% at 16/32 px and 84% for larger raster sizes, using more of the tiny canvas. Exact logo geometry is used rather than inventing a different small Z. Some fine detail necessarily softens at 16 px.
- **YouTube cover:** Full 2560 × 1440 canvas. Logo is within a conservative central safe area. X and LinkedIn cover logo placements leave space away from the edges and typical profile-image overlap. Check each platform's crop preview before publishing.

The circles and rounded app tiles in `preview.png` demonstrate cropping. The actual upload PNGs are square.

## Source handling — important

The supplied `zendi-logo-og_20260625.svg` is a hybrid file: it contains a raster original plus a rough vector trace with visibly uneven edges. Blindly exporting that trace would preserve the unwanted wobble.

The **production kit** uses the clean Z paths from the already-supplied `zendi-logo-hz-20260629.svg`. The stacked lowercase lettering was vector-traced from the clean original embedded artwork, keeping its letter shapes and spacing instead of substituting a font. The horizontal layout uses the Z as the first letter, followed by **endi**, rather than the incorrect doubled **Z zendi**. The original dot was raster-only and has been replaced with a vector circle matched to its measured position and size, filled with `#B52B46`.

The separate **00-original-dark-preserved/** folder preserves the older SVG's vector path and original 1120 × 1120 artboard, uses its dark `#14243D`, and changes the dot to cherry red. It retains the source trace's irregularities deliberately. This is the literal source-preserving recolor, not the recommended production master.

All exported SVGs are self-contained vector artwork: no embedded photos, external fonts or external images. The text-only wordmark has no cherry dot, as there is no symbol in that version. All-white/all-charcoal files are intentional monochrome variants; the red is retained in normal two-color versions.

## Website installation

Copy the **contents** of `06-web/public/` into the website's public root. For Next.js this usually means the project's `public/` directory. Reference the supplied files through your existing metadata setup, or use the tags in `06-web/head-example.html`; do not add duplicate/conflicting icon declarations.

The web manifest uses root-relative paths and the name **Zendi**, with no hard-coded domain. It therefore does not assume that `zendi.red` is already the production domain. Preserve an existing manifest's application ID and start URL when integrating into an already-installed PWA. The example assumes deployment at the origin root; adapt the paths when deploying to a subdirectory.

A manifest and icons do not by themselves add a service worker, offline caching, or a complete PWA. Browser/favicon caches may retain an older icon after deployment; inspect the served files and use your normal cache-busting deployment process.

## Native app handoff

The iOS folder includes a conventional **flat** `AppIcon.appiconset`. It is not an Apple Icon Composer `.icon` project and does not implement layered material effects automatically. Separate foreground/background SVGs are included for that workflow.

The Android `res/` folder contains `ic_launcher` adaptive resources and legacy PNGs. Merge them into your app without overwriting unrelated resources, then reference `android:icon="@mipmap/ic_launcher"` in the application's manifest. The v33 adaptive resource includes a monochrome layer. The monochrome icon intentionally leaves coloring to the operating system.

Dimensions, image modes, file sizes, XML/JSON parsing and crop geometry were checked locally. Native resources were not compiled inside your app, and platform uploads have not been performed.

## Official specification references

Checked September 23, 2026. These references informed the relevant export presets; the files' exact properties are listed in `asset-index.csv` / `asset-index.json`.

- Google OAuth branding and 120 × 120 / 1 MB guidance: https://support.google.com/cloud/answer/15549049?hl=en
- X profile and header dimensions: https://help.x.com/en/managing-your-account/common-issues-when-uploading-profile-photo
- LinkedIn Pages logo / cover dimensions: https://www.linkedin.com/help/linkedin/answer/a563309
- YouTube profile / banner guidance: https://support.google.com/youtube/answer/10456525?hl=en
- Google Play icon design specifications: https://developer.android.com/distribute/google-play/resources/icon-design-specifications
- Android adaptive icons: https://developer.android.com/develop/ui/compose/system/icon_design_adaptive
- PWA app icons and maskable icons: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons

## Included documentation

`asset-index.csv` and `asset-index.json` list every image/vector export, its purpose, dimensions, padding and file size. `verification.json` records the source handling and automated checks. Color values are exact inside the vector artwork and solid PNG interiors; antialiased edge pixels naturally contain intermediate values.