13 / Brand & media
Identity survives every crop
Pets67 marks, app and social assets, sprites, backgrounds, contact shadows and Hero media follow one production contract.
HTML marks · authored media
Brand mark hierarchy
Product names remain selectable HTML. Generated media never owns the wordmark.
The only standalone brand mark: optically spaced, selectable and always rendered as live text.
PETS67Visual System
The product mark stays intact; the system name is a separate descriptor, never a second logo.
Interface shorthand for 44px docks and indexes; it never replaces the PETS 67 wordmark.
Media crop lab
Choose a production asset and switch between desktop and mobile containers. The subject, safe zone and pixel treatment stay intentional.
- Container
- 1:1 / maskable
- Rendering
- authored raster
- Ownership
- manifest.ts
- Alt contract
- Purpose named
Media rules
| Asset | Source | Crop | Non-negotiable |
|---|---|---|---|
| App icon | public/icons | Square / maskable | Text-free and legible at 16px |
| Social preview | public/og | 1200 × 630 | Safe title and route identity |
| Pet sprite | public/pets | Contain | Pixelated, never smoothed |
| Pet background | public/backgrounds | Cover | Sprite remains grounded and readable |
| Contact shadow | CSS owner | Pet baseline | Theme-aware; no floating feet |
| Visual System Hero | public/visual-system | 1920 × 1080 | Copy-safe left zone and paired themes |
Media and motion budgets
Budgets keep the authored arcade treatment without trading away loading stability, reduced-motion support or route responsiveness.
| Asset | Delivery | Budget | Runtime contract |
|---|---|---|---|
| Section Hero | WebP · 1920 × 1080 | ≤ 260 KB preferred | No layout shift; paired theme crop |
| Pet background | WebP · 1104 × 628 | ≤ 220 KB preferred | Cover; stable aspect-ratio |
| Pet sprite | PNG state frames | Preload active state only | Pixelated; no smoothing |
| Sprite animation | Deterministic frame loop | 8–12 FPS by authored state | Pause/reduce without layout change |
| Route shell | HTML + CSS | CLS ≤ 0.1 · LCP ≤ 2.5s | Reserve media and persistent UI space |