Inkline Sign In

Features

• The quote remains a subtly accent-tinted paper card while its surface and ink follow the active theme.
• Underline-only "ink" fields — no boxes: a resting hairline with an ink line that draws in from the left (transform: scaleX) on focus
• Floating labels that live on the line and rise with a springy cubic-bezier(0.3, 1.4, 0.4, 1) transform when the field is focused or filled
• Leading JetBrains Mono state glyph per field — › at rest (ink-teal while focused), cross-fading to ✓ on :user-valid and ! on :user-invalid
• Password strength meter integrated into the underline — the line itself fills proportionally (¼ steps) and re-tints error → warning → primary → success, with a polite mono aria-live readout (weak → strong)
• Real HTML5 validation surfaced through :user-invalid — inline error text only appears after a field is touched, wired via aria-describedby and aria-invalid
• Show/hide password toggle with an accessible aria-pressed button and inline Tabler eye icons
• Caps-Lock warning on the password field via KeyboardEvent.getModifierState('CapsLock') and a polite aria-live hint
• Remember-me checkbox that persists the email to localStorage and restores it (pre-floating the label) on the next visit
• Submit is intercepted with preventDefault — it validates, runs a simulated async flow (spinner → success confirmation in a role="status" live region), and never navigates
• Google and Apple continue buttons carrying the official brand marks — the multicolour Google “G” and the monochrome Apple silhouette (currentColor, so it stays legible in dark) — with accessible labels
• Deep inky aside styled as a ruled journal page, tinted with the active design system's accent — layered aurora gradients, fine ink rules, a ledger margin line, a drawn returns sparkline (SVG stroke-dash), a paper quote card with a real reader portrait, and a mono returns-stat chip
• Springy scale(0.97) press feedback on all buttons
• Full dark-mode token set (body.dark) ready for the host shell to drive; the aside keeps its deep inky journal look in both themes
• Staggered fade-and-slide entrance cascading each form section and the aside's eyebrow, quote card and stat into view (the gradient panel itself never animates, so it always paints)

Accessibility

Form labels

Every input has an associated <label> via for/id — the floating label is the real label

Autocomplete

email and current-password on the respective fields

Live status

role="status" with aria-live="polite" for the confirmation

Field errors

Each input wires aria-describedby to its error text and toggles aria-invalid on input/blur

Validation

Native :user-invalid styling — glyph, underline and text change together, never color alone

Password reveal

aria-pressed button with an aria-label that swaps between Show and Hide

Password strength

Underline fill paired with a polite mono aria-live text readout, not color alone

Caps-Lock warning

Polite aria-live hint driven by getModifierState('CapsLock'), cleared on blur

State glyphs

Decorative ›/✓/! spans are aria-hidden — state is announced via aria-invalid and error text

Focus indicators

Global :focus-visible outline plus the drawn underline on field focus

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Inkline Sign In in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the login is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.