CognitiveXD — Designing for the Mind @import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap’); :root { –black: #000000; –white: #ffffff; –gray-950: #080808; –gray-900: #0f0f0f; –gray-800: #1a1a1a; –gray-700: #2a2a2a; –gray-600: #3d3d3d; –gray-400: #6b6b6b; –gray-300: #9a9a9a; –gray-200: #c8c8c8; –gray-100: #e8e8e8; –accent-neural: #7c6af7; –accent-bio: #4fd1a5; –accent-warm: #f4845f; –accent-electric: #60a5fa; –glass-bg: rgba(255,255,255,0.04); –glass-border: rgba(255,255,255,0.1); –glass-shine: rgba(255,255,255,0.08); –blur-sm: blur(12px); –blur-md: blur(24px); –blur-lg: blur(48px); –radius-sm: 12px; –radius-md: 20px; –radius-lg: 28px; –radius-xl: 40px; –font-display: ‘New York’, ‘Georgia’, serif; –font-body: -apple-system, ‘SF Pro Text’, ‘SF Pro Display’, system-ui, sans-serif; –font-mono: ‘SF Mono’, ‘Fira Code’, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(–black); color: var(–gray-100); font-family: var(–font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── LIQUID GLASS UTILITY ── */ .glass { background: var(–glass-bg); backdrop-filter: var(–blur-sm); -webkit-backdrop-filter: var(–blur-sm); border: 0.5px solid var(–glass-border); border-radius: var(–radius-md); } .glass-strong { background: rgba(255,255,255,0.06); backdrop-filter: var(–blur-md); -webkit-backdrop-filter: var(–blur-md); border: 0.5px solid rgba(255,255,255,0.14); border-top: 0.5px solid rgba(255,255,255,0.22); border-radius: var(–radius-lg); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(0,0,0,0.3) inset, 0 24px 48px rgba(0,0,0,0.4); } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.6); backdrop-filter: var(–blur-md); -webkit-backdrop-filter: var(–blur-md); border-bottom: 0.5px solid rgba(255,255,255,0.07); } .nav-logo { font-family: var(–font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: var(–white); text-transform: uppercase; } .nav-logo span { color: var(–accent-neural); } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-size: 13px; color: var(–gray-300); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; } .nav-links a:hover { color: var(–white); } .nav-cta { font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; border-radius: 100px; background: rgba(124,106,247,0.15); border: 0.5px solid rgba(124,106,247,0.4); color: var(–accent-neural); cursor: pointer; transition: all 0.2s; text-decoration: none; } .nav-cta:hover { background: rgba(124,106,247,0.25); border-color: rgba(124,106,247,0.7); } /* hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(–gray-200); border-radius: 2px; transition: all 0.3s; } /* ── HERO ── */ .hero { min-height: 100svh; padding: 100px 24px 60px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(124,106,247,0.12) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(79,209,165,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 10% 60%, rgba(244,132,95,0.06) 0%, transparent 60%), var(–black); z-index: 0; } .hero-noise { position: absolute; inset: 0; background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’n’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23n)’ opacity=’0.03’/%3E%3C/svg%3E”); opacity: 0.4; z-index: 1; } .hero-eyebrow { position: relative; z-index: 2; font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–accent-neural); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ”; display: block; width: 32px; height: 1px; background: var(–accent-neural); } .hero-title { position: relative; z-index: 2; font-family: var(–font-display); font-size: clamp(48px, 11vw, 120px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 400; color: var(–white); margin-bottom: 40px; } .hero-title .muted { color: var(–gray-600); } .hero-title .accent { background: linear-gradient(135deg, var(–accent-neural) 0%, var(–accent-bio) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-body { position: relative; z-index: 2; max-width: 560px; font-size: 17px; line-height: 1.7; color: var(–gray-300); margin-bottom: 48px; } .hero-actions { position: relative; z-index: 2; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; background: var(–accent-neural); color: var(–white); font-family: var(–font-body); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.25s; border: none; } .btn-primary:hover { background: #9181fa; transform: translateY(-1px); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; background: var(–glass-bg); backdrop-filter: var(–blur-sm); border: 0.5px solid var(–glass-border); color: var(–gray-200); font-size: 15px; font-weight: 400; text-decoration: none; cursor: pointer; transition: all 0.25s; } .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(–white); } .hero-scroll { position: absolute; bottom: 32px; right: 24px; z-index: 2; font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(–gray-600); writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px; } .hero-scroll::after { content: ”; display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(–gray-600), transparent); } /* ── MARQUEE ── */ .marquee-track { width: 100%; overflow: hidden; border-top: 0.5px solid rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.06); padding: 16px 0; background: rgba(255,255,255,0.02); } .marquee-inner { display: flex; gap: 48px; white-space: nowrap; animation: marquee 30s linear infinite; width: max-content; } .marquee-item { font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(–gray-500, #555); display: flex; align-items: center; gap: 16px; } .marquee-item::after { content: ‘·’; color: var(–accent-neural); opacity: 0.5; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── SECTION LAYOUT ── */ section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; } section.full-bleed { max-width: none; padding-left: 0; padding-right: 0; } .section-label { font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–gray-500, #555); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .section-label::before { content: ”; display: block; width: 24px; height: 1px; background: currentColor; } .section-title { font-family: var(–font-display); font-size: clamp(32px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: var(–white); margin-bottom: 20px; } .section-subtitle { font-size: 17px; line-height: 1.65; color: var(–gray-400); max-width: 620px; margin-bottom: 60px; } /* ── PRINCIPLES GRID ── */ .principles-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.06); border-radius: var(–radius-lg); overflow: hidden; } .principle-card { background: var(–gray-950); padding: 32px; transition: background 0.3s; cursor: default; } .principle-card:hover { background: rgba(124,106,247,0.06); } .principle-num { font-family: var(–font-mono); font-size: 11px; color: var(–accent-neural); letter-spacing: 0.12em; margin-bottom: 16px; } .principle-name { font-family: var(–font-display); font-size: 22px; font-weight: 400; color: var(–white); margin-bottom: 12px; line-height: 1.2; } .principle-desc { font-size: 15px; line-height: 1.65; color: var(–gray-400); } /* ── STATS ROW ── */ .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.06); border-radius: var(–radius-md); overflow: hidden; margin-bottom: 80px; } .stat-cell { background: var(–gray-950); padding: 36px 24px; display: flex; flex-direction: column; gap: 8px; } .stat-num { font-family: var(–font-display); font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(–white); } .stat-num span { color: var(–accent-neural); } .stat-label { font-size: 13px; color: var(–gray-400); line-height: 1.5; } /* ── TRIPLE EPIDEMIC ── */ .epidemic-section { background: linear-gradient(180deg, var(–black) 0%, rgba(244,132,95,0.04) 50%, var(–black) 100%); padding: 80px 24px; } .epidemic-section > * { max-width: 1200px; margin-left: auto; margin-right: auto; } .epidemic-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; } .epidemic-card { padding: 36px; position: relative; overflow: hidden; } .epidemic-card::before { content: ”; position: absolute; top: 0; left: 0; right: 0; height: 1px; } .epidemic-card.mental::before { background: linear-gradient(90deg, transparent, rgba(244,132,95,0.8), transparent); } .epidemic-card.cognitive::before { background: linear-gradient(90deg, transparent, rgba(96,165,250,0.8), transparent); } .epidemic-card.digital::before { background: linear-gradient(90deg, transparent, rgba(79,209,165,0.8), transparent); } .epidemic-icon { font-size: 28px; margin-bottom: 20px; display: block; } .epidemic-tag { font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; display: inline-block; margin-bottom: 16px; } .mental .epidemic-tag { background: rgba(244,132,95,0.12); color: var(–accent-warm); border: 0.5px solid rgba(244,132,95,0.3); } .cognitive .epidemic-tag { background: rgba(96,165,250,0.12); color: var(–accent-electric); border: 0.5px solid rgba(96,165,250,0.3); } .digital .epidemic-tag { background: rgba(79,209,165,0.12); color: var(–accent-bio); border: 0.5px solid rgba(79,209,165,0.3); } .epidemic-card-title { font-family: var(–font-display); font-size: 26px; font-weight: 400; color: var(–white); margin-bottom: 12px; line-height: 1.2; } .epidemic-card p { font-size: 15px; color: var(–gray-400); line-height: 1.7; } /* ── LIVING BOOK / CHAPTERS ── */ .chapters-list { display: flex; flex-direction: column; gap: 0; } .chapter-item { display: flex; align-items: flex-start; gap: 24px; padding: 28px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); cursor: pointer; transition: all 0.2s; text-decoration: none; color: inherit; } .chapter-item:hover .chapter-arrow { transform: translateX(4px); opacity: 1; } .chapter-item:hover .chapter-title { color: var(–white); } .chapter-item:first-child { border-top: 0.5px solid rgba(255,255,255,0.06); } .chapter-num { font-family: var(–font-mono); font-size: 12px; color: var(–gray-600); min-width: 40px; padding-top: 4px; } .chapter-content { flex: 1; } .chapter-tag { font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(–accent-neural); margin-bottom: 8px; display: block; } .chapter-title { font-family: var(–font-display); font-size: 20px; font-weight: 400; color: var(–gray-200); margin-bottom: 8px; line-height: 1.3; transition: color 0.2s; } .chapter-desc { font-size: 14px; color: var(–gray-500, #555); line-height: 1.6; } .chapter-arrow { font-size: 18px; color: var(–gray-600); opacity: 0; transition: all 0.2s; padding-top: 2px; } /* ── GLOSSARY INTERACTIVE ── */ .glossary-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.05); border-radius: var(–radius-md); overflow: hidden; } .glossary-item { background: var(–gray-950); padding: 0; overflow: hidden; transition: all 0.2s; } .glossary-trigger { width: 100%; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; background: none; border: none; color: inherit; text-align: left; } .glossary-term { font-family: var(–font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(–accent-bio); } .glossary-short { font-size: 13px; color: var(–gray-500, #555); flex: 1; display: none; } .glossary-chevron { font-size: 14px; color: var(–gray-600); transition: transform 0.25s; } .glossary-item.open .glossary-chevron { transform: rotate(180deg); } .glossary-body { font-size: 14px; line-height: 1.7; color: var(–gray-400); padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .glossary-item.open .glossary-body { max-height: 300px; padding: 0 24px 24px; } /* ── OPEN SOURCE RESOURCES ── */ .resources-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .resource-card { padding: 28px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: all 0.25s; } .resource-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); } .resource-type { font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(–gray-500, #555); } .resource-title { font-family: var(–font-display); font-size: 18px; font-weight: 400; color: var(–gray-100); line-height: 1.3; } .resource-desc { font-size: 14px; color: var(–gray-500, #555); line-height: 1.6; } .resource-meta { font-family: var(–font-mono); font-size: 11px; color: var(–accent-neural); margin-top: auto; } /* ── QUOTE ── */ .quote-block { padding: 60px 24px; position: relative; overflow: hidden; } .quote-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(124,106,247,0.08) 0%, transparent 70%); } blockquote { position: relative; font-family: var(–font-display); font-size: clamp(22px, 4vw, 40px); line-height: 1.3; font-weight: 400; color: var(–gray-200); letter-spacing: -0.01em; max-width: 900px; margin: 0 auto; text-align: center; } blockquote cite { display: block; font-family: var(–font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(–gray-500, #555); margin-top: 28px; font-style: normal; text-transform: uppercase; } blockquote::before { content: ‘”‘; display: block; font-size: 80px; line-height: 0.6; color: var(–accent-neural); opacity: 0.3; margin-bottom: 24px; } /* ── TEACHING TOOL ── */ .teaching-section { background: rgba(255,255,255,0.02); border-top: 0.5px solid rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.06); } .teaching-tabs { display: flex; gap: 0; margin-bottom: 40px; border-bottom: 0.5px solid rgba(255,255,255,0.08); } .teaching-tab { padding: 14px 20px; font-size: 14px; color: var(–gray-500, #555); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; font-family: var(–font-mono); font-size: 12px; letter-spacing: 0.04em; background: none; border-top: none; border-left: none; border-right: none; color: var(–gray-500, #555); } .teaching-tab.active { color: var(–white); border-bottom-color: var(–accent-neural); } .teaching-panel { display: none; } .teaching-panel.active { display: block; } .flashcard { padding: 48px 32px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: pointer; user-select: none; border-radius: var(–radius-lg); background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); transition: all 0.2s; } .flashcard:hover { background: rgba(255,255,255,0.05); } .flashcard-q { font-family: var(–font-display); font-size: clamp(20px, 3vw, 28px); color: var(–white); line-height: 1.3; margin-bottom: 20px; } .flashcard-hint { font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(–gray-600); } .flashcard-a { font-size: 16px; color: var(–gray-300); line-height: 1.7; display: none; margin-top: 16px; padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,0.1); } .flashcard.revealed .flashcard-a { display: block; } .flashcard.revealed .flashcard-hint { display: none; } .flashcard-nav { display: flex; gap: 12px; justify-content: center; margin-top: 20px; } .fc-btn { padding: 10px 24px; border-radius: 100px; background: var(–glass-bg); border: 0.5px solid var(–glass-border); color: var(–gray-300); font-size: 13px; cursor: pointer; transition: all 0.2s; } .fc-btn:hover { background: rgba(255,255,255,0.08); color: var(–white); } .fc-counter { font-family: var(–font-mono); font-size: 12px; color: var(–gray-600); text-align: center; margin-top: 12px; } /* ── FOOTER ── */ footer { border-top: 0.5px solid rgba(255,255,255,0.06); padding: 60px 24px 40px; max-width: 1200px; margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; } .footer-brand { font-family: var(–font-mono); font-size: 14px; font-weight: 500; color: var(–white); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .footer-brand span { color: var(–accent-neural); } .footer-tagline { font-size: 14px; color: var(–gray-500, #555); line-height: 1.6; max-width: 280px; } .footer-col-title { font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(–gray-500, #555); margin-bottom: 16px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-links a { font-size: 14px; color: var(–gray-400); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(–white); } .footer-bottom { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; border-top: 0.5px solid rgba(255,255,255,0.06); } .footer-bottom-left { font-family: var(–font-mono); font-size: 11px; color: var(–gray-600); letter-spacing: 0.04em; } /* ── MOBILE NAV ── */ .mobile-nav { display: none; position: fixed; top: 60px; left: 0; right: 0; background: rgba(0,0,0,0.95); backdrop-filter: var(–blur-md); border-bottom: 0.5px solid rgba(255,255,255,0.08); z-index: 999; padding: 24px; flex-direction: column; gap: 20px; } .mobile-nav.open { display: flex; } .mobile-nav a { font-size: 16px; color: var(–gray-200); text-decoration: none; padding: 12px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); } /* ── TABLET+ ── */ @media (min-width: 600px) { nav { padding: 0 40px; } section { padding: 100px 40px; } .hero { padding: 120px 40px 80px; } .stats-row { grid-template-columns: repeat(4, 1fr); } .epidemic-cards { grid-template-columns: 1fr 1fr; } .epidemic-card:last-child { grid-column: span 2; } .principles-grid { grid-template-columns: 1fr 1fr; } .resources-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } .glossary-short { display: block; } } @media (min-width: 900px) { nav { padding: 0 60px; } .nav-hamburger { display: none !important; } .nav-links { display: flex !important; } section { padding: 120px 60px; } .hero { padding: 140px 60px 80px; } .epidemic-cards { grid-template-columns: 1fr 1fr 1fr; } .epidemic-card:last-child { grid-column: span 1; } .principles-grid { grid-template-columns: repeat(3, 1fr); } .resources-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 599px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* ── MANIFESTO TICKER ── */ .manifesto-track { width: 100%; overflow: hidden; padding: 20px 0; background: rgba(124,106,247,0.04); border-top: 0.5px solid rgba(124,106,247,0.15); border-bottom: 0.5px solid rgba(124,106,247,0.15); } .manifesto-inner { display: flex; gap: 64px; white-space: nowrap; animation: marquee 50s linear infinite; width: max-content; } .manifesto-item { font-family: var(–font-display); font-size: clamp(15px, 2vw, 18px); color: var(–gray-300); font-style: italic; letter-spacing: -0.01em; display: flex; align-items: center; gap: 32px; } .manifesto-item::after { content: ‘◦’; color: var(–accent-neural); font-style: normal; font-size: 12px; } /* ── BLOG SECTION ── */ .blog-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.06); border-radius: var(–radius-lg); overflow: hidden; } .blog-featured { background: var(–gray-950); padding: 40px; display: flex; flex-direction: column; gap: 16px; text-decoration: none; transition: background 0.25s; } .blog-featured:hover { background: rgba(124,106,247,0.05); } .blog-tag { font-family: var(–font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; } .blog-tag.research { background: rgba(79,209,165,0.12); color: var(–accent-bio); border: 0.5px solid rgba(79,209,165,0.25); } .blog-tag.theory { background: rgba(124,106,247,0.12); color: var(–accent-neural); border: 0.5px solid rgba(124,106,247,0.25); } .blog-tag.vibes { background: rgba(96,165,250,0.12); color: var(–accent-electric); border: 0.5px solid rgba(96,165,250,0.25); } .blog-tag.field { background: rgba(244,132,95,0.12); color: var(–accent-warm); border: 0.5px solid rgba(244,132,95,0.25); } .blog-featured-title { font-family: var(–font-display); font-size: clamp(24px, 3.5vw, 36px); font-weight: 400; color: var(–white); line-height: 1.2; letter-spacing: -0.02em; } .blog-featured-excerpt { font-size: 16px; color: var(–gray-400); line-height: 1.7; max-width: 680px; } .blog-featured-meta { font-family: var(–font-mono); font-size: 11px; color: var(–gray-600); letter-spacing: 0.06em; margin-top: auto; padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; } .blog-secondary-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.06); } .blog-card { background: var(–gray-950); padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: background 0.2s; } .blog-card:hover { background: rgba(255,255,255,0.03); } .blog-card-title { font-family: var(–font-display); font-size: 18px; font-weight: 400; color: var(–gray-100); line-height: 1.3; transition: color 0.2s; } .blog-card:hover .blog-card-title { color: var(–white); } .blog-card-excerpt { font-size: 14px; color: var(–gray-500, #555); line-height: 1.6; } .blog-card-meta { font-family: var(–font-mono); font-size: 11px; color: var(–gray-600); margin-top: auto; display: flex; align-items: center; justify-content: space-between; } .blog-cta-bar { padding: 24px 32px; background: var(–gray-950); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .blog-cta-bar p { font-size: 14px; color: var(–gray-400); } /* ── VIBES AI BRIDGE ── */ .vibes-bridge { padding: 80px 24px; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(79,209,165,0.06) 0%, transparent 70%), rgba(255,255,255,0.01); border-top: 0.5px solid rgba(255,255,255,0.06); border-bottom: 0.5px solid rgba(255,255,255,0.06); } .vibes-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .vibes-wordmark { font-family: var(–font-body); font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(–white); margin-bottom: 8px; } .vibes-wordmark span { color: var(–accent-bio); font-weight: 500; } .vibes-tagline { font-family: var(–font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(–accent-bio); margin-bottom: 24px; } .vibes-body { font-size: 16px; line-height: 1.7; color: var(–gray-400); max-width: 520px; margin-bottom: 32px; } .vibes-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(79,209,165,0.12); border-radius: var(–radius-md); overflow: hidden; margin-bottom: 32px; } .vibes-stat { background: var(–gray-950); padding: 20px; } .vibes-stat-num { font-family: var(–font-mono); font-size: 22px; color: var(–accent-bio); font-weight: 500; margin-bottom: 4px; } .vibes-stat-label { font-size: 12px; color: var(–gray-500, #555); line-height: 1.4; } .vibes-loop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .vibes-loop-step { font-family: var(–font-mono); font-size: 12px; letter-spacing: 0.08em; padding: 8px 16px; border-radius: 100px; background: rgba(79,209,165,0.08); border: 0.5px solid rgba(79,209,165,0.2); color: var(–accent-bio); } .vibes-loop-arrow { color: var(–gray-700); font-size: 14px; } @media (min-width: 900px) { .vibes-inner { grid-template-columns: 1fr 1fr; } .blog-secondary-grid { grid-template-columns: 1fr 1fr; } .blog-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) { .vibes-bridge { padding: 100px 40px; } .blog-secondary-grid { grid-template-columns: 1fr 1fr; } } .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: none; } /* ── FAQ STYLES ── */ .faq-list { display: flex; flex-direction: column; gap: 0; border-radius: var(–radius-md); overflow: hidden; background: rgba(255,255,255,0.04); } .faq-item { background: var(–gray-950); border-bottom: 0.5px solid rgba(255,255,255,0.06); overflow: hidden; transition: background 0.2s; } .faq-item:last-child { border-bottom: none; } .faq-item.open { background: rgba(124,106,247,0.04); } .faq-trigger { width: 100%; padding: 24px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; cursor: pointer; background: none; border: none; color: inherit; text-align: left; } .faq-q { font-family: var(–font-display); font-size: clamp(16px, 2vw, 20px); color: var(–gray-200); line-height: 1.35; font-weight: 400; transition: color 0.2s; } .faq-item.open .faq-q { color: var(–white); } .faq-chevron { font-size: 16px; color: var(–gray-600); transition: transform 0.25s, color 0.2s; flex-shrink: 0; margin-top: 3px; } .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(–accent-neural); } .faq-body { padding: 0 28px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.3s ease; } .faq-item.open .faq-body { max-height: 600px; padding: 0 28px 28px; } .faq-body p { font-size: 15px; line-height: 1.75; color: var(–gray-400); margin-bottom: 14px; } .faq-body p:last-child { margin-bottom: 0; } .faq-body strong { color: var(–gray-200); font-weight: 500; } /* ── ABOUT RESPONSIVE ── */ @media (min-width: 900px) { .about-grid-2col { grid-template-columns: 1fr 1fr !important; } } Join the Corps
Cognitive Experience Design · 2014 — Now

Designing
for
the Mind.

We are no longer building products for hands and eyes — we are building for minds in motion. The next interface isn’t seen. It’s sensed. CXD is the open-source discipline of designing for perception, attention, memory, and restoration.

Scroll
We used to design what people do. Now we design how they feel, think, and recover. The next interface isn’t seen. It’s sensed. Behavior was visible. The mind is where the real work happens. We are no longer in the business of shaping behavior. We are in the business of stewarding cognition. In the age of AI, experience design becomes the architecture of consciousness. Build for cognition, not consumption. The mind is the new interface. Cognitive wellness is the next platform layer. We’re entering the era of Mindware, not software. We used to design what people do. Now we design how they feel, think, and recover. The next interface isn’t seen. It’s sensed. Behavior was visible. The mind is where the real work happens. We are no longer in the business of shaping behavior. We are in the business of stewarding cognition. In the age of AI, experience design becomes the architecture of consciousness. Build for cognition, not consumption. The mind is the new interface. Cognitive wellness is the next platform layer. We’re entering the era of Mindware, not software.
10×
Core principles guiding human-obsessed AGI design
55M+
People living with dementia worldwide today
3B
People affected by neurological conditions globally
18%
Increase in neurological burden since 1990

The future of AI products isn’t intelligence — it’s cognitive alignment.

Coined by Joanna Peña-Bickley at IBM Watson in 2014, CXD is the discipline of designing for perception, attention, memory, and restoration — not just interaction. A new category: Neuroadaptive Product Design.

10 Principles of Principled Ingenuity

Every design decision flows from these universal tenets — a compass for builders and designers shaping AI-powered human experiences.

01
Human Effects

Strives to enhance human ability, not replace it. Human agency is paramount — balancing AI and people to equitably complement human skills.

02
Transparent Truth

Plainly explains how a system reaches conclusions — through data indicators, confidence scores, corpus sourcing, and explanation interfaces.

03
Breaking Bias

Begins with diverse hiring. Counteracts human, data, and algorithmic bias with oversight processes that are clear and transparent.

04
Privacy Pledged

Builds processes that protect data. All data collected observes privacy laws, is limited by design, and deleted upon human request.

05
Systematic Sanctuary

Protects humans with safety practices. AI inventions test in constrained environments with proper monitoring after deployment.

06
Algorithmic Accord

Brings about products that produce enduring relationships — never creating unhealthy emotional dependencies between humans and machines.

07
Empathetic Analytics

Goes beyond accuracy targets. Develops cost metrics aligned to domain-specific applications that understand true model performance.

08
Inclusive Design

Empowers everyone. Engages all people respectfully, equally and with dignity — never virtue signaling or promoting empty promises.

09
Radical Simplicity

Exemplary cognitive experience design removes complexity from life. The best interface is no interface — AI reduces friction, not adds it.

10
Wise Works

Healthy CXD accelerates new ideas that work for everyone, everywhere, everyday — wisdom applied at the scale of human civilization.

The Triple Brain Health Epidemic

Three converging crises share a neurobiological foundation — and CXD offers the most coherent counterforce available.

Crisis 1
Mental Health Deterioration

Digital platforms systematically fragment attention via algorithmic manipulation. The COVID-19 pandemic accelerated digital dependency, while AI chatbot use creates an “isolation paradox” — initially reducing loneliness, then progressive social withdrawal.

Crisis 2
Accelerated Cognitive Decline

“Digital dementia” captures how excessive screen exposure increases long-term cognitive decline risk. Alzheimer’s could increase 4–6× between 2060–2100, reflecting the first generation to experience extensive digital exposure during neuroplasticity-critical periods.

Crisis 3
Digital Overload

The attention economy creates a “digital lobotomy” — eroding cognitive autonomy and deep thinking. The WHO calls it an “infodemic”: the human condition of cognitive overload, where information supply exceeds the brain’s processing capacity.

The role of AI should not be to find the needle in the haystack — it should be to show you how much hay it has cleared so you can better see the needle yourself. — Joanna Peña-Bickley · Mother of Cognitive Experience Design

A corpus that evolves with the field.

Open-source chapters at the intersection of neuroscience, AI product design, and cognitive wellness — built for practitioners, researchers, and curious minds.

Learn by doing.

CXD concepts, flashcards, and glossary — a living classroom for practitioners building human-obsessed AI.

What is Cognitive Experience Design?
The practice of using artificial intelligence technologies to reduce the human mental effort and time required to complete a task. It employs knowledge of neuroscience, human perception, mental processing, modeling, and memory.
Tap to reveal
1 / 6
Cognitive Experience Design — coined by Joanna Peña-Bickley at IBM Watson in 2014. The practice of designing AI-powered systems that reduce human mental effort. The abbreviation CXD or #CognitiveXD became widely adopted after her 2015 C2 Montreal appearance.
The total amount of mental effort being used in working memory. CXD aims to reduce cognitive load so users have more mental energy for high-level problem-solving. Measured through task completion time, error rates, and self-reported mental effort.
Personal, internal representations of external reality that people use to interact with the world. Constructed based on unique life experiences and perceptions. CXD designs systems that align with — not against — a user’s existing mental models.
Designing systems that predict a user’s next move or need before they fully articulate it. A core AI pattern in CXD — treating technology as an “extended mind” that stores memory, performs reasoning, and filters information on the user’s behalf.
Coined by Joanna Peña-Bickley and Vibes AI: the convergence of (1) mental health deterioration, (2) accelerated cognitive decline, and (3) digital overload. These share a neurobiological foundation — disruption in one domain inevitably affects the others.
The scientific discipline that applies neuroscience to the design of tools, systems, and environments. One of the four practice areas of CXD — alongside Human-Centered Design, User-Centered Design, and Cognitive Ergonomics.
CXD in Action · Vibes AI
vibes ai

The first brain fitness platform that proves it’s working. Vibes AI is CXD made manifest — using voice biomarkers to measure cognitive state, then delivering hyper-personalized therapeutic audio that makes you measurably sharper. Brain and mental health is a birthright, not a privilege.

Voice Detects Brain Score Sound Heals Outcome Proven
31k
Organic listeners, no paid acquisition
94%
Report improved focus
500+
Voice biomarker signals detected
85%
Accuracy on brain readiness scores
Explore Vibes AI ↗
Your Voice Reveals. Sound Restores.

A closed-loop, agentic system that replaces wellness churn with measurable progress. 30 seconds of voice yields a daily Brain Readiness Score, then delivers restorative audio therapy calibrated to your exact cognitive state — with before and after proof included.

Voice biomarker detection (500+ signals)
Daily Brain Readiness Scores
Personalized restorative therapeutic audio
Before / after measurable outcome proof
40Hz gamma therapy · ADHD · Digital Detox · Sleep
TAM · Global Market
$108B
Where healthcare meets self-care

Where we publish what we’re learning.

Open-source research at the intersection of voice biomarkers, neuro wellness, cognitive design, and AI — written for practitioners and builders who refuse to separate science from craft.

Research · Featured March 2026

All research is open-source. Findings, frameworks, and field notes from Vibes AI and the AI Design Corps.

View All Research →

Materials for the industry.

Free for practitioners, researchers, educators, and builders. Everything published here is open-source and freely available.

Build for cognition, not consumption.

A community of practitioners, researchers, and builders committed to human-obsessed AI. Open to designers, engineers, neuroscientists, and anyone who believes the next great interface isn’t seen — it’s sensed.