box-manifest-android/docs/design/DESKTOP_DESIGN_REFERENCE.md

Desktop Design Reference

Status: canonical visual specification for the Box Manifest web client.

Reference baseline

Box Manifest uses Anytype Desktop as its single primary web design reference. The baseline is frozen so that design decisions can be compared against a stable implementation instead of a changing product or a general impression.

Field	Baseline
Product	Anytype Desktop
Repository	anyproto/anytype-ts
Release	v0.56.8-beta
Commit	2b71bd44da8b7e20a689585bceef5f1e3251cf72
Release date	2026-08-26

Reference links:

• Pinned release
• Pinned source tree
• Design variables
• Geometry constants

Attio, Linear, Airtable, Outline, and other products are not secondary visual references. They may help explain a product problem, but they must not be used to select styling. If the Anytype reference does not cover a Box Manifest workflow, the new design must be documented here as a Box Manifest extension.

Decision rule

Match the pinned Anytype behavior and styling unless Box Manifest has a specific functional or cross-platform reason to differ. Every deliberate deviation must appear in the deviation table below before it is implemented.

Do not introduce styling solely because it is conventional in admin dashboards. In particular, avoid decorative cards, persistent borders, gratuitous headings, colored gradients, arbitrary shadows, and multiple competing accent colors.

Source-backed tokens

These values were read from the pinned source. They are the starting point for web design tokens rather than approximate values sampled from marketing images.

Typography

Anytype uses Inter for interface text.

Token	Size	Line height	Tracking	Weight
Very small	11px	18px	0.2px	400–500
Small	12px	18px	0	400–500
Common	14px	22px	-0.12px	400–600
Paragraph	16px	24px	-0.2px	400–600
Header 3	18px	26px	-0.28px	700
Header 2	22px	28px	-0.48px	700
Header 1	28px	32px	-0.56px	700
Title	36px	40px	-0.64px	700

Rules:

• Use 14px/22px for ordinary controls and hierarchy rows.
• Use 12px/18px for metadata, section labels, and keyboard hints.
• Use 16px/24px for prominent labels and explanatory copy.
• A workspace heading is 28px, not a marketing-page hero heading.
• Do not use weights between the available Inter weights merely to create hierarchy; use size, spacing, and primary/secondary text colors first.

Light palette

Role	Value
Primary text	#252525
Secondary text	#828282
Tertiary text	#bfbfbf
Primary background	#ffffff
Primary shape	#e3e3e3
Secondary shape	#ebebeb
Tertiary shape	#f2f2f2
Solid subtle surface	#f7f7f7
Medium hover	rgba(0, 0, 0, 0.05)
Strong hover	rgba(0, 0, 0, 0.11)
Control accent	#252525
System accent	#377aff
Selection	rgba(55, 122, 255, 0.25)
Destructive	#fb592c
Destructive surface	#fee7e0

Dark palette

Role	Value
Primary text	#e1e1e1
Secondary text	#a3a3a3
Tertiary text	#5c5c5c
Primary background	#171717
Primary shape	#313131
Secondary shape	#292929
Tertiary shape	#232323
Solid subtle surface	#1e1e1e
Medium hover	rgba(255, 255, 255, 0.05)
Strong hover	rgba(255, 255, 255, 0.11)
Control accent	#d4d4d4
Selection	rgba(55, 122, 255, 0.25)
Destructive surface	#3b251e

Geometry

Element	Reference geometry
Application header	52px high
Primary left sidebar	284px default; 72–480px allowed
Secondary/right panel	336px default; 240–480px allowed
Main content/editor width	704px where constrained
Standard button	40px high, 20px radius, 16px horizontal padding
Button variants	48/24, 36/18, 32/16, 28/14 height/radius
Standard input	40px high, 20px radius, 16px horizontal padding
Compact input	28px high, 14px radius
Popup	24px radius, 0 2px 28px rgba(0,0,0,.2)
Menu	12px radius, 8px vertical interior padding
Menu item	8px radius, 4px × 16px padding
Menu item with description	56px high with 40px icon
Search popup	684px × 706px, max-height viewport - 48px
Regular list row	52px high
Compact inline list row	28px high
Large object icon	40px square, 10px radius
Sidebar section	12px radius

