Interface Guidelines
Normative intent, hierarchy, behavior, accessibility, feedback, motion, and content rules.
Socra
Interface Guidelines
One normative design language, implemented natively by each rendering platform.
2
Guidelines
layers
21
Web
packages
112
Evidence
live pages
100
Built
ready
74
Tokens
semantic
Guidelines
Guidelines define intent and behavior upstream. They are not tied to React, MUI, the DOM, CSS, or any other renderer. Platform catalogs are the live evidence that a renderer implements them correctly.
Design Tokens
Renderer-agnostic semantic color, type, structure, motion, and depth relationships.
@socra/theme
Web Renderer
The browser implementation is owned by purpose-family packages. Components keep plain names—Dialog, Button, Sidebar—while the package boundary makes renderer ownership explicit.
Actions
Buttons, icon actions, links, and compact action affordances.
@socra/web-action
Application Layout
Browser application shells, panes, and responsive working geometry.
@socra/web-layout
Dialogs
Focused modal tasks, confirmations, creation, and full-screen takeovers.
@socra/web-dialog
Data Display
Identity, status, metrics, badges, and compact semantic display.
@socra/web-display
Icons
Semantic browser glyphs, icon buttons, and the generated icon registry.
@socra/web-icon
Text
Semantic browser typography with renderer-owned hierarchy and tone.
@socra/web-text
Charts
Quantitative browser displays with renderer-owned scales, marks, and themes.
@socra/web-chart
Graphs
Browser graph and DAG scenes with renderer-owned layout and interaction.
@socra/web-graph
Feedback
Alerts, progress, loading, empty, error, and recovery states.
@socra/web-feedback
Fields
Closed, labelled value controls and form behavior.
@socra/web-field
Headers
Persistent browser page and application header behavior.
@socra/web-header
Inbox
Message and thread composition surfaces.
@socra/web-inbox
Landing
Marketing-site sections, artifacts, navigation, and content rhythms.
@socra/web-landing
Lists
Purposeful collections, selection rows, and paginated rails.
@socra/web-list
Menus
Anchored action menus, picker menus, and account controls.
@socra/web-menu
Navigation
Tabs, breadcrumbs, pagination, destinations, and navigation rows.
@socra/web-navigation
Trees
Hierarchical browser navigation with renderer-owned disclosure and selection.
@socra/web-tree
Overlays
Tooltips, drawers, sheets, backdrops, and anchored transient surfaces.
@socra/web-overlay
Sidebars
Persistent navigation rails, switchers, and account placement.
@socra/web-sidebar
Surfaces
Cards, disclosure, content panes, details, and semantic containment.
@socra/web-surface
Tables
Structured tabular data with renderer-owned interaction and density.
@socra/web-table