PayPal
A global payments platform anchored in a two-blue system — deep navy (#003087) for trust and authority paired with sky blue (#009CDE) for interactive energy — on clean white surfaces. PayPal's visual system is enterprise-trustworthy: generous whitespace, clear information hierarchy for transaction amounts, and a conservative but polished aesthetic that signals financial security. Typography uses PayPal's Sans custom typeface (based on Futura) at clean weights. The checkout experience is PayPal's signature product surface: a white modal with the blue PayPal logo at top, amount displayed prominently, and a single gold-yellow CTA button that never changes.
Color Tokens
1. Visual Theme & Atmosphere
PayPal's design prioritizes trust in every decision. The navy/blue color system communicates financial authority and stability — colors associated with banking rather than tech startups. The checkout modal is deliberately conservative: a clean white surface, clear amount display, and the gold CTA button that has remained visually consistent for years. Merchants and users both need confidence, and consistency is the most powerful trust signal PayPal has.
2. Color System
A disciplined two-blue hierarchy:
- Navy: #003087 — primary brand, logo color, authority; used on major headings and primary buttons
- Sky blue: #009CDE — secondary actions, links, interactive states, gradient partner
- Gold CTA: #FFD140 — the PayPal Pay button, intentionally warm and distinctive from the blue system
- Canvas: White — clean, financial-grade clarity
- Surfaces: Very light blue-gray (#F5F7FA) for panels and alternating rows
- Semantic: Standard green success, red danger — conservative and familiar
3. Typography
PayPal Sans Big (display) and Small (body) — two sizes of a Futura-derived geometric grotesque, purpose-built for financial communication. Clean, neutral, and universally legible. The separation into "big" and "small" variants shows the system thinking behind PayPal's typography investment.
4. Components & Patterns
- Checkout button: Gold background (#FFD140), navy PayPal logo and text, standard card shape
- Transaction row: Amount prominent (large, right-aligned), merchant name left, date below, status pill
- Balance display: Large number typography, account type label below
- Activity feed: Chronological list with merchant avatar, name, amount, +/- indicator
- Send/Request flow: Step-by-step wizard, each step single-focused
- Card inputs: Clean outlined form fields with label floating on focus
5. Spacing & Layout
Dashboard: standard sidebar (220px) + content area. Transaction list: full-width rows, 16px padding. Checkout modal: 480px wide, 24px padding, amount at 32px font size. Marketing: 1200px max, generous section spacing.
6. Motion & Interaction
Payment processing shows a spinner then success checkmark animation. Transaction confirmation plays a subtle green flash. Send money flow has step progress indicator with smooth transitions. Very little decorative motion — trust comes from stability.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for