Raft Design System

Decisions

Open questions

The places where the system has drawn more than one version and the choice is still open, with the current default for each.

In these places the same thing is drawn in more than one version, and the choice is still open. Until it is made, use the default. Once a version is chosen, the others are removed from the components and the choice becomes a decision record.

WhereVersionsDefault
The top bar of a phone's top-level pagesWith the page name as a large title, or as the product is today (Home shows only the workspace pill)With the page name (0004)
The top bar of a phone's pushed pagesWhite or yellow. With yellow, the frame extends to the top bar of pushed pagesNone
The desktop railIcons only (56px), or icons with labels (68px)Icons only
TabsA yellow sticker, or an underline (ink text and a 2px ink line, as in the product)Sticker (0013)
Chat, tasks and files in a Raft Chat channelA: sticker tabs; B: underline tabs; C: a segmented control in the top bar; D: tasks in the side panel next to the conversationA

The labeled rail and the square corner

The labeled rail is 68px wide, so its top-left corner is 68×56 instead of a square. The product pins the square corner with a UI test (leftrail-square-slot). Choosing the labeled rail means one of:

  • changing that test, or
  • making every header 68px high, so the corner stays square.

See 0005.