docs(brand): add asset-system.md, cross-link from visual-identity.md
This commit is contained in:
null
parent
afd81e8120
commit
fa6d80602a
|
|
@ -0,0 +1,243 @@
|
|||
# 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 heart remains the compact brand mark. The couple artwork should become 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/store/sources/app-icon.svg` as the source of the compact heart mark.
|
||||
- `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 heart is strong for launchers and tiny UI, but too generic when used alone at larger sizes.
|
||||
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 heart 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/store/sources/app-icon.svg` |
|
||||
| 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/iOS notification art direction | Needed: monochrome heart/paired-card source |
|
||||
| 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 heart mark should mean "two equal people meeting in the middle." Do not split it,
|
||||
rotate it, 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 and Play icon assets exist.
|
||||
- iOS has an asset catalog folder but no visible app icon set in the checked file list. Add the
|
||||
full iOS app icon set before TestFlight/App Store review.
|
||||
|
||||
### 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 | Heart + 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. Keep the current heart mark, but create wordmark/horizontal/one-color SVG lockups.
|
||||
2. Add the missing iOS AppIcon set.
|
||||
3. Mirror illustration PNGs into Android and start using them in onboarding, empty states, paywall,
|
||||
and store screenshots.
|
||||
4. Rework the Play feature graphic to include one couple/private-ritual illustration.
|
||||
5. Add the new notification and privacy illustrations listed above.
|
||||
6. Build a small custom glyph set for privacy/reveal/date/capsule concepts.
|
||||
|
|
@ -6,6 +6,9 @@ a public dating profile.
|
|||
Product goal: **private, mutual-reveal relationship questions with real encryption and calmer UX**.
|
||||
Visual decisions should reinforce that promise before decoration, novelty, or growth mechanics.
|
||||
|
||||
For the full working asset set, including illustration, notification, store, and logo-export
|
||||
requirements, see `docs/brand/asset-system.md`.
|
||||
|
||||
## Brand mark
|
||||
|
||||
The mark is one heart formed by two equal halves. Pink and lavender represent two people meeting at
|
||||
|
|
|
|||
Loading…
Reference in New Issue