Sign up with form and image
A signup page with form and image.
Preview
Built with
The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.
Design system gaps
What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.
- Password fields are Text fields: the Text field has no input type yet, so the password shows as plain text.
- The Card has no content part: the form is placed inside the Card root after its title and description.
- Links are native links on semantic tokens: there is no Link component yet.
- The "Or continue with" separator is two Dividers around a label: the Divider has no label.
- A card with media: the Card has no media part, so the form and the cover share the Card root in a two-column layout.
Changes from the original
- Brand logos (Apple, Google, GitHub, Meta) are dropped: Material Symbols has none and no brand icon source is decided; the buttons keep their text.
- The cover image is a token-drawn placeholder.
- The three icon-only brand buttons become text buttons (no brand icon to show).
- The shared hint under the two password fields is the description of the first one: a description belongs to one field.
- Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
- The original visual design (Tailwind classes, the Geist font) is not reused.
- Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
- Placeholder images are drawn with semantic tokens.
- No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.
Code
The HTML the screen renders, from apps/docs/screens/shadcn-ui/signup-04.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.
HTML
<div class="scr-viewport">
<div
class="scr-screen scr-auth"
data-layout="centered"
data-surface="sunken"
>
<div class="scr-auth__panel scr-auth__panel--wide scr-stack">
<div class="ds-card" data-surface="level-1">
<h2
class="ds-card__title"
data-part="title"
>Create your account</h2>
<p
class="ds-card__description"
data-part="description"
>Enter your email below to create your account</p>
<div class="scr-media-card">
<form class="scr-form" action="#" method="post">
<div class="scr-stack">
<div class="ds-text-field" data-size="medium">
<label
class="ds-text-field__label"
data-part="label"
for="signup-04-email"
>Email</label>
<input
type="text"
class="ds-text-field__control"
data-part="control"
id="signup-04-email"
name="email"
placeholder="m@example.com"
required
aria-describedby="signup-04-email-description"
autocomplete="email"
inputmode="email"
>
<p
class="ds-text-field__description"
data-part="description"
id="signup-04-email-description"
>We'll use this to contact you. We will not share your email with anyone else.</p>
</div>
<div class="scr-columns">
<div class="ds-text-field" data-size="medium">
<label
class="ds-text-field__label"
data-part="label"
for="signup-04-password"
>Password</label>
<input
type="text"
class="ds-text-field__control"
data-part="control"
id="signup-04-password"
name="signup-04-password"
required
aria-describedby="signup-04-password-description"
autocomplete="new-password"
>
<p
class="ds-text-field__description"
data-part="description"
id="signup-04-password-description"
>Must be at least 8 characters long.</p>
</div>
<div class="ds-text-field" data-size="medium">
<label
class="ds-text-field__label"
data-part="label"
for="signup-04-confirm-password"
>Confirm Password</label>
<input
type="text"
class="ds-text-field__control"
data-part="control"
id="signup-04-confirm-password"
name="signup-04-confirm-password"
required
autocomplete="new-password"
>
</div>
</div>
<button
type="submit"
class="ds-button"
data-emphasis="accent"
data-intent="neutral"
data-size="medium"
>
<span
class="ds-button__label"
data-part="label"
>Create Account</span>
</button>
<div class="scr-separator">
<hr class="ds-divider" data-orientation="horizontal">
<span class="scr-separator__label">Or continue with</span>
<hr class="ds-divider" data-orientation="horizontal">
</div>
<div class="scr-button-row">
<button
type="button"
class="ds-button"
data-emphasis="subtle"
data-intent="neutral"
data-size="medium"
>
<span
class="ds-button__label"
data-part="label"
>Apple</span>
</button>
<button
type="button"
class="ds-button"
data-emphasis="subtle"
data-intent="neutral"
data-size="medium"
>
<span
class="ds-button__label"
data-part="label"
>Google</span>
</button>
<button
type="button"
class="ds-button"
data-emphasis="subtle"
data-intent="neutral"
data-size="medium"
>
<span
class="ds-button__label"
data-part="label"
>Meta</span>
</button>
</div>
<p class="scr-hint" data-align="center">
Already have an account?
<a class="scr-link" href="#">Sign in</a>
</p>
</div>
</form>
<div class="scr-media-card__media">
<div class="scr-cover" aria-hidden="true">
<span
class="ds-icon"
data-size="large"
data-color="current"
aria-hidden="true"
>landscape</span>
</div>
</div>
</div>
</div>
<p class="scr-hint scr-legal" data-align="center">
By clicking continue, you agree to our
<a class="scr-link" href="#">Terms of Service</a>
and
<a class="scr-link" href="#">Privacy Policy</a>
.
</p>
</div>
</div>
</div>