# Design Spec

## Aesthetic direction

**iOS 26 Liquid Glass meets editorial photography magazine.**

Two influences in tension:

1. **iOS 26 Liquid Glass.** The native OS layer. Translucent surfaces that refract content underneath, specular highlights on glass edges, real depth via blur and saturation boost, content-aware tinting. Controls feel like they're floating just above the photo.
2. **Editorial photography magazine** (think *Apartamento*, *Cereal*, *The Gentlewoman*). The brand layer. A confident editorial serif for style names and marketplace headers. Generous whitespace around hero images. Captions in small caps. Long-scroll narrative pacing on style detail pages. The vibe of a beautifully art-directed object, not an app.

Where these meet: the camera and library screens are pure Liquid Glass — invisible chrome, photo-forward. The marketplace and style-detail screens lean editorial — they're where the brand expresses itself.

## Brand voice

> See yourself the way the studio would see you.

Confident. Slightly mischievous. We know this is a hot take. We're not apologizing for it. Voice rules:

- **Never call AI "AI."** Call it the engine, the studio, the retouch, the model.
- **Never apologize for the bet.** "Honest" and "True to the moment" are *one* end of our spectrum — they're not our default ethical posture.
- **Photographic vocabulary, not tech vocabulary.** "Restage" not "regenerate." "Wardrobe" not "outfit transfer." "Open the shadows" not "enhance lowlights."
- **Two words better than ten.** Style names are 1–2 words. Style taglines are <12 words.

## Color system

Dark mode is the default. The OS is black; the photos are the color.

| Token | Value | Use |
| --- | --- | --- |
| `--onyx` | `#000000` | App background |
| `--charcoal` | `#0E0E10` | Elevated surfaces (cards, sheets) |
| `--graphite` | `#1A1A1D` | Inset surfaces (inputs, code blocks) |
| `--glass-tint` | `rgba(255,255,255,0.08)` | Default glass fill |
| `--glass-stroke` | `rgba(255,255,255,0.18)` | Glass edge highlight |
| `--ink` | `#FFFFFF` | Primary text |
| `--ink-soft` | `rgba(255,255,255,0.70)` | Secondary text |
| `--ink-muted` | `rgba(255,255,255,0.45)` | Tertiary, captions |
| `--amber` | `#FFB661` | Brand warm — sunset on glass |
| `--peach` | `#FF7E5F` | Brand mid |
| `--rose` | `#FE4A8B` | Brand cool-warm |
| `--cyan` | `#5EE7FF` | AI accent — "the model thinking" |
| `--violet` | `#B57BFF` | AI accent — "the model deciding" |

**Brand gradient** (used sparingly — shutter glow, marketplace hero, "Make Active" CTA): `linear-gradient(135deg, #FFB661 0%, #FF7E5F 45%, #FE4A8B 100%)`.

**AI gradient** (used at the *moment of transform* only — the shimmer during processing, the cyan stroke around the active style chip): `linear-gradient(135deg, #5EE7FF 0%, #B57BFF 100%)`.

These two gradients **never appear on the same screen at the same scale.** Brand gradient is for warmth and intent; AI gradient is for the magic moment. Mixing them muddies both.

## Typography

| Role | Family | Notes |
| --- | --- | --- |
| Editorial display | **Fraunces** (variable) | High optical size for headlines, low for captions. Soft, characterful, not a tech serif. |
| UI / body | `-apple-system`, `"SF Pro Text"`, `"SF Pro Display"` | Authentic iOS feel. |
| Code / prompt | **JetBrains Mono** | Used only when showing the raw prompt of a style. |

Type rules:

- Style names are **always** set in Fraunces. Italic when next to a sample image. Roman when in a list.
- System UI text (buttons, settings, navigation) is **always** SF.
- All-caps treatments use letter-spacing 0.18em and SF Pro Display semibold — used for category eyebrows ("EDITORIAL · AGGRESSIVE"), nothing else.

## Motion language

iOS 26 motion is anchored in **spring physics, not eased curves.** Three signature moments:

1. **Shutter press → transform reveal.** The captured frame stays in place; an AI-gradient shimmer rolls across it diagonally over 1500ms (the mocked API delay); the after image cross-dissolves in underneath, then a drag handle slides up from the bottom. Total: ~1.8s. This is the most important motion in the app.
2. **Style chip switch.** Tap the chip at the top of the viewfinder; the chip's cyan stroke dims, the new style name fades up from below the chip line height with a 60ms stagger per letter. <300ms.
3. **Marketplace card hover** (or long-press on iOS). The before image cross-fades to the after image with a 200ms diagonal wipe. Releasing snaps back.

Reduced motion: shimmer becomes a fade; the cross-fades become instant cuts; the stagger collapses to a single fade.

## Spatial composition

- **Camera and library:** edge-to-edge content, zero chrome inside the safe area. Controls float on Liquid Glass.
- **Marketplace:** asymmetric editorial grid. The featured style breaks the grid; the others sit in a 2-column scroll below. Don't be afraid of negative space.
- **Style detail:** long-scroll narrative. Hero image full-bleed at the top; the style name and tagline overlay the image lower-left in Fraunces; before/after pairs stack vertically with generous breathing room (96px between pairs); the prompt and metadata sit at the bottom in a monospace card.
- **Settings:** centered single column, max-width 560px on iPad. The kind of settings screen that feels expensive.

## Liquid Glass — the recipe

The single most important visual detail. A canonical glass surface is three layers:

```css
.glass {
  /* 1. Translucent fill — content shows through */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);

  /* 2. Backdrop blur — content underneath blurs and saturates */
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);

  /* 3. Edge highlight — 1px gradient stroke, brighter on top */
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.glass::after {
  /* Specular highlight on the top edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.06));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
```

The blur radius scales with elevation: **16px** for chips, **32px** for sheets, **48px** for full-screen modals.

## Imagery & sample photos

Mockups use Unsplash photos rendered at two states: a "before" with CSS filters dialed slightly down (`saturate(0.88) contrast(0.94) brightness(0.96)`) and an "after" with filters dialed up (`saturate(1.12) contrast(1.08) brightness(1.02)` and a subtle warm tint). For aggressive styles (Restage, Dreamscape) the "after" uses a visibly different photo entirely — that's the bet.

## Accessibility

- All interactive glass surfaces have a solid-fill `prefers-contrast: more` fallback (`rgba(0,0,0,0.85)` with `--glass-stroke` upgraded to `rgba(255,255,255,0.4)`).
- All animations respect `prefers-reduced-motion`.
- Hit targets are minimum 44×44px.
- Style names in the marketplace are real text, not baked into images, so they're screen-reader-readable.

## What this design is *not*

- Not a "purple gradient on white" SaaS dashboard.
- Not a glossy gen-AI marketing page with floating orbs.
- Not Material Design with a few blurs sprinkled on.
- Not afraid of black backgrounds.

It is a camera. The photo is the hero. Everything else gets out of the way until you ask it to step forward.