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
3.4 KiB
3.4 KiB
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.shto 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
#0891B2background 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
#0891B2fill — 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 byapp.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:
#0891B2square 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:
- Edit
scripts/fiberops-icon.svg(source of truth) - Run
scripts/generate-assets.sh - 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 |