Skip to content

.impeccable.md

Latest commit

 

History

History
34 lines (27 loc) · 2.24 KB

.impeccable.md

File metadata and controls

34 lines (27 loc) · 2.24 KB

Design Context

Users

Argentine savers and investors comparing financial products (digital wallets, money market funds, fixed deposits, LECAPs, sovereign bonds). They visit to quickly find the best yield for their money. Context: mobile-first, often checking on-the-go. Range from casual savers to semi-professional investors.

Brand Personality

Friendly, Simple, Clear — like a knowledgeable friend who explains finance without jargon. The interface should feel approachable and trustworthy, never intimidating or overly technical.

Emotional goals: confidence in decision-making, clarity in comparison, ease of use.

Aesthetic Direction

  • Visual tone: Clean fintech — inspired by Wise/Revolut. Generous whitespace, clear hierarchy, smooth interactions.
  • Theme: Light and dark mode, both well-supported. DM Sans as primary typeface.
  • Layout: Narrow content column (780px), card-based, data-dense but not overwhelming.
  • Color: Blue accent (#2563eb), green for positive yields, red for negative/limits. Semantic color usage throughout.
  • Anti-references: Bloomberg density, cluttered banking dashboards, generic Bootstrap financial sites.

Design Principles

  1. Data first: Every pixel serves the comparison. Strip away decoration that doesn't help users decide.
  2. Scannable hierarchy: Users should find what they need in under 3 seconds. Bold numbers, clear labels, consistent patterns.
  3. Trustworthy simplicity: Clean enough for a first-time saver, complete enough for a daily checker. No dark patterns, no hype.
  4. Mobile-native: Designed for phones first. Touch targets, readable text, horizontal scroll only when unavoidable (tables).
  5. Consistent polish: Same level of care across every section. No rough edges, no orphaned states.

Quality Bar

Flagship — every detail matters. Pixel-perfect alignment, smooth transitions, consistent interaction states. This is a shipped product with real users.

Design Tokens (existing)

  • Font: DM Sans (variable weight), SF Mono/JetBrains Mono for numbers
  • Radius: 12px (cards), 8px (buttons/inputs), 6px (small elements)
  • Shadows: 3-tier system (sm, default, lg)
  • Spacing: organic but generally 4px-based increments
  • Max-width: 780px
  • Transitions: 0.15s default