Foundations
Introduction
What Bracket is, who it is for, and how to use it.
Bracket is the design system behind Shelf, the context engine for people who work alongside AI tools. It gives every Shelf surface, from the capture sheet to the item page to the handoff, one accessible, consistent visual language.
Shelf lives on the phone first and the browser second, so every token here is defined once and consumed twice: SwiftUI on iOS, CSS custom properties on the web. Nothing on this page is a redraw. The values were read out of the Figma file’s node JSON rather than measured off a render, and where the file is silent the page says so instead of guessing.
What is this?
Bracket is a private reference for the people building Shelf: designers extending the system, engineers implementing it, and anyone reviewing the work. It documents the components, tokens and principles behind Shelf’s screens and the constraints we built under, so nothing gets redrawn or hard-coded from scratch. It is not a public design system, and it is not meant for anyone outside the team.
Platform supported
| Surface | Status | What it means here |
|---|---|---|
| iOS | Primary | Native SwiftUI. The system is designed against iOS conventions first: 44pt targets, native sheets, the platform’s own motion |
| Web | Supported | Same tokens as CSS custom properties. Parity of meaning, not parity of capture depth |
| Android | No | Token layer is platform-neutral so this stays possible |
| Browser extension | No | Capture only. Inherits tokens, adds no components |
Bracket is iOS-first, not iOS-only. The distinction matters: capture depth differs by platform because a phone can do things a browser tab cannot, but the model, the item page and the privacy behaviour must mean the same thing everywhere. Where a component is native-only, its page says so at the top.
Our principles
One layout, many arrangements
The item page is a single skeleton: original, extraction, connected items. Type changes emphasis, never structure.
Few primitives, shown consistently
Collection, type filter, Private, bundle. Four things, one visual identity each. If it looks different on another screen, it is a different thing or it is a bug.
The anchor is the identity
A bundle looks like the item that leads it, with quiet badges. One card, one thing.
Trust is shown at the moment, not buried in policy
Disclosure appears where data actually moves, in plain language. No modal fatigue, no policy pages standing in for design.
Forgiveness is visible
Undo and soft delete stay within reach, and destructive actions say they are recoverable. Recovery the user cannot see does not count.
Empty teaches
Every empty state demonstrates the loop instead of apologising for being empty. A new user’s first screen is an empty one. Design it first, not last.
Two product principles sit above all six and are not negotiable at component level: capture is one gesture, and retrieval returns the original artifact rather than a summary of it.
What’s in there
- Foundations colour, type scale, spacing, radius, elevation, motion, iconography
- Components the built set, each with variants, states, accessibility notes and platform availability
- Patterns capture, retrieval, triage, handoff. Compositions of components solving a recurring job
- Content voice, sentence case, empty state copy, error copy
- Accessibility targets, contrast, VoiceOver behaviour, gesture alternatives
Anything not listed here does not exist yet. Where a component is planned but unbuilt, its page exists and says so.
Getting started
Open the Figma library at FIGMA LIBRARY URL to build from published components, or install the token package with PACKAGE NAME AND INSTALL COMMAND.
Found a gap? LINK: how to propose a change Systems die by silent workaround, not by missing components.
Who made this
Bracket is maintained by Haridev at Credes Techlabs, alongside Siddhant.
Version 1.0 · Last updated 6.9.26 · LINK: changelog