Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Zoho
SaaSZoho presents a humanized business software aesthetic that feels approachable yet professional. The brand uses a distinctive red accent against clean whites and grays, with custom Puvi typography that softens the typically sterile B2B software experience. Illustrated characters and generous whitespace create an inviting, human-centered workspace rather than intimidating enterprise software.
Design Identity
Signature Color
Zoho Red
#e42527
energetic business confidence - warm and approachable rather than corporate cold
Visual Identity
Hand-drawn style illustrations of diverse people working together, positioned prominently in hero sections with abundant breathing room and soft color palettes that feel more like a creative agency than traditional enterprise software
Component Style
Soft-cornered buttons with subtle shadows and gentle hover states. Cards have minimal borders with plenty of internal padding. Everything feels touchable and human-scale rather than sharp or geometric - like friendly business tools rather than technical instruments.
Spacing Philosophy
Generous vertical rhythm with large gaps between sections creates a magazine-like reading experience. Dense information is broken into digestible chunks with ample whitespace, making complex software suites feel approachable and unintimidating.
Design Principles
- Red accents used sparingly for primary actions only
- Custom Puvi typography creates warmth over standard sans-serifs
- Illustrated humans always present to maintain human connection
- Generous line-height (1.5x) for enhanced readability
- Soft corner radius never exceeds 6px for friendly geometry
Target Audience
Small to medium business owners and teams who want powerful software that doesn't feel intimidating - entrepreneurs and growing companies who value both capability and approachability
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 | 17px | 400 | 25.5px | |
| h1 | 54px | 400 | 64.8px | |
| h2 | 60px | 400 | 75px | |
| h3 | 30px | 400 | 39px | |
| h4 | 18px | 400 | 25.2px | |
| h5 | 16px | 400 | 25.6px | |
| p | 14px | 400 | 22.4px | |
| a | 14px | 400 | 19.6px | |
| button | 12px | 400 | 18px | |
| input | 17px | 400 | normal |
Color Palette
#878787#0047ff#010101#f3f5f9#dfdfdf#0060b4#f3f3f3#056cb8#262626#333333#e42527#f8f9fb
