yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: taste-skill refinements — tinted shadows, stagger animations, tactile press

Browse Source 
Pre-redesign checkpoint.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-03-30 20:51:56 -05:00
parent fa5a748a60
commit 3704687793
5 changed files with 1382 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

691
dashboard-mockup.html Normal file
View File

@@ -0,0 +1,691 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Second Brain — Dashboard Mockup</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════
DESIGN DIRECTION: "Warm Precision"
Concept: A personal command center that
feels like an expensive notebook — warm
paper tones, sharp typographic hierarchy,
and generous breathing room. The accent
is a single deep teal that cuts through
warm neutrals like ink on cream paper.
══════════════════════════════════════ */
:root {
--font: 'Outfit', -apple-system, sans-serif;
--mono: 'JetBrains Mono', monospace;
/* Warm stone palette */
--canvas: #F0EFEB;
--surface: #FAF9F6;
--card: #FFFFFF;
--card-hover: #F5F4F0;
--border: rgba(0,0,0,0.06);
--border-strong: rgba(0,0,0,0.10);
/* Warm text hierarchy */
--text-1: #1C1917;
--text-2: #44403C;
--text-3: #78716C;
--text-4: #A8A29E;
/* Deep teal accent — singular, confident */
--accent: #0D9488;
--accent-dim: rgba(13,148,136,0.08);
--accent-bg: rgba(13,148,136,0.06);
/* Semantic */
--success: #059669;
--error: #DC2626;
--warning: #D97706;
--error-dim: rgba(220,38,38,0.06);
--success-dim: rgba(5,150,105,0.06);
/* Shadows — warm tinted */
--shadow-sm: 0 1px 3px rgba(28,25,23,0.04), 0 4px 12px rgba(28,25,23,0.03);
--shadow-md: 0 2px 8px rgba(28,25,23,0.05), 0 12px 28px rgba(28,25,23,0.06);
--shadow-lg: 0 4px 16px rgba(28,25,23,0.06), 0 20px 40px rgba(28,25,23,0.08);
/* Spacing */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
--radius: 14px;
--radius-sm: 8px;
--radius-xs: 5px;
}
* { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); }
html, body {
font-family: var(--font);
background: var(--canvas);
color: var(--text-1);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
/* ══ NAVBAR ══ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(240,239,235,0.85);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border-bottom: 1px solid var(--border);
height: 52px;
display: flex;
align-items: center;
padding: 0 32px;
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
gap: 28px;
}
.nav-logo {
font-weight: 700;
font-size: 15px;
color: var(--text-1);
letter-spacing: -0.03em;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo svg { color: var(--accent); }
.nav-links {
display: flex;
gap: 2px;
flex: 1;
}
.nav-link {
padding: 5px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text-3);
transition: all 0.15s;
cursor: pointer;
}
.nav-link:hover { color: var(--text-1); background: rgba(0,0,0,0.04); }
.nav-link.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.nav-right {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.nav-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
cursor: pointer;
transition: all 0.15s;
}
.nav-icon:hover { color: var(--text-1); background: rgba(0,0,0,0.04); }
/* ══ PAGE ══ */
.page {
max-width: 1200px;
margin: 0 auto;
padding: 36px 32px 80px;
animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══ HEADER ══ */
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 32px;
}
.header-date {
font-size: 11px;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.header-greeting {
font-size: 30px;
font-weight: 300;
color: var(--text-1);
letter-spacing: -0.03em;
line-height: 1.15;
}
.header-greeting strong { font-weight: 700; }
/* ══ TASK TRIGGER ══ */
.task-pill {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 12px;
border-radius: 100px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}
.task-pill:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.task-pill:active { transform: scale(0.97); }
.task-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
animation: pulse 2s infinite;
}
.task-pill-dot.overdue { background: var(--error); }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.task-pill-text {
font-size: 13px;
font-weight: 500;
color: var(--text-2);
}
.task-pill-text strong { font-weight: 600; color: var(--text-1); }
.task-pill-arrow {
color: var(--text-4);
transition: transform 0.2s;
}
.task-pill:hover .task-pill-arrow { transform: translateX(2px); color: var(--accent); }
/* ══ BENTO GRID ══ */
.bento {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 12px;
margin-bottom: 32px;
}
.bento-card {
background: var(--card);
border-radius: var(--radius);
padding: 24px;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
position: relative;
overflow: hidden;
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bento-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.bento-card:active { transform: scale(0.985); }
.bento-card:nth-child(1) { animation-delay: 0ms; }
.bento-card:nth-child(2) { animation-delay: 60ms; }
.bento-card:nth-child(3) { animation-delay: 120ms; }
@keyframes cardIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Card accent stripe */
.bento-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
border-radius: var(--radius) var(--radius) 0 0;
opacity: 0;
transition: opacity 0.3s;
}
.bento-card:hover::before { opacity: 1; }
.bento-card.teal::before { background: var(--accent); }
.bento-card.rose::before { background: var(--error); }
.bento-card.emerald::before { background: var(--success); }
.bento-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.bento-icon.teal { background: var(--accent-dim); color: var(--accent); }
.bento-icon.rose { background: var(--error-dim); color: var(--error); }
.bento-icon.emerald { background: var(--success-dim); color: var(--success); }
.bento-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-4);
margin-bottom: 6px;
}
.bento-value {
font-size: 22px;
font-weight: 700;
color: var(--text-1);
letter-spacing: -0.02em;
font-family: var(--mono);
margin-bottom: 4px;
}
.bento-desc {
font-size: 13px;
color: var(--text-3);
line-height: 1.4;
}
.bento-action {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
margin-top: 12px;
transition: gap 0.2s;
}
.bento-card:hover .bento-action { gap: 6px; }
/* ══ MODULE GRID ══ */
.modules {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 12px;
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 200ms;
}
.module {
background: var(--card);
border-radius: var(--radius);
padding: 24px;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.module-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.module-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-4);
}
.module-link {
font-size: 12px;
color: var(--accent);
font-weight: 500;
}
.module-link:hover { text-decoration: underline; }
/* Budget */
.budget-amount {
font-size: 32px;
font-weight: 700;
font-family: var(--mono);
letter-spacing: -0.03em;
color: var(--text-1);
margin-bottom: 2px;
}
.budget-sub {
font-size: 13px;
color: var(--text-3);
margin-bottom: 20px;
}
.budget-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 13px;
transition: background 0.15s;
border-radius: 6px;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
}
.budget-row:hover { background: var(--card-hover); }
.budget-row + .budget-row { border-top: 1px solid var(--border); }
.budget-row-name { color: var(--text-2); }
.budget-row-val { font-family: var(--mono); font-weight: 500; color: var(--text-1); }
.budget-row-val.income { color: var(--success); }
/* Right stack */
.right-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Fitness */
.fitness-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.fitness-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent-dim);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.fitness-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.fitness-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.fitness-bar {
height: 5px;
background: var(--card-hover);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.fitness-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
width: 31%;
transition: width 1s ease;
}
.fitness-macros {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.macro-val {
font-size: 15px;
font-weight: 600;
font-family: var(--mono);
color: var(--text-1);
}
.macro-unit { font-size: 11px; color: var(--text-4); font-weight: 400; }
.macro-label { font-size: 11px; color: var(--text-3); margin-top: 2px; }
/* Issues */
.issue-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 13px;
}
.issue-row + .issue-row { border-top: 1px solid var(--border); }
.issue-dot {
width: 3px;
height: 28px;
border-radius: 2px;
background: var(--error);
flex-shrink: 0;
}
.issue-info { flex: 1; min-width: 0; }
.issue-name {
font-size: 13px;
font-weight: 500;
color: var(--text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.issue-meta { font-size: 11px; color: var(--text-4); margin-top: 1px; }
.issue-badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
background: var(--error-dim);
color: var(--error);
flex-shrink: 0;
}
/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
.nav { padding: 0 16px; }
.nav-links { display: none; }
.page { padding: 24px 16px 80px; }
.header { flex-direction: column; gap: 16px; }
.header-greeting { font-size: 24px; }
.task-pill { width: 100%; }
.bento { grid-template-columns: 1fr; }
.modules { grid-template-columns: 1fr; }
.budget-amount { font-size: 26px; }
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="nav">
<div class="nav-inner">
<a class="nav-logo">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7z"/><path d="M9 4v13"/><path d="M15 7v13"/></svg>
Second Brain
</a>
<div class="nav-links">
<a class="nav-link active">Dashboard</a>
<a class="nav-link">Tasks</a>
<a class="nav-link">Trips</a>
<a class="nav-link">Fitness</a>
<a class="nav-link">Inventory</a>
<a class="nav-link">Budget</a>
<a class="nav-link">Reader</a>
<a class="nav-link">Media</a>
</div>
<div class="nav-right">
<div class="nav-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
</div>
<div class="nav-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/></svg>
</div>
<div class="nav-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
</div>
</div>
</nav>
<div class="page">
<!-- HEADER -->
<div class="header">
<div>
<div class="header-date">Monday, March 30</div>
<h1 class="header-greeting">Good evening, <strong>Yusuf</strong></h1>
</div>
<div class="task-pill">
<span class="task-pill-dot"></span>
<span class="task-pill-text"><strong>3 tasks</strong> &middot; Next: Change air filters</span>
<svg class="task-pill-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l4 4-4 4"/></svg>
</div>
</div>
<!-- BENTO GRID -->
<div class="bento">
<div class="bento-card teal">
<div class="bento-icon teal">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="bento-label">Budget</div>
<div class="bento-value">78</div>
<div class="bento-desc">uncategorized transactions<br>$340,787 spent &middot; $275,350 income</div>
<div class="bento-action">Review <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
</div>
<div class="bento-card rose">
<div class="bento-icon rose">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</div>
<div class="bento-label">Inventory</div>
<div class="bento-value">9</div>
<div class="bento-desc">issues &middot; 37 needs review<br>46 items need attention</div>
<div class="bento-action">View <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
</div>
<div class="bento-card emerald">
<div class="bento-icon emerald">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<div class="bento-label">Fitness</div>
<div class="bento-value">1,374</div>
<div class="bento-desc">calories remaining today<br>626 cal &middot; 37g protein &middot; 87g carbs</div>
<div class="bento-action">Log food <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4.5 2.5l3.5 3.5-3.5 3.5"/></svg></div>
</div>
</div>
<!-- MODULES -->
<div class="modules">
<div class="module">
<div class="module-head">
<div class="module-title">Budget &middot; February</div>
<a class="module-link">View all &rarr;</a>
</div>
<div class="budget-amount">$340,787.9</div>
<div class="budget-sub">spent this month</div>
<div class="budget-row"><span class="budget-row-name">Income</span><span class="budget-row-val income">+$275,350.16</span></div>
<div class="budget-row"><span class="budget-row-name">COG</span><span class="budget-row-val">$144,236.61</span></div>
<div class="budget-row"><span class="budget-row-name">Grocery</span><span class="budget-row-val">$31,606.13</span></div>
<div class="budget-row"><span class="budget-row-name">Mortgage</span><span class="budget-row-val">$4,636.64</span></div>
<div class="budget-row"><span class="budget-row-name">Shopping</span><span class="budget-row-val">$2,321.30</span></div>
<div class="budget-row"><span class="budget-row-name">Sadaqah</span><span class="budget-row-val">$1,768</span></div>
</div>
<div class="right-stack">
<div class="module">
<div class="module-head">
<div class="module-title">Fitness &middot; Today</div>
<a class="module-link">Details &rarr;</a>
</div>
<div class="fitness-top">
<div class="fitness-avatar">Y</div>
<div>
<div class="fitness-name">Yusuf</div>
<div class="fitness-sub">626 cal &middot; 1,374 remaining</div>
</div>
</div>
<div class="fitness-bar"><div class="fitness-bar-fill"></div></div>
<div class="fitness-macros">
<div>
<div class="macro-val">37<span class="macro-unit">/150g</span></div>
<div class="macro-label">protein</div>
</div>
<div>
<div class="macro-val">87<span class="macro-unit">/200g</span></div>
<div class="macro-label">carbs</div>
</div>
<div>
<div class="macro-val">42<span class="macro-unit">/65g</span></div>
<div class="macro-label">fat</div>
</div>
</div>
</div>
<div class="module">
<div class="module-head">
<div class="module-title">Issues</div>
<a class="module-link">View all &rarr;</a>
</div>
<div class="issue-row">
<div class="issue-dot"></div>
<div class="issue-info">
<div class="issue-name">Surface Laptop Studio - 1TB</div>
<div class="issue-meta">Order #33A77277RK</div>
</div>
<span class="issue-badge">Issue</span>
</div>
<div class="issue-row">
<div class="issue-dot"></div>
<div class="issue-info">
<div class="issue-name">Canon EOS Rebel T7</div>
<div class="issue-meta">Order #8MB684380L</div>
</div>
<span class="issue-badge">Issue</span>
</div>
<div class="issue-row">
<div class="issue-dot"></div>
<div class="issue-info">
<div class="issue-name">Surface Pro X SQ2, 16GB</div>
<div class="issue-meta">Order #4VN564622</div>
</div>
<span class="issue-badge">Issue</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>