Visual Signifiers
Design elements that communicate purpose or meaning through appearance. Visual signifiers help users quickly understand the nature and function of interface elements through consistent shape conventions.
Shape Reference
Each shape type carries semantic meaning that helps users quickly categorize and understand the content they represent.
| Shape | Type | Examples | Visual |
|---|---|---|---|
| Rounded squares | Collections Represents collections of related items or organizational units | Groups, Teams | |
| Circles | Items Represents individual entities or standalone items | Applications, Users, Products | |
| Hexagons | Components Represents modular parts or technical components | Individual parts, components, services, blocks | |
| Pills | Tags Represents categorization or descriptive metadata | Metadata, labels | Tag |
| Small Circles | Annotations Represents status indicators or notification counts | Total Messages, Online Status | 3 |
Examples
Here are practical examples of how each visual signifier is implemented in real components.
Rounded squares
Collections - Represents collections of related items or organizational units
Team Card
Design Team
12 members
Project Group
Web Platform
5 projects
Circles
Items - Represents individual entities or standalone items
User Avatar
JD
John Doe
Product Designer
App Icon
Dashboard App
Analytics
Hexagons
Components - Represents modular parts or technical components
Service Block
API Service
Authentication
Component Block
Card Component
UI Block
Tag
Pills
Tags - Represents categorization or descriptive metadata
Category Tags
React
TypeScript
UI
Status Labels
Active
Pending
Inactive
3
Small Circles
Annotations - Represents status indicators or notification counts
Notification Badge
12
Messages
12 unread
Online Status
AM
Alex Morgan
Online