Space Swipe

UI & design · Brand kit

Reference for creators and partners: core colors, app accents, typography, and logo usage. Numbers match the shipped app (“SwipeLab” in Xcode) and our internal docs — always label storage as estimated in product copy.

Tip: Click almost anything on this page — headings, body copy, color chips, hex/RGB lines, glow panels, type samples, images, or paths — to copy it to your clipboard.

Core palette

These four drive the dark UI and marketing site. Implemented in Tailwind as charcoal, surface, accent, ink.

Dark charcoal
Primary background, canvas top
#222831
RGB(34, 40, 49)
Copy all
Medium gray
Surfaces / cards
#393E46
RGB(57, 62, 70)
Copy all
Cyan
Primary accent, CTAs
#00ADB5
RGB(0, 173, 181)
Copy all
Light gray
Text on dark (foreground)
#EEEEEE
RGB(238, 238, 238)
Copy all

Feature accents (app UI)

Extra paints used in the iPhone app (progress heat map, paywall ribbon, mint for “keep” affordances). Same 50×50 swatches as above; hex is inlined so the preview always matches production.

Mint
Keep / success (SwipeLabTheme.mint)
#4FC9A6
RGB(79, 201, 166)
Copy all
Heat empty
Progress heat map — empty
#1A2332
RGB(26, 35, 50)
Copy all
Heat level 1
Progress heat map
#0A6E73
RGB(10, 110, 115)
Copy all
Heat level 2
Progress heat map
#07949B
RGB(7, 148, 155)
Copy all
Heat level 3
Progress heat map (matches cyan)
#00ADB5
RGB(0, 173, 181)
Copy all
Streak amber
Progress stats highlight
#F59E0A
RGB(245, 158, 10)
Copy all
Ribbon yellow
Paywall “Best value” ribbon
#FFE01F
RGB(255, 224, 31)
Copy all
Near-black
Text on white capsules
#1F1F1F
RGB(31, 31, 31)
Copy all

Glow & depth

These are not extra “colors” in the palette — they are atmosphere and edges built from charcoal surfaces plus cyan at low opacity or a thin ring. Use them to separate layers without adding noisy gray chrome.

Hero glow
Soft radial spotlight behind the top of marketing heroes — brand cyan at low opacity.
We paint a large ellipse anchored near the top center of the screen. Inside it, cyan (RGB 0, 173, 181) is mixed to about 18% opacity, then fades fully to transparent. That gives depth without a second “layer” of UI chrome.
It reads as atmosphere, not a button: keep headline and logo contrast high (light text on charcoal). Reuse the same gradient on landing-style pages or static promo art so the brand feels consistent.
Avoid stacking multiple full-screen glows or raising opacity too high — it will muddy text and cheapen the look.
CSS snippet (click to copy)
```
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 173, 181, 0.18), transparent);
```
Card ring
A 1px “halo” using cyan at low opacity — implemented as Tailwind `shadow-card` plus a subtle border.
`shadow-card` expands to `0 0 0 1px rgba(0, 173, 181, 0.28)`: a single-pixel ring that mimics a soft stroke in brand color. Pair it with `border-accent/20` (or similar) on rounded panels so cards lift off charcoal backgrounds without heavy gray boxes.
Use it for selectable tiles, marketing feature cards, and anywhere you want structure without loud drop shadows. Do not double-up with thick borders and heavy shadow on the same edge — pick one primary edge treatment.
In Figma or video tools, recreate as: outer glow or stroke, cyan #00ADB5, opacity roughly 25–30%, no blur or minimal blur.
CSS snippet (click to copy)
```
box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.28);
border: 1px solid rgba(0, 173, 181, 0.2); /* border-accent/20 */
```

Typography

Web — Plus Jakarta Sans

Loaded via next/font; fallback: system-ui, sans-serif.

Hero / display

Free up space, keep the memories.

Body

Swipe through your library in small batches. Nothing leaves your device until you confirm — staging first, deleting second.

Weight ramp

Bold — Primary actions
Semibold — Section titles
Medium — Supporting text
Regular — Captions & legal

iPhone app

Uses system San Francisco; many titles use SF Rounded for a softer tone. Mirrors this site’s approachable sans feel.

Logos & icons

Do not distort or squash. The App Store badge must follow Apple’s App Store Marketing Guidelines.

Logo — with wordmark

/images/brand/logo-with-text.png

Logo — icon only

/images/brand/logo-no-text.png

App icon (60 pt @ 3×)

