Skip to content

docs(design): draw sign-in, one frame for both login pages (TASK-757) #3188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lilyshen0722 wants to merge 1 commit into from
+32 −1
Closed

docs(design): draw sign-in, one frame for both login pages (TASK-757) #3188

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion docs/design/artboards/d215/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,29 @@
.app.m .composer { margin: 4px 10px 10px; }
.app.m .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app.m .tile { height: 104px; }
/* 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; }
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
Expand Down Expand Up @@ -488,6 +511,7 @@
<!-- brand marks, simplified for the mock -->
<symbol id="lg-slack" viewBox="0 0 40 40"><rect x="17" y="4" width="6" height="15" rx="3" fill="#36C5F0"/><rect x="21" y="17" width="15" height="6" rx="3" fill="#2EB67D"/><rect x="17" y="21" width="6" height="15" rx="3" fill="#ECB22E"/><rect x="4" y="17" width="15" height="6" rx="3" fill="#E01E5A"/></symbol>
<symbol id="lg-telegram" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="#2AABEE"/><path d="M10.5 19.6 27.8 12.8c.8-.3 1.5.2 1.3 1.4l-2.9 13.8c-.2 1-.8 1.2-1.6.8l-4.4-3.3-2.1 2c-.2.2-.4.4-.9.4l.3-4.5 8.2-7.4c.4-.3-.1-.5-.5-.2l-10.1 6.4-4.4-1.4c-1-.3-1-1 .2-1.4z" fill="#fff"/></symbol>
<symbol id="lg-google" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"/><path fill="#FBBC05" d="M3.97 10.72a5.41 5.41 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33Z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.9 11.42 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"/></symbol>
<symbol id="lg-github" viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" fill="var(--ink)"/><path d="M20 10.5c-5.2 0-9.4 4.2-9.4 9.4 0 4.2 2.7 7.7 6.4 8.9.5.1.6-.2.6-.5v-1.7c-2.6.6-3.2-1.2-3.2-1.2-.4-1.1-1-1.4-1-1.4-.9-.6.1-.6.1-.6.9.1 1.4 1 1.4 1 .8 1.4 2.2 1 2.7.8.1-.6.3-1 .6-1.2-2.1-.2-4.3-1-4.3-4.6 0-1 .4-1.9 1-2.5-.1-.2-.4-1.2.1-2.5 0 0 .8-.3 2.6 1a9 9 0 0 1 4.7 0c1.8-1.3 2.6-1 2.6-1 .5 1.3.2 2.3.1 2.5.6.7 1 1.5 1 2.5 0 3.6-2.2 4.4-4.3 4.6.3.3.6.9.6 1.7v2.6c0 .3.2.6.7.5a9.4 9.4 0 0 0-3-18.3z" fill="var(--sf)"/></symbol>
<symbol id="lg-linear" viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="#5E6AD2"/><path d="M8 22.5 17.5 32M7.4 18 22 32.6M9 13.5 26.5 31M12.2 10 30 27.8M16.5 8 32 23.5" stroke="#fff" stroke-width="1.6" opacity=".9"/></symbol>
<symbol id="lg-atlassian" viewBox="0 0 40 40"><path d="M13.2 19.4c-.4-.5-1.1-.4-1.4.2L5.3 32.5c-.3.6.1 1.3.8 1.3h9.1c.3 0 .6-.2.8-.5 2-4.1.8-10.3-2.8-13.9z" fill="#2684FF"/><path d="M18 7.6c-3.5 5.6-3.3 11.7-1 16.4l4.4 8.9c.2.3.5.5.8.5h9.1c.7 0 1.1-.7.8-1.3L19.4 7.6c-.3-.6-1.1-.6-1.4 0z" fill="#0052CC"/></symbol>
Expand Down Expand Up @@ -536,7 +560,7 @@ <h1>Same look. <em>Less said.</em></h1>
<li><svg viewBox="0 0 24 24"><use href="#i-grid"/></svg><b>One screen first</b><span>Repeated blocks become a table; rare settings collapse.</span></li>
</ol>
<nav class="toc" aria-label="Surfaces">
<a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-dark">Dark mode</a>
<a href="#s-sidebar">Sidebar controls</a><a href="#s-chat">Pod chat</a><a href="#s-board">Task board</a><a href="#s-memory">Memory</a><a href="#s-agent">Agent settings</a><a href="#s-settings">Settings</a><a href="#s-connectors">Connectors</a><a href="#s-signin">Sign in</a><a href="#s-dark">Dark mode</a>
</nav>

<section class="surf" id="s-sidebar">
Expand Down Expand Up @@ -756,6 +780,13 @@ <h1>Same look. <em>Less said.</em></h1>
</div>
</section>

<section class="surf" id="s-signin">
<div class="shead"><h2>Sign in</h2><span class="route">/login + /v2/login, one component</span><div class="nums"><span class="num">components <b>2</b> → <i>1</i></span><span class="num">subtitle <b>1 line</b> → <i>none</i></span></div></div>
<div class="row1"><figure><figcaption><b>Sign in · 1440</b><span>email and password; providers above</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="signin" data-vp="1440" data-state="default"><div class="app d"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Sign in</h1><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 40 40"><use href="#lg-github"/></svg>Continue with GitHub</button><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 18 18"><use href="#lg-google"/></svg>Continue with Google</button><div class="or">or</div><div class="fl"><div class="lab">Email</div><div class="field"><span>alex@studio.dev</span></div></div><div class="fl"><div class="lab">Password<a href="#">Forgot password?</a></div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Sign in</button><div class="alt">New to Commonly? <a href="#">Create an account</a></div></div></div></div></div></figure></div>
<div class="row2"><figure><figcaption><b>Sign in · 390</b><span>edge to edge, no card chrome</span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="signin" data-vp="390" data-state="default"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Sign in</h1><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 40 40"><use href="#lg-github"/></svg>Continue with GitHub</button><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 18 18"><use href="#lg-google"/></svg>Continue with Google</button><div class="or">or</div><div class="fl"><div class="lab">Email</div><div class="field"><span>alex@studio.dev</span></div></div><div class="fl"><div class="lab">Password<a href="#">Forgot password?</a></div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Sign in</button><div class="alt">New to Commonly? <a href="#">Create an account</a></div></div></div></div></div></figure><figure><figcaption><b>Wrong password · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="signin" data-vp="390" data-state="error"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Sign in</h1><div class="alrt" role="alert"><svg class="i" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>Login failed</span></div><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 40 40"><use href="#lg-github"/></svg>Continue with GitHub</button><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 18 18"><use href="#lg-google"/></svg>Continue with Google</button><div class="or">or</div><div class="fl"><div class="lab">Email</div><div class="field bad"><span>alex@studio.dev</span></div></div><div class="fl"><div class="lab">Password<a href="#">Forgot password?</a></div><div class="field bad"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Sign in</button><div class="alt">New to Commonly? <a href="#">Create an account</a></div></div></div></div></div></figure><div class="notes"><ul><li><b>One page replaces both.</b> /login and /v2/login are two components today; this is the single frame to lift, on the product's tokens.</li><li><b>Social first, then the form.</b> 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.</li><li><b>Forgot password lives on the password label,</b> where the eye is when it is needed, not as a line under the button.</li><li><b>Errors are one row above the form.</b> 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.</li><li>Dark follows the system, as everywhere.</li></ul></div></div>
<div class="row2" style="margin-top:18px"><figure><figcaption><b>Invite-only bounce · 1440</b><span>from an OAuth sign-up that needs an invitation</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="signin" data-vp="1440" data-state="error"><div class="app d"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Sign in</h1><div class="alrt" role="alert"><svg class="i" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>Registration is invite-only right now. Use an invitation link to sign up, or join the waitlist.</span></div><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 40 40"><use href="#lg-github"/></svg>Continue with GitHub</button><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 18 18"><use href="#lg-google"/></svg>Continue with Google</button><div class="or">or</div><div class="fl"><div class="lab">Email</div><div class="field"><span>alex@studio.dev</span></div></div><div class="fl"><div class="lab">Password<a href="#">Forgot password?</a></div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Sign in</button><div class="alt">New to Commonly? <a href="#">Create an account</a></div></div></div></div></div></figure><figure><figcaption><b>Invite-only bounce · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="signin" data-vp="390" data-state="error"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Sign in</h1><div class="alrt" role="alert"><svg class="i" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>Registration is invite-only right now. Use an invitation link to sign up, or join the waitlist.</span></div><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 40 40"><use href="#lg-github"/></svg>Continue with GitHub</button><button class="b b-s" type="button"><svg class="lgi" viewBox="0 0 18 18"><use href="#lg-google"/></svg>Continue with Google</button><div class="or">or</div><div class="fl"><div class="lab">Email</div><div class="field"><span>alex@studio.dev</span></div></div><div class="fl"><div class="lab">Password<a href="#">Forgot password?</a></div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Sign in</button><div class="alt">New to Commonly? <a href="#">Create an account</a></div></div></div></div></div></figure></div>
</section>

<section class="surf" id="s-dark">
<div class="shead"><h2>Dark mode</h2><span class="route">one dark value per token</span></div>
<div class="dm">
Expand Down
Loading