From 4f003903359de21e387410861933d4d5c3d0f7ba Mon Sep 17 00:00:00 2001 From: bensig <1872138+bensig@users.noreply.github.com> Date: Wed, 22 Apr 2026 20:24:39 -0700 Subject: [PATCH] =?UTF-8?q?feat(website):=20apply=20Crystal=20Lattice=20br?= =?UTF-8?q?and=20=E2=80=94=20fonts,=20palette,=20hero=20copy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- website/.vitepress/config.mts | 4 +- .../.vitepress/theme/landing/HeroSection.vue | 9 +- website/.vitepress/theme/landing/landing.css | 49 +++---- website/.vitepress/theme/style.css | 129 ++++++++++-------- 4 files changed, 103 insertions(+), 88 deletions(-) diff --git a/website/.vitepress/config.mts b/website/.vitepress/config.mts index 49cf975..47b69e2 100644 --- a/website/.vitepress/config.mts +++ b/website/.vitepress/config.mts @@ -21,9 +21,11 @@ export default withMermaid( head: [ ['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.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:description', content: '96.6% LongMemEval recall. Zero API calls. Local, free, open source.' }], ['meta', { property: 'og:image', content: `${docsBase}mempalace_logo.png` }], diff --git a/website/.vitepress/theme/landing/HeroSection.vue b/website/.vitepress/theme/landing/HeroSection.vue index 279e80d..bca5f18 100644 --- a/website/.vitepress/theme/landing/HeroSection.vue +++ b/website/.vitepress/theme/landing/HeroSection.vue @@ -5,13 +5,12 @@

- Memory is - identity. + Memory is + identity.

- An AI that forgets cannot know you. MemPalace keeps every word you have - shared — verbatim, on your machine, permanent. Designed for total - recall. + Every conversation, every idea, every small decision… held somewhere safe. +

Welcome to the future of memory: MemPalace

diff --git a/website/.vitepress/theme/landing/landing.css b/website/.vitepress/theme/landing/landing.css index 908ac8c..313f906 100644 --- a/website/.vitepress/theme/landing/landing.css +++ b/website/.vitepress/theme/landing/landing.css @@ -24,23 +24,23 @@ body.mempalace-active .VPDoc { body.mempalace-active { overflow-x: hidden; } .mempalace-landing { - --void: #05070A; - --obsidian: #0A0D12; - --obsidian-2: #11151C; - --ink: #181D26; - --hair: rgba(158, 216, 255, 0.14); - --hair-strong: rgba(158, 216, 255, 0.28); - --ice: #EAF4FF; - --ice-dim: #b8c7d9; - --ice-ghost: rgba(234, 244, 255, 0.56); - --prism: #9ED8FF; - --prism-core: #4AA3FF; - --refract: #A8B5FF; - --stellar: #F3E7B0; - --ember: #E28A6B; + --void: #080C18; + --obsidian: #0F1524; + --obsidian-2: #182033; + --ink: #1C2640; + --hair: rgba(56, 189, 248, 0.14); + --hair-strong: rgba(56, 189, 248, 0.28); + --ice: #DBE7F5; + --ice-dim: #8B99B0; + --ice-ghost: rgba(219, 231, 245, 0.56); + --prism: #7DD3FC; + --prism-core: #38BDF8; + --refract: #A78BFA; + --stellar: #FBBF24; + --ember: #FF8B8B; - --f-display: "Cormorant Garamond", "Times New Roman", serif; - --f-body: "Geist", ui-sans-serif, system-ui, sans-serif; + --f-display: "Neue Machina", "Satoshi", sans-serif; + --f-body: "Onest", ui-sans-serif, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --measure: 68ch; @@ -50,7 +50,7 @@ body.mempalace-active { overflow-x: hidden; } background: var(--void); color: var(--ice); font-family: var(--f-body); - font-weight: 300; + font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; @@ -60,16 +60,16 @@ body.mempalace-active { overflow-x: hidden; } position: relative; } .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 { content: ""; position: fixed; inset: 0; pointer-events: none; background: - radial-gradient(80% 60% at 50% -10%, rgba(74,163,255,0.18), transparent 60%), - radial-gradient(40% 40% at 85% 20%, rgba(168,181,255,0.08), transparent 70%), - radial-gradient(50% 50% at 15% 80%, rgba(158,216,255,0.06), transparent 70%); + radial-gradient(80% 60% at 50% -10%, rgba(56,189,248,0.18), transparent 60%), + radial-gradient(40% 40% at 85% 20%, rgba(167,139,250,0.08), transparent 70%), + radial-gradient(50% 50% at 15% 80%, rgba(125,211,252,0.06), transparent 70%); z-index: 0; } .mempalace-landing::after { @@ -153,7 +153,7 @@ body.mempalace-active { overflow-x: hidden; } line-height: 0.95; 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 { font-family: var(--f-display); /* font-style: italic; */ @@ -237,8 +237,11 @@ body.mempalace-active { overflow-x: hidden; } margin: 0 0 1.25rem; } .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 .mp-blue { color: var(--prism-core); font-weight: 500; } .mempalace-landing .hero-cta { display: flex; flex-wrap: wrap; diff --git a/website/.vitepress/theme/style.css b/website/.vitepress/theme/style.css index 4aacc70..0d23190 100644 --- a/website/.vitepress/theme/style.css +++ b/website/.vitepress/theme/style.css @@ -1,67 +1,73 @@ /* ── MemPalace Custom Theme ──────────────────────────────────────────── */ -/* Deep indigo / cyan palette — evoking architectural grandeur */ +/* Crystal Lattice palette — crystalline cyan through deep blue-black */ :root { - /* Brand palette */ - --mp-indigo: #4f46e5; - --mp-indigo-light: #6366f1; - --mp-indigo-dark: #3730a3; - --mp-cyan: #06b6d4; - --mp-cyan-light: #22d3ee; - --mp-purple: #8b5cf6; - --mp-purple-light: #a78bfa; - --mp-emerald: #10b981; - --mp-amber: #f59e0b; + /* Crystal Lattice palette */ + --mp-bg: #080C18; + --mp-surface: #0F1524; + --mp-surface-high: #182033; + --mp-border: #1C2640; + --mp-border-soft: #121829; + --mp-cyan: #7DD3FC; + --mp-cyan-vivid: #38BDF8; + --mp-ice: #DBE7F5; + --mp-body: #CDD5E0; + --mp-muted: #8B99B0; + --mp-dim: #5B6B82; + --mp-ok: #34D399; + --mp-warn: #FBBF24; + --mp-hot: #FF8B8B; + --mp-violet: #A78BFA; /* VitePress overrides */ - --vp-c-brand-1: var(--mp-indigo); - --vp-c-brand-2: var(--mp-indigo-light); - --vp-c-brand-3: var(--mp-purple); - --vp-c-brand-soft: rgba(79, 70, 229, 0.14); + --vp-c-brand-1: var(--mp-cyan-vivid); + --vp-c-brand-2: var(--mp-cyan); + --vp-c-brand-3: var(--mp-violet); + --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-mono: 'JetBrains Mono', 'Fira Code', monospace; + --vp-font-family-base: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --vp-font-family-mono: 'JetBrains Mono', monospace; /* Home hero gradient */ --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-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-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(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); /* Button colors */ --vp-button-brand-border: transparent; - --vp-button-brand-text: #ffffff; - --vp-button-brand-bg: var(--mp-indigo); + --vp-button-brand-text: #080C18; + --vp-button-brand-bg: var(--mp-cyan-vivid); --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: #ffffff; - --vp-button-brand-hover-bg: var(--mp-indigo-light); + --vp-button-brand-hover-text: #080C18; + --vp-button-brand-hover-bg: var(--mp-cyan); - --vp-button-alt-border: rgba(79, 70, 229, 0.25); - --vp-button-alt-text: var(--mp-indigo); - --vp-button-alt-bg: rgba(79, 70, 229, 0.08); - --vp-button-alt-hover-border: rgba(79, 70, 229, 0.4); - --vp-button-alt-hover-text: var(--mp-indigo-dark); - --vp-button-alt-hover-bg: rgba(79, 70, 229, 0.14); + --vp-button-alt-border: rgba(56, 189, 248, 0.25); + --vp-button-alt-text: var(--mp-cyan-vivid); + --vp-button-alt-bg: rgba(56, 189, 248, 0.08); + --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4); + --vp-button-alt-hover-text: var(--mp-cyan); + --vp-button-alt-hover-bg: rgba(56, 189, 248, 0.14); } /* Dark mode overrides */ .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-3: var(--mp-purple-light); - --vp-c-brand-soft: rgba(6, 182, 212, 0.14); + --vp-c-brand-3: var(--mp-violet); + --vp-c-brand-soft: rgba(56, 189, 248, 0.14); - --vp-button-brand-bg: var(--mp-indigo-light); - --vp-button-brand-hover-bg: var(--mp-indigo); + --vp-button-brand-bg: var(--mp-cyan-vivid); + --vp-button-brand-hover-bg: var(--mp-cyan); - --vp-button-alt-border: rgba(34, 211, 238, 0.25); - --vp-button-alt-text: var(--mp-cyan-light); - --vp-button-alt-bg: rgba(34, 211, 238, 0.08); - --vp-button-alt-hover-border: rgba(34, 211, 238, 0.4); + --vp-button-alt-border: rgba(56, 189, 248, 0.25); + --vp-button-alt-text: var(--mp-cyan-vivid); + --vp-button-alt-bg: rgba(56, 189, 248, 0.08); + --vp-button-alt-hover-border: rgba(56, 189, 248, 0.4); --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 ───────────────────────────────────────────────────── */ @@ -72,19 +78,22 @@ } .VPHero .name { - font-weight: 700 !important; + font-family: 'Neue Machina', 'Satoshi', sans-serif !important; + font-weight: 500 !important; + letter-spacing: -1.5px; } .VPHero .text { + font-family: 'Satoshi', 'Onest', sans-serif; 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-text-fill-color: transparent; background-clip: 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-text-fill-color: transparent; background-clip: text; @@ -99,16 +108,17 @@ .VPFeature:hover { transform: translateY(-4px); - border-color: var(--mp-indigo); - box-shadow: 0 12px 40px rgba(79, 70, 229, 0.12); + border-color: var(--mp-cyan-vivid); + box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12); } .dark .VPFeature:hover { - border-color: var(--mp-cyan); - box-shadow: 0 12px 40px rgba(6, 182, 212, 0.12); + border-color: var(--mp-cyan-vivid); + box-shadow: 0 12px 40px rgba(56, 189, 248, 0.12); } .VPFeature .title { + font-family: 'Satoshi', 'Onest', sans-serif; font-weight: 600; } @@ -119,12 +129,12 @@ } .VPSidebar .VPSidebarItem.is-active .text { - color: var(--mp-indigo) !important; + color: var(--mp-cyan-vivid) !important; font-weight: 600; } .dark .VPSidebar .VPSidebarItem.is-active .text { - color: var(--mp-cyan-light) !important; + color: var(--mp-cyan-vivid) !important; } /* ── Code blocks ────────────────────────────────────────────────────── */ @@ -135,21 +145,21 @@ } .dark .vp-doc div[class*='language-'] { - border-color: rgba(6, 182, 212, 0.15); + border-color: rgba(56, 189, 248, 0.15); } /* ── Custom containers ──────────────────────────────────────────────── */ .vp-doc .custom-block.tip { - border-color: var(--mp-cyan); + border-color: var(--mp-ok); } .vp-doc .custom-block.warning { - border-color: var(--mp-amber); + border-color: var(--mp-warn); } .vp-doc .custom-block.info { - border-color: var(--mp-indigo); + border-color: var(--mp-cyan-vivid); } /* ── Tables ─────────────────────────────────────────────────────────── */ @@ -160,19 +170,20 @@ } .vp-doc th { - background: rgba(79, 70, 229, 0.06); + background: rgba(56, 189, 248, 0.06); font-weight: 600; } .dark .vp-doc th { - background: rgba(6, 182, 212, 0.08); + background: rgba(56, 189, 248, 0.08); } /* ── Nav ────────────────────────────────────────────────────────────── */ .VPNavBar .VPNavBarTitle .title { - font-weight: 700; - letter-spacing: -0.01em; + font-family: 'Neue Machina', 'Satoshi', sans-serif; + font-weight: 500; + letter-spacing: -0.4px; } /* ── Footer ─────────────────────────────────────────────────────────── */ @@ -193,11 +204,11 @@ } ::-webkit-scrollbar-thumb:hover { - background: var(--mp-indigo); + background: var(--mp-cyan-vivid); } .dark ::-webkit-scrollbar-thumb:hover { - background: var(--mp-cyan); + background: var(--mp-cyan-vivid); } /* ── Smooth transitions ─────────────────────────────────────────────── */