brand-visual-language

# Brand Visual Language Visual shape communicates personality. A rounded corner says something different to the user than a sharp one — and that message arrives before they read a single word. The shapes in typography, border-radius, and iconography should tell a consistent story. ## Shape Language | Shape | Tone | Associated with | |---|---|---| | **Rounded, pill-shaped** | Friendly, approachable, playful, modern | Consumer apps, health, kids, lifestyle, social | | **Softly rounded (8–12px)** | Professional, warm, accessible | SaaS, productivity, general B2B | | **Lightly rounded (2–4px)** | Precise, structured, efficient | Enterprise tools, finance, data platforms | | **Sharp / no radius** | Technical, serious, authoritative | Developer tools, security, industrial | Every component — cards, inputs, modals, badges — should follow the same radius logic. ## Radius for Large Surfaces The perceived "roundedness" of an element changes with its scale. A radius that looks soft on a button may look sharp on a large container. - **Large Cards & Modals:** Typically use a larger radius than buttons (e.g., if buttons are 4px, large cards might be 8px or 12px) to maintain a consistent visual tone. - **Wells and Background Sections:** For large background areas or "wells," a smaller radius (2px–8px) is often used to provide structure and define the region without making it feel like a "floating" component. This keeps the focus on the content within, rather than the container itself...