604 lines
No EOL
15 KiB
HTML
604 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Signal UI – Graphite Rose Accent</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<style>
|
||
:root {
|
||
--page: #F6F4F5;
|
||
--page-accent: #ECE6E8;
|
||
--surface: #FFFFFF;
|
||
--surface-alt: #F1EDF0;
|
||
--surface-strong: #E1D5DA;
|
||
--text: #252428;
|
||
--muted: #6F6A74;
|
||
--border: #D3C6CC;
|
||
--primary: #C05179;
|
||
--primary-hover: #A34266;
|
||
--secondary: #E4D6DD;
|
||
--secondary-hover: #D5C3CC;
|
||
--accent-soft: #B5828C;
|
||
--accent-soft-alt: #8E6A73;
|
||
--success: #5E8C76;
|
||
--danger: #A65A66;
|
||
--focus: rgba(192, 81, 121, 0.35);
|
||
|
||
--shadow-soft: 0 18px 40px rgba(18, 12, 16, 0.18);
|
||
|
||
--font-body: "Atkinson Hyperlegible",
|
||
system-ui, -apple-system, BlinkMacSystemFont,
|
||
"Segoe UI", sans-serif;
|
||
--font-ui: "Lexend",
|
||
system-ui, -apple-system, BlinkMacSystemFont,
|
||
"Segoe UI", sans-serif;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
--page: #040506;
|
||
--page-accent: #0B0C10;
|
||
--surface: #121218;
|
||
--surface-alt: #1C1B24;
|
||
--surface-strong: #2B2733;
|
||
--text: #F5F3F6;
|
||
--muted: #BBB1C2;
|
||
--border: #443C4A;
|
||
--primary: #DC6A92;
|
||
--primary-hover: #C4547C;
|
||
--secondary: #3C3240;
|
||
--secondary-hover: #4A3E4F;
|
||
--accent-soft: #C492A0;
|
||
--accent-soft-alt: #9A6F7E;
|
||
--success: #7FA891;
|
||
--danger: #C77783;
|
||
--focus: rgba(220, 106, 146, 0.55);
|
||
|
||
--shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font-family: var(--font-body);
|
||
background: radial-gradient(circle at top left,
|
||
var(--page-accent), var(--page));
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32px 16px;
|
||
}
|
||
|
||
.shell {
|
||
max-width: 1080px;
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
|
||
gap: 40px;
|
||
background: linear-gradient(135deg,
|
||
rgba(255,255,255,0.24),
|
||
rgba(255,255,255,0));
|
||
backdrop-filter: blur(20px);
|
||
padding: 32px;
|
||
border-radius: 28px;
|
||
box-shadow: var(--shadow-soft);
|
||
border: 1px solid rgba(255,255,255,0.28);
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.shell {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
padding: 24px;
|
||
gap: 24px;
|
||
}
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.brand-mark {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.brand-sigil {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 18px;
|
||
background: radial-gradient(circle at 30% 0%,
|
||
var(--accent-soft), var(--accent-soft-alt));
|
||
box-shadow:
|
||
0 0 0 1px rgba(255,255,255,0.45),
|
||
0 16px 32px rgba(44, 24, 40, 0.55);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.brand-sigil::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 8px 9px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(18, 12, 16, 0.22);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.brand-sigil span {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 6px;
|
||
border: 2px solid rgba(255,255,255,0.75);
|
||
box-shadow: inset 0 0 0 1px rgba(18, 12, 16, 0.45);
|
||
}
|
||
|
||
.brand-name {
|
||
font-family: var(--font-ui);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.brand-system {
|
||
font-family: var(--font-ui);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.headline {
|
||
font-family: var(--font-ui);
|
||
font-weight: 500;
|
||
font-size: clamp(32px, 3.2vw, 40px);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.headline span {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.lede {
|
||
margin-top: 8px;
|
||
max-width: 520px;
|
||
font-size: 17px;
|
||
line-height: 1.6;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.pill-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.65);
|
||
border: 1px solid rgba(255,255,255,0.9);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.pill-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.points {
|
||
margin-top: 18px;
|
||
display: grid;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.points li {
|
||
list-style: none;
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.points li span {
|
||
margin-top: 4px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,0.9);
|
||
background: linear-gradient(135deg,
|
||
var(--secondary), var(--accent-soft));
|
||
}
|
||
|
||
.notice {
|
||
margin-top: 18px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.notice strong {
|
||
color: var(--accent-soft-alt);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-card {
|
||
background: radial-gradient(circle at 0% 0%,
|
||
rgba(255,255,255,0.2), rgba(255,255,255,0));
|
||
border-radius: 24px;
|
||
padding: 20px 20px 18px;
|
||
border: 1px solid rgba(255,255,255,0.9);
|
||
box-shadow: 0 18px 40px rgba(18, 12, 16, 0.35);
|
||
backdrop-filter: blur(18px);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.form-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -1px;
|
||
border-radius: inherit;
|
||
border: 1px solid rgba(192, 81, 121, 0.3);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 160ms ease-out;
|
||
}
|
||
|
||
.form-card:focus-within::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.form-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.form-title {
|
||
font-family: var(--font-ui);
|
||
font-size: 19px;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.form-subtitle {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.state-pill {
|
||
padding: 5px 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,0.85);
|
||
background: linear-gradient(135deg,
|
||
rgba(255,255,255,0.95),
|
||
rgba(255,255,255,0.7));
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.09em;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.field-grid {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
.field-label {
|
||
font-family: var(--font-ui);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.input-shell {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.9);
|
||
border: 1px solid rgba(211, 198, 204, 0.9);
|
||
padding: 7px 12px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.input-shell:focus-within {
|
||
border-color: var(--primary);
|
||
box-shadow:
|
||
0 0 0 1px var(--primary),
|
||
0 0 0 4px var(--focus);
|
||
}
|
||
|
||
.input-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 5px;
|
||
background: linear-gradient(135deg,
|
||
var(--secondary), var(--accent-soft));
|
||
opacity: 0.85;
|
||
}
|
||
|
||
input[type="email"],
|
||
input[type="password"] {
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
font: inherit;
|
||
color: var(--text);
|
||
width: 100%;
|
||
}
|
||
|
||
input::placeholder {
|
||
color: rgba(111,106,116,0.8);
|
||
}
|
||
|
||
.field-hint {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.actions-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.primary-btn {
|
||
border: none;
|
||
border-radius: 999px;
|
||
padding: 9px 20px;
|
||
font-family: var(--font-ui);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
background: radial-gradient(circle at 0% 0%,
|
||
#FFEFF5, var(--primary));
|
||
color: #FDF7FA;
|
||
box-shadow: 0 14px 28px rgba(43, 21, 35, 0.6);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 120ms ease-out,
|
||
box-shadow 120ms ease-out,
|
||
background 120ms ease-out;
|
||
}
|
||
|
||
.primary-btn span {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,0.85);
|
||
background: linear-gradient(135deg,
|
||
rgba(255,255,255,0.95),
|
||
rgba(255,255,255,0.65));
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background: radial-gradient(circle at 0% 0%,
|
||
#FFE3F0, var(--primary-hover));
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 18px 36px rgba(43, 21, 35, 0.7);
|
||
}
|
||
|
||
.primary-btn:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 10px 20px rgba(43, 21, 35, 0.7);
|
||
}
|
||
|
||
.ghost-link {
|
||
border: none;
|
||
background: transparent;
|
||
font-family: var(--font-ui);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
text-decoration: underline;
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 3px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.meta-row {
|
||
margin-top: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.meta-row a {
|
||
color: inherit;
|
||
}
|
||
|
||
.meta-row a:hover {
|
||
color: var(--accent-soft-alt);
|
||
}
|
||
|
||
.toggle-row {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.theme-toggle {
|
||
border-radius: 999px;
|
||
padding: 4px;
|
||
border: 1px solid rgba(211,198,204,0.9);
|
||
background: rgba(255,255,255,0.9);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.theme-toggle button {
|
||
border: none;
|
||
border-radius: 999px;
|
||
padding: 4px 10px;
|
||
font-size: 11px;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.theme-toggle button[data-active="true"] {
|
||
background: var(--secondary);
|
||
color: var(--text);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
scroll-behavior: auto !important;
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
</style>
|
||
</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">Graphite & Rose Accent</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div>
|
||
<h1 class="headline">Less noise. One clear <span>signal</span>.</h1>
|
||
<p class="lede">
|
||
A calm graphite system with a single rose accent for next actions.
|
||
Designed for longer sessions, focused work and distraction-aware sign-in.
|
||
</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>Low-noise colours tuned for longer, calmer sessions.</div></li>
|
||
<li><span aria-hidden="true"></span><div>Readable typography with generous spacing and line height.</div></li>
|
||
</ul>
|
||
<p class="notice">
|
||
<strong>Signal</strong> keeps one primary path per screen and avoids surplus decisions near the main action.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-label="Sign-in" class="form-card">
|
||
<header class="form-header">
|
||
<div>
|
||
<h2 class="form-title">Sign in</h2>
|
||
<p class="form-subtitle">Continue to your distraction-aware workspace.</p>
|
||
</div>
|
||
<div class="state-pill" aria-hidden="true">Session is private</div>
|
||
</header>
|
||
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label class="field-label" for="email">Email</label>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label" for="password">Password</label>
|
||
<div class="input-shell">
|
||
<div class="input-icon" aria-hidden="true"></div>
|
||
<input id="password" name="password" type="password"
|
||
autocomplete="current-password"
|
||
placeholder="••••••••" required />
|
||
</div>
|
||
<p class="field-hint">We never show passwords in plain text.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="actions-row">
|
||
<button class="primary-btn" type="submit">
|
||
<span aria-hidden="true"></span>
|
||
<span>Begin focused session</span>
|
||
</button>
|
||
<button class="ghost-link" type="button">Forgot your password?</button>
|
||
</div>
|
||
|
||
<div class="meta-row">
|
||
<div>By signing in, you agree to the terms and privacy policy.</div>
|
||
<div><a href="#">Review data use</a></div>
|
||
</div>
|
||
|
||
<div class="toggle-row" aria-label="Appearance">
|
||
<span>Appearance</span>
|
||
<div class="theme-toggle" role="radiogroup" aria-label="Theme">
|
||
<button type="button" data-theme="light"
|
||
data-active="true" aria-checked="true" role="radio">
|
||
Light
|
||
</button>
|
||
<button type="button" data-theme="dark"
|
||
aria-checked="false" role="radio">
|
||
Dark
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
const html = document.documentElement;
|
||
const buttons = document.querySelectorAll('.theme-toggle button');
|
||
|
||
buttons.forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const theme = btn.getAttribute('data-theme');
|
||
html.setAttribute('data-theme', theme);
|
||
buttons.forEach((b) => {
|
||
const active = b === btn;
|
||
b.dataset.active = active ? 'true' : 'false';
|
||
b.setAttribute('aria-checked', active ? 'true' : 'false');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |