Affirm — Buy now, pay over time

# Build brief — an original mobile app in the taste of Affirm

> Reference: https://apps.apple.com/us/app/affirm-buy-now-pay-over-time/id967040652 · UIDiscovery: https://uidiscovery.com/sites/ios-affirm · captured 2026-09-23

## 1. Goal
Build an original mobile app for **[the user's brand]** that feels as considered as Affirm — same structure, rhythm and polish, entirely new identity and content. Stack: SwiftUI, React Native/Expo, or a mobile-first web app.

## 2. Originality rules
- Build an ORIGINAL design for the user's own brand in the same *taste* as Affirm: structure, rhythm, hierarchy, palette mood and type pairing.
- Never reuse Affirm's logo, name, product imagery, illustrations, icons, screenshots or copy. Write new copy for the user's product.
- If the user hasn't said what their product is, ask first (or use clearly marked placeholders like [Brand], [Product], [Audience]).
- Reference screenshots are for looking at, not for embedding or tracing.

## 3. The taste, in short
- Affirm is a Shopping iOS app; 180 screens captured.
- Screens are captured from the app itself.
- Palette and fonts are NOT measured for iOS references — sample them from the screenshots.

## 4. Screens

Every screen needs: Status bar + navigation; Primary content; Primary action / tab bar; Empty and loading states.

1. [Pay over time introduction](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0000-824cae7ad5b3.webp) — A navy welcome slide says Pay off your plans and mentions AutoPay and purchase management; it offers US location selection, Log in and Explore without signing…
2. [Take Affirm everywhere](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0001-0372224b52fe.webp) — The next navy slide shows a payment card illustration and says the service can be used at millions of stores, with the same location and entry controls.
3. [Open secure account sign-in](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0002-5d9cdcd0dc4c.webp) — A browser sheet on affirm.com asks for a mobile number, explains SMS verification and offers account creation or passkey sign-in.
4. [Begin account creation](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0003-f04da4d2c959.webp) — The account form explains that it needs basic information and shows a mobile-number field with a change-number link.
5. [Review a populated phone field](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0004-6841ba4e42c2.webp) — The account form shows a populated mobile-number field, SMS verification explanation and linked terms and privacy information; the number is not repeated.
6. [Show account processing state](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0005-5942f3a83d82.webp) — A modal dims the account page behind a spinner and a message that information is being processed.
7. [Enter a verification code](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0006-064349948845.webp) — A modal says a text was sent and presents a six-digit code entry area plus a route to request another code; the code value is not transcribed.
8. [Continue after code entry](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0007-e17052342e1d.webp) — The verification modal shows a populated code field and a request-another-code link; the entered code is omitted.
9. [Explain an identity check](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0008-60f10823cfd5.webp) — The account flow requests the last four digits of a Social Security number and explains that this is an extra account-security measure.
10. [Show a masked identity field](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0009-4afed182da2b.webp) — The identity form shows a completed field with its value concealed and a Continue control.
11. [Create an app passcode](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0010-7f255af4b40c.webp) — A minimal screen asks the person to create a passcode, with four progress dots and an explanation that it unlocks the app.
12. [Show passcode progress](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0011-a35b2eb252e9.webp) — Three of four passcode dots are colored while the same unlock explanation remains in place.
…and 168 more at https://uidiscovery.com/sites/ios-affirm.

## 5. Design system
- Colour: not measured. The listing hints at `#f8c868` (probably from the icon) — a hint only. Sample background, text, accent and surface from the screenshots, then check contrast.
- Type: SF Pro natively (Dynamic Type: Large Title 34, Title 22–28, Body 17, Footnote 13); on the web use Inter or system-ui at the same sizes.
- Layout: 16–20pt side margins, 44pt minimum tap targets, safe areas, tab bar or navigation stack as seen in the screens; cards with 12–20pt radii are typical — confirm in the screenshots.

## 6. Imagery plan

iOS references show the product UI itself: build screens in code. What you still need to source is the content imagery inside them (covers, thumbnails, onboarding art).

### Slot 1 · All 12 screens → product UI
- iOS screen: the visual is the app UI itself; any photos/illustrations inside it are content. Count: one consistent treatment across these sections. Aspect: 9:16 (portrait, phone). Look first: [ref 1](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0000-824cae7ad5b3.webp) [ref 2](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0001-0372224b52fe.webp) [ref 3](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0002-5d9cdcd0dc4c.webp) [ref 4](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0003-f04da4d2c959.webp)
- Build every screen in code. Don't reproduce App Store marketing frames or the app's own artwork.

### Slot 2 · In-app content imagery (covers, thumbnails, onboarding art) → photography (uncertain)
- Shopping apps often use photography for content — not measured; check the screenshots. Count: one consistent style across all content. Aspect: 1:1 thumbnails, 4:5 covers. Look first: [ref 1](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0000-824cae7ad5b3.webp) [ref 2](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0001-0372224b52fe.webp) [ref 3](https://uidiscovery.com/media/captures/ios-affirm/aug-2026/0002-5d9cdcd0dc4c.webp)
- **Stock** — “product flat lay neutral background”: [Unsplash](https://unsplash.com/s/photos/product-flat-lay-neutral-background?orientation=landscape) · [Pexels](https://www.pexels.com/search/product%20flat%20lay%20neutral%20background/?orientation=landscape) · [Pixabay](https://pixabay.com/images/search/product%20flat%20lay%20neutral%20background/?orientation=horizontal)
- **Generate** — `Photograph: product flat lay neutral background. Composition: centred subject with even space around it. Lighting: soft natural daylight, airy and high-key. Warm colour grade that sits on colours sampled from the reference screenshots (the listing hints at #f8c868). Photorealistic, natural textures, shallow depth of field, 35mm lens. Aspect ratio 16:10. No text, no letters, no logos, no watermarks, no brand marks or trademarked products, no recognisable real people.`

- **Licences:** Unsplash and Pexels images are free for commercial use under their own licences; Pixabay under the Pixabay Content License. Check each image's page before use, credit the photographer when asked (good practice anyway), and skip images showing logos, trademarks, branded products or identifiable people without a release.
- **AI generation:** the prompts work with any image model (GPT Image, Imagen, Flux, Midjourney, Firefly, SDXL…) — check its commercial-use terms. Never put the reference brand's name or “in the style of <brand>” in a prompt.
- **Never** download, trace or re-host the reference's own images, illustrations, product shots or logos.

## 7. Build steps
1. Confirm brand, product, audience and the primary action with the user.
2. Pick the stack and define colour/type tokens sampled from the screenshots.
3. Build the navigation shell first, then each screen, with each reference screenshot open.
4. Write original copy for every slot — match length and tone, never the words.
5. Source every image via the imagery plan (stock or generated); compress it and record credits.
6. Run the checklist at 390 / 768 / 1440px and fix what fails.

## 8. Acceptance checklist
- [ ] Responsive at 390px, 768px and 1440px — no horizontal scroll, tap targets ≥ 44px on mobile.
- [ ] Colour contrast WCAG AA: 4.5:1 body text, 3:1 large text and UI; visible focus states; full keyboard navigation.
- [ ] Semantic HTML: one <h1>, ordered headings, landmarks (header/nav/main/footer), labelled form fields, alt text on meaningful images.
- [ ] Performance: modern image formats with width/height set, lazy-load below the fold, ≤ 2 font families with font-display: swap, LCP < 2.5s.
- [ ] prefers-reduced-motion respected; animations under ~300ms and never blocking content.
- [ ] Originality: no copied logos, images, illustrations or copy from the reference; every image licensed or generated; credits recorded.

## 9. If you use Next.js + Tailwind
Mobile web: App Router + Tailwind, `viewport-fit=cover` with safe-area insets, a fixed bottom tab bar, components designed at 390px first.

---
More: tokens https://uidiscovery.com/api/v1/sites/ios-affirm/tokens · kit https://uidiscovery.com/api/v1/sites/ios-affirm/kit · MCP `get_design_brief({ slug: "ios-affirm" })`, `get_image_plan({ slug: "ios-affirm" })`. Cite the reference as https://uidiscovery.com/sites/ios-affirm.