fiberops-mobile/assets/ASSETS.md

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