Startboard project

Startboard / Design system

Documentation v1.0.0 · Public product

Design system contents

Components

Authentication card

Focused sign-in, signup and reset forms connect users to the private workspace.

On this page

Purpose and placement

Focused sign-in, signup and reset forms connect users to the private workspace.

Anatomy

  • Brand icon above card
  • Title and supporting guidance
  • Associated credential fields
  • Primary submit and return links

Contract

Contract
Input or boundaryBehavior
Sign innext-auth credentials response; verified email required
SignupName, email, password; eight-character minimum
ResetRequest form and token-based password update
GoogleButton markup exists but showGoogleAuth=false

States and feedback

  • Ready
  • Submitting
  • Invalid/unverified credentials
  • Email confirmation prompt
  • Reset requested

Interaction and composition

Use the actual credential forms, not an invented social-auth variant. The migration notice tells pre-2026 accounts to reset their password. Confirmation copy describes a next step rather than proof the email was delivered.

Responsive behavior

Card max-width 448px with 32px padding. Full-page phone examples retain content when the form exceeds the viewport.

Accessibility contract

Auth labels have htmlFor/id, unlike several dashboard/settings fields. Error messages still need live-region and field association work.

Known implementation gaps

Turnstile is deliberately excluded from offline captures and is not shown as passed. OAuth, tokens and mail delivery remain provider-dependent source contracts.

Source references

Source references
Repository fileResponsibility
app/auth/sign-in/SignInClient.tsxLogin form
app/auth/sign-up/SignUpClient.tsxSignup form
app/auth/forgot-password/ForgotPasswordClient.tsxRecovery request

Examples from the app

Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Auth Sign In Default Desktop Light · Screen · Light · Desktop · 2880 × 2000 px
Auth Sign Up Default Desktop Light · Screen · Light · Desktop · 2880 × 2000 px
Auth Forgot Password Default Desktop Light · Screen · Light · Desktop · 2880 × 2000 px
Auth Reset Password Default Desktop Light · Screen · Light · Desktop · 2880 × 2000 px
Auth Sign In Invalid Credentials Desktop Light · Screen · Light · Desktop · Invalid Credentials · 2880 × 2000 px
Auth Reset Password Missing Token Desktop Light · Screen · Light · Desktop · Missing Token · 2880 × 2000 px
Auth Forgot Password Confirmation Desktop Light · Screen · Light · Desktop · Confirmation · 2880 × 2000 px
Auth Sign Up Confirmation Desktop Light · Screen · Light · Desktop · Confirmation · 2880 × 2000 px

Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0