# Inkline Sign In > A two-column editorial sign-in for Inkline: underline-only fields with floating labels, a drawn accent focus line, JetBrains Mono state glyphs (› ✓ !) and a password strength meter living inside the underline itself, beside a ruled panel — tinted with the active design system's accent — carrying a paper testimonial card. - Category: Login - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Ember Studio - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: form, validation - Page: https://builder.atheros.ai/components/login-inkline - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_login_inkline/preview-27d23f34793b.webp ## 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 `