Rounded-square master lives in Xcode (Assets.xcassets). Web uses the same raster under public/images/brand/app-icon/.

App Store badge

Preserve aspect ratio. Do not recolor arbitrarily.

AI prompt · full brand context

Everything in the box below is one self-contained prompt: product rules, exact colors (synced from our token file), glow specs, typography, asset paths, and how we want an AI to behave. Paste it into ChatGPT, Claude, or your video tool when you need full brand context without re-explaining the app.

Tip: click inside the box to select all, or use ⌘A / Ctrl+A.

Prompt (read-only — safe to share)

You are helping create marketing, UI mockups, motion graphics, or copy for **Space Swipe** (public name). The Xcode / internal target name is **SwipeLab** — use "Space Swipe" for customer-facing text unless the user asks for internal naming.

================================================================================
PRODUCT CONTEXT (do not contradict)
================================================================================
- **What it is:** An **iPhone** app (iOS 17+) for reviewing the Apple **Photos** library: swipe to keep or queue deletes, **staged delete queue**, then **explicit confirmation** before PhotoKit removes anything. **Local-first / on-device** — no cloud photo upload in the core story; emphasize user control and privacy.
- **Primary shell:** Month-based home; shortcuts include screenshots, videos, random, duplicates, biggest files, On This Day, quick clean, etc.
- **Tone:** Calm, friendly, confident — not shamey about clutter. **Trust over cleverness.**
- **Storage language:** User-facing freed space must read as **estimated** (not exact forensic reclaim).
- **Deletes:** Never promise **automatic** or **silent** bulk deletion. Flow is: review → queue → confirm → delete.
- **App Store badge / Apple assets:** Do not crop, squash, or recolor the official **Download on the App Store** badge; follow Apple’s App Store Marketing Guidelines.
- **Marketing site (canonical):** https://www.spaceswipe.online — public images live under `/images/brand/` on that host.

================================================================================
UX PRIORITIES (governance)
================================================================================
1. **Media first** — photo/video is the hero.
2. **Summary second** — counts, labels, totals.
3. **Controls third** — controls stay visible and tappable.
Review flows: consistent top chrome (close + progress) across loading / active / finish where possible.

================================================================================
TYPOGRAPHY
================================================================================
- **Marketing website:** **Plus Jakarta Sans** (Google Font via next/font, CSS variable `--font-plus-jakarta`), fallbacks `system-ui`, sans-serif.
- **iOS app:** System **San Francisco**; many titles use **SF Rounded** for a softer read.
- For **TikTok / Figma / Keynote** exports, prefer a **rounded geometric sans** in the same spirit (Jakarta-like or SF Rounded-like).

================================================================================
CORE COLOR PALETTE (canonical sRGB — marketing + app chrome)
================================================================================
Tailwind theme keys on the site: `charcoal`, `surface`, `accent`, `ink`.
Also in `marketing-site/src/app/globals.css` as CSS variables: --color-charcoal, --color-surface, --color-accent, --color-foreground.

  - Dark charcoal — Primary background, canvas top
    HEX: #222831  |  RGB: 34, 40, 49
  - Medium gray — Surfaces / cards
    HEX: #393E46  |  RGB: 57, 62, 70
  - Cyan — Primary accent, CTAs
    HEX: #00ADB5  |  RGB: 0, 173, 181
  - Light gray — Text on dark (foreground)
    HEX: #EEEEEE  |  RGB: 238, 238, 238

Swift source of truth for app colors: `SpaceSwipe/App/SwipeLabTheme.swift` (`SwipeLabTheme`).

Semantic SwiftUI usage (typical):
  - canvasTop / canvasBottom: gradient backgrounds (charcoal → medium gray).
  - card: mediumGray at ~60% opacity for grouped panels.
  - outline: cyan at ~30% opacity for strokes.
  - warm: full cyan for primary actions; cool: cyan ~80% for secondary emphasis.
  - mint: keep/success — implemented as sRGB (0.31, 0.79, 0.65); hex ≈ #4FC9A6 (prefer Swift over older doc typos).