Motion

Interaction	Reference
Common transition	150ms
Menu, popup, sidebar	200ms
Standard easing	cubic-bezier(0.22, 1, 0.36, 1)
Sidebar easing	cubic-bezier(0.2, 0, 0, 1)
Popup entrance	opacity plus scale from 0.95

Motion must communicate state or spatial origin. Avoid decorative perpetual motion. Honor prefers-reduced-motion by removing transforms and shortening nonessential transitions.

Reference fixtures

The pinned repository includes Storybook fixtures that define the exact visual states to compare against. These source fixtures are the reproducible visual reference; a screenshot used during review must name the fixture and commit.

Box Manifest concern	Anytype fixture/source
Application header	component/header/main/object.stories.tsx
Sidebar shell	component/sidebar/page/widget.scss and sidebar stories
Object list	component/block/dataview/view/list.stories.tsx
Regular object row	component/block/dataview/view/list/row.stories.tsx
Data grid	component/block/dataview/view/grid.stories.tsx
Multi-selection controls	component/block/dataview/selection.stories.tsx
Search	component/popup/search.stories.tsx
Object menu	component/menu/object.stories.tsx
Context menu	component/menu/object/context.stories.tsx
Buttons	component/form/button.stories.tsx
Inputs	component/form/input.stories.tsx
Select controls	component/form/select.stories.tsx
Confirmation	component/popup/confirm.stories.tsx
Import page	component/page/main/import.stories.tsx
Empty results	component/util/emptySearch.stories.tsx
Toast feedback	component/toast.scss

Screenshots are review artifacts, not design authority by themselves. Capture light and dark versions at the reference commit and label each image with its fixture name. Do not compare against an unlabeled image search result or a newer Anytype build.

Box Manifest screen mapping

Application shell

Use the Anytype left sidebar plus 52px common header. The sidebar holds only workspace-level navigation. It must not duplicate the inventory hierarchy, which belongs in the main workspace.

Box Manifest extensions:

• Inventory and Import are the only current primary navigation entries.
• The node details inspector uses the 336px secondary-panel geometry.
• The sidebar may collapse responsively; it is not duplicated above content.

Inventory hierarchy

Use the regular 52px Anytype list rhythm, 14px primary names, 12px secondary metadata, subtle 5% hover surface, and blue system selection for explicit multi-selection. Expansion is an interaction required by Box Manifest and is rendered using the reference 20px chevrons and 16px depth increments.

The current-node focus and multi-selection are distinct states:

• Current node opens the inspector and uses a subtle neutral focus surface.
• Checked nodes use the system-selection color and expose the selection bar.
• Hover must not be visually stronger than either selected state.

Node details

Use the Anytype secondary sidebar, not a dashboard card. Properties are simple rows with subdued labels. Editing can occur inline. Destructive actions live at the end of the action group and use the system destructive color.

Search

Desktop search follows the Anytype 684px centered search popup:

• 54px search input row
• 18px search icon
• Results with a bold name and 12px hierarchy context
• 8px result radius and 12px inter-element gap
• Empty state from the pinned empty-search fixture
• Keyboard navigation and Ctrl/Command+K

Search is not a permanently expanded toolbar field in the final design.

Quick add

Use the Anytype popup composition and controls. The text input receives focus on open. Delimiter detection reveals the multi-add option without changing the default single-add behavior. Quantity disappears when multi-add is selected.

Move

Use a common popup containing a compact, expandable hierarchy. Destination selection follows an Anytype menu/radio treatment. Child-handling options are visually subordinate to the destination because they are an advanced semantic choice, not a peer navigation task.

Multi-selection

