# neylo logo kit

The reference-approved **Growing arches** direction pairs two forest/sage green arches with the lowercase outlined neylo wordmark. The kit uses forest green, ink, lime, and warm ivory.

## Choose an asset

| SVG master | Use |
| --- | --- |
| `svg/logo-horizontal.svg` | Main logo on a light surface; website header, email, and documents |
| `svg/logo-horizontal-dark.svg` | Main logo on a dark surface |
| `svg/logo-stacked.svg` | Centered compositions and square placements |
| `svg/wordmark.svg` | Name alone when the symbol already appears nearby |
| `svg/mark.svg` | Compact navigation, integrations, and small placements |
| `svg/favicon.svg` / `svg/favicon-dark.svg` | Growing arches symbol sized for tiny browser tabs |
| `svg/app-icon.svg` | Forest rounded app/avatar tile |
| `svg/app-icon-square.svg` | Opaque square icon; the destination platform applies its corner mask |
| `svg/app-icon-dark.svg` / `svg/app-icon-square-dark.svg` | Ink-background app icons |
| `svg/app-icon-square-tinted.svg` | Grayscale iOS tinted appearance |
| `svg/app-icon-maskable.svg` | Full-bleed icon with extra safe-area padding for platform masks |
| `svg/android-foreground.svg` / `svg/android-monochrome.svg` | Transparent 108-unit native adaptive layers |

Horizontal, stacked, wordmark, and mark assets have default, `-dark`, `-black`, and `-white` versions. Default marks use forest `#216653`, green `#39795B`, and sage `#71A36C` with ink `#111D20` lettering. Dark variants use ivory `#F8F7F3` lettering. Monochrome variants use pure black or white. Forest app tiles use a white mark; dark tiles use an ink background.

SVGs scale to **any size**. Their approved lettering is already converted to paths, so importing them requires no font installation, external images, or web requests. No font software is distributed. All logos are transparent except the app tiles.

## Fixed-size exports

`png/` filenames contain the exact width or square size. All four logo color variants are included.

| Asset | PNG sizes in pixels |
| --- | --- |
| Mark / app tile | 16, 20, 24, 29, 32, 40, 48, 58, 60, 64, 72, 76, 80, 87, 96, 114, 120, 128, 144, 152, 167, 180, 192, 256, 384, 512, 1024, 2048 square |
| Horizontal / wordmark | 160, 240, 320, 480, 640, 960, 1280, 1920 wide; height follows the SVG ratio |
| Stacked | 128, 256, 512, 1024, 2048 wide; height follows the SVG ratio |
| Dark app tile | 16, 32, 48, 64, 128, 180, 192, 256, 512, 1024 square |
| Maskable tile | 192 and 512 square |

`browser/` in the ZIP contains an automatically light/dark adapting `favicon.svg`, a 16/32/48px ICO, light/dark PNG favicons, an opaque 180px Apple touch icon, 192/512px web icons, a 512px maskable icon, and `site.webmanifest`. In the website these files are served from the public root. Favicons use the selected Growing arches symbol on a 16-unit viewport, preserving both growing arches. The public SVG supports browser color preference.

`mobile/ios/` contains opaque iPhone/iPad PNGs and classic/modern Xcode icon catalogs. `mobile/android/` contains six launcher densities, round icons, vector adaptive/themed layers, notification silhouettes, and a 512px store icon. [The mobile guide](mobile/README.md) lists exact platform sizes and integration steps. Platform masking is preserved; Apple icons have no alpha channel. Native resources have not been compiled in a destination mobile application.

## Integration

Use the complete ZIP when moving assets to another system. Open `index.html` or `preview.svg` to review the logo family. On neylo, visit `/brand/index.html` and download `/brand/neylo-logo-kit.zip`.

```html
<!-- Light surface; scale width, preserve automatic height. -->
<img src="/brand/svg/logo-horizontal.svg" alt="neylo" width="128" height="40">

<!-- Dark surface. -->
<img src="/brand/svg/logo-horizontal-dark.svg" alt="neylo" width="128" height="40">

<!-- Compact symbol. -->
<img src="/brand/svg/mark.svg" alt="neylo" width="32" height="32">
```

In a named home link, give the link an accessible label such as `neylo home` and use `alt=""` on its image to avoid repeating the name. For a standalone image, use `alt="neylo"`.

Use the horizontal logo at 100px wide or larger and the bare symbol at 16px or larger. Keep the SVG padding, add at least half a stem width of clear space, and preserve aspect ratio. Choose a variant that contrasts with its background. Keep the outlined lettering with the symbol; do not stretch, rotate, add effects, or replace the wordmark with live text.

## Regenerate

Canonical masters are the files in `svg/`; `scripts/create-brand-masters.py` reproduces them with Pango/Lato outlined lettering. From the repository root:

```sh
python3 scripts/create-brand-masters.py
python3 scripts/export-brand.py
python3 scripts/export-brand.py --check
```

The export tool uses Python 3, Pycairo, PyGObject with librsvg 2, and Pillow. These are design/export tools only; the application needs none of them. Raster sizes, browser icons, the visual preview, and the ZIP are regenerated together. The SVG masters remain the source of truth.

## Editorial photography

Both original assets were produced with the built-in imagegen tool and converted to WebP for the website. They are separate from the portable logo kit.

- `workspace-backdrop.webp`: softly lit ivory workspace with peripheral plants, books, and pinned landscape photographs; a clear center for UI overlays.
- `editorial-landscape.webp`: olive-green coastal hills and a muted blue-gray Mediterranean bay.

Generation prompts:

```text
Use case: photorealistic-natural. Asset type: website hero background photograph. Create a wide 1536x1024 warm ivory home-office scene, soft natural morning light, matte off-white wall. Left edge: leafy olive-green houseplant in an ivory ceramic vase, a few stacked cream books on a pale wooden desk. Right edge: two casually pinned landscape photographs and blank ivory paper, small leafy plant at bottom. Composition: center 65 percent is completely empty warm ivory wall for overlaid website title and interface. Objects stay at the extreme edges. Bottom third softly fades to empty ivory. Calm natural sage and cream palette, subtle texture and shadows, sophisticated editorial photography. No text, no logos, no interface, no people, no watermark.

Use case: photorealistic-natural. Asset type: decorative landscape thumbnail for neylo publishing calendar. Original editorial photograph of lush olive-green wooded hills beside a quiet blue-gray Mediterranean coastal bay, layered mountains in distance, soft warm daylight, muted natural palette, shot from hillside overlooking water, no buildings in foreground. Wide 1536x1024. No people, no text, no logos, no frame, no watermark.
```