================================================================================
FEATURE ACCENTS (mostly iPhone app — progress, paywall, pills)
================================================================================
  - Mint — Keep / success (SwipeLabTheme.mint)
    HEX: #4FC9A6  |  RGB: 79, 201, 166
  - Heat empty — Progress heat map — empty
    HEX: #1A2332  |  RGB: 26, 35, 50
  - Heat level 1 — Progress heat map
    HEX: #0A6E73  |  RGB: 10, 110, 115
  - Heat level 2 — Progress heat map
    HEX: #07949B  |  RGB: 7, 148, 155
  - Heat level 3 — Progress heat map (matches cyan)
    HEX: #00ADB5  |  RGB: 0, 173, 181
  - Streak amber — Progress stats highlight
    HEX: #F59E0A  |  RGB: 245, 158, 10
  - Ribbon yellow — Paywall “Best value” ribbon
    HEX: #FFE01F  |  RGB: 255, 224, 31
  - Near-black — Text on white capsules
    HEX: #1F1F1F  |  RGB: 31, 31, 31

================================================================================
GLOW, DEPTH, AND MARKETING EFFECTS (not separate logo colors)
================================================================================
- Soft hero glow (marketing hero): radial cyan wash, roughly **rgba(0, 173, 181, 0.18)** — atmosphere only; do not stack competing full-screen glows.
- Card ring: Tailwind `shadow-card` → **0 0 0 1px rgba(0, 173, 181, 0.28)**; often paired with `border-accent/20`.

Full written specs + CSS snippets from our internal brand kit page:

Hero glow
Soft radial spotlight behind the top of marketing heroes — brand cyan at low opacity.

We paint a large ellipse anchored near the top center of the screen. Inside it, cyan (RGB 0, 173, 181) is mixed to about 18% opacity, then fades fully to transparent. That gives depth without a second “layer” of UI chrome.
It reads as atmosphere, not a button: keep headline and logo contrast high (light text on charcoal). Reuse the same gradient on landing-style pages or static promo art so the brand feels consistent.
Avoid stacking multiple full-screen glows or raising opacity too high — it will muddy text and cheapen the look.

CSS reference:
background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 173, 181, 0.18), transparent);

---

Card ring
A 1px “halo” using cyan at low opacity — implemented as Tailwind `shadow-card` plus a subtle border.

`shadow-card` expands to `0 0 0 1px rgba(0, 173, 181, 0.28)`: a single-pixel ring that mimics a soft stroke in brand color. Pair it with `border-accent/20` (or similar) on rounded panels so cards lift off charcoal backgrounds without heavy gray boxes.
Use it for selectable tiles, marketing feature cards, and anywhere you want structure without loud drop shadows. Do not double-up with thick borders and heavy shadow on the same edge — pick one primary edge treatment.
In Figma or video tools, recreate as: outer glow or stroke, cyan #00ADB5, opacity roughly 25–30%, no blur or minimal blur.

CSS reference:
box-shadow: 0 0 0 1px rgba(0, 173, 181, 0.28);
border: 1px solid rgba(0, 173, 181, 0.2); /* border-accent/20 */

================================================================================
PUBLIC IMAGE ASSETS (relative to marketing site root)
================================================================================
- Wordmark PNG: /images/brand/logo-with-text.png
- Icon-only PNG: /images/brand/logo-no-text.png
- App icon set (web mirror): /images/brand/app-icon/ (includes AppIcon-60@3x.png, AppIcon-1024.png, etc.)
- App Store badge SVG: /images/brand/app-store-badge.svg
- Social / link preview image: /og-image.png (root of public on Next site)

Curated export folder in the **git repo** (for designers): `all-brand-assets/` at repo root — mirrors logos, icons, screenshots, link-preview image, and web promo HTML.

Xcode catalog for shipped app icons + in-app logos: `SpaceSwipe/Assets.xcassets/`.

================================================================================
LAYOUT PRIMITIVES (starting points — app)
================================================================================
- Shared card chrome: ~28pt continuous corner radius + padding via `swipelabCardStyle()` in SwipeLabTheme.swift.
- Paywall plan cards: ~24pt continuous corners; cyan stroke when selected (see PaywallPlanCard.swift).

================================================================================
INTERNAL DOCS (repo)
================================================================================
- Brand + UI hub: docs/04-ui-and-design/brand-ui-kit.md
- Detailed colors / gradients: docs/04-ui-and-design/color-scheme.md
- Product flows: docs/03-product/features-and-user-flow.md

================================================================================
YOUR TASK
================================================================================
Follow the palette, typography, tone, and legal/safety rules above. When you output hex or RGB, keep them **exactly** as listed unless the user explicitly asks for variants. Prefer dark charcoal backgrounds with cyan accents and light gray body text. When suggesting App Store or Photos behavior, stay accurate: staged queue, explicit confirmation, estimated storage wording.

End of brand kit context.