Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Square
FintechSquare embraces a sophisticated cinematic aesthetic with warm cream backgrounds and striking photography that creates an intimate, neighborhood-focused atmosphere. The typography mixes their proprietary Square Sans with the bold, blocky Exact Block serif, establishing a confident yet approachable voice that speaks to ambitious local business owners.
Design Identity
Signature Color
Square Business Blue
#006aff
trustworthy commerce enablement - the reliable technology backbone that powers local business success
Visual Identity
Photographic hero sections with real street scenes and businesses, overlaid with large serif headlines that feel both editorial and aspirational - like a business magazine cover come to life.
Component Style
Softly rounded buttons with 5px border radius feel approachable yet professional. Clean pill-shaped primary actions use generous padding, while maintaining the warm, human-centered aesthetic through subtle shadows and cream-toned backgrounds.
Spacing Philosophy
Generous breathing room around hero content creates focus and gravitas, while the street photography provides natural depth. Typography is given ample line-height (28px on 16px text) for comfortable reading over photographic backgrounds.
Design Principles
- Typography mixing: Sans for UI, Exact Block serif for headlines creates editorial authority
- Border radius consistently uses 5px for subtle friendliness without being overly casual
- Button text uses Cash Sans at 18px/500 weight for clear hierarchy
- Photography always features real businesses and street scenes, never stock imagery
- Cream backgrounds (#f7f6f5) provide warmth while maintaining professionalism
Target Audience
Ambitious small business owners and entrepreneurs who see themselves as community pillars - from corner shop owners to local restaurant chains ready to scale
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 | 24px | |
| h1 | 64px | 400 | 0px | |
| h2 | 40px | 400 | 45px | |
| h4 | 36px | 400 | 46px | |
| h6 | 16px | 500 | 28px | |
| p | 16px | 400 | 28px | |
| a | 16px | 500 | 24px | |
| button | 18px | 500 | 27px | |
| input | 24px | 500 | 30.58px | |
| nav | 16px | 400 | 24px |
Color Palette
#006aff#000000#f2f2f2#bbbbbb#cccccc#707070#ffffff#f7f6f5#333333#4a95ff#808080#1f1f1f
