Design notes
The ideas behind Cra
A browser is a place you spend the day. These notes explain the decisions that shape it.
A sidebar, not a strip
A horizontal tab strip treats every page the same and runs out of room by lunch. A sidebar has height, so tabs can have titles you can read, structure you can see, and a place to rest. Cra’s sidebar has three layers: favorites at the top, shared by every space; pinned tabs, which belong to a space and keep a home URL; and Today, where everything else lands and from which everything else eventually leaves.
Spaces are contexts, not folders
A space is a complete sidebar for one part of your life, with its own colour so you know where you are before you read anything. Switching is a keystroke. The colour is a gradient of one or two colours pulled toward white or black depending on the space’s appearance, with a little grain, so it feels like paper rather than a flat fill. The site’s hero and feature pictures use the same themes.
Tabs should expire
Most tabs are opened to answer a question and never closed. Cra closes them for you after a window you choose and keeps them in an archive with the reason they left: closed by hand, cleared from Today, expired, or removed with a space. Nothing is lost and nothing piles up. Pinned tabs never expire, which is what pinning means.
One box for everything
The command bar searches open tabs, the archive, history, a bundled list of popular domains and the app’s own actions. Its ranking blends recency, how often you switch to a tab, and what you picked the last time you typed the same prefix. All of that is computed locally; there is no suggestion service to send keystrokes to.
What was learned from Arc
Cra started by reading what Arc writes to disk: the shape of its sidebar store, the archive, the command bar’s ranking signals and its key bindings. The data model follows that shape where it was good, which also makes importing from Arc exact. The notes are in docs/arc-reverse-engineering.md in the repository. The engine is a deliberate difference: Chromium Embedded Framework, so sites behave as they do in Chrome and the DevTools are Chrome’s.
The mark
A heavy C cut into four segments, each a translucent ribbon in its own colour. Where two segments overlap, the colours multiply into a darker join, so the letter reads as one shape from across the room and as a stack of colours up close. A white sticker edge separates it from any background. The four colours are the four kinds of thing in the sidebar: ■ favorites, ■ pinned, ■ Today and ■ the archive. The single-colour version is for favicons and the footer. Assets live in brand/ in the repository.
Type and colour on this site
Headings are set in Instrument Serif, a free face. Text is Geist. The page is a cool near-white, text is black at 85 percent, and one saturated cobalt carries the hero and the closing arc. Product pictures are drawn in CSS from the same primitives as the real sidebar, so they stay sharp at any size and recolour with the themes.
Questions or ideas? The roadmap says what is next.