null
/
Closer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Closer/docs/brand/asset-system.md

14 KiB
Raw Blame History

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-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
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.

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) Logo on light/blush placements + web/docs exports (no in-app wiring today — in-app loaders now use the white-keyhole chip)
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; Auth/Onboarding logo tile; CloserMarkLoader chip + PairingSuccess hero (white-keyhole logo on the aubergine app-icon chip)
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

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

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:

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.