# LineUp logo pack

The approved LineUp identity: straight basketball, Heebo Bold (700), tight icon-to-lettering spacing, and orange period. No tagline is added to the logo. All SVG lettering is converted to vector paths: installing Heebo is not necessary to use the exports.

Primary wordmarks center the basketball on the **full visible lettering**, including the i dot and p descender. This lowers the ball from the previous L-only alignment, which appeared too high. The visible ball-to-L gap remains 9px at the 27px type reference size and scales proportionally. This alignment is checked for every color variant and carried into the wordmark PNGs, social share cards and ZIP. App headers and sidebars render the same outlined geometry through the shared LogoWordmark component, so the live UI and design previews match the exports.

## Contents and sizes

| Folder | Files | Use |
| --- | --- | --- |
| `wordmark` | SVG; PNG widths 128, 256, 512, 1024, 2048 | Primary horizontal basketball + LineUp. lockup |
| `text` | SVG; PNG widths 128, 256, 512, 1024, 2048 | Lettering-only LineUp. |
| `stacked` | SVG; PNG widths 256, 512, 1024 | Vertically stacked lockup for square placements |
| `symbol` | SVG; PNG 16, 24, 32, 48, 64, 128, 256, 512, 1024 | Transparent basketball mark |
| `app` | SVG; opaque PNG 48, 64, 128, 192, 256, 512, 1024 | Dark/light square app-icon masters |
| `ios` | 1024px default, dark, tinted; AppIcon.appiconset; legacy raster sizes | iPhone/iPad app icon inputs |
| `ios/icon-composer` | 1024px PNG and SVG foreground/background layers | Inputs for Apple's Icon Composer |
| `android` | 512px store icon; adaptive foreground/background/monochrome; native res folders | Android store, launcher and themed icons |
| `web` | SVG favicon, ICO (16/32/48), PNG favicon, 180px Apple touch, 192/512px PWA/maskable | Browser tabs and home-screen shortcuts |
| `social` | 1200 × 630 share cards; 400/800px avatars | Link previews and account avatars |
| `source` | Outlined glyph geometry and semantic color tokens | Traceable, reusable export source |

`assets.json` lists every file and raster dimension. PNG wordmarks, text, stacked lockups and symbols have transparent backgrounds. App/store raster icons are opaque, square, and not pre-rounded: platform masks add the corners. Each SVG has an accessible title.

## Choosing the right variant

- **dark** means white lettering + bright orange for placement on dark surfaces.
- **light** means dark lettering + deeper orange for placement on light surfaces.
- **black / white** are single-color versions of the entire lockup (including the period and ball). They use the design system's near-black / near-white, not new colors.
- Keep all proportions fixed. Do not rotate, recolor individual seams, remove the period from lockups, or add shadows.
- Leave at least half a basketball diameter as clear space around the logo in surrounding layouts. SVG canvas padding is not the full clear-space requirement.
- Prefer the horizontal lockup at 128px width or larger, text-only at 96px or larger, and the symbol in smaller spaces. Inspect actual-size 16/24px previews before using a symbol on a low-contrast background.

## Platform handoff

### iOS / iPadOS

Import `ios/AppIcon.appiconset` into the native Xcode asset catalog. The dark-background artwork is the primary default; a Playing Card light alternative is also supplied. The modern catalog contains universal 1024px default, dark and grayscale tinted images. Additional legacy sizes are available separately.

For current layered/clear icon appearances, use `ios/icon-composer` SVG/PNG source layers in Apple's Icon Composer. These are source assets, **not a compiled `.icon` document**. Review effects and export the final document in Xcode/Icon Composer. No native app or icon build is created by this frontend-only pack.

Apple documentation: [App icons](https://developer.apple.com/design/human-interface-guidelines/app-icons), [Asset catalogs](https://developer.apple.com/documentation/xcode/configuring-your-app-icon), [Icon Composer](https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer).

### Android

Merge `android/res` into the native app's resource folder and reference `@mipmap/ic_launcher` in its manifest. Legacy launcher sizes: mdpi 48, hdpi 72, xhdpi 96, xxhdpi 144, xxxhdpi 192px. Adaptive layer canvases: 108, 162, 216, 324, 432px for the same densities. The artwork fits within the centered 66dp safe circle on the 108dp canvas. API 26 XML references foreground/background; API 33 also supplies monochrome for themed icons. Default adaptive masks may be round, square or squircle; do not mask the source layers. Notification alpha-mask icons are included at 24, 36, 48, 72 and 96px; use `@drawable/ic_notification` for native notifications.

[Android adaptive icon guidance](https://developer.android.com/develop/ui/compose/system/icon_design_adaptive).

### Web

The Next.js app uses the generated favicon, Apple touch icon and PWA icons. Maskable icons keep the artwork within the central radius-40% safe circle. A web manifest supplies icon metadata; it does not add offline caching or imply a native app exists.

[Maskable icon safe-zone guidance](https://web.dev/articles/maskable-icon).

## Regeneration

Run `npm run brand:generate`. It uses `fontkit`, `wawoff2` and `sharp`, reads CSS tokens from `src/app/globals.css`, and finds the app's cached Heebo Latin font in `.next`. Run the app/build first to populate that cache, or set `LINEUP_BRAND_FONT_PATH` to the same Heebo variable WOFF2 font. The generated asset pack and ZIP are deterministic in artwork; the inventory records the export date.

Review and download at `/brand`. The SVGs can be dragged into Figma without a font dependency.