Spaces:
Running
Running
| <!-- | |
| COMMITMENT | |
| --------- | |
| aesthetic: utilitarian | |
| era: modernist-swiss | |
| surface feel: matte paper | |
| pace: deliberate | |
| DOES NOT use rounded icon cards. | |
| DOES NOT have a centered hero. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Docket — Task management for teams that have outgrown spreadsheets</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;500;800&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: oklch(0.97 0.01 80); | |
| --text: oklch(0.15 0.012 80); | |
| --muted: oklch(0.48 0.012 80); | |
| --accent: oklch(0.58 0.18 25); | |
| --accent-light: oklch(0.93 0.03 25); | |
| --accent-text: oklch(0.98 0.015 25); | |
| --border: oklch(0.84 0.012 80); | |
| --surface: oklch(0.94 0.014 80); | |
| --step-1: 1rem; | |
| --step-2: 1.25rem; | |
| --step-3: 1.563rem; | |
| --step-4: 1.953rem; | |
| --step-5: clamp(2.441rem, 4.5vw, 3.75rem); | |
| --font-display: 'Libre Franklin', sans-serif; | |
| --font-body: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; | |
| } | |
| html { font-size: 16px; scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-body); | |
| font-size: var(--step-1); | |
| line-height: 1.5; | |
| color: var(--text); | |
| background-color: var(--bg); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 3px; | |
| } | |
| /* ── Nav ── */ | |
| nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 48px; | |
| background-color: var(--bg); | |
| border-bottom: 1px solid var(--border); | |
| height: 60px; | |
| } | |
| .nav-brand { | |
| font-family: var(--font-display); | |
| font-weight: 800; | |
| font-size: var(--step-2); | |
| letter-spacing: -0.02em; | |
| text-decoration: none; | |
| color: var(--text); | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 32px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| font-family: var(--font-display); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| color: var(--muted); | |
| transition: color 0.15s; | |
| } | |
| .nav-links a:hover { color: var(--text); } | |
| .nav-cta { | |
| display: inline-block; | |
| font-family: var(--font-display); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| color: var(--bg); | |
| background-color: var(--text); | |
| padding: 8px 20px; | |
| transition: background-color 0.2s, color 0.2s; | |
| } | |
| .nav-cta:hover { | |
| background-color: var(--accent); | |
| color: var(--accent-text); | |
| } | |
| /* ── Main ── */ | |
| main { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 48px; | |
| } | |
| /* ── Hero ── */ | |
| .hero { | |
| padding-top: 120px; | |
| padding-bottom: 96px; | |
| } | |
| .hero h1 { | |
| font-family: var(--font-display); | |
| font-weight: 800; | |
| font-size: var(--step-5); | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| max-width: 16ch; | |
| margin-bottom: 24px; | |
| } | |
| .hero p { | |
| font-size: var(--step-2); | |
| line-height: 1.6; | |
| max-width: 48ch; | |
| color: var(--muted); | |
| margin-bottom: 48px; | |
| } | |
| .hero-cta { | |
| display: inline-block; | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| font-size: var(--step-1); | |
| text-decoration: none; | |
| color: var(--accent-text); | |
| background-color: var(--accent); | |
| padding: 14px 32px; | |
| transition: filter 0.2s; | |
| } | |
| .hero-cta:hover { filter: brightness(1.08); } | |
| /* ── Section numeral ── */ | |
| .section-numeral { | |
| font-family: var(--font-display); | |
| font-weight: 300; | |
| font-size: clamp(5rem, 10vw, 9.5rem); | |
| line-height: 0.9; | |
| letter-spacing: -0.04em; | |
| color: oklch(0.80 0.015 80); | |
| margin-bottom: 24px; | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| /* ── Content sections ── */ | |
| .content-section { | |
| padding-top: 72px; | |
| padding-bottom: 72px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .content-section h2 { | |
| font-family: var(--font-display); | |
| font-weight: 800; | |
| font-size: var(--step-4); | |
| line-height: 1.15; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 48px; | |
| } | |
| /* ── How it works ── */ | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 48px; | |
| } | |
| .step-number { | |
| font-family: var(--font-display); | |
| font-weight: 300; | |
| font-size: var(--step-3); | |
| color: var(--accent); | |
| margin-bottom: 12px; | |
| } | |
| .step h3 { | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| font-size: var(--step-2); | |
| line-height: 1.3; | |
| margin-bottom: 12px; | |
| } | |
| .step p { | |
| font-size: var(--step-1); | |
| line-height: 1.65; | |
| color: var(--muted); | |
| } | |
| /* ── Specifications ── */ | |
| .spec-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .spec-item { | |
| padding: 24px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .spec-item:nth-child(odd) { padding-right: 48px; } | |
| .spec-item:nth-child(even) { | |
| padding-left: 48px; | |
| border-left: 1px solid var(--border); | |
| } | |
| .spec-item h3 { | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| font-size: var(--step-2); | |
| margin-bottom: 8px; | |
| } | |
| .spec-item p { | |
| font-size: var(--step-1); | |
| line-height: 1.65; | |
| color: var(--muted); | |
| } | |
| /* ── Proof ── */ | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 48px; | |
| margin-bottom: 48px; | |
| } | |
| .metric-value { | |
| font-family: var(--font-display); | |
| font-weight: 800; | |
| font-size: var(--step-5); | |
| line-height: 1; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 12px; | |
| } | |
| .accent { color: var(--accent); } | |
| .metric-label { | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| font-size: 0.8125rem; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .proof-note { | |
| font-size: var(--step-1); | |
| line-height: 1.65; | |
| color: var(--muted); | |
| max-width: 52ch; | |
| } | |
| .proof-cta { | |
| display: inline-block; | |
| font-family: var(--font-display); | |
| font-weight: 500; | |
| font-size: var(--step-1); | |
| text-decoration: none; | |
| color: var(--accent-text); | |
| background-color: var(--accent); | |
| padding: 14px 32px; | |
| margin-top: 48px; | |
| transition: filter 0.2s; | |
| } | |
| .proof-cta:hover { filter: brightness(1.08); } | |
| /* ── Footer ── */ | |
| footer { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 48px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .footer-brand { | |
| font-family: var(--font-display); | |
| font-weight: 800; | |
| font-size: var(--step-2); | |
| margin-bottom: 8px; | |
| } | |
| .footer-copy { | |
| font-size: 0.8125rem; | |
| color: var(--muted); | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 32px; | |
| list-style: none; | |
| } | |
| .footer-links a { | |
| font-family: var(--font-display); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| color: var(--muted); | |
| transition: color 0.15s; | |
| } | |
| .footer-links a:hover { color: var(--text); } | |
| /* ── Responsive 390px ── */ | |
| @media (max-width: 640px) { | |
| nav { padding: 0 24px; } | |
| .nav-links .nav-hide { display: none; } | |
| main { padding: 0 24px; } | |
| .hero { | |
| padding-top: 72px; | |
| padding-bottom: 48px; | |
| } | |
| .hero h1 { max-width: none; } | |
| .steps { | |
| grid-template-columns: 1fr; | |
| gap: 36px; | |
| } | |
| .spec-list { grid-template-columns: 1fr; } | |
| .spec-item:nth-child(odd) { padding-right: 0; } | |
| .spec-item:nth-child(even) { | |
| padding-left: 0; | |
| border-left: none; | |
| } | |
| .metrics { | |
| grid-template-columns: 1fr; | |
| gap: 36px; | |
| } | |
| .content-section { | |
| padding-top: 48px; | |
| padding-bottom: 48px; | |
| } | |
| .section-numeral { font-size: 5rem; } | |
| footer { | |
| flex-direction: column; | |
| padding: 48px 24px; | |
| gap: 24px; | |
| } | |
| .footer-links { | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <a href="#" class="nav-brand">Docket</a> | |
| <ul class="nav-links"> | |
| <li><a href="#how" class="nav-hide">How it works</a></li> | |
| <li><a href="#specs" class="nav-hide">Specifications</a></li> | |
| <li><a href="#proof" class="nav-hide">Numbers</a></li> | |
| <li><a href="#" class="nav-cta">Start a workspace</a></li> | |
| </ul> | |
| </nav> | |
| <main> | |
| <section class="hero"> | |
| <h1>Work moves forward when you can see what's waiting.</h1> | |
| <p>Docket assigns work, tracks completion, and surfaces blockers — for teams of 3 to 15 who've outgrown shared spreadsheets but don't need enterprise bloat.</p> | |
| <a href="#" class="hero-cta">Start a workspace →</a> | |
| </section> | |
| <section id="how" class="content-section"> | |
| <div class="section-numeral">01</div> | |
| <h2>How it works</h2> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-number">01</div> | |
| <h3>Assign</h3> | |
| <p>Each task has one owner, one deadline, zero ambiguity. If something needs doing, someone specific is responsible — not "the team."</p> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">02</div> | |
| <h3>Track</h3> | |
| <p>Status isn't a feeling — it's a column, a timestamp, a comment thread. You see progress the way a dispatcher sees a rail yard.</p> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">03</div> | |
| <h3>Resolve</h3> | |
| <p>Blocked tasks surface automatically. No weekly status meeting required. The work tells you where it's stuck; you don't have to ask.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="specs" class="content-section"> | |
| <div class="section-numeral">02</div> | |
| <h2>Specifications</h2> | |
| <div class="spec-list"> | |
| <div class="spec-item"> | |
| <h3>Persistent boards</h3> | |
| <p>State saves automatically. Close the tab, restart the browser, switch devices — your board is exactly where you left it, down to the scroll position.</p> | |
| </div> | |
| <div class="spec-item"> | |
| <h3>Threaded comments</h3> | |
| <p>Every task has its own comment thread. Context stays with the work, not buried in a chat channel with 200 other conversations.</p> | |
| </div> | |
| <div class="spec-item"> | |
| <h3>Full audit log</h3> | |
| <p>Every change recorded: who moved what, when, and from where. Revert any single action without disrupting the rest of the board.</p> | |
| </div> | |
| <div class="spec-item"> | |
| <h3>Batch operations</h3> | |
| <p>Select up to 50 tasks. Reassign, shift deadlines, move columns — all at once. p99 response under 800 ms on a 200-task board.</p> | |
| </div> | |
| <div class="spec-item"> | |
| <h3>Sticky filters</h3> | |
| <p>Set a filter once; Docket remembers it next time you return. Your view, your way, persisted across sessions and devices.</p> | |
| </div> | |
| <div class="spec-item"> | |
| <h3>Business-hour deadlines</h3> | |
| <p>Due dates respect working hours — 09:00 to 18:00, in each team member's local timezone. No midnight surprises, no weekend fire drills.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="proof" class="content-section"> | |
| <div class="section-numeral">03</div> | |
| <h2>Numbers, not promises</h2> | |
| <div class="metrics"> | |
| <div class="metric"> | |
| <div class="metric-value"><span class="accent">2,400</span></div> | |
| <div class="metric-label">Teams since 2021</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">1.2<span class="accent">M</span></div> | |
| <div class="metric-label">Tasks completed</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-value">47<span class="accent">s</span></div> | |
| <div class="metric-label">Avg. time to first task</div> | |
| </div> | |
| </div> | |
| <p class="proof-note">Docket is free for teams up to 5. Paid plans start at $6 per member per month, billed annually. No per-seat surprises at renewal.</p> | |
| <a href="#" class="proof-cta">Start a workspace →</a> | |
| </section> | |
| </main> | |
| <footer> | |
| <div> | |
| <div class="footer-brand">Docket</div> | |
| <div class="footer-copy">© 2024 Docket Inc. All rights reserved.</div> | |
| </div> | |
| <ul class="footer-links"> | |
| <li><a href="#">Documentation</a></li> | |
| <li><a href="#">Changelog</a></li> | |
| <li><a href="#">Status</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </footer> | |
| </body> | |
| </html> |