From 5e046a7147b69d511085b26cd75da53fd50de3bf Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Sun, 1 Nov 2026 00:48:31 -0700 Subject: [PATCH 1/2] docs(design): draw sign-in, one frame for /login and /v2/login (TASK-757) Auth card on the grey canvas at 1440, edge to edge at 390. Providers above the form, forgot-password on the password label, one alert row for errors. Default, wrong-password and invite-only frames; data-state skips measuring. Co-Authored-By: Claude Sonnet 5.5 Co-authored-by: ux-lead Agent-Model: claude/claude-opus-5-5/high --- docs/design/artboards/d215/index.html | 33 ++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/docs/design/artboards/d215/index.html b/docs/design/artboards/d215/index.html index e47b25986..e067ae8e1 100644 --- a/docs/design/artboards/d215/index.html +++ b/docs/design/artboards/d215/index.html @@ -666,6 +666,29 @@ .app.m .v2-first-run__title { font-size: 24px; } .app.m .v2-first-run__skip { height: 44px; align-self: flex-start; padding-left: 0; } .app.m .v2-first-run__setup, .app.m .v2-first-run__hello { height: 44px; font-size: 14px; } +/* auth pages (sign-in, sign-up, forgot, reset, verify): one card on the grey canvas; edge to edge at 390 */ +.authpage { height: 100%; display: grid; place-items: center; background: var(--g); padding: 24px; } +.authcard { width: 400px; background: var(--sf); border-radius: 14px; box-shadow: var(--sh-pane); padding: 32px; display: grid; gap: 16px; } +.authcard .brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--f-display); letter-spacing: -0.03em; } +.authcard .brand .logo { width: 30px; height: 30px; border-radius: 9px; } +.authcard .brand .logo svg.i { width: 17px; height: 17px; } +.authcard h1 { font: 800 28px/1.1 var(--f-display); letter-spacing: -0.03em; margin: 4px 0 0; } +.authcard .b { width: 100%; height: 40px; border-radius: 10px; font-size: 14px; } +.authcard .b svg.lgi { width: 18px; height: 18px; flex: none; } +.authcard .or { display: flex; align-items: center; gap: 12px; font: 500 11.5px/1 var(--f-mono); color: var(--mu); } +.authcard .or::before, .authcard .or::after { content: ""; flex: 1; height: 1px; background: var(--d); } +.authcard .fl { display: grid; gap: 6px; } +.authcard .fl .lab { display: flex; align-items: baseline; justify-content: space-between; font: 600 12.5px/1 var(--f-body); color: var(--ink2); } +.authcard .fl .lab a { font-weight: 500; color: var(--c-text); } +.authcard .field { height: 40px; border-radius: 10px; font-size: 14px; } +.authcard .field.bad { box-shadow: inset 0 0 0 1.5px var(--ink); } +.authcard .alrt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 10px; background: var(--t); box-shadow: inset 0 0 0 1px var(--b); font-size: 13px; line-height: 19px; color: var(--ink); } +.authcard .alrt svg.i { width: 16px; height: 16px; margin-top: 1.5px; } +.authcard .alt { text-align: center; font-size: 13.5px; color: var(--se); } +.authcard a { text-decoration: none; } +.authcard .alt a { color: var(--c-text); font-weight: 600; } +.app.m .authpage { background: var(--sf); place-items: start stretch; padding: 0; } +.app.m .authcard { width: auto; box-shadow: none; border-radius: 0; padding: 28px 20px; }

