← Back to the library

Auth form · Education

Neuma — Access-Code Sign-In Form

Sign in to save

A simple unboxed sign-in group combines a welcome heading, explanatory copy, one labeled access-code field, a full-width dark button and recovery link.

Visit original website ↗Captured Sep 30, 2026 · 1440px wide

Build with this design

Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.

Download DESIGN.md ↓
View DESIGN.md
---
version: alpha
name: Neuma — Access-Code Sign-In Form
colors:
  primary: '#252A2C'
  canvas: '#F6F5F1'
  surface: '#FDFCF9'
  muted: '#696C6A'
typography:
  heading:
    fontFamily: '"Geist Sans", -apple-system, BlinkMacSystemFont, sans-serif'
    fontSize: 48px
    fontWeight: 500
    lineHeight: 53.76px
  body:
    fontFamily: '"Geist Sans", -apple-system, BlinkMacSystemFont, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
A simple unboxed sign-in group combines a welcome heading, explanatory copy, one labeled access-code field, a full-width dark button and recovery link. Inspected at 1440px desktop and 390px mobile on 2026-09-30. Source-page scripts repeatedly stalled capture; these screenshots use the site’s own no-JavaScript rendering. No artwork was invented or added. Static layout is represented; dynamic media, animation, carousel transitions and interactive states are not.

## Colors
Measured source-site tokens: charcoal #252A2C for primary text/actions, warm ivory #F6F5F1 for the page, pale #FDFCF9 surfaces, and muted #696C6A supporting text. Transparent component roots inherit the page canvas. The dark video panel, where present, is #111416. Palette values are source samples, not an assurance that every color occurs in every crop.

## Typography
The source uses Geist with Helvetica Neue, Arial and sans-serif fallbacks. Sampled heading: 48px with 53.76px leading, weight 500; mobile: 32px / 36.8px. Sampled supporting copy: 16px / 24px. Medium-weight headings and muted supporting copy create hierarchy without exaggerated weight. These are computed CSS values, not proof of font availability in another project.

## Layout
The crop contains only .nw-entry-form, excluding navigation, footer and decorative art. Align the heading, copy, label, input, action and recovery link to the left. On mobile retain 24px outer page gutters and the full-width field/action pairing. Two inspected widths establish the arrangements, not the exact breakpoint. Use the supplied component bounds as reference rather than universal fixed dimensions.

## Elevation & Depth
Depth is restrained: predominantly flat typography and lightly contrasting surfaces, with a small soft shadow on dark actions where visible. Keep the surrounding canvas unboxed. Shadow strength is a visual observation; exact blur and offset were not measured.

## Shapes
Use modest rounded rectangular buttons and fields, fine separators and nearly square editorial surfaces. Reserve circular controls for play/pagination where present. Avoid turning all content into floating cards. Corner radius values should be sampled from the intended control when reproducing it; visual shape guidance is not an exact token claim.

## Components
The source uses a code from a welcome email, not a username/password pair. Capture is logged out; no credentials were entered or form submitted. Preserve the explicit label and recovery path. Authentication success, validation, error states and code delivery were not tested.

## Do's and Don'ts
Do preserve whitespace, alignment, label clarity and the low-color hierarchy. Do use authentic product copy, prices and customer evidence when adapting. Do not treat source claims as independently verified facts. Do not infer interactions, responsiveness beyond the two widths, animation timing, or accessibility conformance from these captures. The JavaScript-disabled evidence does not verify the live animated artwork or video playback.

If copying fails, download the file or select the text above.

Full screenshot of Neuma — Access-Code Sign-In Form

Design belongs to its original creator. Use this example for inspiration, not as a licensed template.

A little more taste in your inbox.

A weekly selection of standout designs, useful UI elements, and fresh inspiration from TastefulKit.