feat: cloud welcome screen org creation

[AdityaHegde]

Adds a new user welcome page. Mocks: https://www.figma.com/design/JtG3sbaopjO0xQlyeCjmho/RILL-WIP?node-id=7407-20942&m=dev

This PR is only for the new theme picker and org creator in the welcome screen.

Note that the routes are not locked down for testing. A final commit will lock it down.

Checklist:

• Covered by tests
• Ran it and it works as intended
• Reviewed the diff before requesting a review
• Checked for unhandled edge cases
• Linked the issues it closes
• Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
• Intend to cherry-pick into the release branch
• I'm proud of this work!

[Di7design]

UXQA:

1. Create new org modal missing background.

2. Select org list size too small, see design below.

3. the overall content position is slightly lower than the design. It shouldn't be simply centered; it should be a bit above the center, so visually the interaction content is centered.

[ericokuma]

Ah @Di7design, that's my bad for #3. I had Aditya make it all vertically centered because in First Mile for RD on a big screen, there was a lot of white space in the bottom half of my screen

If it helps, this is what Linear does

linear.app/welcome

[Di7design]

If we keep the select from org list page, then there is a missing add icon in the create new org action. Other than this everything looks good to me!

Nice to have for improvement:

1. Scale the color mode card to width 228px when hovering.
2. Add a 300ms ease out when switching the color mode.

color.mode.pick.transition.mov

cc @ericokuma

[ericokuma]

Perhaps add a back button?

Also @Di7design, would we want to be visually consistent and have the Continue buttons located in the same area?

[Di7design]

The two steps use different UI patterns, so different placement is fine:

• Color mode (full-screen) → center CTA is correct for full-bleed focused steps
• Create org (modal) → bottom right follows universal modal convention

What should stay consistent: button label ("Continue" everywhere), and button style/component.

On back buttons: Maybe not for phase 1? I've been seeing there is no back button on other tools' welcome flow, maybe it's a psychological nudge at play: removing "back" reduces hesitation and keeps users moving toward activation. It signals "you're on a guided path" rather than a free-form navigation experience?

[ericokuma]

The two steps use different UI patterns, so different placement is fine:

• Color mode (full-screen) → center CTA is correct for full-bleed focused steps
• Create org (modal) → bottom right follows universal modal convention

What should stay consistent: button label ("Continue" everywhere), and button style/component.

On back buttons: Maybe not for phase 1? I've been seeing there is no back button on other tools' welcome flow, maybe it's a psychological nudge at play: removing "back" reduces hesitation and keeps users moving toward activation. It signals "you're on a guided path" rather than a free-form navigation experience?

Just thinking out loud. When do we ever need this org screen selector?

• When you are a first time user, you don't have preexisting orgs so you will only need to create a new organization, and so you should just see the org creation form
• When you decide to create a new project in an org, you are already in the context of an organization so there's no real need to choose the organization after the fact.
• If you want to switch org, you select the org selector from the nav org breakcrumb dropdown

I guess the only time this org screen selector is "needed" is when you have access to multiple organizations and you log into Rill.

The theme selection one looks good. Only thing is the highlight border is a bit thin/light so I can't really see when the System option is selected