Same look. Less said.

  • One screen firstRepeated blocks become a table; rare settings collapse.
    • @@ -1229,6 +1253,13 @@

    Same look. Less said.

    +
    +

    Sign in

    /login + /v2/login, one component
    components 2 → 1subtitle 1 line → none
    +
    Sign in · 1440email and password; providers above
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    +
    Sign in · 390edge to edge, no card chrome
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    Wrong password · 390
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    • One page replaces both. /login and /v2/login are two components today; this is the single frame to lift, on the product's tokens.
    • Social first, then the form. The two provider keys sit above an "or"; the form has two fields and one filled key. The tagline under the title is gone; the page is its own label.
    • Forgot password lives on the password label, where the eye is when it is needed, not as a line under the button.
    • Errors are one row above the form. Wrong password shows the server's line; an invite-only OAuth bounce shows its longer line (right). Both fields get an ink ring while the alert is up.
    • Dark follows the system, as everywhere.
    +
    Invite-only bounce · 1440from an OAuth sign-up that needs an invitation
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    Invite-only bounce · 390
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    +
    +

    Dark mode

    one dark value per token
    From 7e65e56f68696ca8b7c653f8f67d3804e41d7d41 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Sun, 1 Nov 2026 01:04:21 -0700 Subject: [PATCH 2/2] docs(design): draw sign-up, invitation, verify, forgot and reset into d215 (TASK-757) One page for /register + /v2/register, then invitation-required, the check-your-email states, /verify-email, forgot-password and reset-password, each at 1440 and 390 with its error and sent states. Reuses the sign-in .authpage/.authcard/.fl/.alrt/.or; adds only .sub, .hint, .legal, .help and an optional marker. Dark follows the tokens. Co-Authored-By: Claude Sonnet 5.5 Co-authored-by: ux-lead Agent-Model: claude/claude-opus-5-5/high --- docs/design/artboards/d215/index.html | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/design/artboards/d215/index.html b/docs/design/artboards/d215/index.html index e067ae8e1..1bf56d6a5 100644 --- a/docs/design/artboards/d215/index.html +++ b/docs/design/artboards/d215/index.html @@ -687,6 +687,16 @@ .authcard .alt { text-align: center; font-size: 13.5px; color: var(--se); } .authcard a { text-decoration: none; } .authcard .alt a { color: var(--c-text); font-weight: 600; } +.authcard .sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--se); } +.authcard .hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--se); } +.authcard .hint a, .authcard .legal a { color: var(--c-text); font-weight: 600; } +.authcard .legal { font-size: 12px; line-height: 1.5; color: var(--mu); text-align: center; } +.authcard .fl .lab em { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--mu); margin-left: 8px; } +.authcard .fl .help { font-size: 12px; line-height: 1.5; color: var(--mu); } +.authcard .alrt a { color: var(--c-text); font-weight: 600; } +.rowa { display: grid; gap: 18px; align-items: start; } +.shead.sub2 { margin-top: 28px; } +.shead.sub2 h3 { margin: 0; font: 700 15px/1.2 var(--f-display); letter-spacing: -0.01em; } .app.m .authpage { background: var(--sf); place-items: start stretch; padding: 0; } .app.m .authcard { width: auto; box-shadow: none; border-radius: 0; padding: 28px 20px; } @@ -802,7 +812,7 @@

    Same look. Less said.

  • One screen firstRepeated blocks become a table; rare settings collapse.
    • @@ -1260,6 +1270,16 @@

    Same look. Less said.

    Invite-only bounce · 1440from an OAuth sign-up that needs an invitation
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    Invite-only bounce · 390
    commonly

    Sign in

    or
    Email
    alex@studio.dev
    PasswordForgot password?
    ••••••••••
    New to Commonly? Create an account
    +
    +

    Sign up and account recovery

    /register + /v2/register, /v2/register/invite-required, /verify-email, /v2/forgot-password, /v2/reset-password
    register components 2 → 1fields on the page 3 → 3subtitles 5 → 1
    +

    Sign up

    /register and /v2/register, one page
    Sign up · 1440providers first, then three fields
    commonly

    Create your account

    or
    Email
    alex@studio.dev
    Password
    ••••••••••
    Invitation code optional
    Unlocks hiring from the catalog
    No code? Leave blank — you can still run an agent here or bring your own, and redeem a code later in Settings.
    By creating an account you agree to the Terms and Privacy policy.
    Already have an account? Sign in
    Registration failed · 1440server line above the form
    commonly

    Create your account

    or
    Email
    alex@studio.dev
    Password
    ••••••••••
    Invitation code optional
    Unlocks hiring from the catalog
    No code? Leave blank — you can still run an agent here or bring your own, and redeem a code later in Settings.
    By creating an account you agree to the Terms and Privacy policy.
    Already have an account? Sign in
    Sign up · 390
    commonly

    Create your account

    or
    Email
    alex@studio.dev
    Password
    ••••••••••
    Invitation code optional
    Unlocks hiring from the catalog
    No code? Leave blank — you can still run an agent here or bring your own, and redeem a code later in Settings.
    By creating an account you agree to the Terms and Privacy policy.
    Already have an account? Sign in
    Registration failed · 390
    commonly

    Create your account

    or
    Email
    alex@studio.dev
    Password
    ••••••••••
    Invitation code optional
    Unlocks hiring from the catalog
    No code? Leave blank — you can still run an agent here or bring your own, and redeem a code later in Settings.
    By creating an account you agree to the Terms and Privacy policy.
    Already have an account? Sign in
    • One page replaces both, as with sign in. The tagline under the title goes; the page is its own label.
    • Providers first, then the form. Live draws them below the button; here they follow the sign-in order so the two pages read as one family. The optional code stays, with its one line of help under the field (it says the code is not needed to start).
    • Errors are one row above the form, both fields ringed in ink, as on sign in. The terms line is muted and sits under the key; the sign-in link is the last line.
    +

    Invitation required

    /v2/register/invite-required (and /register/invite-required)
    Invitation required · 1440code first, waitlist below
    commonly

    Invitation required

    New account registration is invite-only right now. Enter your invitation code to continue, or join the waitlist for admin review.

    Invitation code
    Paste your code
    Need access? Join the waitlist
    Email
    alex@studio.dev
    Name optional
    Alex Rivera
    Use case optional
    Running agents next to my team
    Already have an account? Sign in
    Waitlist sent · 1440confirmation above the ghost key
    commonly

    Invitation required

    New account registration is invite-only right now. Enter your invitation code to continue, or join the waitlist for admin review.

    Invitation code
    Paste your code
    Need access? Join the waitlist
    Email
    alex@studio.dev
    Name optional
    Alex Rivera
    Use case optional
    Running agents next to my team
    Waitlist request submitted.
    Already have an account? Sign in
    Invitation required · 390
    commonly

    Invitation required

    New account registration is invite-only right now. Enter your invitation code to continue, or join the waitlist for admin review.

    Invitation code
    Paste your code
    Need access? Join the waitlist
    Email
    alex@studio.dev
    Name optional
    Alex Rivera
    Use case optional
    Running agents next to my team
    Already have an account? Sign in
    Waitlist sent · 390
    commonly

    Invitation required

    New account registration is invite-only right now. Enter your invitation code to continue, or join the waitlist for admin review.

    Invitation code
    Paste your code
    Need access? Join the waitlist
    Email
    alex@studio.dev
    Name optional
    Alex Rivera
    Use case optional
    Running agents next to my team
    Waitlist request submitted.
    Already have an account? Sign in
    • One filled key on the page: Continue to registration. The waitlist key is bordered, since it is the second path, not the first.
    • The divider is the existing "or" rule carrying the waitlist line, not a new element. Name and use case are marked optional in the label, not in the field.
    • Submitted is a status row (check, not green), and the form stays so a second address can be sent.
    +

    Check your email

    the register success state, plus /verify-email
    Signed in, unverified · 1440reminder banner follows
    commonly

    You're in

    Verify your email to join the Community pod — link sent to alex@studio.dev.

    You can sign in now; a reminder stays visible until you verify.

    Verify first · 1440team-gated instances
    commonly

    You're in

    Verify your email to join the Community pod — link sent to alex@studio.dev.

    Verify your email first, then sign in.

    Signed in, unverified · 390
    commonly

    You're in

    Verify your email to join the Community pod — link sent to alex@studio.dev.

    You can sign in now; a reminder stays visible until you verify.

    Verify first · 390
    commonly

    You're in

    Verify your email to join the Community pod — link sent to alex@studio.dev.

    Verify your email first, then sign in.

    Account created · 390no verification step
    commonly

    Account created

    Your account is ready. Sign in to continue.

    • Two reads of one screen. Instances that allow sign-in before verifying get the first; team-gated ones get the second. The copy is the live copy: only the verify-to-join-the-Community-pod line, not a wall (Sam, TASK-103).
    • "Account created" is the third case (no email step), kept for completeness; today the screen is picked by matching the server's prose, so this should become a field on the response.
    +

    Verify email

    /verify-email?token=…
    Verifying · 1440
    commonly

    Verify your email

    Verifying your email…

    Verified · 1440server line
    commonly

    Verify your email

    Email verified successfully
    Verifying · 390
    commonly

    Verify your email

    Verifying your email…

    Verified · 390
    commonly

    Verify your email

    Email verified successfully
    Failed · 390
    commonly

    Verify your email

    • Today this is a navy MUI card on a #0b1220 page, the one dark flash left on the auth routes (Sam ruled no dark flash, 08-24). Here it is the same card as every other auth page, on the page background.
    • Failure is the shared alert row; the way out is a bordered key, since nothing on this page is the next step to take. The success line is the server's own.
    +

    Forgot password

    /v2/forgot-password
    Forgot password · 1440
    commonly

    Reset your password

    Enter your account email and we'll send you a reset link. If you signed up with Google or GitHub, you can also just sign in with them.

    Email
    alex@studio.dev
    Remembered it? Sign in
    Reset link sent · 1440
    commonly

    Reset your password

    If that email has an account, a reset link is on its way. The link is valid for one hour.
    Back to sign in
    Forgot password · 390
    commonly

    Reset your password

    Enter your account email and we'll send you a reset link. If you signed up with Google or GitHub, you can also just sign in with them.

    Email
    alex@studio.dev
    Remembered it? Sign in
    Failed · 390
    commonly

    Reset your password

    Enter your account email and we'll send you a reset link. If you signed up with Google or GitHub, you can also just sign in with them.

    Email
    alex@studio.dev
    Remembered it? Sign in
    Sent · 390
    commonly

    Reset your password

    If that email has an account, a reset link is on its way. The link is valid for one hour.
    Back to sign in
    • The instructions line stays because it carries the one non-obvious fact (provider accounts can just sign in). It is the only prose on the page.
    • After sending, the form goes and one row says it, with the one-hour validity. Back to sign in is the last line, as everywhere.
    +

    Choose a new password

    /v2/reset-password?token=…
    New password · 1440
    commonly

    Choose a new password

    New password
    ••••••••••
    Confirm password
    ••••••••••
    Updated · 1440
    commonly

    Choose a new password

    Password updated. You can sign in now.
    New password · 390
    commonly

    Choose a new password

    New password
    ••••••••••
    Confirm password
    ••••••••••
    Mismatch · 390
    commonly

    Choose a new password

    New password
    ••••••••••
    Confirm password
    ••••••••
    Link expired · 390request a new one inline
    commonly

    Choose a new password

    New password
    ••••••••••
    Confirm password
    ••••••••••
    No token · 390page opened without the email link
    commonly

    Choose a new password

    This page needs the reset link from your email. Request a new one below.

    • Both fields ring while an error is up, same as sign in. Too short and mismatch share the row; the expired-link failure carries its recovery link inside the sentence.
    • No token is a page of its own: one line and one key, no form to fill in.
    +
    +

    Dark mode

    one dark value per token