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

651
dashboard-mockup-v2.html Normal file
View File

@@ -0,0 +1,651 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Second Brain — Taste Skill 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;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ══════════════════════════════════════════════════
TASTE SKILL MOCKUP — "Zinc + Emerald"
DESIGN_VARIANCE: 8 (Asymmetric bento grid)
MOTION_INTENSITY: 6 (CSS stagger + spring easing)
VISUAL_DENSITY: 4 (Art gallery breathing room)
Palette: Zinc neutrals + single Emerald accent
Font: Outfit (geometric sans) + JetBrains Mono
Layout: Asymmetric 2fr/1fr bento, no 3-equal-cols
Cards: Used ONLY for elevation hierarchy
══════════════════════════════════════════════════ */
:root {
--font: 'Outfit', system-ui, sans-serif;
--mono: 'JetBrains Mono', monospace;
/* Zinc neutral base — cool, not warm */
--canvas: #FAFAFA;
--surface: #FFFFFF;
--card: #FFFFFF;
--card-hover: #F4F4F5;
--border: rgba(0,0,0,0.06);
/* Zinc text scale */
--text-1: #18181B;
--text-2: #3F3F46;
--text-3: #71717A;
--text-4: #A1A1AA;
--text-5: #D4D4D8;
/* Single accent: Emerald — desaturated, confident */
--accent: #059669;
--accent-dim: rgba(5,150,105,0.07);
/* Semantic */
--error: #DC2626;
--error-dim: rgba(220,38,38,0.06);
--warning: #D97706;
/* Tinted shadows (zinc-tinted, not pure black) */
--shadow-sm: 0 1px 2px rgba(24,24,27,0.04), 0 4px 8px rgba(24,24,27,0.02);
--shadow-md: 0 2px 8px rgba(24,24,27,0.05), 0 12px 24px rgba(24,24,27,0.04);
--shadow-lg: 0 4px 16px rgba(24,24,27,0.06), 0 24px 48px rgba(24,24,27,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
font-family: var(--font);
background: var(--canvas);
color: var(--text-1);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
/* ═══ NAV ═══ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250,250,250,0.8);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px;
margin: 0 auto;
height: 48px;
display: flex;
align-items: center;
padding: 0 24px;
gap: 24px;
}
.nav-brand {
font-weight: 700;
font-size: 14px;
letter-spacing: -0.04em;
color: var(--text-1);
display: flex;
align-items: center;
gap: 7px;
}
.nav-brand svg { color: var(--accent); }
.nav-links { display: flex; gap: 1px; flex: 1; }
.nav-link {
font-size: 13px;
font-weight: 500;
color: var(--text-4);
padding: 4px 12px;
border-radius: 6px;
transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
cursor: pointer;
}
.nav-link:hover { color: var(--text-2); background: rgba(0,0,0,0.03); }
.nav-link.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.nav-end {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
}
.nav-btn {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-4);
cursor: pointer;
transition: all 0.15s;
border: none;
background: none;
}
.nav-btn:hover { color: var(--text-2); background: rgba(0,0,0,0.04); }
/* ═══ PAGE ═══ */
.page {
max-width: 1280px;
margin: 0 auto;
padding: 32px 24px 96px;
}
/* ═══ HEADER — Asymmetric split ═══ */
.header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.header-date {
font-size: 11px;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.header-h1 {
font-size: 28px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--text-1);
}
.header-h1 strong { font-weight: 800; }
/* Task pill */
.task-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 10px;
border-radius: 999px;
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;
white-space: nowrap;
}
.task-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.task-pill:active { transform: scale(0.97); }
.tp-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: breathe 2.5s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.tp-text { font-size: 12px; font-weight: 500; color: var(--text-3); }
.tp-text b { color: var(--text-1); font-weight: 600; }
.tp-arrow { color: var(--text-5); transition: all 0.2s; }
.task-pill:hover .tp-arrow { color: var(--accent); transform: translateX(2px); }
/* ═══ BENTO — Asymmetric 2fr/1fr (NOT 3-equal) ═══ */
.bento {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.bento-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px 24px;
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.bento-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bento-card:active { transform: scale(0.985); }
/* Stagger */
.bento-card { animation: cardReveal 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.bento-card:nth-child(1) { animation-delay: 50ms; }
.bento-card:nth-child(2) { animation-delay: 100ms; }
.bento-card:nth-child(3) { animation-delay: 150ms; }
.bento-card:nth-child(4) { animation-delay: 200ms; }
@keyframes cardReveal {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Top accent on hover */
.bento-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 16px 16px 0 0;
opacity: 0;
transition: opacity 0.3s;
}
.bento-card:hover::after { opacity: 1; }
.bento-card.emerald::after { background: var(--accent); }
.bento-card.rose::after { background: var(--error); }
.bento-card.amber::after { background: var(--warning); }
.bc-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.bc-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-4);
}
.bc-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.bc-icon.emerald { background: var(--accent-dim); color: var(--accent); }
.bc-icon.rose { background: var(--error-dim); color: var(--error); }
.bc-icon.amber { background: rgba(217,119,6,0.07); color: var(--warning); }
.bc-value {
font-size: 32px;
font-weight: 700;
font-family: var(--mono);
letter-spacing: -0.04em;
line-height: 1;
color: var(--text-1);
margin-bottom: 6px;
}
.bc-value-sm {
font-size: 20px;
font-weight: 700;
font-family: var(--mono);
letter-spacing: -0.03em;
color: var(--text-1);
margin-bottom: 4px;
}
.bc-desc {
font-size: 13px;
color: var(--text-3);
line-height: 1.5;
}
.bc-desc strong { color: var(--text-2); font-weight: 500; }
.bc-action {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
color: var(--accent);
margin-top: 10px;
letter-spacing: 0.02em;
transition: gap 0.2s;
}
.bento-card:hover .bc-action { gap: 6px; }
/* Second bento row */
.bento-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
/* ═══ MODULES — 7:3 split ═══ */
.modules {
display: grid;
grid-template-columns: 7fr 3fr;
gap: 10px;
animation: cardReveal 0.45s cubic-bezier(0.16,1,0.3,1) both;
animation-delay: 250ms;
}
.mod {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px 24px;
box-shadow: var(--shadow-sm);
}
.mod-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.mod-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-4);
}
.mod-link {
font-size: 11px;
color: var(--accent);
font-weight: 500;
}
.mod-link:hover { text-decoration: underline; }
/* Budget */
.b-amount {
font-size: 36px;
font-weight: 800;
font-family: var(--mono);
letter-spacing: -0.04em;
color: var(--text-1);
line-height: 1;
}
.b-sub {
font-size: 12px;
color: var(--text-4);
margin-top: 4px;
margin-bottom: 18px;
}
.b-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 0;
font-size: 13px;
}
.b-row + .b-row { border-top: 1px solid var(--border); }
.b-row-name { color: var(--text-3); font-weight: 400; }
.b-row-val { font-family: var(--mono); font-weight: 500; color: var(--text-2); font-size: 12px; }
.b-row-val.green { color: var(--accent); }
/* Right column */
.right-col {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Fitness */
.fit-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.fit-av {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent-dim);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.fit-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.fit-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }
.fit-bar {
height: 4px;
background: var(--card-hover);
border-radius: 2px;
margin-bottom: 14px;
overflow: hidden;
}
.fit-bar-fill {
height: 100%;
border-radius: 2px;
background: var(--accent);
width: 31%;
transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fit-macros {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.fm-val { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--text-1); }
.fm-unit { font-size: 10px; color: var(--text-5); }
.fm-label { font-size: 10px; color: var(--text-4); margin-top: 1px; }
/* Issues — no card boxing, just divide-y */
.iss-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.iss-row + .iss-row { border-top: 1px solid var(--border); }
.iss-bar {
width: 2px;
height: 24px;
border-radius: 1px;
background: var(--error);
flex-shrink: 0;
}
.iss-info { flex: 1; min-width: 0; }
.iss-name {
font-size: 12px;
font-weight: 500;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iss-meta { font-size: 10px; color: var(--text-5); }
.iss-badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 5px;
border-radius: 3px;
background: var(--error-dim);
color: var(--error);
}
/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-inner { padding: 0 16px; }
.page { padding: 20px 16px 80px; }
.header { flex-direction: column; align-items: flex-start; gap: 12px; }
.header-h1 { font-size: 22px; }
.task-pill { width: 100%; }
.bento { grid-template-columns: 1fr; }
.bento-row-2 { grid-template-columns: 1fr; }
.modules { grid-template-columns: 1fr; }
.b-amount { font-size: 28px; }
.bc-value { font-size: 24px; }
}
</style>
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<a class="nav-brand">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="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-end">
<button class="nav-btn"><svg width="15" height="15" 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></button>
<button class="nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></button>
<button class="nav-btn"><svg width="15" height="15" 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></button>
</div>
</div>
</nav>
<div class="page">
<div class="header">
<div>
<div class="header-date">Monday, March 30</div>
<h1 class="header-h1">Good evening, <strong>Yusuf</strong></h1>
</div>
<div class="task-pill">
<span class="tp-dot"></span>
<span class="tp-text"><b>3 tasks</b> &middot; Next: Change air filters</span>
<svg class="tp-arrow" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M5 3l3.5 3.5L5 10"/></svg>
</div>
</div>
<!-- ROW 1: Budget (wide) + Inventory (narrow) -->
<div class="bento">
<div class="bento-card emerald">
<div class="bc-top">
<span class="bc-label">Budget</span>
<div class="bc-icon emerald"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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>
<div class="bc-value">78</div>
<div class="bc-desc">uncategorized transactions<br><strong>$340,787 spent</strong> &middot; $275,350 income this month</div>
<div class="bc-action">Review transactions <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
</div>
<div class="bento-card rose">
<div class="bc-top">
<span class="bc-label">Inventory</span>
<div class="bc-icon rose"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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>
<div class="bc-value-sm">9 issues</div>
<div class="bc-desc">37 needs review<br>46 items need attention</div>
<div class="bc-action">View items <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
</div>
</div>
<!-- ROW 2: Fitness (half) + Calories (half) — NOT 3-equal -->
<div class="bento-row-2">
<div class="bento-card emerald">
<div class="bc-top">
<span class="bc-label">Calories</span>
<div class="bc-icon emerald"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
</div>
<div class="bc-value">1,374</div>
<div class="bc-desc">remaining today<br><strong>626 logged</strong> &middot; 37g protein &middot; 87g carbs</div>
<div class="bc-action">Log food <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 2l3.5 3.5L4 9"/></svg></div>
</div>
<div class="bento-card" style="display:flex;flex-direction:column;justify-content:center;">
<div class="fit-header">
<div class="fit-av">Y</div>
<div>
<div class="fit-name">Yusuf</div>
<div class="fit-sub">626 cal &middot; 1,374 left</div>
</div>
</div>
<div class="fit-bar"><div class="fit-bar-fill"></div></div>
<div class="fit-macros">
<div><div class="fm-val">37<span class="fm-unit">/150g</span></div><div class="fm-label">protein</div></div>
<div><div class="fm-val">87<span class="fm-unit">/200g</span></div><div class="fm-label">carbs</div></div>
<div><div class="fm-val">42<span class="fm-unit">/65g</span></div><div class="fm-label">fat</div></div>
</div>
</div>
</div>
<!-- MODULES: Budget detail (wide) + Issues (narrow) -->
<div class="modules">
<div class="mod">
<div class="mod-head">
<div class="mod-title">Budget &middot; March</div>
<a class="mod-link">View all &rarr;</a>
</div>
<div class="b-amount">$340,787.9</div>
<div class="b-sub">spent this month</div>
<div class="b-row"><span class="b-row-name">Income</span><span class="b-row-val green">+$275,350</span></div>
<div class="b-row"><span class="b-row-name">COG</span><span class="b-row-val">$144,236</span></div>
<div class="b-row"><span class="b-row-name">Grocery</span><span class="b-row-val">$31,606</span></div>
<div class="b-row"><span class="b-row-name">Mortgage</span><span class="b-row-val">$4,636</span></div>
<div class="b-row"><span class="b-row-name">Shopping</span><span class="b-row-val">$2,321</span></div>
<div class="b-row"><span class="b-row-name">Sadaqah</span><span class="b-row-val">$1,768</span></div>
<div class="b-row"><span class="b-row-name">Bills</span><span class="b-row-val">$1,646</span></div>
</div>
<div class="right-col">
<div class="mod">
<div class="mod-head">
<div class="mod-title">Issues</div>
<a class="mod-link">View all &rarr;</a>
</div>
<div class="iss-row">
<div class="iss-bar"></div>
<div class="iss-info"><div class="iss-name">Surface Laptop Studio 1TB</div><div class="iss-meta">#33A77277RK</div></div>
<span class="iss-badge">Issue</span>
</div>
<div class="iss-row">
<div class="iss-bar"></div>
<div class="iss-info"><div class="iss-name">Canon EOS Rebel T7</div><div class="iss-meta">#8MB684380L</div></div>
<span class="iss-badge">Issue</span>
</div>
<div class="iss-row">
<div class="iss-bar"></div>
<div class="iss-info"><div class="iss-name">Surface Pro X SQ2 16GB</div><div class="iss-meta">#4VN564622</div></div>
<span class="iss-badge">Issue</span>
</div>
<div class="iss-row">
<div class="iss-bar"></div>
<div class="iss-info"><div class="iss-name">X100F</div><div class="iss-meta">#75H47874VX</div></div>
<span class="iss-badge">Issue</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>