# Nikki Logo Specification ## Concept The logo is inspired by the Google Foobar challenge logo, adapted into a circular form. A large pink circle carries a 47-degree angular notch on the right side, split into black (inside the circle) and teal (extending beyond). ## Colors | Element | Hex | Usage | |-----------------|-----------|----------------------------------------| | Pink | `#EE67A4` | Main circle fill | | Black | `#231F20` | Wedge section inside the circle | | Teal | `#35BEB8` | Wedge section outside the circle | | Background | `#1F1F1F` | Launcher icon background | ## Geometry All measurements relative to a 108x108dp Android adaptive icon viewport, center at (54, 54). ### Base Shape - **Pink circle**: radius = 28, centered at (54, 54) ### 47-Degree Wedge The wedge is an annular sector — it does NOT originate from the center. It spans between two imaginary concentric circles: - **Imaginary inner circle**: radius = 20 (where the wedge starts) - **Imaginary outer circle**: radius = 35 (where the wedge ends) - **Wedge angle**: 47 degrees, centered on the horizontal-right axis (east) - **Half-angle**: 23.5 degrees above and below the horizontal ### Wedge Sections 1. **Black section** — the portion of the wedge that falls inside the pink circle - Annular sector from r=20 to r=28 - Creates a dark notch visible against the pink fill 2. **Teal section** — the portion of the wedge that extends beyond the pink circle - Annular sector from r=28 to r=35 - Creates a colored protrusion outside the main circle ### Key Coordinates Using center (54, 54), half-angle 23.5 degrees: ``` cos(23.5°) = 0.91706 sin(23.5°) = 0.39875 ``` | Point | X | Y | |---------------------------|--------|--------| | Inner upper (r=20) | 72.34 | 46.02 | | Inner lower (r=20) | 72.34 | 61.98 | | Circle upper (r=28) | 79.68 | 42.84 | | Circle lower (r=28) | 79.68 | 65.16 | | Outer upper (r=35) | 86.10 | 40.04 | | Outer lower (r=35) | 86.10 | 67.96 | ### Construction Steps 1. Draw a filled circle at (54, 54) with radius 28, color `#EE67A4` 2. Draw the black annular sector: - Path from inner-upper → circle-upper → arc along r=28 to circle-lower → inner-lower → arc along r=20 back 3. Draw the teal annular sector: - Path from circle-upper → outer-upper → arc along r=35 to outer-lower → circle-lower → arc along r=28 back ### Android Vector Drawable Paths ```xml ``` ## Adaptive Icon Layers | File | Purpose | |-----------------------------|-----------------------------| | `ic_launcher_foreground.xml`| Colored logo (pink/black/teal) | | `ic_launcher_background.xml`| Solid `#1F1F1F` background | | `ic_launcher_monochrome.xml`| White silhouette for themed icons | ### Safe Zone Android adaptive icons use a 108dp canvas. The recommended safe zone is a 66dp diameter circle (radius 33 from center). All critical logo elements should fall within this zone. - Pink circle (r=28): within safe zone - Teal extension (r=35): at safe zone boundary, may be slightly clipped on some launchers — this is intentional as it creates a "bleeding edge" effect ## Files - `logo-circle.svg` — SVG preview - `androidApp/src/main/res/drawable/ic_launcher_foreground.xml` — Production Android vector - `androidApp/src/main/res/drawable/ic_launcher_monochrome.xml` — Themed icon silhouette - `androidApp/src/main/res/drawable/ic_launcher_background.xml` — Dark background