jason/mempalace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(website): apply Crystal Lattice brand — fonts, palette, hero copy

Browse Source 
- Swap Inter/Cormorant Garamond/Geist → Neue Machina/Satoshi/Onest (all free/web)
- Align color palette to Crystal Lattice decision (0002): void #080C18, cyan-vivid #38BDF8, ice #DBE7F5
- Update hero: "Memory *is* identity." with italic blue "is", white "identity"
- New hero subtext: "Every conversation, every idea, every small decision… held somewhere safe."
- JetBrains Mono unchanged (already OFL)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
bensig
2026-04-22 20:24:39 -07:00
parent cf0477bfa7
commit 4f00390335
4 changed files with 103 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.vitepress/config.mts
+3 -1
View File
@@ -21,9 +21,11 @@ export default withMermaid(
head: [ head: [
['link', { rel: 'icon', href: `${docsBase}mempalace_logo.png` }], ['link', { rel: 'icon', href: `${docsBase}mempalace_logo.png` }],
['link', { rel: 'preconnect', href: 'https://api.fontshare.com' }],
['link', { href: 'https://api.fontshare.com/v2/css?f[]=neue-machina@300,400,500,700,800&f[]=satoshi@300,400,500,700&display=swap', rel: 'stylesheet' }],
['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }], ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
['link', { href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Geist:wght@300;400;500;600&display=swap', rel: 'stylesheet' }], ['link', { href: 'https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap', rel: 'stylesheet' }],
['meta', { property: 'og:title', content: 'MemPalace — AI Memory System' }], ['meta', { property: 'og:title', content: 'MemPalace — AI Memory System' }],
['meta', { property: 'og:description', content: '96.6% LongMemEval recall. Zero API calls. Local, free, open source.' }], ['meta', { property: 'og:description', content: '96.6% LongMemEval recall. Zero API calls. Local, free, open source.' }],
['meta', { property: 'og:image', content: `${docsBase}mempalace_logo.png` }], ['meta', { property: 'og:image', content: `${docsBase}mempalace_logo.png` }],
website/.vitepress/theme/landing/HeroSection.vue
+4 -5
View File
@@ -5,13 +5,12 @@
<div class="hero-inner"> <div class="hero-inner">
<div class="hero-copy"> <div class="hero-copy">
<h1 class="display"> <h1 class="display">
<span class="line">Memory is</span> <span class="line">Memory <em class="is-accent">is</em></span>
<span class="line line-2">identity.</span> <span class="line line-2"><span class="identity-white">identity.</span></span>
</h1> </h1>
<p class="lede"> <p class="lede">
An AI that forgets cannot know you. MemPalace keeps every word you have Every conversation, every idea, every small decision&hellip; held somewhere safe.
shared — verbatim, on your machine, permanent. Designed for total <br><br>Welcome to the future of memory: <span class="mp-blue">MemPalace</span>
recall.
</p> </p>
<form class="waitlist waitlist-hero" data-source="hero" novalidate> <form class="waitlist waitlist-hero" data-source="hero" novalidate>
<div class="waitlist-head"> <div class="waitlist-head">
website/.vitepress/theme/landing/landing.css
+26 -23
View File
@@ -24,23 +24,23 @@ body.mempalace-active .VPDoc {
body.mempalace-active { overflow-x: hidden; } body.mempalace-active { overflow-x: hidden; }
.mempalace-landing { .mempalace-landing {
--void: #05070A; --void: #080C18;
--obsidian: #0A0D12; --obsidian: #0F1524;
--obsidian-2: #11151C; --obsidian-2: #182033;
--ink: #181D26; --ink: #1C2640;
--hair: rgba(158, 216, 255, 0.14); --hair: rgba(56, 189, 248, 0.14);
--hair-strong: rgba(158, 216, 255, 0.28); --hair-strong: rgba(56, 189, 248, 0.28);
--ice: #EAF4FF; --ice: #DBE7F5;
--ice-dim: #b8c7d9; --ice-dim: #8B99B0;
--ice-ghost: rgba(234, 244, 255, 0.56); --ice-ghost: rgba(219, 231, 245, 0.56);
--prism: #9ED8FF; --prism: #7DD3FC;
--prism-core: #4AA3FF; --prism-core: #38BDF8;
--refract: #A8B5FF; --refract: #A78BFA;
--stellar: #F3E7B0; --stellar: #FBBF24;
--ember: #E28A6B; --ember: #FF8B8B;
--f-display: "Cormorant Garamond", "Times New Roman", serif; --f-display: "Neue Machina", "Satoshi", sans-serif;
--f-body: "Geist", ui-sans-serif, system-ui, sans-serif; --f-body: "Onest", ui-sans-serif, system-ui, sans-serif;
--f-mono: "JetBrains Mono", ui-monospace, monospace; --f-mono: "JetBrains Mono", ui-monospace, monospace;
--measure: 68ch; --measure: 68ch;
@@ -50,7 +50,7 @@ body.mempalace-active { overflow-x: hidden; }
background: var(--void); background: var(--void);
color: var(--ice); color: var(--ice);
font-family: var(--f-body); font-family: var(--f-body);
font-weight: 300; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -60,16 +60,16 @@ body.mempalace-active { overflow-x: hidden; }
position: relative; position: relative;
} }
.mempalace-landing * { box-sizing: border-box; } .mempalace-landing * { box-sizing: border-box; }
.mempalace-landing ::selection { background: var(--prism-core); color: var(--void); } .mempalace-landing ::selection { background: var(--prism-core); color: #080C18; }
.mempalace-landing::before { .mempalace-landing::before {
content: ""; content: "";
position: fixed; inset: 0; position: fixed; inset: 0;
pointer-events: none; pointer-events: none;
background: background:
radial-gradient(80% 60% at 50% -10%, rgba(74,163,255,0.18), transparent 60%), radial-gradient(80% 60% at 50% -10%, rgba(56,189,248,0.18), transparent 60%),
radial-gradient(40% 40% at 85% 20%, rgba(168,181,255,0.08), transparent 70%), radial-gradient(40% 40% at 85% 20%, rgba(167,139,250,0.08), transparent 70%),
radial-gradient(50% 50% at 15% 80%, rgba(158,216,255,0.06), transparent 70%); radial-gradient(50% 50% at 15% 80%, rgba(125,211,252,0.06), transparent 70%);
z-index: 0; z-index: 0;
} }
.mempalace-landing::after { .mempalace-landing::after {
@@ -153,7 +153,7 @@ body.mempalace-active { overflow-x: hidden; }
line-height: 0.95; line-height: 0.95;
color: var(--ice); color: var(--ice);
} }
.mempalace-landing .display em { font-style: italic; color: var(--prism); } .mempalace-landing .display em { font-style: italic; color: var(--prism-core); }
.mempalace-landing .lede { .mempalace-landing .lede {
font-family: var(--f-display); font-family: var(--f-display);
/* font-style: italic; */ /* font-style: italic; */
@@ -237,8 +237,11 @@ body.mempalace-active { overflow-x: hidden; }
margin: 0 0 1.25rem; margin: 0 0 1.25rem;
} }
.mempalace-landing .hero h1 .line { display: block; } .mempalace-landing .hero h1 .line { display: block; }
.mempalace-landing .hero h1 .line-2 { font-style: italic; color: var(--prism); font-weight: 300; } .mempalace-landing .hero h1 .line-2 { font-style: normal; font-weight: 400; }
.mempalace-landing .hero h1 .is-accent { font-style: italic; color: var(--prism-core); font-weight: 300; }
.mempalace-landing .hero h1 .identity-white { color: #ffffff; }
.mempalace-landing .hero .lede { margin-bottom: 0; } .mempalace-landing .hero .lede { margin-bottom: 0; }
.mempalace-landing .hero .lede .mp-blue { color: var(--prism-core); font-weight: 500; }
.mempalace-landing .hero-cta { .mempalace-landing .hero-cta {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
website/.vitepress/theme/style.css
+70 -59
View File
@@ -1,67 +1,73 @@
/* ── MemPalace Custom Theme ──────────────────────────────────────────── */ /* ── MemPalace Custom Theme ──────────────────────────────────────────── */
/* Deep indigo / cyan palette — evoking architectural grandeur */ /* Crystal Lattice palette — crystalline cyan through deep blue-black */
:root { :root {
/* Brand palette */ /* Crystal Lattice palette */
--mp-indigo: #4f46e5; --mp-bg: #080C18;
--mp-indigo-light: #6366f1; --mp-surface: #0F1524;
--mp-indigo-dark: #3730a3; --mp-surface-high: #182033;
--mp-cyan: #06b6d4; --mp-border: #1C2640;
--mp-cyan-light: #22d3ee; --mp-border-soft: #121829;
--mp-purple: #8b5cf6; --mp-cyan: #7DD3FC;
--mp-purple-light: #a78bfa; --mp-cyan-vivid: #38BDF8;
--mp-emerald: #10b981; --mp-ice: #DBE7F5;
--mp-amber: #f59e0b; --mp-body: #CDD5E0;
--mp-muted: #8B99B0;
--mp-dim: #5B6B82;
--mp-ok: #34D399;
--mp-warn: #FBBF24;
--mp-hot: #FF8B8B;
--mp-violet: #A78BFA;
/* VitePress overrides */ /* VitePress overrides */
--vp-c-brand-1: var(--mp-indigo); --vp-c-brand-1: var(--mp-cyan-vivid);
--vp-c-brand-2: var(--mp-indigo-light); --vp-c-brand-2: var(--mp-cyan);
--vp-c-brand-3: var(--mp-purple); --vp-c-brand-3: var(--mp-violet);
--vp-c-brand-soft: rgba(79, 70, 229, 0.14); --vp-c-brand-soft: rgba(56, 189, 248, 0.14);
--vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vp-font-family-base: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--vp-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; --vp-font-family-mono: 'JetBrains Mono', monospace;
/* Home hero gradient */ /* Home hero gradient */
--vp-home-hero-name-color: transparent; --vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: linear-gradient(135deg, var(--mp-indigo) 0%, var(--mp-cyan) 50%, var(--mp-purple) 100%); --vp-home-hero-name-background: linear-gradient(135deg, var(--mp-ice) 0%, var(--mp-cyan-vivid) 60%, var(--mp-violet) 100%);
--vp-home-hero-image-background-image: linear-gradient(135deg, rgba(79, 70, 229, 0.25) 0%, rgba(6, 182, 212, 0.25) 50%, rgba(139, 92, 246, 0.15) 100%); --vp-home-hero-image-background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(125, 211, 252, 0.2) 50%, rgba(167, 139, 250, 0.15) 100%);
--vp-home-hero-image-filter: blur(56px); --vp-home-hero-image-filter: blur(56px);
/* Button colors */ /* Button colors */
--vp-button-brand-border: transparent; --vp-button-brand-border: transparent;
--vp-button-brand-text: #ffffff; --vp-button-brand-text: #080C18;
--vp-button-brand-bg: var(--mp-indigo); --vp-button-brand-bg: var(--mp-cyan-vivid);
--vp-button-brand-hover-border: transparent; --vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: #ffffff; --vp-button-brand-hover-text: #080C18;
--vp-button-brand-hover-bg: var(--mp-indigo-light); --vp-button-brand-hover-bg: var(--mp-cyan);
--vp-button-alt-border: rgba(79, 70, 229, 0.25); --vp-button-alt-border: rgba(56, 189, 248, 0.25);
--vp-button-alt-text: var(--mp-indigo); --vp-button-alt-text: var(--mp-cyan-vivid);
--vp-button-alt-bg: rgba(79, 70, 229, 0.08); --vp-button-alt-bg: rgba(56, 189, 248, 0.08);
--vp-button-alt-hover-border: rgba(79, 70, 229, 0.4); --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4);
--vp-button-alt-hover-text: var(--mp-indigo-dark); --vp-button-alt-hover-text: var(--mp-cyan);
--vp-button-alt-hover-bg: rgba(79, 70, 229, 0.14); --vp-button-alt-hover-bg: rgba(56, 189, 248, 0.14);
} }
/* Dark mode overrides */ /* Dark mode overrides */
.dark { .dark {
--vp-c-brand-1: var(--mp-cyan-light); --vp-c-brand-1: var(--mp-cyan-vivid);
--vp-c-brand-2: var(--mp-cyan); --vp-c-brand-2: var(--mp-cyan);
--vp-c-brand-3: var(--mp-purple-light); --vp-c-brand-3: var(--mp-violet);
--vp-c-brand-soft: rgba(6, 182, 212, 0.14); --vp-c-brand-soft: rgba(56, 189, 248, 0.14);
--vp-button-brand-bg: var(--mp-indigo-light); --vp-button-brand-bg: var(--mp-cyan-vivid);
--vp-button-brand-hover-bg: var(--mp-indigo); --vp-button-brand-hover-bg: var(--mp-cyan);
--vp-button-alt-border: rgba(34, 211, 238, 0.25); --vp-button-alt-border: rgba(56, 189, 248, 0.25);
--vp-button-alt-text: var(--mp-cyan-light); --vp-button-alt-text: var(--mp-cyan-vivid);
--vp-button-alt-bg: rgba(34, 211, 238, 0.08); --vp-button-alt-bg: rgba(56, 189, 248, 0.08);
--vp-button-alt-hover-border: rgba(34, 211, 238, 0.4); --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4);
--vp-button-alt-hover-text: var(--mp-cyan); --vp-button-alt-hover-text: var(--mp-cyan);
--vp-button-alt-hover-bg: rgba(34, 211, 238, 0.14); --vp-button-alt-hover-bg: rgba(56, 189, 248, 0.14);
--vp-home-hero-image-background-image: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(6, 182, 212, 0.3) 50%, rgba(139, 92, 246, 0.2) 100%); --vp-home-hero-image-background-image: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(125, 211, 252, 0.2) 50%, rgba(167, 139, 250, 0.15) 100%);
} }
/* ── Hero section ───────────────────────────────────────────────────── */ /* ── Hero section ───────────────────────────────────────────────────── */
@@ -72,19 +78,22 @@
} }
.VPHero .name { .VPHero .name {
font-weight: 700 !important; font-family: 'Neue Machina', 'Satoshi', sans-serif !important;
font-weight: 500 !important;
letter-spacing: -1.5px;
} }
.VPHero .text { .VPHero .text {
font-family: 'Satoshi', 'Onest', sans-serif;
font-weight: 500; font-weight: 500;
background: linear-gradient(135deg, var(--vp-c-text-1) 0%, var(--mp-indigo-light) 100%); background: linear-gradient(135deg, var(--vp-c-text-1) 0%, var(--mp-cyan-vivid) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
} }
.dark .VPHero .text { .dark .VPHero .text {
background: linear-gradient(135deg, var(--vp-c-text-1) 0%, var(--mp-cyan-light) 100%); background: linear-gradient(135deg, var(--mp-ice) 0%, var(--mp-cyan-vivid) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -99,16 +108,17 @@
.VPFeature:hover { .VPFeature:hover {
transform: translateY(-4px); transform: translateY(-4px);
border-color: var(--mp-indigo); border-color: var(--mp-cyan-vivid);
box-shadow: 0 12px 40px rgba(79, 70, 229, 0.12); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12);
} }
.dark .VPFeature:hover { .dark .VPFeature:hover {
border-color: var(--mp-cyan); border-color: var(--mp-cyan-vivid);
box-shadow: 0 12px 40px rgba(6, 182, 212, 0.12); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12);
} }
.VPFeature .title { .VPFeature .title {
font-family: 'Satoshi', 'Onest', sans-serif;
font-weight: 600; font-weight: 600;
} }
@@ -119,12 +129,12 @@
} }
.VPSidebar .VPSidebarItem.is-active .text { .VPSidebar .VPSidebarItem.is-active .text {
color: var(--mp-indigo) !important; color: var(--mp-cyan-vivid) !important;
font-weight: 600; font-weight: 600;
} }
.dark .VPSidebar .VPSidebarItem.is-active .text { .dark .VPSidebar .VPSidebarItem.is-active .text {
color: var(--mp-cyan-light) !important; color: var(--mp-cyan-vivid) !important;
} }
/* ── Code blocks ────────────────────────────────────────────────────── */ /* ── Code blocks ────────────────────────────────────────────────────── */
@@ -135,21 +145,21 @@
} }
.dark .vp-doc div[class*='language-'] { .dark .vp-doc div[class*='language-'] {
border-color: rgba(6, 182, 212, 0.15); border-color: rgba(56, 189, 248, 0.15);
} }
/* ── Custom containers ──────────────────────────────────────────────── */ /* ── Custom containers ──────────────────────────────────────────────── */
.vp-doc .custom-block.tip { .vp-doc .custom-block.tip {
border-color: var(--mp-cyan); border-color: var(--mp-ok);
} }
.vp-doc .custom-block.warning { .vp-doc .custom-block.warning {
border-color: var(--mp-amber); border-color: var(--mp-warn);
} }
.vp-doc .custom-block.info { .vp-doc .custom-block.info {
border-color: var(--mp-indigo); border-color: var(--mp-cyan-vivid);
} }
/* ── Tables ─────────────────────────────────────────────────────────── */ /* ── Tables ─────────────────────────────────────────────────────────── */
@@ -160,19 +170,20 @@
} }
.vp-doc th { .vp-doc th {
background: rgba(79, 70, 229, 0.06); background: rgba(56, 189, 248, 0.06);
font-weight: 600; font-weight: 600;
} }
.dark .vp-doc th { .dark .vp-doc th {
background: rgba(6, 182, 212, 0.08); background: rgba(56, 189, 248, 0.08);
} }
/* ── Nav ────────────────────────────────────────────────────────────── */ /* ── Nav ────────────────────────────────────────────────────────────── */
.VPNavBar .VPNavBarTitle .title { .VPNavBar .VPNavBarTitle .title {
font-weight: 700; font-family: 'Neue Machina', 'Satoshi', sans-serif;
letter-spacing: -0.01em; font-weight: 500;
letter-spacing: -0.4px;
} }
/* ── Footer ─────────────────────────────────────────────────────────── */ /* ── Footer ─────────────────────────────────────────────────────────── */
@@ -193,11 +204,11 @@
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--mp-indigo); background: var(--mp-cyan-vivid);
} }
.dark ::-webkit-scrollbar-thumb:hover { .dark ::-webkit-scrollbar-thumb:hover {
background: var(--mp-cyan); background: var(--mp-cyan-vivid);
} }
/* ── Smooth transitions ─────────────────────────────────────────────── */ /* ── Smooth transitions ─────────────────────────────────────────────── */