246 lines
10 KiB
Markdown
246 lines
10 KiB
Markdown
# Closer Artwork Asset System
|
|
|
|
This is the working artwork asset set for Closer. It keeps the existing purple/pink color scheme
|
|
and the 2D pastel couple illustration style, but gives every visual surface a clearer job.
|
|
|
|
The brand should feel like a private ritual for two people: warm, quiet, equal, and intentional.
|
|
The compact brand mark is now the approved Closer C-heart-keyhole. The couple artwork should remain
|
|
the primary visual language anywhere there is enough space to show a human moment.
|
|
|
|
## Current Artwork Review
|
|
|
|
### README and Positioning
|
|
|
|
The README is aligned with the right promise: private mutual reveal, real encryption, calm UX, no
|
|
public social mechanics, and one subscription per couple. That is the brand spine. Asset decisions
|
|
should reinforce that before adding more romance, gamification, or feature volume.
|
|
|
|
Recommended visual translation:
|
|
|
|
- Privacy: lock, sealed card, quiet room, closed journal, two-device reveal.
|
|
- Equality: paired shapes, mirrored halves, balanced figures, side-by-side cards.
|
|
- Ritual: daily card, cup/table setting, evening prompt, calendar/date cue.
|
|
- Warmth: existing pastel couple scenes, soft surfaces, pink/lavender accents.
|
|
|
|
Avoid:
|
|
|
|
- Generic dating-app hearts as the only signal.
|
|
- Loud streak/game badges as the main identity.
|
|
- Stock-couple photography.
|
|
- Notification copy or graphics that imply surveillance, urgency, or partner pressure.
|
|
|
|
### Existing Artwork
|
|
|
|
Keep:
|
|
|
|
- `docs/brand/sources/closer-approved-icon-source.png` as the visual source of truth for the compact
|
|
C-heart-keyhole mark.
|
|
- `docs/store/sources/app-icon.svg` as the source wrapper for the launcher/store icon.
|
|
- `iphone/Closer/Resources/illustration-couple-*.png` as the human brand style.
|
|
- `iphone/Closer/Resources/pack-art-*.png` as the category/pack art direction.
|
|
- `iphone/Closer/Resources/particle-heart.png` and `particle-petal.png` for celebration moments.
|
|
|
|
Improve:
|
|
|
|
- The mark is strong for launchers, auth, loaders, notification glyphs, and small privacy seals. Use
|
|
couple illustrations for onboarding, paywall, empty states, store screenshots, and web/social.
|
|
- Android currently has the launcher vectors but not the larger illustration library. Mirror the
|
|
iOS resources into Android when those screens start using raster art.
|
|
- Store feature graphics should show the C-heart-keyhole plus one illustrated/private ritual scene,
|
|
not only cards and symbols.
|
|
|
|
### Notification Artwork
|
|
|
|
This section is only about the artwork used to represent notifications, not notification behavior.
|
|
|
|
- Use a dedicated monochrome notification glyph, not the colored launcher foreground.
|
|
- Keep notification artwork quiet: heart, lock, paired-card, moon, calendar, and capsule symbols.
|
|
- Large notification-adjacent artwork may use partner avatars or the couple illustration style, but
|
|
never show readable private answer content.
|
|
- The visual tone should say "gentle invitation," not alarm, urgency, surveillance, or streak loss.
|
|
|
|
## Master Asset Set
|
|
|
|
### 1. Brand Marks
|
|
|
|
| Asset | Use | Source / Target |
|
|
| --- | --- | --- |
|
|
| Primary app mark | Launcher, favicon, small brand moments | `docs/brand/sources/closer-approved-icon-source.png` |
|
|
| Adaptive foreground | Android launcher layer | `app/src/main/res/drawable/ic_launcher_foreground.xml` |
|
|
| Adaptive background | Android launcher layer | `app/src/main/res/drawable/ic_launcher_background.xml` |
|
|
| Monochrome mark | Android themed icon, single-color use | `app/src/main/res/drawable/ic_launcher_monochrome.xml` |
|
|
| Notification glyph | Android notification small icon | `app/src/main/res/drawable-nodpi/ic_notification_closer.png` |
|
|
| Wordmark lockup | Website, store hero, press kit | Needed: `docs/brand/sources/closer-lockup.svg` |
|
|
| Horizontal logo | Email header, social headers | Needed: SVG + PNG exports |
|
|
| One-color logo | Legal docs, monochrome print, dark/light footer | Needed: SVG exports |
|
|
| Favicon set | Website/browser/PWA | Needed: 16, 32, 48, 180, 192, 512 px |
|
|
|
|
Logo rule: the mark should mean "Closer is the private space around your relationship." Keep the
|
|
approved pink upper C, lavender lower sweep, heart-shaped inner space, and true keyhole. Do not
|
|
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.
|
|
|
|
### 2. App Icons
|
|
|
|
| Platform | Required Assets |
|
|
| --- | --- |
|
|
| Android | Adaptive icon, round icon, themed monochrome icon, Play 512 px icon |
|
|
| iOS | AppIcon asset catalog: 20, 29, 40, 60, 76, 83.5, 1024 px |
|
|
| Web/PWA | favicon.ico, SVG favicon, Apple touch icon, maskable 192/512 icons |
|
|
|
|
Current status:
|
|
|
|
- Android, Play, and iOS AppIcon assets exist and should be regenerated from the approved source
|
|
image after any future mark change.
|
|
|
|
### 3. Illustration Library
|
|
|
|
Use the 2D pastel couple art as the large-format identity.
|
|
|
|
| Asset Family | Current Assets | Primary Use |
|
|
| --- | --- | --- |
|
|
| Couple moments | `illustration-couple-onboarding`, `invite`, `history`, `paywall`, `subscription` | Onboarding, pairing, history, paywall |
|
|
| Product rituals | `illustration-daily-question`, `partner-activation`, `reveal-celebration` | Daily question, partner wait state, reveal |
|
|
| Play and progress | `illustration-spin-wheel`, `streak-milestone`, `together-empty` | Play hub, milestones, empty states |
|
|
| Pack art | `pack-art-*` | Question pack cards and category headers |
|
|
| Particles | `particle-heart`, `particle-petal` | Reveal, match, milestone celebration |
|
|
|
|
Needed additions:
|
|
|
|
- `illustration-privacy-lock`: two cards or journals behind a lock.
|
|
- `illustration-quiet-hours`: moon/window/two muted phones.
|
|
- `illustration-date-match`: two chosen date cards meeting.
|
|
- `illustration-memory-capsule`: sealed box/open capsule.
|
|
- `illustration-chat-thread`: two soft message bubbles with no readable text.
|
|
- `illustration-account-deletion`: calm export/delete privacy scene.
|
|
- Android copies of the iOS illustration assets, preferably under `app/src/main/res/drawable-nodpi/`.
|
|
|
|
### 4. Notification Artwork Assets
|
|
|
|
| Notification Type | Small Icon | Optional Large Icon | Route Mood |
|
|
| --- | --- | --- | --- |
|
|
| Partner answered | Heart/paired-card glyph | Partner avatar | Calm invitation |
|
|
| Reveal ready | Heart + unlock symbol | Heart mark | Moment is ready |
|
|
| Chat message | Heart/paired-card glyph | Partner avatar | Direct but private |
|
|
| Daily question | Heart + card | App mark | Daily ritual |
|
|
| Gentle reminder | Heart/soft nudge | Partner avatar optional | No pressure |
|
|
| Date match | Heart + calendar/card | Date-card art optional | Shared choice |
|
|
| Capsule unlocked | Heart + lock/open card | Capsule art optional | Memory opened |
|
|
| Challenge waiting | Heart + small path/card | Challenge art optional | Small next step |
|
|
|
|
Notification artwork rules:
|
|
|
|
- Never show readable answer text, prompt text, invite codes, message previews, or sensitive category
|
|
labels inside artwork.
|
|
- Avoid alarm-bell, siren, warning-triangle, fire, or countdown imagery.
|
|
- Prefer sealed cards, paired cards, soft hearts, moon/quiet-hours, calendar/date-card, and capsule
|
|
objects.
|
|
- Use the existing pink/lavender palette with high-contrast monochrome exports for platform glyphs.
|
|
|
|
### 5. In-App Icon and Glyph Set
|
|
|
|
Use Material/SF Symbols for normal UI controls. Use custom brand glyphs only for relationship
|
|
concepts that need a softer product voice.
|
|
|
|
Needed custom glyphs:
|
|
|
|
- `glyph-private-reveal`
|
|
- `glyph-two-people`
|
|
- `glyph-daily-card`
|
|
- `glyph-sealed-answer`
|
|
- `glyph-memory-capsule`
|
|
- `glyph-date-match`
|
|
- `glyph-quiet-hours`
|
|
- `glyph-couple-premium`
|
|
- `glyph-export-data`
|
|
- `glyph-delete-account`
|
|
|
|
These should be simple single-color vectors that work at 20-32 dp/pt.
|
|
|
|
### 6. Store and Marketing Assets
|
|
|
|
| Asset | Spec | Direction |
|
|
| --- | --- | --- |
|
|
| Play feature graphic | 1024 x 500 PNG | C-heart-keyhole + one private ritual illustration + short promise |
|
|
| Play screenshots | Up to 8 phone screenshots | Use product screens; omit login unless testing trust |
|
|
| App Store screenshots | iPhone 6.7", 6.5", 5.5" as needed | Mirror Play story |
|
|
| Social open graph | 1200 x 630 | Couple illustration + "A private space for two." |
|
|
| Press/brand header | 1600 x 900 | Illustration-led, logo lockup |
|
|
| Website hero | Responsive bitmap | Couple illustration in first viewport, not a symbol-only hero |
|
|
|
|
Recommended screenshot story:
|
|
|
|
1. Onboarding/private promise.
|
|
2. Home next-best action.
|
|
3. Daily question/private answer.
|
|
4. Mutual reveal/history.
|
|
5. Question packs.
|
|
6. Play/spin wheel.
|
|
7. Date planning.
|
|
8. Privacy/settings/subscription trust.
|
|
|
|
### 7. Empty States and Milestones
|
|
|
|
Each major empty state should have a matching illustration or glyph:
|
|
|
|
- No partner yet: `illustration-couple-invite`
|
|
- Waiting for partner: `illustration-partner-activation`
|
|
- No history yet: `illustration-couple-history`
|
|
- No messages yet: new `illustration-chat-thread`
|
|
- No date matches yet: new `illustration-date-match`
|
|
- No memory capsules: new `illustration-memory-capsule`
|
|
- Quiet hours enabled: new `illustration-quiet-hours`
|
|
- Premium/paywall: `illustration-couple-paywall` or `illustration-couple-subscription`
|
|
|
|
### 8. Motion and Celebration
|
|
|
|
Keep motion small and intimate:
|
|
|
|
- Heart pulse for pairing/reveal ready.
|
|
- Petal/heart particles for mutual reveal, date match, milestone.
|
|
- Slow card unlock animation for reveal/capsule.
|
|
- No confetti storms for sensitive answers.
|
|
|
|
### 9. File Organization
|
|
|
|
Recommended structure:
|
|
|
|
```text
|
|
docs/brand/
|
|
asset-system.md
|
|
visual-identity.md
|
|
sources/
|
|
closer-mark.svg
|
|
closer-lockup.svg
|
|
closer-lockup-horizontal.svg
|
|
notification-art/
|
|
notification-heart.svg
|
|
notification-paired-cards.svg
|
|
notification-quiet-hours.svg
|
|
notification-capsule.svg
|
|
glyphs/
|
|
exports/
|
|
logo/
|
|
store/
|
|
social/
|
|
|
|
app/src/main/res/
|
|
drawable/ # vectors exported from artwork sources
|
|
drawable-nodpi/ # raster illustrations shared with Android
|
|
mipmap-*/ # launcher icons
|
|
|
|
iphone/Closer/Resources/
|
|
Assets.xcassets/ # app icons and platform-managed assets
|
|
illustration-*.png
|
|
pack-art-*.png
|
|
```
|
|
|
|
## Priority Build List
|
|
|
|
1. Build wordmark/horizontal/one-color lockups around the approved C-heart-keyhole.
|
|
2. Mirror illustration PNGs into Android and start using them in onboarding, empty states, paywall,
|
|
and store screenshots.
|
|
3. Rework the Play feature graphic to include one couple/private-ritual illustration.
|
|
4. Add the new notification and privacy illustrations listed above.
|
|
5. Build a small custom glyph set for privacy/reveal/date/capsule concepts.
|