Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Toss
FintechToss creates a weightless, three-dimensional financial playground where every element floats in serene suspension. The bold Korean typography anchors a dreamy isometric world that makes complex fintech feel approachable and delightful.
Design Identity
Signature Color
Toss Blue
#3182f6
trustworthy Korean fintech innovation - reliable yet approachable digital banking
Visual Identity
Isometric 3D illustrations with translucent, floating geometric shapes in soft blue gradients - creating a distinctive spatial depth that no other fintech uses
Component Style
Perfectly rounded corners with generous padding, soft shadows, and translucent overlays. Everything feels pillowy and suspended - buttons appear to hover rather than sit flat on the surface.
Spacing Philosophy
Expansive breathing room with massive 80px+ vertical gaps between sections, while maintaining intimate 4-6px internal component spacing. Creates a sense of infinite digital space.
Design Principles
- Typography scale jumps dramatically: 16px body to 66px headlines with 700 weight
- Corner radius consistently around 5-6px for subtle softness
- Horizontal padding uses precise fractional values: 1.5px, 4.5px increments
- All backgrounds use opacity overlays rather than solid colors
- 3D elements always cast soft shadows with 0.05-0.1 opacity
Target Audience
Tech-savvy Korean millennials and Gen Z who want banking to feel as intuitive as social media
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 16px | |
| h1 | 66px | 700 | 92.4px | |
| h2 | 50px | 700 | 70px | |
| h3 | 40px | 700 | 52px | |
| p | 32px | 700 | 51.2px | |
| a | 16px | 400 | 16px | |
| button | 12px | 600 | 18px | |
| nav | 16px | 400 | 16px | |
| footer | 16px | 400 | 16px | |
| main | 16px | 400 | 16px |
Color Palette
#001733#dd7d02#ffffff#001d3a#1b64da#e8f3ff#001b37#0c8585#f2f4f6#ffeeee#d22030#f6f7f9
