Socra Developer
DesignComponentsTokensRules
Human Interface Guidelines
Components

Layout and Organization

Components that structure panes, collections, and hierarchy.

Boxes

Boxes provide token-owned grouping.


Canvas
Token recipe by role.
Pane
Token recipe by role.
Action
Token recipe by role.

Collections

Collections organize repeated objects.


Canvas
Token recipe by role.
Pane
Token recipe by role.
Action
Token recipe by role.

Column Views

Column views expose hierarchy across adjacent panes.


Disclosure Controls

Disclosure reveals optional detail.


Labels

Labels name fields, groups, and status.


Token role
Labels

Primary text carries the decision. Secondary text explains context. Default text belongs to inherited product surfaces.

Lists and Tables

Lists and tables present comparable rows.


  • Tokens

    Single source of truth

  • States

    Every primitive matrix

  • Gate

    CI catches drift

Lockups

Lockups bind icon, title, subtitle, and action.


Canvas
Token recipe by role.
Pane
Token recipe by role.
Action
Token recipe by role.

Split Views

Split views keep navigation and detail visible together.


Tab Views

Tab views switch peer content in place.