PayPay DESIGN.md

Design System Inspiration of PayPay (ペイペイ)

Overview

Visual Theme & Atmosphere

PayPay is Japan's dominant QR-code mobile wallet — the app that, almost single-handedly, dragged a famously cash-loving country into cashless payments. Its visual language is loud where Japanese fintech is traditionally quiet: a single, screaming PayPay Red (#FF0033) sits at the center of everything, and the entire interface orbits it. Where a legacy Japanese bank app whispers in navy and gray, PayPay shouts in pure, saturated red. That red is the brand; remove it and nothing is left.

The atmosphere is bright, confident, and aggressively friendly. Surfaces are white (#ffffff) and very-light-gray (#f5f5f5); text is near-black (#222222); and the red functions as both the brand mark and the universal "tap here / this is money" signal. The aesthetic is closer to a consumer retail app — think convenience-store energy, point campaigns, lottery-style "あたり" (you won!) moments — than to the austere, trust-through-restraint posture of a private bank. PayPay's thesis is the opposite of restraint: payments should feel fun, rewarding, and instant, and the design celebrates every transaction with motion, sound, and color.

Typography is unapologetically system-native Japanese: Hiragino Kaku Gothic on iOS, Noto Sans / Yu Gothic on Android and web, with rounded, friendly weights for headlines. There is no proprietary typeface — PayPay's identity lives in color and the wordmark, not in custom type. Numerals get heavy weight because balances and point totals are the emotional payload of the app.

What defines PayPay visually is the balance/point hero: a large red or white number, the cheerful payment-complete screen, and the omnipresence of the red round "PayPay" wordmark badge. The brand is mobile-first to the bone — designed for one-handed use at a checkout counter in under two seconds.

Key Characteristics:

• PayPay Red (#FF0033) as the singular brand and primary interactive color — bold, saturated, impossible to miss
• System-native Japanese type stack (Hiragino / Noto Sans JP / Yu Gothic), no proprietary font
• White and light-gray surfaces; near-black text — red carries all the energy
• Rounded, friendly geometry — generous radii (8–24px), pill CTAs, soft cards
• Reward-driven, celebratory UX — payment-complete and point-grant moments are dedicated, animated screens
• Mobile-first at 375px baseline, one-handed checkout-counter ergonomics
• High-contrast, retail-bright aesthetic over fintech austerity

Primary tasks

• Pay at the counter with the QR screen one tap away
• Top up automatically so the balance never runs out at the register
• Send money to a family member from the same app
• Check which point offers are running before choosing where to eat
• Confirm as a shopkeeper that a customer payment landed

Brand Narrative

PayPay launched in October 2018 as a joint venture of SoftBank and Yahoo! Japan (with early technology ties to India's Paytm), into a country where cash still dominated — Japan's cashless ratio lagged far behind its neighbors. PayPay's founding bet was blunt: subsidize adoption aggressively and make paying fun. The now-legendary "100億円あげちゃうキャンペーン" (the ¥10-billion giveaway) of late 2018 — refunding a portion of every payment, with lottery-style full refunds — detonated awareness overnight and made the red PayPay badge ubiquitous at convenience stores, restaurants, and tiny neighborhood shops.

That campaign DNA defines the design. PayPay is not trying to feel like a private bank; it is trying to feel like the most rewarding way to pay. The screaming #FF0033 red, the celebratory payment-complete screen, the falling-coin point animations, the cheerful clerk-like voice — all of it descends from "make paying feel like winning." Where Toss (Korea) earns trust through restraint and Stripe through precision, PayPay earns loyalty through reward and delight.

Today PayPay is the dominant QR wallet in Japan with the largest user base among code-payment apps, now under LY Corporation (the merged LINE × Yahoo Japan entity within the SoftBank group). Its ecosystem spans payments, PayPayポイント, PayPay銀行 (bank), PayPayカード (card), and PayPay証券 (securities) — a super-app, but one whose center of gravity remains the in-store QR tap.

What PayPay refuses: the austere navy seriousness of legacy Japanese banking, the muted minimalism of Western fintech, and any design that makes paying feel like a chore. PayPay occupies the loud, bright, reward-forward end of fintech — closer to retail than to banking, by deliberate design.

Principles

1. One red rules. #FF0033 is the brand, the CTA, and the energy. Never split primary emphasis across multiple accent colors — the single saturated red is the identity.
2. Paying should feel like winning. Every completed payment is celebrated, not merely confirmed. The full-screen red moment and point animations are core, not decoration.
3. Numbers are the hero. Balances, amounts, and points get the largest, heaviest treatment on screen. Money is the emotional payload.
4. System-native for reliability. At a checkout counter, the font must render instantly on any phone. Use the OS Japanese stack; never gate a payment on a webfont.
5. Friendly geometry. Rounded corners, pill CTAs, soft cards. The shape language says approachable, not institutional.
6. Funnel removes friction. When money moves, strip the screen to one amount and one button. Energy lives on home; focus lives in the flow.
7. Reward leads. If there's a point or おトク benefit, surface it prominently — gold accent, enthusiastic copy. The deal is the draw.
8. Cheerful, never cold. The voice is an upbeat shop clerk. Bank-formal tone is reserved only for legal disclosure.

Personas

Personas below are fictional archetypes informed by publicly described Japanese mobile-payment user segments, not individual people.

ゆうき (Yuki), 26, Tokyo. Office worker in Shibuya. Pays for everything with PayPay — convenience store lunch, izakaya splits, the vending machine. Opens the app a dozen times a day and lives for the point campaigns; checks "おトク" offers before deciding where to eat. Expects the QR/pay screen to be one tap from anywhere and the payment-complete animation to confirm in under a second. If a shop doesn't take PayPay, she's mildly annoyed.

田中さん (Mr. Tanaka), 58, Osaka. Runs a small ramen shop. Adopted PayPay during the ¥10-billion campaign because customers asked for it and the merchant QR sticker was free to set up. Uses the merchant side daily to confirm incoming payments; values the clear, loud confirmation sound and the big amount on screen — he needs to verify a payment landed without squinting. Reads Japanese only; trusts the red badge as shorthand for "this works."

あや (Aya), 34, Fukuoka. Working parent. Uses PayPay for groceries, kids' supplies, and 送る (sending money) to family. Relies on auto-charge (自動チャージ) so she never hits an empty balance at the register. Tracks points carefully — they offset real household spending. Wants the transaction history clean and searchable, and the balance always visible the instant she opens the app.

Colors

Primary

• PayPay Red (#FF0033): The brand. Primary CTAs, the wordmark badge, active states, key balances, selection highlights. Every tappable money-action is this red.
• Red Pressed (#E0002E): Darker red for hover/pressed state on red CTAs.
• Red Deep (#CC0029): Strongest red — used sparingly for emphasis on red-on-red layering and gradients.
• Red Tint (#FFEBEF): Very light red wash — informational backgrounds, selected-row tint, subtle brand-tinted surfaces.
• Pure White (#ffffff): Page background, card surfaces, text on red.
• Near Black (#222222): Primary heading and body text. Warm-neutral near-black, never pure #000.

Brand (Logo / Marketing)

• PayPay Red (#FF0033): Official brand red — the wordmark, app icon background, and all marketing key art. The single non-negotiable brand asset.
• White Wordmark: The "PayPay" logotype reverses to white on red backgrounds; red on white otherwise. No third logo color exists.

Semantic

• Success Green (#00B900): Payment success, positive confirmations, "完了" states. (Echoes the LINE-green of the parent LY group ecosystem.)
• Error Red (#E0002E): Errors, destructive actions. Distinguished from brand red by being slightly deeper and paired with an alert icon (brand red alone never means "error").
• Warning Orange (#FF8800): Pending states, expiring-points warnings, attention banners.
• Info Blue (#0088FF): Informational links, neutral system notices, KYC/verification flows.
• Point Gold (#FFB200): PayPayポイント (points) accent — coins, point totals in campaign contexts, "もらえる" moments.

Neutral Scale

• Gray 50 (#f5f5f5): Lightest gray — page section background, grouped-list backdrop.
• Gray 100 (#eeeeee): Card fills on white, disabled surfaces.
• Gray 200 (#e0e0e0): Default border, dividers, input outlines.
• Gray 300 (#cccccc): Strong border, disabled icon fills.
• Gray 400 (#999999): Placeholder text, inactive icons.
• Gray 500 (#767676): Caption text, secondary labels, metadata.
• Gray 700 (#555555): Body text, descriptions.
• Gray 900 (#222222): Headings, strong labels, primary text.

Surface & Borders

• Border Default: #e0e0e0 (gray200). Card borders, input borders, dividers.
• Border Strong: #cccccc (gray300). Emphasized borders, active input outline base.
• Background Float: #ffffff. Tooltips, dropdowns, floating panels.
• Overlay Scrim: rgba(0,0,0,0.5). Modal and bottom-sheet backdrop — neutral black, not red-tinted.

Typography

Font Family

• Primary: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif
• Numerals / Display: Same stack, heavy weights (700) — PayPay leans on Noto Sans JP Bold and system bold for balances and point totals. No proprietary typeface.
• Monospace: "SF Mono", Menlo, Consolas, monospace — rare, used only in developer/merchant dashboards.

Hierarchy

Principles

• System-native by design. PayPay deliberately uses the OS Japanese font so text renders crisply on every device without webfont latency at a checkout counter. Hiragino on iOS, Noto Sans JP / Yu Gothic on Android & web.
• Weight is the hierarchy. With one type family, PayPay separates levels almost entirely through weight (400 body, 700 headings/amounts) and size — not through multiple families or styles.
• Numbers shout. Balances, payment amounts, and point totals are the loudest elements on any screen: 700 weight, large size, often in red or near-black with a ¥ / P (ポイント) unit at a smaller weight.
• Japanese-first, Latin-secondary. Latin numerals and the "PayPay" wordmark coexist inside Japanese text; line-height runs generous (1.5–1.65) to give kanji/kana room to breathe.
• No italics, minimal letter-spacing. Japanese type avoids italics; emphasis comes from weight and color, never slant.

Layout

Spacing System

• Base unit: 8px (4px allowed for tight internal gaps)
• Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px
• Horizontal screen margin: 16px (standard mobile)
• Grouped lists: full-bleed rows with 16px internal padding, gray-50 section backdrop

Grid & Container

• Design baseline: 375px mobile width
• Single-column, mobile-first — no multi-column grid in the app
• Marketing web (paypay.ne.jp): centered content, max-width ~960px, with large hero imagery
• Action grids (home shortcuts): 4-per-row icon grid with labels

Whitespace Philosophy

• Money gets a stage. The balance and payment amounts sit alone with generous margins — they are the hero, never crowded.
• Energetic density. Unlike austere bank apps, PayPay packs the home screen with campaign banners, point promos, and shortcuts — it reads as a lively retail surface, not a sparse vault. Density rises on home/promotions, falls on transactional flows.
• Funnel focus. Payment and charge flows strip everything away — one amount, one big red button. Distraction is removed at the moment money moves.

Border Radius Scale

• Tight (8px): Inputs, badges, small chips
• Standard (12px): Cards, inline buttons
• Comfortable (16px): Hero cards, dialogs, campaign cards
• Large (20–24px): Bottom-sheet top, pill CTAs
• Pill (9999px): Toggles, filter chips, round QR/pay center button

Responsive Behavior

Breakpoints

Touch Targets

• CTAs: 52px tall, full-width with 16px margin
• Bottom nav center pay button: 60–64px circle, raised
• List rows: minimum 48px height
• Number-pad keys: 56–64px for one-handed checkout entry

Collapsing Strategy

• App is mobile-only; the marketing web is responsive and points users to app-store downloads
• Bottom sheet → centered modal on wider screens
• Sticky bottom CTA bar with safe-area insets
• Horizontal-scroll carousels for campaign banners and point offers

Image Behavior

• Merchant / bank logos: 32–40px, consistent sizing in lists
• Campaign key art: full-bleed, responsive, maintains aspect ratio
• QR code: large centered square, high-contrast, with brand-red frame accent

Elevation & Depth

Shadow Philosophy: PayPay's shadows are soft and neutral, with one signature exception — the red-tinted lift under the balance hero and primary red CTAs, which makes the brand red appear to glow. Elevation is gentle; the energy in PayPay comes from color and motion, not deep dramatic depth. The raised circular center "pay" button in the bottom nav uses a stronger neutral shadow to read as physically floating above the bar.

Blur Effects

• Sticky headers apply a light backdrop blur on scroll
• Modal scrims are flat black rgba(0,0,0,0.5), no blur, keeping the celebratory surfaces crisp

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: 0px 1px 4px rgba(0,0,0,0.08)
• shadow.toast: 0px 4px 12px rgba(0,0,0,0.15)
• shadow.dialog: 0px 8px 24px rgba(0,0,0,0.18)

Motion & Easing

Durations:

Easings:

Signature motions.

1. Payment celebration. On a completed payment, the screen fills red, a white checkmark draws and pops with ease-bounce over motion-celebrate, the amount scales up, and — if points were earned — gold coins fall and a "+◯◯ポイント" badge bounces in. This is PayPay's defining animation: paying feels like winning.
2. Balance update. When the balance changes, the old number fades and the new number counts up / slides in over motion-slow with ease-standard. Money is never cross-faded mid-value (looks like a bug).
3. Bottom-sheet presentation. Sheets rise from y+40px with motion-standard / ease-enter, backdrop fades to rgba(0,0,0,0.5). Dismissal uses motion-fast / ease-exit — lighter leaving than entering.
4. Center pay button. Tapping the raised red QR/pay button gives a quick motion-fast press-scale (0.94) before opening the scanner full-screen — a tactile, confident launch.
5. Reduce motion. Under prefers-reduced-motion: reduce, all tokens collapse to motion-instant and the celebration becomes a static red success screen (checkmark + amount, no coins). The app stays joyful in color; just not kinetic.

Components

Note: PayPay publishes no public design-system documentation. The values below are reconstructed from the live PayPay app and paypay.ne.jp marketing surfaces, expressed as a coherent, agent-usable token set in PayPay's idiom. Treat geometry as representative rather than spec-exact.

Buttons

PayPay buttons are pill or large-radius rectangles, full-width on mobile, with the brand red as the default primary. Friendly, tappable, thumb-sized.

Primary (Fill / Red)

• Background: #FF0033
• Text: #ffffff
• Border: none
• Radius: 24px (pill) on CTAs; 12px on inline actions
• Padding: 0 24px
• Font: 16px / 700 / Noto Sans JP
• Height: 52px (full-width mobile CTA)
• Pressed: background #E0002E
• Disabled: background #FFB3C1 (red at reduced saturation), text #ffffff
• Loading: white spinner replaces label, width preserved
• Use: Primary money action — 支払う (Pay), チャージ (Charge), 送る (Send)

Secondary (Outline / Red)

• Background: #ffffff
• Text: #FF0033
• Border: 1.5px solid #FF0033
• Radius: 24px
• Padding: 0 24px
• Font: 16px / 700 / Noto Sans JP
• Height: 52px
• Pressed: background #FFEBEF
• Use: Secondary action paired with a red primary (キャンセル alternatives, 後で)

Neutral (Fill / Gray)

• Background: #f5f5f5
• Text: #555555
• Border: none
• Radius: 24px
• Padding: 0 24px
• Font: 16px / 700 / Noto Sans JP
• Height: 52px
• Use: Low-emphasis / dismiss action (閉じる, 戻る)

Text Button

• Background: transparent
• Text: #FF0033
• Border: none
• Padding: 8px 12px
• Font: 15px / 700 / Noto Sans JP
• Use: Inline tertiary action, "もっと見る", "詳細"

Size scale (height · font · radius): small 36px · 14px / 700 · 18px; medium 44px · 15px / 700 · 22px; large (default CTA) 52px · 16px / 700 · 24px. CTAs are full-width with 16px horizontal screen margin; inline buttons auto-width.

Inputs

PayPay text fields are clean boxed inputs with a red focus state. Amount entry uses an oversized variant.

Box (default)

• Background: #ffffff
• Text: #222222
• Border: 1px solid #e0e0e0
• Radius: 8px
• Padding: 14px 16px
• Font: 16px / 400 / Noto Sans JP
• Placeholder: #999999
• Focus: border 2px #FF0033
• Use: Standard form input

Filled

• Background: #f5f5f5
• Text: #222222
• Border: none
• Radius: 8px
• Padding: 14px 16px
• Font: 16px / 400 / Noto Sans JP
• Focus: background #ffffff + 2px #FF0033 border
• Use: Dense forms, search bars

Amount (Hero)

• Background: transparent
• Text: #222222
• Border: 1px solid #e0e0e0 (bottom only)
• Radius: 0px
• Padding: 0 0 8px
• Font: 36px / 700 / Noto Sans JP, with ¥ prefix at 24px / 700
• Use: Send/charge amount entry — the big-number moment, paired with on-screen number pad

Error

• Background: #ffffff
• Text: #222222
• Border: 2px solid #E0002E
• Radius: 8px
• Padding: 14px 16px
• Helper: error text below in #E0002E, 12px, with alert icon
• Use: Validation failure

PIN entry uses a 4-digit dot field with a randomized on-screen keypad for security; OTP uses 6 separate boxes (48px wide, 56px tall, 8px radius, red active border).

Cards

Standard

• Background: #ffffff
• Border: none
• Radius: 12px
• Padding: 16px
• Shadow: 0px 1px 4px rgba(0,0,0,0.08)
• Use: Transaction, feature, and content cards

Balance Card (Hero)

• Background: #FF0033 (or red gradient linear-gradient(135deg,#FF0033,#E0002E))
• Text: #ffffff
• Border: none
• Radius: 16px
• Padding: 20px
• Shadow: 0px 2px 8px rgba(255,0,51,0.20) (red-tinted lift)
• Use: Wallet balance hero on home — the signature PayPay surface

Campaign / Promo

• Background: #FFEBEF or full-bleed promotional image
• Border: none
• Radius: 16px
• Padding: 20px
• Use: Point campaigns, あげる/もらえる offers — bright, image-forward

Compact (List Item)

• Background: #ffffff
• Border: 1px solid #eeeeee (bottom divider only)
• Radius: 0px
• Padding: 14px 16px
• Use: Transaction history rows, settings list rows

Badges

Fill / Red

• Background: #FF0033
• Text: #ffffff
• Radius: 10px
• Padding: 2px 8px
• Font: 12px / 700 / Noto Sans JP
• Use: "NEW", "限定", primary emphasis

Fill / Gold (Point)

• Background: #FFB200
• Text: #ffffff
• Radius: 10px
• Padding: 2px 8px
• Font: 12px / 700 / Noto Sans JP
• Use: Point amounts, "+100ポイント", reward emphasis

Fill / Green

• Background: #00B900
• Text: #ffffff
• Radius: 10px
• Padding: 2px 8px
• Font: 12px / 700
• Use: 完了 / success state

Weak / Red

• Background: #FFEBEF
• Text: #FF0033
• Radius: 10px
• Padding: 2px 8px
• Font: 12px / 700
• Use: Subtle brand-tinted label

Weak / Gray

• Background: #f5f5f5
• Text: #767676
• Radius: 10px
• Padding: 2px 8px
• Font: 12px / 700
• Use: Neutral metadata badge (category, date)

Tabs

Bottom Tab (Active)

• Background: #ffffff
• Border: 1px solid #eeeeee (top only)
• Active: #FF0033 icon + label
• Inactive: #999999 icon + #767676 label
• Font: 10px / 500 / Noto Sans JP
• Center action: large red circular "支払う" / QR button, raised above the bar
• Use: 5-tab bottom nav — home, points, QR-pay (center), promotions, account

Segmented

• Background: #f5f5f5
• Inactive text: #767676
• Radius: 10px (track), 8px (thumb)
• Padding: 8px 16px
• Active: #ffffff thumb + #FF0033 text + 0px 1px 3px rgba(0,0,0,0.10) shadow
• Font: 14px / 700 / Noto Sans JP
• Use: In-screen section switching

Toasts

Default

• Background: #222222
• Text: #ffffff
• Radius: 8px
• Padding: 12px 16px
• Shadow: 0px 4px 12px rgba(0,0,0,0.15)
• Font: 14px / 500 / Noto Sans JP
• Use: Transient confirmation ("コピーしました"). Payment success is a full dedicated screen, never a toast.

Dialogs

Centered Modal

• Background: #ffffff
• Text: #222222
• Radius: 16px
• Padding: 24px
• Shadow: 0px 8px 24px rgba(0,0,0,0.18)
• Buttons: stacked full-width — red primary on top, gray/text secondary below
• Use: Confirmation prompts, alerts

Bottom Sheet

• Background: #ffffff
• Text: #222222
• Radius: 20px (top corners only)
• Padding: 24px 16px
• Drag handle: 36px × 4px #e0e0e0 pill, centered top
• Shadow: 0px -4px 16px rgba(0,0,0,0.10)
• Use: Selection, picker, payment-method switch — the dominant overlay pattern

Toggles

Default

• Background: #FF0033 (on) / #cccccc (off)
• Radius: 9999px
• Thumb: #ffffff 22px circle, 0px 1px 3px rgba(0,0,0,0.20) shadow
• Use: Boolean settings (通知, 自動チャージ)

Payment-Complete Screen (Signature)

• Full-screen #FF0033 (or red gradient) background
• Centered white checkmark animation, then amount in 36px / 700 white
• Merchant name + timestamp below in white 14px
• Single white button (#ffffff bg, #FF0033 text, 24px radius): "閉じる"
• Optional point-grant animation: gold coins falling + "+◯◯ポイント" badge
• This is PayPay's most recognizable moment — the celebration, not a quiet receipt

Tier 1 sources: https://paypay.ne.jp (live production site, verified via live DOM getComputedStyle); https://about.paypay.ne.jp (PayPay株式会社 corporate site, first-party).

States

Do's and Don'ts

Do

• Use PayPay Red (#FF0033) for the primary money action on every screen — it is the brand and the CTA
• Keep surfaces white / gray-50 and let red carry all the energy
• Use the system Japanese font stack (Hiragino / Noto Sans JP / Yu Gothic) — no webfont required
• Make balances and amounts large and 700 weight — numbers are the emotional payload
• Celebrate payment completion with a dedicated full-screen red moment, not a toast
• Use pill / 24px-radius full-width CTAs for primary actions
• Reserve gold (#FFB200) for points and green (#00B900) for success

Don't

• Don't dilute the red — one saturated brand red, never a palette of competing accents for primary actions
• Don't use brand red (#FF0033) to mean "error"; errors use deeper #E0002E plus an alert icon
• Don't render payment success as a quiet toast or inline checkmark — it is a full screen
• Don't introduce a proprietary or decorative display font; stay system-native for checkout reliability
• Don't crowd the payment/charge flow — at the moment money moves, one amount and one button only
• Don't use pure black (#000) for text; use #222222
• Don't make CTAs square-cornered — PayPay's geometry is rounded and friendly (≥12px, pill for primary)

Voice & Tone

PayPay speaks like an enthusiastic, helpful shop clerk: cheerful, casual-polite Japanese (です・ます with friendly energy), short, and benefit-led. It emphasizes speed ("最短1分"), ease ("かんたん"), and reward ("もらえる", "おトク"). Exclamation is welcome — this is a brand that celebrates. Japanese is the only first-class voice; English is incidental.

Forbidden moves. Don't be cold or bank-formal on consumer surfaces. Don't over-apologize. Don't round monetary amounts on primary surfaces. Don't bury the reward — if there's a point benefit, it leads.

Agent Prompt Guide

Quick Color Reference

• Primary CTA / Brand: PayPay Red (#FF0033)
• CTA Pressed: Red Pressed (#E0002E)
• Background: White (#ffffff)
• Background Surface: Light Gray (#f5f5f5)
• Heading text: Near Black (#222222)
• Body text: Gray (#555555)
• Caption text: Gray (#767676)
• Placeholder: Gray (#999999)
• Border: Gray 200 (#e0e0e0)
• Success: Green (#00B900)
• Error: Deep Red (#E0002E)
• Points accent: Gold (#FFB200)

Example Component Prompts

• "Create a PayPay balance card: red gradient bg (#FF0033 → #E0002E), 16px radius, 20px padding, red-tinted shadow 0px 2px 8px rgba(255,0,51,0.20). Label 'PayPay残高' 13px weight 400 white 80% opacity. Amount '¥12,400' 28px weight 700 white. Noto Sans JP."
• "Build a pay button: #FF0033 bg, white text, 16px weight 700, height 52px, 24px radius (pill), full-width with 16px margin. Pressed #E0002E. Label '支払う'."
• "Design a transaction row: white bg, bottom divider 1px #eeeeee, 14px h-padding, 48px min-height. Left: 36px circle merchant icon + name 14px weight 700 #222222 + date 12px #767676. Right: '-¥1,200' 14px weight 700 #222222."
• "Create the payment-complete screen: full-screen #FF0033 bg, centered white checkmark, amount '¥1,200' 36px weight 700 white, merchant + timestamp 14px white below, white pill button (#ffffff bg, #FF0033 text, 24px radius) '閉じる'."
• "Design a bottom nav: white bg, top border 1px #eeeeee, 5 items. Active #FF0033 icon+label 10px weight 500, inactive #999999. Center raised red circle pay button 60px with neutral shadow."

Iteration Guide

1. Use the system Japanese font stack (Hiragino / Noto Sans JP / Yu Gothic) — never a webfont
2. Primary interactive + brand color is #FF0033; deeper #E0002E for errors/pressed
3. Amounts and points: 700 weight, large size — they are the hero
4. Geometry is rounded: 8px inputs, 12px cards, 16px dialogs, 24px/pill CTAs
5. Surfaces are white / #f5f5f5; text #222222 / #555555, never pure black
6. Payment success is a full red screen, not a toast
7. Gold (#FFB200) = points, green (#00B900) = success, orange (#FF8800) = warning

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #ff0033 measures 3.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-secondary. Text #ff0033 on #ffffff measures 3.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, balance-card. Text #ffffff on #ff0033 measures 3.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-red. Text #ffffff on #ff0033 measures 3.96:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-gold. Text #ffffff on #ffb200 measures 1.81:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-green. Text #ffffff on #00b900 measures 2.64:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-weak. Text #ff0033 on #ffebef measures 3.47:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, segmented. Text #767676 on #f5f5f5 measures 4.17:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.