From 313a2f8a036a69211ef964b19333bfc1537fda95 Mon Sep 17 00:00:00 2001 From: "Nemo (Claude Code)" Date: Wed, 1 Apr 2026 01:05:28 +0000 Subject: [PATCH] feat: app icon/splash asset guidelines + app.json config (FIBEROPS-209) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app.json | 6 +- assets/ASSETS.md | 87 +++++++++++++++++++++++ scripts/generate-assets.sh | 142 +++++++++++++++++++++++++++++++++++++ 3 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 assets/ASSETS.md create mode 100755 scripts/generate-assets.sh diff --git a/app.json b/app.json index 6a6b98a..f4006ba 100644 --- a/app.json +++ b/app.json @@ -1,7 +1,7 @@ { "expo": { "name": "FiberOps", - "slug": "firberops", + "slug": "fiberops", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", @@ -10,7 +10,7 @@ "splash": { "image": "./assets/splash-icon.png", "resizeMode": "contain", - "backgroundColor": "#2563EB" + "backgroundColor": "#F8FAFC" }, "ios": { "supportsTablet": false, @@ -19,7 +19,7 @@ "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", - "backgroundColor": "#2563EB" + "backgroundColor": "#0891B2" }, "package": "com.fiberops.mobile", "permissions": [ diff --git a/assets/ASSETS.md b/assets/ASSETS.md new file mode 100644 index 0000000..176c728 --- /dev/null +++ b/assets/ASSETS.md @@ -0,0 +1,87 @@ +# 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` | diff --git a/scripts/generate-assets.sh b/scripts/generate-assets.sh new file mode 100755 index 0000000..3194340 --- /dev/null +++ b/scripts/generate-assets.sh @@ -0,0 +1,142 @@ +#!/usr/bin/env bash +# generate-assets.sh — Generate FiberOps PNG assets from SVG sources +# +# Requirements (install one): +# brew install inkscape (macOS / Linux) +# brew install librsvg (lighter: rsvg-convert) +# apt-get install librsvg2-bin (Debian/Ubuntu) +# +# Usage: +# ./scripts/generate-assets.sh +# +# Output: assets/*.png (overwrites existing files) + +set -euo pipefail + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" +ASSETS="$REPO_ROOT/assets" +SVGS="$SCRIPT_DIR/svg" + +# --------------------------------------------------------------------------- +# Check for a suitable SVG renderer +# --------------------------------------------------------------------------- +if command -v inkscape &>/dev/null; then + RENDERER="inkscape" +elif command -v rsvg-convert &>/dev/null; then + RENDERER="rsvg" +else + echo "ERROR: Install inkscape or librsvg (rsvg-convert) first." >&2 + echo " macOS: brew install inkscape OR brew install librsvg" >&2 + echo " Linux: apt-get install inkscape OR apt-get install librsvg2-bin" >&2 + exit 1 +fi + +export_png() { + local svg="$1" out="$2" w="$3" h="$4" + echo " → $out (${w}×${h})" + if [[ "$RENDERER" == "inkscape" ]]; then + inkscape --export-type=png \ + --export-filename="$out" \ + --export-width="$w" \ + --export-height="$h" \ + "$svg" 2>/dev/null + else + rsvg-convert -w "$w" -h "$h" -o "$out" "$svg" + fi +} + +mkdir -p "$SVGS" + +# --------------------------------------------------------------------------- +# Inline SVG sources (written to scripts/svg/ so they can be edited) +# --------------------------------------------------------------------------- + +# 1. icon-bg.svg — opaque cyan square with "FO" (used for icon.png) +cat > "$SVGS/icon-bg.svg" <<'SVG' + + + FO + +SVG + +# 2. icon-fg.svg — transparent background, white "FO" (adaptive icon foreground) +cat > "$SVGS/icon-fg.svg" <<'SVG' + + FO + +SVG + +# 3. splash.svg — transparent, centered logo for splash (composited over #F8FAFC) +cat > "$SVGS/splash.svg" <<'SVG' + + + + + FO + + FiberOps + +SVG + +# 4. favicon.svg — tiny "F" on cyan +cat > "$SVGS/favicon.svg" <<'SVG' + + + F + +SVG + +# 5. monochrome.svg — white "FO" on transparent (Android 13 themed icon) +cat > "$SVGS/monochrome.svg" <<'SVG' + + FO + +SVG + +# --------------------------------------------------------------------------- +# Export PNGs +# --------------------------------------------------------------------------- +echo "Exporting PNGs..." + +export_png "$SVGS/icon-bg.svg" "$ASSETS/icon.png" 1024 1024 +export_png "$SVGS/icon-fg.svg" "$ASSETS/adaptive-icon.png" 1024 1024 +export_png "$SVGS/icon-fg.svg" "$ASSETS/android-icon-foreground.png" 1024 1024 +export_png "$SVGS/icon-bg.svg" "$ASSETS/android-icon-background.png" 1024 1024 +export_png "$SVGS/monochrome.svg" "$ASSETS/android-icon-monochrome.png" 1024 1024 +export_png "$SVGS/splash.svg" "$ASSETS/splash-icon.png" 1024 1024 +export_png "$SVGS/favicon.svg" "$ASSETS/favicon.png" 48 48 + +echo "" +echo "Done. Files written to assets/" +echo "Verify with: ls -lh assets/*.png" -- 2.43.0