Created
May 10, 2026 18:01
-
-
Save heytulsiprasad/512a6eaa54839e7878a81a6a9b6b3a82 to your computer and use it in GitHub Desktop.
Tasq · Aurora design moodboard — premium-tech direction
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Aurora · Tasq Moodboard</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=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| /* foundation — pure whites with cool tint */ | |
| --bg-page: #FFFFFF; | |
| --bg-canvas: #FFFFFF; | |
| --bg-card: #FFFFFF; | |
| --bg-elevated: #F8F9FB; | |
| --bg-input: #F4F6FA; | |
| --bg-hover: #F2F4F8; | |
| --bg-pressed: #ECEFF5; | |
| --bg-tinted: #F4F4FE; /* brand-tinted */ | |
| /* text — slate with slight blue undertone */ | |
| --fg-primary: #0A0B14; | |
| --fg-secondary: #404451; | |
| --fg-tertiary: #767D8E; | |
| --fg-muted: #B0B6C4; | |
| /* borders — clean and progressive */ | |
| --border-soft: rgba(15,23,42,0.05); | |
| --border-base: rgba(15,23,42,0.08); | |
| --border-strong: rgba(15,23,42,0.14); | |
| --border-focus: rgba(79,70,229,0.50); | |
| /* brand — indigo-600 */ | |
| --brand: #4F46E5; | |
| --brand-hover: #4338CA; | |
| --brand-tint: rgba(79,70,229,0.10); | |
| --brand-fg: #FFFFFF; | |
| --brand-bg-grad: linear-gradient(135deg,#6366F1 0%,#4F46E5 50%,#7C3AED 100%); | |
| /* status — jewel tones, more saturated than Onyx */ | |
| --status-backlog: #6B7280; | |
| --status-todo: #0EA5E9; | |
| --status-progress:#F59E0B; | |
| --status-review: #8B5CF6; | |
| --status-done: #10B981; | |
| --status-blocked: #EF4444; | |
| --status-bg-backlog: rgba(107,114,128,0.10); | |
| --status-bg-todo: rgba(14,165,233,0.10); | |
| --status-bg-progress:rgba(245,158,11,0.12); | |
| --status-bg-review: rgba(139,92,246,0.10); | |
| --status-bg-done: rgba(16,185,129,0.10); | |
| --status-bg-blocked: rgba(239,68,68,0.10); | |
| --priority-urgent:#DC2626; | |
| --priority-high: #F97316; | |
| --priority-med: #6B7280; | |
| --priority-low: #B0B6C4; | |
| /* spacing — 4px base, medium density */ | |
| --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; | |
| --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px; | |
| /* radius */ | |
| --r-1: 6px; --r-2: 8px; --r-3: 10px; --r-4: 14px; --r-5: 18px; | |
| /* type */ | |
| --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; | |
| --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; | |
| /* layered shadows — the signature */ | |
| --shadow-xs: 0 1px 0 rgba(15,23,42,0.04); | |
| --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 0 rgba(15,23,42,0.03); | |
| --shadow-md: 0 4px 16px -4px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); | |
| --shadow-lg: 0 12px 32px -8px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.04); | |
| --shadow-pop: 0 16px 48px -8px rgba(15,23,42,0.16), 0 4px 12px -2px rgba(15,23,42,0.08); | |
| --shadow-brand: 0 8px 24px -8px rgba(79,70,229,0.35), 0 1px 0 rgba(255,255,255,0.10) inset; | |
| --halo: 0 0 0 4px rgba(79,70,229,0.15); | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; padding: 0; } | |
| body { | |
| background: var(--bg-page); | |
| color: var(--fg-primary); | |
| font-family: var(--font-sans); | |
| font-size: 13.5px; | |
| line-height: 1.5; | |
| letter-spacing: -0.005em; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| /* ═══════════ DOC ═══════════ */ | |
| .doc { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-7); } | |
| section { padding: var(--s-9) 0; border-bottom: 1px solid var(--border-soft); } | |
| section:last-child { border-bottom: 0; } | |
| .section-label { | |
| display: inline-flex; align-items: center; gap: var(--s-2); | |
| font-family: var(--font-mono); | |
| font-size: 11px; font-weight: 500; | |
| color: var(--brand); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .section-label::before { | |
| content: ''; width: 14px; height: 1px; background: var(--brand); | |
| } | |
| h1 { font-size: 64px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; margin: 0; } | |
| h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 0; } | |
| h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; margin: 0; } | |
| p { margin: 0; color: var(--fg-secondary); line-height: 1.6; } | |
| .mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; letter-spacing: -0.01em; } | |
| .gradient-text { | |
| background: var(--brand-bg-grad); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* ═══════════ HERO ═══════════ */ | |
| .hero { padding: var(--s-10) 0 var(--s-9); position: relative; overflow: hidden; } | |
| .hero::before { | |
| /* faint aurora glow */ | |
| content: ''; | |
| position: absolute; | |
| top: -200px; right: -200px; | |
| width: 600px; height: 600px; | |
| background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.10), transparent 60%), | |
| radial-gradient(circle at 70% 70%, rgba(124,58,237,0.08), transparent 60%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .hero > * { position: relative; z-index: 1; } | |
| .hero-meta { | |
| display: inline-flex; align-items: center; gap: var(--s-3); | |
| margin-bottom: var(--s-6); | |
| padding: 6px 12px 6px 8px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: 999px; | |
| box-shadow: var(--shadow-sm); | |
| font-size: 12px; color: var(--fg-secondary); | |
| } | |
| .hero-meta .dot { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--brand); | |
| box-shadow: 0 0 0 3px rgba(79,70,229,0.18); | |
| } | |
| .hero h1 .accent { background: var(--brand-bg-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .hero-sub { | |
| margin-top: var(--s-5); | |
| max-width: 660px; | |
| font-size: 17px; line-height: 1.55; | |
| color: var(--fg-secondary); | |
| } | |
| .hero-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); } | |
| .tag { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| padding: 5px 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: 999px; | |
| font-size: 12px; color: var(--fg-secondary); | |
| box-shadow: var(--shadow-xs); | |
| } | |
| /* ═══════════ TOKENS ═══════════ */ | |
| .tokens { | |
| display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-5); | |
| margin-top: var(--s-6); | |
| } | |
| .token-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-3); | |
| padding: var(--s-5); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .token-card h3 { margin-bottom: var(--s-4); } | |
| .swatch-row { display: flex; flex-direction: column; gap: 2px; } | |
| .swatch { display: flex; align-items: center; gap: var(--s-3); padding: 6px 8px; border-radius: var(--r-1); } | |
| .swatch:hover { background: var(--bg-hover); } | |
| .swatch-chip { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-base); flex-shrink: 0; box-shadow: var(--shadow-xs); } | |
| .swatch-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } | |
| .swatch-name { font-size: 12.5px; color: var(--fg-primary); font-weight: 500; } | |
| .swatch-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-tertiary); } | |
| /* type spec */ | |
| .type-spec { display: flex; flex-direction: column; gap: var(--s-4); } | |
| .type-row { padding-bottom: var(--s-3); border-bottom: 1px solid var(--border-soft); } | |
| .type-row:last-child { border-bottom: 0; padding-bottom: 0; } | |
| .type-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: 10.5px; color: var(--fg-tertiary); margin-top: 4px; } | |
| .type-meta .mono { color: var(--fg-secondary); } | |
| .type-display { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; } | |
| .type-headline { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; } | |
| .type-body { font-size: 13.5px; color: var(--fg-secondary); line-height: 1.6; } | |
| .type-label { font-size: 11px; font-weight: 500; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.06em; } | |
| .type-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-primary); letter-spacing: -0.005em; } | |
| /* spacing */ | |
| .spacing-row { display: flex; align-items: center; gap: var(--s-3); } | |
| .spacing-bar { background: var(--brand); height: 8px; border-radius: 2px; } | |
| .spacing-name { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); width: 38px; } | |
| .spacing-px { font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); margin-left: auto; } | |
| /* ═══════════ COMPONENTS ═══════════ */ | |
| .components-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); margin-top: var(--s-6); } | |
| .component-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-3); | |
| padding: var(--s-5); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .component-card h3 { margin-bottom: var(--s-4); } | |
| .demo-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--border-soft); } | |
| .demo-row:last-child { border-bottom: 0; padding-bottom: 0; } | |
| .demo-label { width: 84px; font-size: 11px; color: var(--fg-tertiary); flex-shrink: 0; font-family: var(--font-mono); letter-spacing: 0; } | |
| /* button — premium feel with brand glow on primary */ | |
| .btn { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| height: 32px; padding: 0 14px; | |
| font-family: var(--font-sans); font-size: 13px; font-weight: 500; | |
| border-radius: var(--r-2); border: 1px solid transparent; | |
| cursor: pointer; | |
| transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease; | |
| letter-spacing: -0.005em; | |
| position: relative; | |
| } | |
| .btn:active { transform: translateY(0.5px); } | |
| .btn-primary { | |
| background: var(--brand); | |
| background-image: linear-gradient(180deg, rgba(255,255,255,0.10), transparent); | |
| color: var(--brand-fg); | |
| border-color: var(--brand-hover); | |
| box-shadow: var(--shadow-brand); | |
| } | |
| .btn-primary:hover { background-color: var(--brand-hover); } | |
| .btn-dark { | |
| background: var(--fg-primary); color: #fff; border-color: var(--fg-primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn-dark:hover { background: #1A1B26; } | |
| .btn-ghost { background: var(--bg-card); color: var(--fg-primary); border-color: var(--border-base); box-shadow: var(--shadow-xs); } | |
| .btn-ghost:hover { background: var(--bg-hover); } | |
| .btn-subtle { background: var(--bg-elevated); color: var(--fg-secondary); border-color: transparent; } | |
| .btn-subtle:hover { background: var(--bg-hover); } | |
| .btn-icon { width: 32px; padding: 0; justify-content: center; } | |
| .btn svg { width: 14px; height: 14px; } | |
| /* badges */ | |
| .badge { | |
| display: inline-flex; align-items: center; gap: 5px; | |
| height: 22px; padding: 0 9px; | |
| font-size: 11px; font-weight: 500; | |
| border-radius: 999px; | |
| background: var(--bg-elevated); color: var(--fg-secondary); | |
| border: 1px solid var(--border-soft); | |
| } | |
| .status-pill { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| height: 24px; padding: 0 10px 0 8px; | |
| font-size: 11.5px; font-weight: 500; | |
| border-radius: 999px; | |
| } | |
| .sp-backlog { background: var(--status-bg-backlog); color: var(--status-backlog); } | |
| .sp-todo { background: var(--status-bg-todo); color: #0369A1; } | |
| .sp-progress{ background: var(--status-bg-progress);color: #B45309; } | |
| .sp-review { background: var(--status-bg-review); color: #6D28D9; } | |
| .sp-done { background: var(--status-bg-done); color: #047857; } | |
| .sp-blocked { background: var(--status-bg-blocked); color: #B91C1C; } | |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } | |
| .dot-backlog { background: var(--status-backlog); } | |
| .dot-todo { background: var(--status-todo); box-shadow: 0 0 0 2px rgba(14,165,233,0.20); } | |
| .dot-progress{ background: var(--status-progress); box-shadow: 0 0 0 2px rgba(245,158,11,0.22); } | |
| .dot-review { background: var(--status-review); box-shadow: 0 0 0 2px rgba(139,92,246,0.20); } | |
| .dot-done { background: var(--status-done); box-shadow: 0 0 0 2px rgba(16,185,129,0.20); } | |
| .dot-blocked { background: var(--status-blocked); box-shadow: 0 0 0 2px rgba(239,68,68,0.20); } | |
| .id-chip { | |
| display: inline-flex; align-items: center; | |
| height: 21px; padding: 0 8px; | |
| font-family: var(--font-mono); font-size: 11px; font-weight: 500; | |
| color: var(--fg-secondary); | |
| background: var(--bg-elevated); | |
| border-radius: var(--r-1); | |
| } | |
| /* avatar — brand-gradient strokes */ | |
| .avatar { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg-card); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; box-shadow: var(--shadow-xs); } | |
| .avatar-stack { display: inline-flex; } | |
| .avatar-stack .avatar + .avatar { margin-left: -8px; } | |
| .av-1 { background: linear-gradient(135deg,#6366F1,#8B5CF6); } | |
| .av-2 { background: linear-gradient(135deg,#F472B6,#EC4899); } | |
| .av-3 { background: linear-gradient(135deg,#22D3EE,#0EA5E9); } | |
| .av-4 { background: linear-gradient(135deg,#34D399,#10B981); } | |
| .av-5 { background: linear-gradient(135deg,#FBBF24,#F59E0B); } | |
| /* input */ | |
| .input { | |
| height: 34px; padding: 0 12px; | |
| background: var(--bg-input); | |
| border: 1px solid transparent; | |
| border-radius: var(--r-2); | |
| font-family: inherit; font-size: 13px; color: var(--fg-primary); | |
| width: 260px; | |
| transition: background 100ms ease, border-color 100ms ease, box-shadow 100ms ease; | |
| } | |
| .input:focus { outline: none; background: var(--bg-card); border-color: var(--border-focus); box-shadow: var(--halo); } | |
| .input::placeholder { color: var(--fg-tertiary); } | |
| /* kbd */ | |
| .kbd { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| height: 19px; min-width: 19px; padding: 0 5px; | |
| font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-secondary); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-bottom-width: 1.5px; | |
| border-radius: var(--r-1); | |
| } | |
| /* priority */ | |
| .priority { display: inline-flex; align-items: end; gap: 2px; height: 12px; } | |
| .priority span { width: 3px; background: var(--fg-muted); border-radius: 1px; } | |
| .priority span:nth-child(1) { height: 4px; } | |
| .priority span:nth-child(2) { height: 7px; } | |
| .priority span:nth-child(3) { height: 11px; } | |
| .p-urgent span { background: var(--priority-urgent); } | |
| .p-high span:nth-child(-n+3) { background: var(--priority-high); } | |
| .p-med span:nth-child(-n+2) { background: var(--priority-med); } | |
| .p-low span:nth-child(1) { background: var(--priority-low); } | |
| /* ═══════════ SHELL ═══════════ */ | |
| .shell { | |
| margin-top: var(--s-6); | |
| background: var(--bg-canvas); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-4); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .shell-frame { display: flex; height: 760px; } | |
| .sidebar { | |
| width: 240px; | |
| background: var(--bg-canvas); | |
| border-right: 1px solid var(--border-soft); | |
| display: flex; flex-direction: column; | |
| flex-shrink: 0; | |
| } | |
| .workspace { | |
| display: flex; align-items: center; gap: var(--s-3); | |
| padding: var(--s-4); | |
| border-bottom: 1px solid var(--border-soft); | |
| cursor: pointer; | |
| } | |
| .workspace:hover { background: var(--bg-hover); } | |
| .workspace-logo { | |
| width: 28px; height: 28px; | |
| background: var(--brand-bg-grad); | |
| color: #fff; | |
| border-radius: 8px; | |
| display: grid; place-items: center; | |
| font-family: var(--font-mono); font-size: 11px; font-weight: 700; | |
| box-shadow: 0 4px 12px -4px rgba(79,70,229,0.40); | |
| } | |
| .workspace-name { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; } | |
| .workspace-chev { margin-left: auto; color: var(--fg-tertiary); } | |
| .nav-section { padding: var(--s-3); } | |
| .nav-section + .nav-section { border-top: 1px solid var(--border-soft); } | |
| .nav-heading { | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 4px var(--s-2); | |
| font-size: 10.5px; font-weight: 500; color: var(--fg-tertiary); | |
| text-transform: uppercase; letter-spacing: 0.06em; | |
| margin-bottom: 2px; | |
| } | |
| .nav-item { | |
| display: flex; align-items: center; gap: var(--s-3); | |
| padding: 6px var(--s-3); | |
| margin: 1px 0; | |
| border-radius: var(--r-2); | |
| font-size: 13px; color: var(--fg-secondary); | |
| cursor: pointer; | |
| transition: background 80ms ease, color 80ms ease; | |
| } | |
| .nav-item:hover { background: var(--bg-hover); color: var(--fg-primary); } | |
| .nav-item.active { | |
| background: var(--bg-tinted); | |
| color: var(--brand); | |
| font-weight: 500; | |
| box-shadow: inset 0 0 0 1px rgba(79,70,229,0.10); | |
| } | |
| .nav-item.active svg { color: var(--brand); } | |
| .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--fg-tertiary); } | |
| .nav-counter { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-tertiary); } | |
| .nav-item .nav-dot { width: 8px; height: 8px; border-radius: 50%; } | |
| .sidebar-foot { margin-top: auto; padding: var(--s-3); border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-3); } | |
| .sidebar-foot .name { font-size: 13px; font-weight: 500; } | |
| .sidebar-foot .role { font-size: 11.5px; color: var(--fg-tertiary); display: flex; align-items: center; gap: 5px; } | |
| .sidebar-foot .role .pro { color: var(--brand); font-weight: 600; font-size: 10px; padding: 1px 5px; background: var(--bg-tinted); border-radius: 4px; } | |
| /* main */ | |
| .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-canvas); } | |
| .topbar { | |
| height: 52px; padding: 0 var(--s-5); | |
| display: flex; align-items: center; gap: var(--s-3); | |
| border-bottom: 1px solid var(--border-soft); | |
| background: var(--bg-canvas); | |
| } | |
| .crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-secondary); } | |
| .crumb .sep { color: var(--fg-muted); font-size: 11px; } | |
| .crumb .here { color: var(--fg-primary); font-weight: 500; } | |
| .topbar .spacer { flex: 1; } | |
| /* dashboard */ | |
| .content { flex: 1; overflow: hidden; padding: var(--s-6) var(--s-7); } | |
| .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-6); } | |
| .page-head h2 { font-size: 24px; } | |
| .page-head .sub { color: var(--fg-tertiary); font-size: 13px; margin-top: 4px; } | |
| .page-actions { display: flex; gap: var(--s-2); align-items: center; } | |
| .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); } | |
| .metric { | |
| padding: var(--s-4); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-3); | |
| display: flex; flex-direction: column; gap: 8px; | |
| box-shadow: var(--shadow-sm); | |
| position: relative; | |
| transition: transform 120ms ease, box-shadow 120ms ease; | |
| } | |
| .metric:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } | |
| .metric .lbl { font-size: 12px; color: var(--fg-tertiary); display: flex; align-items: center; gap: 6px; font-weight: 500; } | |
| .metric .num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.025em; line-height: 1; margin-top: 2px; } | |
| .metric .num small { font-size: 16px; color: var(--fg-tertiary); font-weight: 400; } | |
| .metric .delta { font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; } | |
| .delta.up { color: var(--status-done); } | |
| .delta.down { color: var(--status-blocked); } | |
| .metric .spark { height: 32px; width: 100%; } | |
| /* table */ | |
| .panel { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-3); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .panel-head { display: flex; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-soft); } | |
| .panel-head h3 { font-size: 13.5px; font-weight: 600; } | |
| .panel-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); margin-left: 8px; padding: 2px 8px; background: var(--bg-elevated); border-radius: 999px; } | |
| .panel-head .actions { margin-left: auto; display: flex; gap: 6px; } | |
| .table-row { | |
| display: grid; | |
| grid-template-columns: 95px 1fr 130px 130px 95px 100px 80px; | |
| gap: var(--s-3); | |
| padding: 10px var(--s-4); | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-soft); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: background 80ms ease; | |
| } | |
| .table-row:last-child { border-bottom: 0; } | |
| .table-row:hover { background: var(--bg-hover); } | |
| .table-row.head { color: var(--fg-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--s-3) var(--s-4); cursor: default; background: var(--bg-elevated); border-bottom: 1px solid var(--border-base); font-weight: 500; } | |
| .table-row.head:hover { background: var(--bg-elevated); } | |
| .t-title { color: var(--fg-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .t-meta { color: var(--fg-tertiary); font-family: var(--font-mono); font-size: 11px; } | |
| /* ═══════════ KANBAN ═══════════ */ | |
| .kanban-frame { | |
| margin-top: var(--s-6); | |
| background: var(--bg-canvas); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-4); | |
| padding: var(--s-5); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .kanban-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); } | |
| .kanban-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; } | |
| .kanban-head .filter-chips { display: flex; gap: 6px; margin-left: auto; } | |
| .kanban-board { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: var(--s-3); | |
| } | |
| .kanban-col { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-soft); | |
| border-radius: var(--r-3); | |
| padding: var(--s-3); | |
| display: flex; flex-direction: column; gap: var(--s-2); | |
| } | |
| .col-head { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 4px 6px var(--s-2); | |
| } | |
| .col-head .label { display: flex; align-items: center; gap: var(--s-2); color: var(--fg-primary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } | |
| .col-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); font-weight: 500; padding: 1px 6px; background: var(--bg-card); border-radius: 999px; } | |
| .col-add { display: block; text-align: center; padding: 8px; font-size: 12px; color: var(--fg-tertiary); cursor: pointer; border-radius: var(--r-2); } | |
| .col-add:hover { color: var(--fg-secondary); background: var(--bg-pressed); } | |
| /* premium task card with layered shadow */ | |
| .task-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-soft); | |
| border-radius: var(--r-2); | |
| padding: 11px 13px; | |
| display: flex; flex-direction: column; gap: 9px; | |
| cursor: grab; | |
| box-shadow: var(--shadow-xs); | |
| transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; | |
| } | |
| .task-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-base); } | |
| .task-card.featured { border-color: var(--brand); box-shadow: var(--halo), var(--shadow-md); } | |
| .task-meta { display: flex; align-items: center; gap: 7px; } | |
| .task-meta .id-chip { background: transparent; padding: 0; font-size: 10.5px; color: var(--fg-tertiary); } | |
| .task-title { font-size: 13px; line-height: 1.42; color: var(--fg-primary); font-weight: 500; } | |
| .task-foot { display: flex; align-items: center; gap: 7px; } | |
| .task-foot .badge { height: 19px; padding: 0 7px; font-size: 10.5px; } | |
| .task-foot .right { margin-left: auto; display: flex; align-items: center; gap: 7px; } | |
| .task-foot .due { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-tertiary); } | |
| .task-foot .priority { transform: scale(0.92); } | |
| /* signature: inline progress bar on task cards in progress */ | |
| .task-progress { | |
| display: flex; flex-direction: column; gap: 4px; | |
| } | |
| .task-progress .pbar { | |
| height: 4px; background: var(--bg-input); border-radius: 999px; overflow: hidden; | |
| } | |
| .task-progress .pbar > span { | |
| display: block; height: 100%; | |
| background: var(--brand-bg-grad); | |
| } | |
| .task-progress .ptxt { | |
| display: flex; justify-content: space-between; | |
| font-family: var(--font-mono); font-size: 10px; color: var(--fg-tertiary); | |
| } | |
| /* ═══════════ DETAIL ═══════════ */ | |
| .detail-frame { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 320px; gap: var(--s-5); } | |
| .detail-main { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-4); padding: var(--s-7); min-height: 500px; box-shadow: var(--shadow-sm); } | |
| .detail-side { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--r-4); padding: var(--s-5); box-shadow: var(--shadow-sm); } | |
| .detail-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } | |
| .detail-title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: var(--s-3) 0; } | |
| .detail-body { color: var(--fg-secondary); font-size: 14px; line-height: 1.65; max-width: 64ch; } | |
| .detail-body p + p { margin-top: var(--s-3); } | |
| .detail-section { margin-top: var(--s-7); } | |
| .detail-section .h { font-size: 11px; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s-3); font-weight: 500; } | |
| .subtask-row { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--border-soft); } | |
| .subtask-row:last-child { border-bottom: 0; } | |
| .checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-card); transition: all 120ms ease; } | |
| .checkbox.checked { background: var(--brand-bg-grad); border-color: var(--brand); box-shadow: 0 2px 6px -2px rgba(79,70,229,0.40); } | |
| .checkbox.checked svg { color: #fff; width: 10px; height: 10px; } | |
| .subtask-text { flex: 1; font-size: 13px; color: var(--fg-primary); line-height: 1.5; } | |
| .subtask-text.done { color: var(--fg-tertiary); text-decoration: line-through; } | |
| .prop { display: flex; align-items: center; padding: var(--s-2) 0; gap: var(--s-3); } | |
| .prop + .prop { border-top: 1px solid var(--border-soft); } | |
| .prop .lbl { width: 88px; font-size: 11.5px; color: var(--fg-tertiary); } | |
| .prop .val { font-size: 13px; color: var(--fg-primary); display: inline-flex; align-items: center; gap: 7px; flex: 1; } | |
| .activity-row { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-soft); } | |
| .activity-row:last-child { border-bottom: 0; } | |
| .activity-row .body { flex: 1; font-size: 12.5px; color: var(--fg-secondary); line-height: 1.55; } | |
| .activity-row .body strong { color: var(--fg-primary); font-weight: 500; } | |
| .activity-row .body em { font-style: normal; color: var(--brand); font-weight: 500; } | |
| .activity-row .time { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-tertiary); } | |
| /* intent box */ | |
| .intent { | |
| background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated)); | |
| border: 1px solid var(--border-base); | |
| border-radius: var(--r-3); | |
| padding: var(--s-5); | |
| margin-top: var(--s-5); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .intent-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px var(--s-4); font-size: 13px; line-height: 1.6; } | |
| .intent-grid dt { color: var(--fg-tertiary); font-weight: 500; } | |
| .intent-grid dd { margin: 0; color: var(--fg-primary); } | |
| footer { padding: var(--s-7) 0 var(--s-9); color: var(--fg-tertiary); font-size: 12px; display: flex; justify-content: space-between; } | |
| footer .mono { color: var(--fg-secondary); } | |
| svg { stroke-width: 1.6; vertical-align: middle; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"> | |
| <defs> | |
| <linearGradient id="brand-grad" x1="0" y1="0" x2="1" y2="1"> | |
| <stop offset="0%" stop-color="#6366F1"/> | |
| <stop offset="50%" stop-color="#4F46E5"/> | |
| <stop offset="100%" stop-color="#7C3AED"/> | |
| </linearGradient> | |
| <symbol id="i-search" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/></symbol> | |
| <symbol id="i-plus" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 3v10M3 8h10"/></symbol> | |
| <symbol id="i-check" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3.5 3.5L13 5"/></symbol> | |
| <symbol id="i-chev-down" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m4 6 4 4 4-4"/></symbol> | |
| <symbol id="i-chev-right" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m6 4 4 4-4 4"/></symbol> | |
| <symbol id="i-inbox" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M2 9h3l1 2h4l1-2h3M2 9l1.5-5h9L14 9v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9Z"/></symbol> | |
| <symbol id="i-target" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="1" fill="currentColor"/></symbol> | |
| <symbol id="i-board" viewBox="0 0 16 16" fill="none" stroke="currentColor"><rect x="2" y="3" width="3.5" height="10" rx="1"/><rect x="6.5" y="3" width="3.5" height="6" rx="1"/><rect x="11" y="3" width="3" height="8" rx="1"/></symbol> | |
| <symbol id="i-list" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M5 4h9M5 8h9M5 12h9"/><circle cx="2.5" cy="4" r="0.7" fill="currentColor"/><circle cx="2.5" cy="8" r="0.7" fill="currentColor"/><circle cx="2.5" cy="12" r="0.7" fill="currentColor"/></symbol> | |
| <symbol id="i-cycle" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M14 8a6 6 0 0 1-11 3.5M2 8a6 6 0 0 1 11-3.5"/><path d="M11 1v3.5h3.5M5 14.5V11H1.5"/></symbol> | |
| <symbol id="i-roadmap" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M2 4h6M2 8h10M2 12h6"/><circle cx="9" cy="4" r="1.5"/><circle cx="13" cy="8" r="1.5"/><circle cx="9" cy="12" r="1.5"/></symbol> | |
| <symbol id="i-calendar" viewBox="0 0 16 16" fill="none" stroke="currentColor"><rect x="2" y="3.5" width="12" height="10.5" rx="1"/><path d="M2 6.5h12M5 2v3M11 2v3"/></symbol> | |
| <symbol id="i-team" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="6" cy="6" r="2.5"/><path d="M2 13c0-2.5 2-4 4-4s4 1.5 4 4M11 7a2 2 0 1 0 0-4M14 13c0-2-1-3.5-3-3.5"/></symbol> | |
| <symbol id="i-settings" viewBox="0 0 16 16" fill="none" stroke="currentColor"><circle cx="8" cy="8" r="2"/><path d="M8 1.5v2M8 12.5v2M14.5 8h-2M3.5 8h-2M12.6 3.4l-1.4 1.4M4.8 11.2l-1.4 1.4M12.6 12.6l-1.4-1.4M4.8 4.8 3.4 3.4"/></symbol> | |
| <symbol id="i-bell" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M4 12V7a4 4 0 0 1 8 0v5l1 1H3l1-1ZM6.5 14a1.5 1.5 0 0 0 3 0"/></symbol> | |
| <symbol id="i-filter" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M2 3h12l-4.5 6v4l-3-1V9L2 3Z"/></symbol> | |
| <symbol id="i-sort" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M4 3v10M4 13l-2-2M4 13l2-2M12 13V3M12 3l-2 2M12 3l2 2"/></symbol> | |
| <symbol id="i-spark" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M8 1 9.4 6 14.5 7l-3.7 3.6.9 5.1L8 13.3 4.3 15.7l.9-5.1L1.5 7 6.6 6 8 1Z"/></symbol> | |
| <symbol id="i-zap" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M9 1 3 9h5l-2 6 7-9H8l1-5Z"/></symbol> | |
| <symbol id="i-link" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M7 5h-2a3 3 0 0 0 0 6h2M9 11h2a3 3 0 0 0 0-6H9M5.5 8h5"/></symbol> | |
| <symbol id="i-paperclip" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m13 7-5.5 5.5a3 3 0 0 1-4-4L9 3a2 2 0 0 1 3 3l-5 5a1 1 0 1 1-1.5-1.5l4-4"/></symbol> | |
| <symbol id="i-comment" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M2.5 8.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-7.5 5.1l-2.7.7.6-2.4A5.4 5.4 0 0 1 2.5 8.5Z"/></symbol> | |
| <symbol id="i-flag" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M3 14V2M3 3h9l-2 3 2 3H3"/></symbol> | |
| <symbol id="i-trend-up" viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="M2 12 6 8l3 3 5-6M14 5h-3M14 5v3"/></symbol> | |
| </defs> | |
| </svg> | |
| <div class="doc"> | |
| <!-- HERO --> | |
| <header class="hero"> | |
| <div class="hero-meta"> | |
| <span class="dot"></span> | |
| <span class="mono">MOODBOARD · 03 / 03</span> | |
| <span style="color:var(--fg-muted);">·</span> | |
| <span style="font-weight:600;">Aurora</span> | |
| </div> | |
| <h1>Premium tooling.<br/><span class="accent">Crafted for ambition.</span></h1> | |
| <p class="hero-sub">Pure white surfaces with electric indigo as the accent, layered shadows that lift cards a millimeter off the page, and inline sparklines woven into every metric. The temperament of Stripe and Vercel — a tool that signals investment.</p> | |
| <div class="hero-tags"> | |
| <span class="tag"><span class="status-dot dot-todo"></span>Geist · Geist Mono</span> | |
| <span class="tag">4px base · medium density</span> | |
| <span class="tag">Layered shadows + halo glow</span> | |
| <span class="tag">Indigo gradient brand</span> | |
| <span class="tag">Jewel-tone status palette</span> | |
| </div> | |
| </header> | |
| <!-- INTENT --> | |
| <section> | |
| <span class="section-label">Intent</span> | |
| <h2 style="margin-top:var(--s-3);">For the team that's investing in their craft.</h2> | |
| <p style="margin-top:var(--s-3); max-width:680px;">A team lead at a hyper-growth startup. Senior IC who treats their tools as identity. The CFO who'll see the dashboard once a quarter and needs to feel "we're paying for the right thing." Aurora's job is to look as good as the work going through it.</p> | |
| <div class="intent"> | |
| <dl class="intent-grid"> | |
| <dt>Palette</dt><dd>Pure white canvas with electric indigo gradient brand. Status uses fully-saturated jewel tones (sky, amber, violet, emerald, red) on tinted backgrounds.</dd> | |
| <dt>Depth</dt><dd>Layered subtle shadows (Stripe-style: 1px hairline + soft 16-32px blur). Brand button gets a tinted indigo glow. Focus states use a 4px halo.</dd> | |
| <dt>Surfaces</dt><dd>Three steps — page (#FFFFFF) · elevated (#F8F9FB) · input (#F4F6FA) · brand-tinted (#F4F4FE) for active nav. Tinted whites, never gray.</dd> | |
| <dt>Typography</dt><dd>Geist for UI body and headings (geometric, slightly wider than Inter). Geist Mono for numerics, IDs, code. Tight letter-spacing on display.</dd> | |
| <dt>Spacing</dt><dd>4px base. Medium density between Onyx and Linen. 12 / 16 / 24 / 32 / 56 progression.</dd> | |
| <dt>Signature</dt><dd>Inline sparklines on every metric. Halo focus rings. Gradient avatars. Brand-tinted active-nav. Subtle aurora glow behind the hero.</dd> | |
| </dl> | |
| </div> | |
| </section> | |
| <!-- TOKENS --> | |
| <section> | |
| <span class="section-label">Tokens</span> | |
| <h2 style="margin-top:var(--s-3);">The system, in one screen.</h2> | |
| <div class="tokens"> | |
| <div class="token-card"> | |
| <h3>Color</h3> | |
| <div class="swatch-row"> | |
| <div class="swatch"><div class="swatch-chip" style="background:#FFFFFF"></div><div class="swatch-info"><span class="swatch-name">page · pure white</span><span class="swatch-val">#FFFFFF</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#F8F9FB"></div><div class="swatch-info"><span class="swatch-name">elevated</span><span class="swatch-val">#F8F9FB · cool tint</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#F4F6FA"></div><div class="swatch-info"><span class="swatch-name">input</span><span class="swatch-val">#F4F6FA</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#F4F4FE"></div><div class="swatch-info"><span class="swatch-name">brand tinted</span><span class="swatch-val">#F4F4FE · active nav</span></div></div> | |
| <div class="swatch" style="margin-top:var(--s-3)"><div class="swatch-chip" style="background:#0A0B14"></div><div class="swatch-info"><span class="swatch-name">fg / primary</span><span class="swatch-val">#0A0B14</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#404451"></div><div class="swatch-info"><span class="swatch-name">fg / secondary</span><span class="swatch-val">#404451</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#767D8E"></div><div class="swatch-info"><span class="swatch-name">fg / tertiary</span><span class="swatch-val">#767D8E</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#B0B6C4"></div><div class="swatch-info"><span class="swatch-name">fg / muted</span><span class="swatch-val">#B0B6C4</span></div></div> | |
| <div class="swatch" style="margin-top:var(--s-3)"><div class="swatch-chip" style="background:linear-gradient(135deg,#6366F1,#4F46E5,#7C3AED)"></div><div class="swatch-info"><span class="swatch-name">brand · indigo gradient</span><span class="swatch-val">#4F46E5 · 600</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#10B981"></div><div class="swatch-info"><span class="swatch-name">status / done · emerald</span><span class="swatch-val">#10B981</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#F59E0B"></div><div class="swatch-info"><span class="swatch-name">status / progress · amber</span><span class="swatch-val">#F59E0B</span></div></div> | |
| <div class="swatch"><div class="swatch-chip" style="background:#EF4444"></div><div class="swatch-info"><span class="swatch-name">status / blocked · red</span><span class="swatch-val">#EF4444</span></div></div> | |
| </div> | |
| </div> | |
| <div class="token-card"> | |
| <h3>Typography</h3> | |
| <div class="type-spec"> | |
| <div class="type-row"> | |
| <div class="type-display">Sprint 24 · velocity</div> | |
| <div class="type-meta"><span class="mono">Geist 600 · 32/1.1</span><span>tracking −0.025em</span></div> | |
| </div> | |
| <div class="type-row"> | |
| <div class="type-headline">Reduce bundle size</div> | |
| <div class="type-meta"><span class="mono">Geist 600 · 20/1.2</span></div> | |
| </div> | |
| <div class="type-row"> | |
| <div class="type-body">The card lifts a millimeter off the page on hover. The shadow is two layers — a 1px hairline plus a soft, deep blur — never a single drop shadow.</div> | |
| <div class="type-meta"><span class="mono">Geist 400 · 13.5/1.6</span></div> | |
| </div> | |
| <div class="type-row"> | |
| <div class="type-label">Active issues</div> | |
| <div class="type-meta"><span class="mono">Geist 500 · 11 · uppercase 0.06em</span></div> | |
| </div> | |
| <div class="type-row"> | |
| <div class="type-mono">TSQ-247 · 2026-04-12</div> | |
| <div class="type-meta"><span class="mono">Geist Mono 500 · 12 · tnum</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="token-card"> | |
| <h3>Spacing & depth</h3> | |
| <div style="display:flex; flex-direction:column; gap:var(--s-3);"> | |
| <div class="spacing-row"><span class="spacing-name">--s-1</span><div class="spacing-bar" style="width:4px"></div><span class="spacing-px">4px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-2</span><div class="spacing-bar" style="width:8px"></div><span class="spacing-px">8px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-3</span><div class="spacing-bar" style="width:12px"></div><span class="spacing-px">12px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-4</span><div class="spacing-bar" style="width:16px"></div><span class="spacing-px">16px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-5</span><div class="spacing-bar" style="width:20px"></div><span class="spacing-px">20px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-6</span><div class="spacing-bar" style="width:24px"></div><span class="spacing-px">24px</span></div> | |
| <div class="spacing-row"><span class="spacing-name">--s-7</span><div class="spacing-bar" style="width:32px"></div><span class="spacing-px">32px</span></div> | |
| </div> | |
| <div style="margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--border-soft);"> | |
| <div class="type-label" style="margin-bottom:var(--s-3);">Layered shadows</div> | |
| <div style="display:flex; flex-direction:column; gap:10px;"> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:#fff; border:1px solid var(--border-base); border-radius:6px; box-shadow: var(--shadow-xs);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">xs · 1px</span></div> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:#fff; border:1px solid var(--border-base); border-radius:6px; box-shadow: var(--shadow-sm);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">sm · cards</span></div> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:#fff; border:1px solid var(--border-base); border-radius:6px; box-shadow: var(--shadow-md);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">md · hover</span></div> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:#fff; border:1px solid var(--border-base); border-radius:6px; box-shadow: var(--shadow-pop);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">pop · modal</span></div> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:var(--brand); border-radius:6px; box-shadow: var(--shadow-brand);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">brand glow</span></div> | |
| <div style="display:flex; align-items:center; gap:var(--s-3);"><div style="width:120px; height:24px; background:#fff; border:1px solid var(--brand); border-radius:6px; box-shadow: var(--halo);"></div><span class="mono" style="font-size:11px; color:var(--fg-secondary);">halo · focus</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- COMPONENTS --> | |
| <section> | |
| <span class="section-label">Primitives</span> | |
| <h2 style="margin-top:var(--s-3);">Components, in isolation.</h2> | |
| <div class="components-grid"> | |
| <div class="component-card"> | |
| <h3>Buttons</h3> | |
| <div class="demo-row"><span class="demo-label">primary</span> | |
| <button class="btn btn-primary">Create issue</button> | |
| <button class="btn btn-primary"><svg><use href="#i-plus"/></svg>New</button> | |
| <button class="btn btn-dark">Start sprint</button> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">secondary</span> | |
| <button class="btn btn-ghost">Cancel</button> | |
| <button class="btn btn-ghost"><svg><use href="#i-filter"/></svg>Filter</button> | |
| <button class="btn btn-subtle">Save draft</button> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">icon</span> | |
| <button class="btn btn-ghost btn-icon"><svg><use href="#i-settings"/></svg></button> | |
| <button class="btn btn-ghost btn-icon"><svg><use href="#i-bell"/></svg></button> | |
| <button class="btn btn-ghost btn-icon"><svg><use href="#i-zap"/></svg></button> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">cmd-k</span> | |
| <button class="btn btn-ghost"><svg><use href="#i-search"/></svg>Search anything<span class="kbd" style="margin-left:6px">⌘</span><span class="kbd">K</span></button> | |
| </div> | |
| </div> | |
| <div class="component-card"> | |
| <h3>Status & identity</h3> | |
| <div class="demo-row"><span class="demo-label">status</span> | |
| <span class="status-pill sp-backlog"><span class="status-dot dot-backlog"></span>Backlog</span> | |
| <span class="status-pill sp-todo"><span class="status-dot dot-todo"></span>Todo</span> | |
| <span class="status-pill sp-progress"><span class="status-dot dot-progress"></span>In progress</span> | |
| <span class="status-pill sp-review"><span class="status-dot dot-review"></span>In review</span> | |
| <span class="status-pill sp-done"><span class="status-dot dot-done"></span>Done</span> | |
| <span class="status-pill sp-blocked"><span class="status-dot dot-blocked"></span>Blocked</span> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">priority</span> | |
| <span class="priority p-low"><span></span><span></span><span></span></span> | |
| <span class="priority p-med"><span></span><span></span><span></span></span> | |
| <span class="priority p-high"><span></span><span></span><span></span></span> | |
| <span class="priority p-urgent"><span></span><span></span><span></span></span> | |
| <span style="color:var(--fg-tertiary); font-size:11px;">Low · Med · High · Urgent</span> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">id chip</span> | |
| <span class="id-chip">TSQ-247</span> | |
| <span class="id-chip">TSQ-301</span> | |
| <span class="id-chip">DESIGN-12</span> | |
| <span class="id-chip">INFRA-58</span> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">avatars</span> | |
| <div class="avatar-stack"> | |
| <span class="avatar av-1">PA</span> | |
| <span class="avatar av-2">JK</span> | |
| <span class="avatar av-3">MR</span> | |
| <span class="avatar av-4">+5</span> | |
| </div> | |
| <span class="avatar av-5" style="margin-left:var(--s-3);">EM</span> | |
| <span class="badge"><span class="status-dot dot-todo"></span>3 reviewers</span> | |
| </div> | |
| </div> | |
| <div class="component-card"> | |
| <h3>Forms</h3> | |
| <div class="demo-row"><span class="demo-label">text</span> | |
| <input class="input" placeholder="Issue title…" /> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">focused</span> | |
| <input class="input" placeholder="Filter…" style="background:var(--bg-card); border-color:var(--border-focus); box-shadow:var(--halo);" value="bundle siz" /> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">select</span> | |
| <button class="btn btn-ghost" style="height:34px; width:180px; justify-content:space-between;"><span style="display:inline-flex;align-items:center;gap:6px;"><span class="status-dot dot-progress"></span>In progress</span><svg><use href="#i-chev-down"/></svg></button> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">command</span> | |
| <button class="btn btn-subtle" style="width:100%; justify-content:flex-start; height:36px;"><svg><use href="#i-search"/></svg>Find or run a command<span style="margin-left:auto;display:inline-flex;gap:3px;"><span class="kbd">⌘</span><span class="kbd">K</span></span></button> | |
| </div> | |
| </div> | |
| <div class="component-card"> | |
| <h3>Data marks</h3> | |
| <div class="demo-row" style="align-items:flex-start;"><span class="demo-label">sparkline</span> | |
| <svg width="180" height="40" viewBox="0 0 180 40"> | |
| <defs> | |
| <linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1"> | |
| <stop offset="0%" stop-color="rgba(79,70,229,0.20)"/> | |
| <stop offset="100%" stop-color="rgba(79,70,229,0)"/> | |
| </linearGradient> | |
| </defs> | |
| <path d="M0,30 L20,24 L40,28 L60,18 L80,22 L100,12 L120,16 L140,8 L160,10 L180,4" fill="none" stroke="url(#brand-grad)" stroke-width="2" stroke-linecap="round"/> | |
| <path d="M0,30 L20,24 L40,28 L60,18 L80,22 L100,12 L120,16 L140,8 L160,10 L180,4 L180,40 L0,40 Z" fill="url(#spark-fill)"/> | |
| <circle cx="180" cy="4" r="3" fill="#4F46E5"/> | |
| <circle cx="180" cy="4" r="6" fill="rgba(79,70,229,0.20)"/> | |
| </svg> | |
| <div style="display:flex; flex-direction:column; gap:2px;"> | |
| <span class="mono" style="font-size:22px; font-weight:600; letter-spacing:-0.025em;">82%</span> | |
| <span class="mono" style="font-size:11px; color:var(--status-done);">▲ +6.4 vs prev</span> | |
| </div> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">progress</span> | |
| <div style="flex:1; max-width:240px;"> | |
| <div style="display:flex; justify-content:space-between; margin-bottom:6px; font-size:11px;"><span style="color:var(--fg-secondary);">Sprint 24</span><span class="mono" style="color:var(--fg-tertiary);">14/22</span></div> | |
| <div style="height:6px; background:var(--bg-input); border-radius:999px; overflow:hidden;"><div style="width:64%; height:100%; background:var(--brand-bg-grad);"></div></div> | |
| </div> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">stacked</span> | |
| <div style="flex:1; max-width:240px; display:flex; height:8px; border-radius:4px; overflow:hidden;"> | |
| <div style="width:36%; background:var(--status-done);"></div> | |
| <div style="width:24%; background:var(--status-progress);"></div> | |
| <div style="width:18%; background:var(--status-review);"></div> | |
| <div style="width:14%; background:var(--status-todo);"></div> | |
| <div style="width:8%; background:var(--status-blocked);"></div> | |
| </div> | |
| </div> | |
| <div class="demo-row"><span class="demo-label">delta</span> | |
| <span class="mono" style="font-size:14px; color:var(--status-done);">+12.4%</span> | |
| <span class="mono" style="font-size:14px; color:var(--status-blocked);">−3.1%</span> | |
| <span class="mono" style="font-size:14px; color:var(--fg-tertiary);">no change</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- APP SHELL --> | |
| <section> | |
| <span class="section-label">Application shell · Dashboard</span> | |
| <h2 style="margin-top:var(--s-3);">Where the team lands.</h2> | |
| <div class="shell"> | |
| <div class="shell-frame"> | |
| <aside class="sidebar"> | |
| <div class="workspace"> | |
| <div class="workspace-logo">TQ</div> | |
| <span class="workspace-name">Tasq</span> | |
| <svg class="workspace-chev" width="13" height="13"><use href="#i-chev-down"/></svg> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-item active"><svg><use href="#i-inbox"/></svg>Inbox<span class="nav-counter">12</span></div> | |
| <div class="nav-item"><svg><use href="#i-target"/></svg>My issues<span class="nav-counter">8</span></div> | |
| <div class="nav-item"><svg><use href="#i-zap"/></svg>Recent</div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-heading"><span>Workspace</span><svg width="12" height="12" style="color:var(--fg-tertiary);"><use href="#i-plus"/></svg></div> | |
| <div class="nav-item"><svg><use href="#i-board"/></svg>Boards</div> | |
| <div class="nav-item"><svg><use href="#i-cycle"/></svg>Sprints</div> | |
| <div class="nav-item"><svg><use href="#i-list"/></svg>Backlog<span class="nav-counter">47</span></div> | |
| <div class="nav-item"><svg><use href="#i-roadmap"/></svg>Roadmap</div> | |
| <div class="nav-item"><svg><use href="#i-calendar"/></svg>Calendar</div> | |
| <div class="nav-item"><svg><use href="#i-target"/></svg>Goals</div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-heading"><span>Projects</span><svg width="12" height="12" style="color:var(--fg-tertiary);"><use href="#i-plus"/></svg></div> | |
| <div class="nav-item"><span class="nav-dot" style="background:linear-gradient(135deg,#6366F1,#7C3AED);"></span>Web platform<span class="nav-counter">24</span></div> | |
| <div class="nav-item"><span class="nav-dot" style="background:linear-gradient(135deg,#34D399,#10B981);"></span>Mobile app<span class="nav-counter">18</span></div> | |
| <div class="nav-item"><span class="nav-dot" style="background:linear-gradient(135deg,#FBBF24,#F59E0B);"></span>Design system<span class="nav-counter">7</span></div> | |
| <div class="nav-item"><span class="nav-dot" style="background:linear-gradient(135deg,#F472B6,#EC4899);"></span>Marketing site</div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-heading"><span>Team</span></div> | |
| <div class="nav-item"><svg><use href="#i-team"/></svg>Members</div> | |
| <div class="nav-item"><svg><use href="#i-settings"/></svg>Settings</div> | |
| </div> | |
| <div class="sidebar-foot"> | |
| <span class="avatar av-1">PA</span> | |
| <div style="display:flex; flex-direction:column;"> | |
| <span class="name">Priya Anand</span> | |
| <span class="role">Product <span class="pro">PRO</span></span> | |
| </div> | |
| </div> | |
| </aside> | |
| <div class="main"> | |
| <div class="topbar"> | |
| <div class="crumb"><span>Tasq</span><span class="sep">/</span><span>Web platform</span><span class="sep">/</span><span class="here">Sprint 24</span></div> | |
| <div class="spacer"></div> | |
| <input class="input" placeholder="Search anything…" /> | |
| <button class="btn btn-ghost btn-icon"><svg><use href="#i-bell"/></svg></button> | |
| <button class="btn btn-primary"><svg><use href="#i-plus"/></svg>New issue</button> | |
| </div> | |
| <div class="content" style="overflow:auto;"> | |
| <div class="page-head"> | |
| <div> | |
| <h2>Sprint 24 · <span class="gradient-text">Bundle & speed</span></h2> | |
| <p class="sub">Apr 1 → Apr 14 · 10 working days · 22 of 22 capacity committed</p> | |
| </div> | |
| <div class="page-actions"> | |
| <button class="btn btn-ghost"><svg><use href="#i-filter"/></svg>Filter</button> | |
| <button class="btn btn-ghost"><svg><use href="#i-sort"/></svg>Group</button> | |
| <button class="btn btn-dark">Close sprint</button> | |
| </div> | |
| </div> | |
| <div class="metric-grid"> | |
| <div class="metric"> | |
| <span class="lbl"><svg width="12" height="12" style="color:var(--brand);"><use href="#i-trend-up"/></svg> Velocity (10d)</span> | |
| <span class="num">38</span> | |
| <svg class="spark" viewBox="0 0 200 32" preserveAspectRatio="none"> | |
| <path d="M0,26 L25,22 L50,24 L75,16 L100,18 L125,10 L150,12 L175,6 L200,4" fill="none" stroke="url(#brand-grad)" stroke-width="2" stroke-linecap="round"/> | |
| <path d="M0,26 L25,22 L50,24 L75,16 L100,18 L125,10 L150,12 L175,6 L200,4 L200,32 L0,32 Z" fill="rgba(79,70,229,0.10)"/> | |
| </svg> | |
| <span class="delta up">▲ 12% vs sprint 23</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="lbl"><span class="status-dot dot-done"></span>Completed</span> | |
| <span class="num">14<small> / 22</small></span> | |
| <div style="height:6px; background:var(--bg-input); border-radius:999px; overflow:hidden;"><div style="width:64%; height:100%; background:linear-gradient(90deg,#10B981,#34D399);"></div></div> | |
| <span class="delta up">▲ on pace · 1.4d lead</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="lbl"><span class="status-dot dot-todo"></span>In review</span> | |
| <span class="num">5</span> | |
| <div style="display:flex; gap:3px;"> | |
| <div style="flex:1; height:18px; background:var(--bg-input); border-radius:3px; position:relative;"><span style="position:absolute; bottom:0; left:0; right:0; height:60%; background:var(--status-review); border-radius:0 0 3px 3px;"></span></div> | |
| <div style="flex:1; height:18px; background:var(--bg-input); border-radius:3px; position:relative;"><span style="position:absolute; bottom:0; left:0; right:0; height:80%; background:var(--status-review); border-radius:0 0 3px 3px;"></span></div> | |
| <div style="flex:1; height:18px; background:var(--bg-input); border-radius:3px; position:relative;"><span style="position:absolute; bottom:0; left:0; right:0; height:50%; background:var(--status-review); border-radius:0 0 3px 3px;"></span></div> | |
| <div style="flex:1; height:18px; background:var(--bg-input); border-radius:3px; position:relative;"><span style="position:absolute; bottom:0; left:0; right:0; height:90%; background:var(--status-review); border-radius:0 0 3px 3px;"></span></div> | |
| <div style="flex:1; height:18px; background:var(--bg-input); border-radius:3px; position:relative;"><span style="position:absolute; bottom:0; left:0; right:0; height:40%; background:var(--status-review); border-radius:0 0 3px 3px;"></span></div> | |
| </div> | |
| <span class="delta down">▼ 2 waiting on Mei</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="lbl"><span class="status-dot dot-blocked"></span>Blocked</span> | |
| <span class="num">2</span> | |
| <span class="mono" style="font-size:11px; color:var(--fg-tertiary);">TSQ-289 · TSQ-294</span> | |
| <span class="delta down">2.3d avg block</span> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <div class="panel-head"> | |
| <h3>Active issues</h3> | |
| <span class="count">22 issues</span> | |
| <div class="actions"> | |
| <button class="btn btn-ghost"><svg><use href="#i-filter"/></svg>Status</button> | |
| <button class="btn btn-ghost"><svg><use href="#i-sort"/></svg>Updated</button> | |
| </div> | |
| </div> | |
| <div class="table-row head"> | |
| <span>ID</span><span>Title</span><span>Status</span><span>Assignee</span><span>Priority</span><span>Updated</span><span>Pts</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-247</span> | |
| <span class="t-title">Reduce client bundle by 30% via code-split routes</span> | |
| <span><span class="status-pill sp-progress"><span class="status-dot dot-progress"></span>In progress</span></span> | |
| <span><span class="avatar av-1" style="width:22px;height:22px;font-size:9px;">PA</span> <span style="font-size:13px; color:var(--fg-secondary);">Priya</span></span> | |
| <span class="priority p-high"><span></span><span></span><span></span></span> | |
| <span class="t-meta">2h ago</span> | |
| <span class="mono t-meta">5</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-289</span> | |
| <span class="t-title">Migrate auth callbacks to NextAuth v5 beta</span> | |
| <span><span class="status-pill sp-blocked"><span class="status-dot dot-blocked"></span>Blocked</span></span> | |
| <span><span class="avatar av-2" style="width:22px;height:22px;font-size:9px;">JK</span> <span style="font-size:13px; color:var(--fg-secondary);">Jonas</span></span> | |
| <span class="priority p-urgent"><span></span><span></span><span></span></span> | |
| <span class="t-meta">yesterday</span> | |
| <span class="mono t-meta">8</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-301</span> | |
| <span class="t-title">Convert kanban DnD from react-beautiful-dnd → @dnd-kit</span> | |
| <span><span class="status-pill sp-review"><span class="status-dot dot-review"></span>In review</span></span> | |
| <span><span class="avatar av-3" style="width:22px;height:22px;font-size:9px;">MR</span> <span style="font-size:13px; color:var(--fg-secondary);">Mei R.</span></span> | |
| <span class="priority p-med"><span></span><span></span><span></span></span> | |
| <span class="t-meta">just now</span> | |
| <span class="mono t-meta">3</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-244</span> | |
| <span class="t-title">Settle on a single icon library across the app shell</span> | |
| <span><span class="status-pill sp-done"><span class="status-dot dot-done"></span>Done</span></span> | |
| <span><span class="avatar av-4" style="width:22px;height:22px;font-size:9px;">SO</span> <span style="font-size:13px; color:var(--fg-secondary);">Saanvi</span></span> | |
| <span class="priority p-low"><span></span><span></span><span></span></span> | |
| <span class="t-meta">3d ago</span> | |
| <span class="mono t-meta">2</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-310</span> | |
| <span class="t-title">Add Pacific timezone fallback for cycle boundaries</span> | |
| <span><span class="status-pill sp-todo"><span class="status-dot dot-todo"></span>Todo</span></span> | |
| <span><span class="avatar av-5" style="width:22px;height:22px;font-size:9px;">EM</span> <span style="font-size:13px; color:var(--fg-secondary);">Esi M.</span></span> | |
| <span class="priority p-med"><span></span><span></span><span></span></span> | |
| <span class="t-meta">5d ago</span> | |
| <span class="mono t-meta">3</span> | |
| </div> | |
| <div class="table-row"> | |
| <span class="mono t-meta">TSQ-294</span> | |
| <span class="t-title">Realtime presence indicator for shared boards</span> | |
| <span><span class="status-pill sp-blocked"><span class="status-dot dot-blocked"></span>Blocked</span></span> | |
| <span><span class="avatar av-1" style="width:22px;height:22px;font-size:9px;">PA</span> <span style="font-size:13px; color:var(--fg-secondary);">Priya</span></span> | |
| <span class="priority p-high"><span></span><span></span><span></span></span> | |
| <span class="t-meta">2d ago</span> | |
| <span class="mono t-meta">5</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- KANBAN --> | |
| <section> | |
| <span class="section-label">Sprint board</span> | |
| <h2 style="margin-top:var(--s-3);">The board, where work moves.</h2> | |
| <div class="kanban-frame"> | |
| <div class="kanban-head"> | |
| <h3>Sprint 24 · Web platform</h3> | |
| <span class="status-pill sp-progress"><span class="status-dot dot-progress"></span>4 days left</span> | |
| <div class="filter-chips"> | |
| <span class="badge">All assignees · 5</span> | |
| <span class="badge"><svg width="11" height="11"><use href="#i-filter"/></svg>Filter</span> | |
| <span class="badge"><svg width="11" height="11"><use href="#i-sort"/></svg>Group</span> | |
| </div> | |
| </div> | |
| <div class="kanban-board"> | |
| <!-- BACKLOG --> | |
| <div class="kanban-col"> | |
| <div class="col-head"> | |
| <span class="label"><span class="status-dot dot-backlog"></span>Backlog</span> | |
| <span class="count">3</span> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-318</span><span class="priority p-low" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Add unsubscribe link audit to weekly digest emails</div> | |
| <div class="task-foot"><span class="badge">infra</span><div class="right"><span class="due">May 1</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-322</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Investigate slow query on /backlog when org > 500 issues</div> | |
| <div class="task-foot"><span class="badge">perf</span><div class="right"><span class="avatar av-3" style="width:20px;height:20px;font-size:8px;">MR</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-330</span><span class="priority p-low" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Polish onboarding empty-state illustrations</div> | |
| <div class="task-foot"><span class="badge">design</span><div class="right"><span class="due">no due</span></div></div> | |
| </div> | |
| <div class="col-add">+ Add issue</div> | |
| </div> | |
| <!-- TODO --> | |
| <div class="kanban-col"> | |
| <div class="col-head"> | |
| <span class="label"><span class="status-dot dot-todo"></span>Todo</span> | |
| <span class="count">4</span> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-310</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Add Pacific timezone fallback for cycle boundaries</div> | |
| <div class="task-foot"><span class="badge">api</span><div class="right"><span class="due">Apr 11</span><span class="avatar av-5" style="width:20px;height:20px;font-size:8px;">EM</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-312</span><span class="priority p-high" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Wire @mentions to live notifications stream</div> | |
| <div class="task-foot"><span class="badge">realtime</span><div class="right"><span class="due">Apr 12</span><span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-315</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Server actions for label CRUD with optimistic UI</div> | |
| <div class="task-foot"><span class="badge">web</span><div class="right"><span class="avatar-stack"><span class="avatar av-2" style="width:20px;height:20px;font-size:8px;">JK</span><span class="avatar av-4" style="width:20px;height:20px;font-size:8px;">SO</span></span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-321</span><span class="priority p-low" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Backlog drag-to-rank performance ceiling</div> | |
| <div class="task-foot"><span class="badge">perf</span><div class="right"><span class="avatar av-3" style="width:20px;height:20px;font-size:8px;">MR</span></div></div> | |
| </div> | |
| </div> | |
| <!-- IN PROGRESS — featured card with progress bar --> | |
| <div class="kanban-col"> | |
| <div class="col-head"> | |
| <span class="label"><span class="status-dot dot-progress"></span>In progress</span> | |
| <span class="count">5</span> | |
| </div> | |
| <div class="task-card featured"> | |
| <div class="task-meta"><span class="id-chip">TSQ-247</span><span class="priority p-high" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Reduce client bundle by 30% via code-split routes</div> | |
| <div class="task-progress"> | |
| <div class="pbar"><span style="width:60%"></span></div> | |
| <div class="ptxt"><span>3 / 5 sub-tasks</span><span>60%</span></div> | |
| </div> | |
| <div class="task-foot"><span class="badge">perf</span><span class="badge">5pt</span><div class="right"><span class="due">Apr 13</span><span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-256</span><span class="priority p-high" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Replace lottie hero with CSS-driven animation</div> | |
| <div class="task-foot"><span class="badge">perf</span><div class="right"><span class="due">Apr 12</span><span class="avatar av-2" style="width:20px;height:20px;font-size:8px;">JK</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-271</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Move command palette to keyboard-driven mode primary</div> | |
| <div class="task-foot"><span class="badge">UX</span><div class="right"><span class="avatar av-3" style="width:20px;height:20px;font-size:8px;">MR</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-285</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Type-safe org-scope guards for server actions</div> | |
| <div class="task-foot"><span class="badge">infra</span><div class="right"><span class="avatar av-4" style="width:20px;height:20px;font-size:8px;">SO</span></div></div> | |
| </div> | |
| </div> | |
| <!-- IN REVIEW --> | |
| <div class="kanban-col"> | |
| <div class="col-head"> | |
| <span class="label"><span class="status-dot dot-review"></span>In review</span> | |
| <span class="count">5</span> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-301</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Convert kanban DnD from react-beautiful-dnd → @dnd-kit</div> | |
| <div class="task-foot"><span class="badge"><svg width="10" height="10"><use href="#i-comment"/></svg> 4</span><span class="badge"><svg width="10" height="10"><use href="#i-paperclip"/></svg> 2</span><div class="right"><span class="avatar av-3" style="width:20px;height:20px;font-size:8px;">MR</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-298</span><span class="priority p-high" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Encrypted public-share token rotation</div> | |
| <div class="task-foot"><span class="badge">security</span><div class="right"><span class="avatar av-2" style="width:20px;height:20px;font-size:8px;">JK</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-304</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">A11y · keyboard skip-to-content for org-shell</div> | |
| <div class="task-foot"><span class="badge">a11y</span><div class="right"><span class="avatar av-4" style="width:20px;height:20px;font-size:8px;">SO</span></div></div> | |
| </div> | |
| <div class="task-card"> | |
| <div class="task-meta"><span class="id-chip">TSQ-308</span><span class="priority p-low" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Add lighthouse CI budget gates per route</div> | |
| <div class="task-foot"><span class="badge">CI</span><div class="right"><span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span></div></div> | |
| </div> | |
| </div> | |
| <!-- DONE --> | |
| <div class="kanban-col"> | |
| <div class="col-head"> | |
| <span class="label"><span class="status-dot dot-done"></span>Done</span> | |
| <span class="count">14</span> | |
| </div> | |
| <div class="task-card" style="opacity:0.78;"> | |
| <div class="task-meta"><span class="id-chip">TSQ-244</span><span class="priority p-low" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Settle on a single icon library across the app shell</div> | |
| <div class="task-foot"><span class="badge">design</span><div class="right"><span class="due">3d ago</span><span class="avatar av-4" style="width:20px;height:20px;font-size:8px;">SO</span></div></div> | |
| </div> | |
| <div class="task-card" style="opacity:0.78;"> | |
| <div class="task-meta"><span class="id-chip">TSQ-263</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Empty-state illustrations for /goals</div> | |
| <div class="task-foot"><span class="badge">design</span><div class="right"><span class="avatar av-4" style="width:20px;height:20px;font-size:8px;">SO</span></div></div> | |
| </div> | |
| <div class="task-card" style="opacity:0.78;"> | |
| <div class="task-meta"><span class="id-chip">TSQ-269</span><span class="priority p-high" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Audit: remove unused Radix primitives</div> | |
| <div class="task-foot"><span class="badge">infra</span><div class="right"><span class="avatar av-2" style="width:20px;height:20px;font-size:8px;">JK</span></div></div> | |
| </div> | |
| <div class="task-card" style="opacity:0.78;"> | |
| <div class="task-meta"><span class="id-chip">TSQ-279</span><span class="priority p-med" style="margin-left:auto;"><span></span><span></span><span></span></span></div> | |
| <div class="task-title">Sentry sourcemap pipeline for prod builds</div> | |
| <div class="task-foot"><span class="badge">CI</span><div class="right"><span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DETAIL --> | |
| <section> | |
| <span class="section-label">Issue detail</span> | |
| <h2 style="margin-top:var(--s-3);">A single issue, with all the context.</h2> | |
| <div class="detail-frame"> | |
| <div class="detail-main"> | |
| <div class="detail-head"> | |
| <span class="id-chip">TSQ-247</span> | |
| <span class="status-pill sp-progress"><span class="status-dot dot-progress"></span>In progress</span> | |
| <span class="priority p-high"><span></span><span></span><span></span></span> | |
| <span style="font-size:11px; color:var(--fg-tertiary); margin-left:auto;" class="mono">Updated 2h ago by Priya</span> | |
| </div> | |
| <h2 class="detail-title">Reduce client bundle by 30% via code-split routes & tree-shaken icon imports</h2> | |
| <div class="detail-body"> | |
| <p>Initial profile shows the route entry chunks dominating LCP — the kanban route alone ships <span class="mono">412kb</span> of icon SVGs, most of which the page never renders. We can split <span class="mono">/o/[slug]/sprint</span>, <span class="mono">/o/[slug]/backlog</span>, and <span class="mono">/o/[slug]/dashboard</span> into their own chunks and dynamically load Lucide icons by name rather than importing the whole pack.</p> | |
| <p>Acceptance criteria: ≤ <span class="mono">300kb</span> client JS gzip on the kanban route, no regression on TTI, lighthouse perf 92+.</p> | |
| </div> | |
| <div class="detail-section"> | |
| <div class="h">Sub-tasks · 3 of 5 done · 60%</div> | |
| <div style="height:6px; background:var(--bg-input); border-radius:999px; overflow:hidden; margin-bottom:var(--s-3);"><div style="width:60%; height:100%; background:var(--brand-bg-grad);"></div></div> | |
| <div class="subtask-row"> | |
| <div class="checkbox checked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3.5 3.5L13 5"/></svg></div> | |
| <span class="id-chip">TSQ-247-1</span> | |
| <span class="subtask-text done">Audit current bundle composition with rollup-plugin-visualizer</span> | |
| <span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span> | |
| </div> | |
| <div class="subtask-row"> | |
| <div class="checkbox checked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3.5 3.5L13 5"/></svg></div> | |
| <span class="id-chip">TSQ-247-2</span> | |
| <span class="subtask-text done">Extract route-level chunks for sprint & backlog</span> | |
| <span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span> | |
| </div> | |
| <div class="subtask-row"> | |
| <div class="checkbox checked"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor"><path d="m3 8 3.5 3.5L13 5"/></svg></div> | |
| <span class="id-chip">TSQ-247-3</span> | |
| <span class="subtask-text done">Convert <span class="mono">lucide-react</span> imports to per-icon imports</span> | |
| <span class="avatar av-3" style="width:20px;height:20px;font-size:8px;">MR</span> | |
| </div> | |
| <div class="subtask-row"> | |
| <div class="checkbox"></div> | |
| <span class="id-chip">TSQ-247-4</span> | |
| <span class="subtask-text">Lighthouse CI budget gates per route (blocks deploy on regression)</span> | |
| <span class="avatar av-1" style="width:20px;height:20px;font-size:8px;">PA</span> | |
| </div> | |
| <div class="subtask-row"> | |
| <div class="checkbox"></div> | |
| <span class="id-chip">TSQ-247-5</span> | |
| <span class="subtask-text">Add bundle-size badge to README and PR template</span> | |
| <span class="avatar av-2" style="width:20px;height:20px;font-size:8px;">JK</span> | |
| </div> | |
| </div> | |
| <div class="detail-section"> | |
| <div class="h">Activity</div> | |
| <div class="activity-row"> | |
| <span class="avatar av-1" style="width:24px;height:24px;font-size:9px;">PA</span> | |
| <div class="body"><strong>Priya</strong> moved this from Todo → <em>In progress</em> and assigned herself.</div> | |
| <span class="time">2h ago</span> | |
| </div> | |
| <div class="activity-row"> | |
| <span class="avatar av-3" style="width:24px;height:24px;font-size:9px;">MR</span> | |
| <div class="body"><strong>Mei</strong> linked PR <span class="mono">tasq#1284</span> · "perf: split route chunks for /sprint and /backlog"</div> | |
| <span class="time">3h ago</span> | |
| </div> | |
| <div class="activity-row"> | |
| <span class="avatar av-2" style="width:24px;height:24px;font-size:9px;">JK</span> | |
| <div class="body"><strong>Jonas</strong> commented: "Watch the auth callback chunk — beta SDK ships 60kb of unused locales."</div> | |
| <span class="time">yesterday</span> | |
| </div> | |
| <div class="activity-row"> | |
| <span class="avatar av-1" style="width:24px;height:24px;font-size:9px;">PA</span> | |
| <div class="body"><strong>Priya</strong> created the issue and added it to <em>Sprint 24 · Bundle & speed</em>.</div> | |
| <span class="time">3d ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <aside class="detail-side"> | |
| <div class="prop"><span class="lbl">Status</span><span class="val"><span class="status-pill sp-progress"><span class="status-dot dot-progress"></span>In progress</span></span></div> | |
| <div class="prop"><span class="lbl">Priority</span><span class="val"><span class="priority p-high"><span></span><span></span><span></span></span> High</span></div> | |
| <div class="prop"><span class="lbl">Assignee</span><span class="val"><span class="avatar av-1" style="width:22px;height:22px;font-size:9px;">PA</span> Priya Anand</span></div> | |
| <div class="prop"><span class="lbl">Reviewers</span><span class="val"><span class="avatar-stack"><span class="avatar av-2" style="width:22px;height:22px;font-size:9px;">JK</span><span class="avatar av-3" style="width:22px;height:22px;font-size:9px;">MR</span></span> 2</span></div> | |
| <div class="prop"><span class="lbl">Estimate</span><span class="val mono">5 pts</span></div> | |
| <div class="prop"><span class="lbl">Sprint</span><span class="val">Sprint 24</span></div> | |
| <div class="prop"><span class="lbl">Project</span><span class="val"><span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#6366F1,#7C3AED);"></span> Web platform</span></div> | |
| <div class="prop"><span class="lbl">Labels</span><span class="val"><span class="badge">perf</span> <span class="badge">infra</span></span></div> | |
| <div class="prop"><span class="lbl">Due</span><span class="val mono">Apr 13 · 2026</span></div> | |
| <div class="prop"><span class="lbl">Created</span><span class="val mono">Apr 8 · 2026</span></div> | |
| <div class="detail-section" style="margin-top:var(--s-5);"> | |
| <div class="h">Linked</div> | |
| <div class="activity-row" style="padding:var(--s-2) 0;"> | |
| <svg width="14" height="14" style="color:var(--fg-tertiary); margin-top:3px; flex-shrink:0;"><use href="#i-link"/></svg> | |
| <div class="body"><span class="mono" style="color:var(--fg-secondary);">tasq#1284</span> · perf: split route chunks</div> | |
| </div> | |
| <div class="activity-row" style="padding:var(--s-2) 0; border-bottom:0;"> | |
| <svg width="14" height="14" style="color:var(--fg-tertiary); margin-top:3px; flex-shrink:0;"><use href="#i-flag"/></svg> | |
| <div class="body">Blocks <span class="mono" style="color:var(--fg-secondary);">TSQ-308</span></div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| </section> | |
| <footer> | |
| <span class="mono">AURORA · 03 / 03</span> | |
| <span><span class="mono">Tasq</span> moodboard · light theme · dark theme is a token override</span> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment