174 lines
No EOL
5.3 KiB
HTML
174 lines
No EOL
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Signal – Cyan & Red Accent Login</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<link rel="stylesheet" href="signal-cyan-red.css" />
|
||
</head>
|
||
<body>
|
||
<main class="shell" aria-label="Signal login">
|
||
<section class="brand">
|
||
<header>
|
||
<div class="brand-mark">
|
||
<div class="brand-sigil" aria-hidden="true"><span></span></div>
|
||
<div>
|
||
<div class="brand-name">Signal</div>
|
||
<div class="brand-system">Cyan & Red Accent</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div>
|
||
<h1 class="headline">
|
||
Less noise. One clear <span>signal</span>.
|
||
</h1>
|
||
<p class="lede">
|
||
A cyan-led system tuned for longer, focused sessions,
|
||
with red reserved for clear, honest error states.
|
||
</p>
|
||
|
||
<div class="pill-row" aria-label="System traits">
|
||
<div class="pill">
|
||
<span class="pill-dot"></span>Private by design
|
||
</div>
|
||
<div class="pill">
|
||
<span class="pill-dot"></span>Accessible
|
||
</div>
|
||
<div class="pill">
|
||
<span class="pill-dot"></span>Distraction-aware
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="points" aria-label="Design principles">
|
||
<li>
|
||
<span aria-hidden="true"></span>
|
||
<div>Clear visual hierarchy and predictable navigation.</div>
|
||
</li>
|
||
<li>
|
||
<span aria-hidden="true"></span>
|
||
<div>Cyan primary used only for the next main action.</div>
|
||
</li>
|
||
<li>
|
||
<span aria-hidden="true"></span>
|
||
<div>Red reserved for genuine errors and urgent states.</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<p class="notice">
|
||
<strong>Signal</strong> avoids surplus decisions near the main action
|
||
to reduce cognitive load.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="form-card" aria-label="Sign-in">
|
||
<header class="form-header">
|
||
<div>
|
||
<h2 class="form-title" id="login-title">Sign in</h2>
|
||
<p class="form-subtitle">
|
||
Continue to your focused workspace.
|
||
</p>
|
||
</div>
|
||
<div class="state-pill" aria-hidden="true">Session is private</div>
|
||
</header>
|
||
|
||
<form class="field-grid" id="login-form" novalidate aria-describedby="privacy-note">
|
||
<div class="field">
|
||
<div class="field-row">
|
||
<label class="field-label" for="email">Email</label>
|
||
</div>
|
||
<div class="input-shell">
|
||
<div class="input-icon" aria-hidden="true"></div>
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
autocomplete="email"
|
||
placeholder="you@example.org"
|
||
required
|
||
/>
|
||
</div>
|
||
<p class="field-hint">
|
||
Use the address you registered with this space.
|
||
</p>
|
||
<p class="helper-message" id="email-error" aria-live="polite">
|
||
Enter a valid email address.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="field-row">
|
||
<label class="field-label" for="password">Password</label>
|
||
</div>
|
||
<div class="input-shell">
|
||
<div class="input-icon" aria-hidden="true"></div>
|
||
<input
|
||
id="password"
|
||
name="password"
|
||
type="password"
|
||
autocomplete="current-password"
|
||
placeholder="••••••••"
|
||
minlength="8"
|
||
required
|
||
/>
|
||
</div>
|
||
<p class="field-hint">
|
||
We never show passwords in plain text.
|
||
</p>
|
||
<p class="helper-message" id="password-error" aria-live="polite">
|
||
Your password must contain at least eight characters.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="actions-row">
|
||
<button class="primary-btn" type="submit">
|
||
<span aria-hidden="true"></span>
|
||
<span>Sign in</span>
|
||
</button>
|
||
<button class="ghost-link" type="button">
|
||
Forgot your password?
|
||
</button>
|
||
</div>
|
||
|
||
<div class="meta-row">
|
||
<div id="privacy-note">
|
||
By signing in, you agree to the terms and privacy policy.
|
||
</div>
|
||
<div>
|
||
<a href="#" rel="noopener">Review data use</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="toggle-row" aria-label="Appearance">
|
||
<span>Appearance</span>
|
||
<div class="theme-toggle" aria-label="Theme" role="radiogroup">
|
||
<button
|
||
type="button"
|
||
class="theme-button"
|
||
data-theme="light"
|
||
data-active="true"
|
||
aria-checked="true"
|
||
role="radio"
|
||
>
|
||
Light
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="theme-button"
|
||
data-theme="dark"
|
||
aria-checked="false"
|
||
role="radio"
|
||
>
|
||
Dark
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="signal-cyan-red.js"></script>
|
||
</body>
|
||
</html> |