Design System Overview

This document provides an overview of the Commonplace Design System, starting with high level concepts for how the initial Commonplace Client would look and feel, expressing the overall goals of the system.

Development Targets

The Commonplace Design System will be developed in phases:

• Phase 1: Focus on a "flat" client for conventional laptops and devices with keyboard and mouse
• Phase 2: Expand concepts to touch-based devices like phones and tablets
• Phase 3: Develop immersive 3D environment support for VR/MR/XR headsets

Core Interface Concepts

Collection Navigation and Management

• Users need to navigate between collections and drill down into collections
• Only one collection at a time is the "active Collection"
• The active Collection is always in Spatial mode and takes over the user's full display
  • the User can switch the active Collection into List or Summary modes if desired but spatial mode is the default when making a Collection active.
• Users work with collections and cards in various states
• When the active collection contains other collections, how they are viewed and worked with is limited. Collections linked within the active Collection are shown as follows:

See below for more on collection display modes.

Collection Display Modes

• Summary Mode: Shows a compact representation of the collection with customizable summary information. Useful for dashboards, overviews, and specialized visualizations.
• List Mode: Displays cards in a vertical or horizontal list format with sorting and filtering options. Ideal for browsing, searching, and managing cards in a structured way.
• Spatial Mode: Provides a canvas for organizing cards with visible connections. Cards (and collections) can be freely positioned, resized, and connected graphically. Best for visual thinking and exploring relationships.

Future Extensions

• In List mode, show both cards and collections within the current collection
• In List mode, Enable drill-down into collections and their cards in a hierarchical browser, similar to a Smalltalk class browser or NextStep/MacOS file browser
• In Summary mode, allow collections to draw their own UI with standard chrome that identifies it as a collection in summary mode (potentially visible only on hover)

Navigation and Control Elements

Dock + Action Bar

• Floats near left edge, vertically centred of screen by default, in future we can consider allowing users to move it or hide it.
• Provides controls for navigation (backing out of collections in spatial mode)
• Allows pinning frequently used collections or cards
• Offers creation tools for new collections or cards with various schemas
• Functions as a "shelf" for temporarily storing cards or collections
• Enables drilling down into collections to find/search/browse cards and bring them to the shelf
• Includes "New collection from shelf" command to create collections in the current context

Zoom/Pan/Minimap Control

• Allows quick navigation around large canvases in spatial mode
• Provides quick return to overview or specific parts of a collection
• Uses x/y coordinates for navigation (future 3D will use x/y/z + view direction)

3D Considerations (Future)

• Need to determine mapping between edits made in 3D and 2D representations
• Collections edited in 3D may need to remain in 3D even on 2D devices
• WebGL UI will help support this transition
• Users should have the option to "flatten" back to 2D view if needed

Collection Management

• The Dock functions as a "virtual desktop" switcher between collections
• Provides quick access to "Home" collection, making it Active in Spatial Mode
• The Home Collection serves as the root of all user's Cards and Collections
• A separate System Collection is needed for each server

Layers

The UI is organised into two distinct layers:

Control layer

Contains dock, minimap, other controls that are stable in position no matter what is displayed on the Content Layers

Content layers

Displays the active Collection.