brand: finalize app icon, brand docs, onboarding visuals, feature graphic

This commit is contained in:
null 2026-06-25 14:52:21 -05:00
parent 520eea2236
commit fed91dbe46
25 changed files with 52 additions and 16 deletions

View File

@ -16,12 +16,19 @@ the existing artwork (`docs/brand/visual-identity.md` + `docs/brand/asset-system
> Flat 2D pastel vector **illustration** in the "Closer" couples-app style: soft rounded shapes, **no harsh outlines**,
> gentle smooth gradients, calm and intimate. **Palette only:** aubergine `#24122F`, deep purple `#56306F`, lavender
> `#B98AF4`, soft pink `#F7C8E4`, soft lavender `#D9B8FF`, blush white `#FFF8FC`. Mood: **warm, quiet, equal,
> intentional — a private ritual for two.** Recurring motifs available: a single heart made of two equal pink+lavender
> halves, paired/sealed cards, floating hearts and petals, a small wooden table with mugs + a lit candle + a lavender
> sprig, moon/window for quiet hours, a calendar/date-card, a sealed capsule/box. If people appear: **two balanced,
> inclusive figures, simple friendly faces, no dominant partner.** Soft abstract floral/heart shapes in the background.
> intentional — a private ritual for two.** Recurring motifs available: paired/sealed cards, floating hearts and
> petals, a small wooden table with mugs + a lit candle + a lavender sprig, moon/window for quiet hours, a
> calendar/date-card, a sealed capsule/box. If people appear: **two balanced, inclusive figures, simple friendly
> faces, no dominant partner.** Soft abstract floral/heart shapes in the background.
> **Do NOT include:** any readable text, answer/prompt/message content, invite codes, emails, app UI/buttons, generic
> dating-app clichés, stock-photo realism, brand logos, alarm/urgency/surveillance/fire imagery.
> dating-app clichés, stock-photo realism, other brands' logos/wordmarks/app-store badges,
> alarm/urgency/surveillance/fire imagery.
> **The Closer brand mark** (use ONLY where a prompt explicitly calls for it — otherwise keep art mark-free): a
> pink-to-lavender **"C"** whose upper arc is soft pink and lower sweep is lavender, curving around a **heart-shaped
> negative space** with a small **dark aubergine keyhole** at its center (the keyhole = trust/privacy; the heart =
> the couple). Keep it faithful — do not redraw it as a plain `C`, turn the keyhole into a heart, add a key/lock
> shackle, add faces or text. On dark/aubergine surfaces use a white keyhole; on light/blush use the aubergine keyhole.
**Aspect/format conventions**
- Hero/onboarding/paywall: portrait **4:5** (matches `illustration_couple_*`).

View File

@ -35,7 +35,6 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
@ -246,7 +245,7 @@ private fun CtaSlide(onNavigate: (String) -> Unit) {
painter = painterResource(R.drawable.ic_launcher_foreground),
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier.matchParentSize().alpha(0.96f)
modifier = Modifier.matchParentSize()
)
}
Spacer(Modifier.height(28.dp))

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -65,7 +65,7 @@ This section is only about the artwork used to represent notifications, not noti
| Asset | Use | Source / Target |
| --- | --- | --- |
| Primary app mark | Launcher, favicon, small brand moments | `docs/brand/sources/closer-approved-icon-source.png` |
| Primary app mark | Launcher, favicon, small brand moments | `docs/brand/sources/closer-approved-icon-square-white-keyhole.png` |
| Mark for dark backgrounds | Logo use on aubergine/purple surfaces | `docs/brand/sources/closer-mark-on-dark.svg` |
| Mark for light backgrounds | Logo use on blush/white/light surfaces | `docs/brand/sources/closer-mark-on-light.svg` |
| Adaptive foreground | Android launcher layer | `app/src/main/res/drawable/ic_launcher_foreground.xml` |
@ -82,9 +82,37 @@ approved pink upper C, lavender lower sweep, heart-shaped inner space, and true
redraw it as a generic `C`, turn the keyhole into a heart, add a key or lock shackle, add faces, add
text inside it, or use it as a reaction emoji.
Keyhole rule: keep the dark keyhole in the official launcher/store icon. Use the white keyhole only
when the transparent mark sits directly on dark aubergine/purple. Use the aubergine keyhole on light
or blush backgrounds.
Keyhole rule: use the white keyhole in the official launcher/store icon and on dark aubergine/purple
logo surfaces. Use the aubergine keyhole on light or blush in-app surfaces when the mark should feel
calmer.
### 1a. Loaded asset sets → where they are used (routing)
This maps the asset sets currently on disk to their destination. Treat the `sources/` files as
masters (do not ship them directly); ship the exports and the wired Android rasters.
| File on disk | Role | Wired into / destination |
| --- | --- | --- |
| `docs/brand/sources/closer-approved-icon-source.png` | Master source of truth (full color, dark keyhole) | Regenerate all icons from this after any mark change |
| `docs/brand/sources/closer-approved-icon-square.png` | Square 1024 master | iOS `AppIcon` 1024, store 1024 |
| `docs/brand/sources/closer-mark.svg` | Vector master of the mark | Source for all PNG exports |
| `docs/brand/sources/closer-mark-transparent-keyhole-white.png` | Transparent mark, white keyhole (for dark aubergine/purple) | **Source of** `drawable-nodpi/closer_launcher_foreground.png` (adaptive fg over the aubergine bg) + the Auth/Onboarding logo tile (dark surface) |
| `docs/brand/sources/closer-mark-transparent-keyhole-aubergine.png` | Transparent mark, dark keyhole (for light/blush surfaces) | **Source of** `drawable-nodpi/closer_mark_loader.png` (all loaders + the PairingSuccess hero badge on blush) |
| `docs/brand/sources/closer-mark-transparent-keyhole-black.png` | Mono/max-contrast mark | Print/legal, max-contrast light |
| `docs/brand/exports/logo/transparent-keyhole-aubergine/closer-mark-{24..1024}.png` | Sized PNGs, dark keyhole | Web/email/social on light, docs, favicons |
| `docs/brand/exports/logo/transparent-keyhole-white/closer-mark-{24..1024}.png` | Sized PNGs, white keyhole | Same, on dark surfaces |
| `docs/brand/exports/logo/transparent-keyhole-black/closer-mark-{24..1024}.png` | Sized PNGs, mono | One-color/print/footer |
| `docs/brand/exports/logo/social/closer-mark-social-{1024,2048}.png` | Square social avatars / OG | Social profile + open-graph square |
| `docs/brand/exports/logo/app-icon/closer-app-icon-512.png` | Play listing icon | `docs/store/app-icon-512.png` (Play Console) |
| `app/src/main/res/drawable-nodpi/closer_launcher_foreground.png` | Adaptive **foreground** (white-keyhole mark, safe-zone) | `drawable/ic_launcher_foreground.xml``mipmap-anydpi-*/ic_launcher*.xml`; also the Auth/Onboarding logo tile |
| `app/src/main/res/drawable/ic_launcher_background.xml` | Adaptive **background** (aubergine gradient) | `mipmap-anydpi-*/ic_launcher*.xml` |
| `app/src/main/res/drawable-nodpi/closer_launcher_monochrome.png` | Themed-icon **monochrome** (grayscale+alpha) | `drawable/ic_launcher_monochrome.xml``mipmap-anydpi-v33/*` |
| `app/src/main/res/drawable-nodpi/ic_notification_closer.png` | Notification small icon (white+alpha silhouette) | `NotificationHelper`, `PartnerNotificationManager` `setSmallIcon` |
| `app/src/main/res/drawable-nodpi/closer_mark_loader.png` | Full-color transparent mark | `CloserMarkLoader` (all loaders), `PairingSuccessScreen` hero, `AuthLogoMark`/Onboarding tile |
Note: the section-1 rows `closer-mark-on-dark.svg` / `closer-mark-on-light.svg` and the lockup/favicon
rows are still **to-build** — the on-disk equivalents today are the `transparent-keyhole-white` (dark)
and `transparent-keyhole-aubergine` (light) PNG sets above.
### 2. App Icons

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 908 KiB

