Design systemDraft

Role picker

The one place a role is chosen: the invite step (onboarding and Settings) and the people list. Built-in roles (Admin, Member, Guest) and the space's custom roles sit in one list, so a custom role is as easy to give as a built-in one. Owner is never in the list. Drawn from team/0.3.4/ROLES-proposal.html section 5.

Anatomy#

1. Role list. One flush card of dense rows (56). Title is the role's name (medium); the line under it is one sentence of what the role can see ("The projects they are on. Edits Clients. Mail and calendar on."). The chosen row sits on --selected and shows a 18 check at the end, so colour is never the only signal. The card is a radio group; each row's accessible name is the name and the sentence.
2. Projects (optional). Section label "Projects" with the quiet meta "Optional", then filter chips that toggle (see the chip spec). A line under them says what none chosen means: "None chosen: they join with the role's own reach." With some chosen: "They are added to these projects when they join." Under the chips, one control row per chosen project asks the seat: Lead, Contributor or Viewer, Contributor by default (a seat only narrows what the role allows).
3. Access ends. Only while the guest role is chosen: the segmented control of end dates (1 week, 30 days, 3 months). Hidden for every other role.

States#

• Default. The first offered role is chosen; nothing is chosen under Projects.
• Chosen. Row on --selected, check shown. Choosing another role moves both.
• Guest. The end-date control appears, with the previous choice kept if the person flips back and forth.
• No projects in the space. The Projects block is not drawn.
• Nothing to offer. The caller shows an empty state ("Only an owner or admin invites"); the picker is not drawn with no rows.

Keyboard and touch#

Arrow keys move the chosen role in the radio group; Space or Enter chooses. Rows are 56 high on every size; chips are 24 (26 on a phone) and sit in a wrapping row with the segmented control under them.

Motion#

The check and the end-date control fade with --motion-tap. Nothing changes height above the fold except the end-date block appearing under the list.

Copy#

"Projects", never "matters". Role names are the owner's own words for custom roles. The line under a role is one sentence, no trailing list longer than three.

Gaps#

• A custom end date (a calendar) beyond the three presets.
• Arrow-key movement is not wired on the web build.