nikki/LOGO.md

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

<!-- Pink circle -->
<path android:fillColor="#EE67A4"
    android:pathData="M26,54 A28,28 0 1,1 82,54 A28,28 0 1,1 26,54 Z" />

<!-- Black annular sector (r=20 to r=28) -->
<path android:fillColor="#231F20"
    android:pathData="M72.34,46.02 L79.68,42.84 A28,28 0 0,1 79.68,65.16
                      L72.34,61.98 A20,20 0 0,0 72.34,46.02 Z" />

<!-- Teal annular sector (r=28 to r=35) -->
<path android:fillColor="#35BEB8"
    android:pathData="M79.68,42.84 L86.1,40.04 A35,35 0 0,1 86.1,67.96
                      L79.68,65.16 A28,28 0 0,0 79.68,42.84 Z" />

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