Sign-in screen

Two-pane artboard. Dark editorial aside (gradient + grid mask + brand + quote + stats) + light form pane (providers, email/password with eye toggle, keep-signed-in, ⌘↩ hint, full-width primary CTA, status strip).

Preview

// Compose using BR primitives:
import { Field, Input, Button, Checkbox } from "@/components/br/primitives";
import { Mail, Lock, Eye, EyeOff, Arrow, Google, Github } from "@/components/br/icons";

<div className="artboard">
  <div className="artboard-chrome">
    <div className="lights"><i /><i /><i /></div>
    <div className="url">atelier.brych.studio / sign-in</div>
  </div>
  <div className="login-frame">
    <aside className="login-aside">
      {/* dark editorial side with gradient + grid mask + brand + quote */}
    </aside>
    <div className="login-pane">
      <div className="login-eyebrow">§ Welcome back</div>
      <h1 className="login-title">Sign in to Atelier.</h1>
      <div className="login-providers">
        <button className="login-provider"><Google size={18} /> Google</button>
        <button className="login-provider"><Github size={18} /> GitHub</button>
      </div>
      <div className="login-divider">or with email</div>
      <Field label="Email">
        <Input icon={<Mail size={14} />} type="email" />
      </Field>
      <Field label="Password" action={<a className="login-link">Forgot?</a>}>
        <Input icon={<Lock size={14} />} type="password" />
      </Field>
      <Checkbox label="Keep me signed in" />
      <Button variant="primary" size="lg" iconRight={<Arrow size={14} />}>
        Sign in
      </Button>
    </div>
  </div>
</div>

Notes

Full reference rendering above. Layout uses .login-frame grid (1fr 1fr) and adapts to single-column at < 800px.