Nemo (Claude Code)
313a2f8a03
- Fix slug typo: "firberops" → "fiberops" - Update splash backgroundColor to brand #F8FAFC (was Expo default #2563EB) - Update android adaptiveIcon backgroundColor to brand cyan #0891B2 - Add assets/ASSETS.md with full brand guidelines (colors, fonts, dimensions) - Add scripts/generate-assets.sh to regenerate PNGs from SVG sources via inkscape/rsvg-convert
88 lines
3.4 KiB
Markdown
88 lines
3.4 KiB
Markdown
# FiberOps Mobile — Asset Guidelines
|
||
|
||
> The files in this directory are currently **placeholder** Expo defaults.
|
||
> Replace them with brand-correct assets using the specs below.
|
||
> Run `scripts/generate-assets.sh` to regenerate from SVG sources once installed.
|
||
|
||
---
|
||
|
||
## Brand Colors
|
||
|
||
| Token | Hex | Usage |
|
||
|-------|-----|-------|
|
||
| Primary cyan | `#0891B2` | App icon background, adaptive icon background, tint color |
|
||
| Splash background | `#F8FAFC` | Splash screen background (near-white) |
|
||
| Text on cyan | `#FFFFFF` | "FO" / "FiberOps" text on colored backgrounds |
|
||
| Text on light | `#0891B2` | "FiberOps" wordmark on splash |
|
||
|
||
## Brand Font
|
||
|
||
**Fira Sans** (Bold / SemiBold) — preferred for the "FO" monogram and "FiberOps" wordmark.
|
||
Fallback: Inter, SF Pro, or any geometric sans-serif.
|
||
|
||
---
|
||
|
||
## Asset Inventory
|
||
|
||
### `icon.png` — App Icon
|
||
- **Dimensions:** 1024 × 1024 px
|
||
- **Format:** PNG, no transparency
|
||
- **Design:** Solid `#0891B2` background with rounded corners (corner radius ~22.5 % of width ≈ 230 px), centered white "FO" wordmark in Fira Sans Bold at ~460 px.
|
||
- **Used by:** iOS home screen, App Store listing, Expo Go thumbnail.
|
||
|
||
### `adaptive-icon.png` — Android Adaptive Icon Foreground
|
||
- **Dimensions:** 1024 × 1024 px
|
||
- **Format:** PNG with **transparent** background
|
||
- **Design:** Centered white "FO" wordmark (same as icon, no background fill). Android clips to a circle/squircle and composites over `backgroundColor` (`#0891B2`).
|
||
- **Safe zone:** Keep visual content within the inner 66 % (≈ 672 px) to avoid clipping on all Android shapes.
|
||
|
||
### `android-icon-background.png`
|
||
- **Dimensions:** 1024 × 1024 px
|
||
- **Format:** PNG
|
||
- **Design:** Solid `#0891B2` fill — no other content.
|
||
|
||
### `android-icon-foreground.png`
|
||
- **Dimensions:** 1024 × 1024 px
|
||
- **Format:** PNG with transparent background
|
||
- **Design:** Same as `adaptive-icon.png`.
|
||
|
||
### `android-icon-monochrome.png`
|
||
- **Dimensions:** 1024 × 1024 px
|
||
- **Format:** PNG, single-channel (white on transparent or black on transparent)
|
||
- **Design:** Outline / solid "FO" mark only — no color fill. Used by Android 13+ themed icons.
|
||
|
||
### `splash-icon.png` — Splash Screen Logo
|
||
- **Dimensions:** 1284 × 2778 px (iPhone 14 Pro Max native) or at minimum 1024 × 1024 px centered mark
|
||
- **Format:** PNG with transparent background (Expo composites over `backgroundColor`)
|
||
- **Design:** Centered "FO" logomark (200–300 px) above "FiberOps" wordmark in `#0891B2`. Background is handled by `app.json` → `splash.backgroundColor` (`#F8FAFC`).
|
||
- **Resize mode:** `contain` (set in app.json) — keep content in the center 40 % of canvas.
|
||
|
||
### `favicon.png` — Web Favicon
|
||
- **Dimensions:** 48 × 48 px (also works at 32 × 32 and 16 × 16)
|
||
- **Format:** PNG
|
||
- **Design:** `#0891B2` square background with white "F" or "FO" mark.
|
||
|
||
---
|
||
|
||
## Generating Assets
|
||
|
||
See `../scripts/generate-assets.sh` for the full generation pipeline using Inkscape or rsvg-convert.
|
||
|
||
Quick summary:
|
||
1. Edit `scripts/fiberops-icon.svg` (source of truth)
|
||
2. Run `scripts/generate-assets.sh`
|
||
3. All PNG files in `assets/` are overwritten with fresh exports
|
||
|
||
---
|
||
|
||
## app.json Reference
|
||
|
||
| Key | Value |
|
||
|-----|-------|
|
||
| `expo.icon` | `./assets/icon.png` |
|
||
| `expo.splash.image` | `./assets/splash-icon.png` |
|
||
| `expo.splash.backgroundColor` | `#F8FAFC` |
|
||
| `expo.android.adaptiveIcon.foregroundImage` | `./assets/adaptive-icon.png` |
|
||
| `expo.android.adaptiveIcon.backgroundColor` | `#0891B2` |
|
||
| `expo.web.favicon` | `./assets/favicon.png` |
|