Blocks
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
Live preview
Renders the block exactly as it appears on the home page.
// Sign-in screen — exact source of the block shown on the home page.
// Visual classes (.artboard, .login-*, .badge-*) live in globals.css.
import * as React from "react";
import { Button, Checkbox, Field, Input } from "@/components/br/primitives";
import { Arrow, Eye, EyeOff, Github, Google, Lock, Logo, Mail } from "@/components/br/icons";
function LoginExample() {
const [show, setShow] = React.useState(false);
const [remember, setRemember] = React.useState(true);
return (
<div className="artboard">
<div className="artboard-chrome">
<div className="lights">
<i />
<i />
<i />
</div>
<div className="url">atelier.brych.studio / sign-in</div>
<div className="badge-meta">EX · 01 · LOGIN</div>
</div>
<div className="login-frame">
{/* Aside */}
<div className="login-aside">
<div className="login-brand">
<Logo size={22} /> Atelier
<span className="badge-dot" style={{ marginLeft: 4 }} />
</div>
<h2 className="login-aside-headline">
Calm software, <em>made by hand.</em>
</h2>
<div className="login-aside-meta">
<p className="login-aside-quote">
“Two people, six weeks, one shipped product. We stay on the work until the team that built it has put
their name on it.”
</p>
<div className="login-aside-sig">
<span>BR / Studio</span>
<span className="line" />
<span>Est. 2018</span>
</div>
<div className="login-aside-stats">
<div className="login-aside-stat">
<span className="num">142</span>
<span className="lbl">Clients</span>
</div>
<div className="login-aside-stat">
<span className="num">38</span>
<span className="lbl">Shipped</span>
</div>
<div className="login-aside-stat">
<span className="num">99.9%</span>
<span className="lbl">Uptime</span>
</div>
</div>
</div>
</div>
{/* Form pane */}
<div className="login-pane">
<div className="login-pane-top">
<span>New here?</span>
<a href="#">Create account →</a>
</div>
<div className="login-pane-inner">
<div>
<div className="login-eyebrow">§ Welcome back</div>
<h1 className="login-title">Sign in to Atelier.</h1>
<p className="login-subtitle">Pick up where you left off — invoices, sprints, the journal.</p>
</div>
<div className="login-providers">
<button type="button" className="login-provider">
<Google size={18} />
<span>Google</span>
</button>
<button type="button" className="login-provider">
<Github size={18} />
<span>GitHub</span>
</button>
</div>
<div className="login-divider">or with email</div>
<form className="login-form" onSubmit={(e) => e.preventDefault()}>
<Field label="Email">
<Input
type="email"
placeholder="you@studio.com"
defaultValue="hello@brych.studio"
icon={<Mail size={14} />}
/>
</Field>
<Field
label="Password"
action={
<a className="login-link" href="#">
Forgot?
</a>
}
>
<div style={{ position: "relative" }}>
<Input
type={show ? "text" : "password"}
placeholder="••••••••••"
defaultValue="atelier-2026"
icon={<Lock size={14} />}
/>
<button
type="button"
className="login-input-eye"
onClick={() => setShow((s) => !s)}
aria-label={show ? "Hide password" : "Show password"}
>
{show ? <EyeOff size={15} /> : <Eye size={15} />}
</button>
</div>
</Field>
<div className="login-row-between">
<Checkbox
label="Keep me signed in"
checked={remember}
onChange={setRemember}
/>
<span
className="font-meta"
style={{
fontSize: 10.5,
color: "var(--text-subtle)",
letterSpacing: ".08em",
textTransform: "uppercase",
}}
>
⌘↩ to sign in
</span>
</div>
<Button variant="primary" size="lg" iconRight={<Arrow size={14} />} style={{ width: "100%" }}>
Sign in
</Button>
</form>
<div className="login-footer">
By signing in you agree to the <a href="#">Terms</a> & <a href="#">Privacy</a>.
</div>
</div>
<div className="login-meta-strip">
<span>● Operational</span>
<span>SOC 2 · Type II</span>
<span>v 2026.01</span>
</div>
</div>
</div>
</div>
);
}Prompt an AI agent
Paste this into your AI coding agent (Claude Code, Cursor, …) to have it build this exact screen in your project. It assumes the BR-UI registry — see For AI agents for the one-time setup prompt.
Build a two-pane "Sign-in screen" using the BR-UI design system.
SETUP (once):
npx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-ui-all.json
Needed items: br-tokens, br-component-styles, br-primitives, br-icons.
br-component-styles ships the .artboard / .login-* CSS classes used below.
RULES:
- All colors via CSS vars (--accent, --text, --surface-1..3, --border). Never hex.
- Eyebrows use font-meta uppercase; titles use font-display.
- One accent moment per block. Variants switch via data-variant=A|B|C on <html>.
- Import primitives from @/components/br/primitives and icons from @/components/br/icons.
LAYOUT — a .login-frame grid: two columns (1fr 1fr), collapsing to one column below 800px.
LEFT — dark editorial aside (.login-aside):
- Background: radial-gradient of --accent (top-right + bottom-left) over a --text base,
plus a faint grid mask.
- Brand at top: <Logo size={22}/> "Atelier" + a small accent dot.
- Big display headline: "Calm software, <em>made by hand.</em>" (em is the accent word).
- Bottom meta: a pull-quote, a signature "BR / Studio — Est. 2018", and three mini-stats
(142 Clients / 38 Shipped / 99.9% Uptime).
RIGHT — light form pane (.login-pane):
- Top row: "New here? / Create account →".
- Eyebrow "§ Welcome back", <h1>Sign in to Atelier.</h1>, a sub line.
- Two provider buttons in a 2-col grid: <Google/> Google and <Github/> GitHub.
- An "or with email" divider.
- <Field label="Email"><Input type="email" icon={<Mail/>}/></Field>.
- <Field label="Password" action={<a>Forgot?</a>}> an <Input type="password" icon={<Lock/>}/>
with an eye-toggle button (Eye / EyeOff) that flips the input type. </Field>.
- A row: <Checkbox label="Keep me signed in" checked/> + a "⌘↩ to sign in" hint.
- Full-width primary <Button size="lg" iconRight={<Arrow/>}>Sign in</Button>.
- Footer "By signing in you agree to the Terms & Privacy." + a status strip
"● Operational / SOC 2 · Type II / v 2026.01".
The verbatim reference source is in the code block above — match it 1:1.Notes
Full reference rendering above. Layout uses .login-frame grid (1fr 1fr) and adapts to single-column at < 800px.