After

Width:  |  Height:  |  Size: 748 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

@ -16,6 +16,7 @@ a heart-shaped inner space, and a true centered keyhole. Pink and lavender repre
meeting in one private space; the keyhole represents trust and privacy.
- Master mark source: `docs/brand/sources/closer-approved-icon-source.png`
- App/store icon source: `docs/brand/sources/closer-approved-icon-square-white-keyhole.png`
- Transparent mark source: `docs/brand/sources/closer-mark-transparent-keyhole-aubergine.png`
- Dark-background mark source: `docs/brand/sources/closer-mark-on-dark.svg`
- Light-background mark source: `docs/brand/sources/closer-mark-on-light.svg`
@ -31,17 +32,18 @@ or place text inside the icon.
### Keyhole color
Use the keyhole color to support contrast without changing the official icon:
Use the keyhole color to support contrast while keeping the official icon visually clear:
- **Primary app icon / launcher / store icon:** keep the approved dark keyhole. It feels private and
premium, and keeps the icon from looking like a generic security app.
- **Primary app icon / launcher / store icon:** use the white-keyhole square icon. It gives the
privacy cue enough contrast at launcher size.
- **Transparent mark on dark aubergine or purple:** use the white-keyhole variant so the privacy
cue stays visible.
- **Transparent mark on blush, white, or light UI:** use the aubergine-keyhole variant first; use
the black-keyhole variant only when maximum contrast is needed.
- **Notification small icon:** use the single-color platform glyph; do not use the full-color
launcher art.
- **Loading mark:** use the aubergine-keyhole variant on light/card surfaces.
- **Loading mark:** use the aubergine-keyhole variant on light/card surfaces so it stays calmer than
the launcher icon.
## Core colors

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1022 KiB

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-label="Closer app icon">
<image href="docs/brand/sources/closer-approved-icon-square.png" width="512" height="512" preserveAspectRatio="xMidYMid slice"/>
<image href="docs/brand/sources/closer-approved-icon-square-white-keyhole.png" width="512" height="512" preserveAspectRatio="xMidYMid slice"/>
</svg>

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 908 KiB

After

Width:  |  Height:  |  Size: 748 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 21 KiB