Use Anytype blue system selection, not a permanent checkbox column that makes the hierarchy resemble a settings form. Check controls appear on row hover or after selection mode begins. Bulk actions are presented in one contextual selection bar and disappear when selection is cleared.

Import

Use the Anytype main import-page composition. Input and preview are sequential states on narrow screens and may be adjacent on wide screens. Preview is a hierarchy, never normalized JSON text. The destructive/committing step uses a clear primary action and states explicitly that preview has not changed data.

Label preview

Anytype does not provide the physical-label workflow. This is a documented Box Manifest extension. Its surrounding popup, buttons, loading treatment, and error states still use the reference system. The label artwork itself remains black on white so printing is deterministic in both themes.

Responsive rules

Anytype Desktop is the desktop reference, but the browser must remain usable at mobile widths:

• At 760px and below, hide the workspace sidebar.
• Present the hierarchy as the primary page.
• Present node details as a separate full-width state, not appended below a long hierarchy.
• Present dialogs as bottom sheets with the same content hierarchy used by the Android client.
• Maintain at least 44px pointer targets where touch is expected even when the Anytype desktop fixture uses a smaller control.

Deliberate deviations

Deviation	Reason
Android uses #171717 text and #fcfcfa paper rather than Anytype's #252525 and white	Existing shared mobile identity; web migration should be evaluated side by side before changing both clients
Universal expandable hierarchy instead of Anytype object sets/dataviews	Tree containment is the core Box Manifest domain model
44px minimum touch targets on narrow web layouts	Browser UI is expected to work on phones
Label preview and label-sheet workflow	Product-specific physical-output requirement
Camera scan and Find absent from web	Explicit platform capability boundary

No other deviation is currently approved.

Current implementation audit

The first reference-matching pass is complete. It aligned:

• The 52px application header, 284px primary sidebar, and 336px inspector
• The 28px/700 workspace heading and 14px/22px interface type rhythm
• Locally bundled Inter at weights 400, 500, 600, and 700
• The centered 684px search popup, keyboard navigation, and empty state
• The regular 52px hierarchy row and 16px nesting increment
• Hover-revealed selection controls and blue system-selection treatment
• 40px pill buttons, pill inputs, 24px popups, reference shadow, and entrance motion
• Mobile bottom sheets and separate mobile hierarchy/detail states
• Visible focus treatment and reduced-motion behavior

Remaining differences that require a later deliberate pass:

• The primary sidebar starts at 284px but is not yet user-resizable.
• Automated screenshot capture does not yet cover every review-matrix state.
• The import workflow is a Box Manifest two-pane extension and still needs a dedicated comparison plate against the Anytype import fixture.
• Some native browser checkbox and select rendering remains platform-dependent.

Review matrix

Every styling pull request must include comparisons at these viewports:

Viewport	Theme
1440 × 900	Light and dark
1024 × 768	Light and dark
390 × 844	Light and dark

Capture these Box Manifest states:

1. Inventory with nested nodes expanded
2. Node selected with details visible
3. Multi-selection with contextual actions
4. Search with results
5. Search empty state
6. Quick-add single mode
7. Quick-add multi mode
8. Move hierarchy
9. Import input
10. Import preview
11. Label preview
12. Loading, error, and empty inventory states

For each state, verify:

• Token values match this document.
• Primary and secondary hierarchy match the named Anytype fixture.
• Default, hover, focus-visible, selected, disabled, loading, and error states exist where applicable.
• Keyboard focus is visible and follows interaction order.
• No content shifts when hover-only controls appear.
• No unexplained border, radius, shadow, size, color, or animation was added.
• Any deviation is already present in the deviation table.

Change control

Changing the Anytype baseline requires an explicit design-reference update, including a new tag, commit, token audit, and fixture review. Application code must not silently track newer Anytype releases.

When Box Manifest needs a pattern absent from Anytype:

1. Describe the product constraint.
2. Design the minimum extension using existing reference tokens.
3. Add the decision to the deviation table.
4. Capture all required states in the review matrix.
5. Only then implement the component.