Skip to content

Commit 58c8a3e

Browse files
gmoonclaude
gmoon
and
claude
committed
Switch to dark mode with Void Blue palette and semantic token extraction
Dark mode conversion: Void Blue (hsl 220/40/10) background, Lattice Cyan (hsl 180/100/50) accent, Node Gold (hsl 45/100/50) accent. Updated all 10 component/page files. Added semantic tokens (bgDeep, bgGlass, textOnAccent) to eliminate hardcoded color values. Includes Hero brand mark with animated lattice curves and Outfit font, Giscus dark theme, dark badge colors for Reader, and increased callout/blockquote opacity for dark bg contrast. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 85eaeb8 commit 58c8a3e

12 files changed

Lines changed: 230 additions & 61 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<title>Forkzero — AI-First Developer Tooling</title>
77
<meta name="description" content="Forkzero builds tools for the human-agent era. Lattice, Team of Rivals, s3proxy." />
88
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='28' font-size='28'>⬡</text></svg>" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300&display=swap" rel="stylesheet" />
912
</head>
1013
<body>
1114
<div id="root"></div>

‎src/components/BlogComments.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function BlogComments({ slug }: { slug: string }) {
1313
reactionsEnabled="1"
1414
emitMetadata="0"
1515
inputPosition="top"
16-
theme="light"
16+
theme="dark"
1717
lang="en"
1818
loading="lazy"
1919
/>

‎src/components/Header.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { colors, fonts, gradient } from '../tokens'
1+
import { colors, fonts } from '../tokens'
22

33
const styles = {
44
header: {
5-
background: gradient,
5+
background: colors.bgGlass,
6+
backdropFilter: 'blur(12px)',
7+
borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
68
padding: '1rem 2rem',
79
display: 'flex',
810
alignItems: 'center',
@@ -86,7 +88,7 @@ export function PoweredByHeader() {
8688
href="https://github.com/forkzero/lattice"
8789
target="_blank"
8890
rel="noopener noreferrer"
89-
style={{ color: colors.bgPrimary, textDecoration: 'none' }}
91+
style={{ color: colors.textPrimary, textDecoration: 'none' }}
9092
>
9193
Forkzero/Lattice
9294
</a>

‎src/components/Hero.tsx‎

Lines changed: 173 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,65 @@
11
import { colors, fonts, gradient } from '../tokens'
22
import { INSTALL_CMD } from '../constants'
33

4+
const keyframesStyle = `
5+
@keyframes lattice-fade-slide-up {
6+
from { opacity: 0; transform: translateY(12px); }
7+
to { opacity: 1; transform: translateY(0); }
8+
}
9+
@keyframes lattice-fade-in {
10+
from { opacity: 0; }
11+
to { opacity: 1; }
12+
}
13+
@keyframes lattice-float {
14+
0%, 100% { transform: translateY(0); }
15+
50% { transform: translateY(-8px); }
16+
}
17+
`
18+
419
const styles: Record<string, React.CSSProperties> = {
520
hero: {
621
background: gradient,
722
padding: '5rem 2rem 4rem',
823
textAlign: 'center' as const,
924
color: '#ffffff',
25+
position: 'relative' as const,
26+
overflow: 'hidden' as const,
27+
},
28+
bgDecoration: {
29+
position: 'absolute' as const,
30+
inset: 0,
31+
pointerEvents: 'none' as const,
32+
overflow: 'hidden' as const,
33+
},
34+
content: {
35+
position: 'relative' as const,
36+
},
37+
brandMark: {
38+
marginBottom: '2rem',
39+
},
40+
brandTitle: {
41+
fontSize: 'clamp(28px, 4vw, 44px)',
42+
fontWeight: 200,
43+
fontFamily: "'Outfit', sans-serif",
44+
letterSpacing: '0.45em',
45+
textTransform: 'uppercase' as const,
46+
margin: 0,
47+
lineHeight: 1,
48+
animation: 'lattice-fade-slide-up 1.5s ease-out 0.3s both',
49+
background: 'linear-gradient(90deg, rgba(255,255,255,0.6), #ffffff, rgba(255,255,255,0.6))',
50+
WebkitBackgroundClip: 'text',
51+
WebkitTextFillColor: 'transparent',
52+
backgroundClip: 'text',
53+
},
54+
brandSubtitle: {
55+
fontSize: 'clamp(10px, 1.2vw, 14px)',
56+
fontWeight: 300,
57+
fontFamily: "'Outfit', sans-serif",
58+
letterSpacing: '0.3em',
59+
color: 'rgba(140, 185, 200, 0.5)',
60+
textTransform: 'uppercase' as const,
61+
margin: '0.75rem 0 0',
62+
animation: 'lattice-fade-in 1.5s ease-out 0.6s both',
1063
},
1164
title: {
1265
fontSize: '3rem',
@@ -35,8 +88,8 @@ const styles: Record<string, React.CSSProperties> = {
3588
ctaPrimary: {
3689
display: 'inline-block',
3790
padding: '0.75rem 2rem',
38-
background: '#ffffff',
39-
color: colors.accentBlue,
91+
background: colors.accentBlue,
92+
color: colors.textOnAccent,
4093
borderRadius: '8px',
4194
textDecoration: 'none',
4295
fontWeight: 600,
@@ -50,7 +103,7 @@ const styles: Record<string, React.CSSProperties> = {
50103
padding: '0.75rem 2rem',
51104
background: 'transparent',
52105
color: '#ffffff',
53-
border: '2px solid rgba(255,255,255,0.6)',
106+
border: '2px solid rgba(0, 255, 255, 0.4)',
54107
borderRadius: '8px',
55108
textDecoration: 'none',
56109
fontWeight: 600,
@@ -70,24 +123,127 @@ const styles: Record<string, React.CSSProperties> = {
70123
},
71124
}
72125

126+
function HeroCurves() {
127+
return (
128+
<svg
129+
style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 }}
130+
viewBox="0 0 800 400"
131+
fill="none"
132+
preserveAspectRatio="xMidYMid slice"
133+
xmlns="http://www.w3.org/2000/svg"
134+
>
135+
<defs>
136+
<linearGradient id="hero-curve-grad" x1="0%" y1="0%" x2="100%" y2="0%">
137+
<stop offset="0%" stopColor="transparent" />
138+
<stop offset="50%" stopColor="rgba(0, 255, 255, 0.12)" />
139+
<stop offset="100%" stopColor="transparent" />
140+
</linearGradient>
141+
</defs>
142+
{/* Organic lattice curves — flowing Bezier paths */}
143+
<path
144+
d="M400 60 C 200 60, 80 200, 400 340 C 720 200, 600 60, 400 60"
145+
stroke="url(#hero-curve-grad)"
146+
strokeWidth="0.8"
147+
style={{ animation: 'lattice-float 6s ease-in-out infinite' }}
148+
/>
149+
<path
150+
d="M400 60 C 150 100, 120 300, 400 340 C 680 300, 650 100, 400 60"
151+
stroke="url(#hero-curve-grad)"
152+
strokeWidth="0.8"
153+
style={{ animation: 'lattice-float 6s ease-in-out 1s infinite' }}
154+
/>
155+
<path
156+
d="M400 60 C 250 120, 200 280, 400 340 C 600 280, 550 120, 400 60"
157+
stroke="url(#hero-curve-grad)"
158+
strokeWidth="0.8"
159+
style={{ animation: 'lattice-float 6s ease-in-out 2s infinite' }}
160+
/>
161+
{/* Node dots at curve intersections */}
162+
<circle
163+
cx="400"
164+
cy="60"
165+
r="2.5"
166+
fill="rgba(0, 255, 255, 0.3)"
167+
style={{ animation: 'lattice-float 6s ease-in-out infinite' }}
168+
/>
169+
<circle
170+
cx="400"
171+
cy="340"
172+
r="2.5"
173+
fill="rgba(0, 255, 255, 0.3)"
174+
style={{ animation: 'lattice-float 6s ease-in-out 1s infinite' }}
175+
/>
176+
<circle
177+
cx="160"
178+
cy="200"
179+
r="2"
180+
fill="rgba(0, 255, 255, 0.2)"
181+
style={{ animation: 'lattice-float 6s ease-in-out 0.5s infinite' }}
182+
/>
183+
<circle
184+
cx="640"
185+
cy="200"
186+
r="2"
187+
fill="rgba(0, 255, 255, 0.2)"
188+
style={{ animation: 'lattice-float 6s ease-in-out 1.5s infinite' }}
189+
/>
190+
</svg>
191+
)
192+
}
193+
73194
export function Hero() {
74195
return (
75196
<section style={styles.hero}>
76-
<h1 style={styles.title}>Structure the knowledge behind what you build</h1>
77-
<p style={styles.subtitle}>
78-
When you build with LLMs, research and reasoning vanish into chat logs. Lattice is a CLI that captures it —
79-
connecting sources, strategy, requirements, and code into a Git-native knowledge graph that any collaborator,
80-
human or agent, can pick up and build on.
81-
</p>
82-
<div style={styles.ctaRow}>
83-
<a href="/getting-started" style={styles.ctaPrimary}>
84-
Get Started
85-
</a>
86-
<a href="/reader?url=https://forkzero.github.io/lattice/lattice-data.json" style={styles.ctaSecondary}>
87-
See it live
88-
</a>
197+
<style>{keyframesStyle}</style>
198+
<div style={styles.bgDecoration}>
199+
{/* Blurred ambient orbs */}
200+
<div
201+
style={{
202+
position: 'absolute',
203+
top: '-30%',
204+
right: '-10%',
205+
width: '400px',
206+
height: '400px',
207+
background: 'rgba(0, 255, 255, 0.06)',
208+
borderRadius: '50%',
209+
filter: 'blur(80px)',
210+
}}
211+
/>
212+
<div
213+
style={{
214+
position: 'absolute',
215+
bottom: '-20%',
216+
left: '-5%',
217+
width: '350px',
218+
height: '350px',
219+
background: 'rgba(139,92,246,0.12)',
220+
borderRadius: '50%',
221+
filter: 'blur(80px)',
222+
}}
223+
/>
224+
<HeroCurves />
225+
</div>
226+
<div style={styles.content}>
227+
<div style={styles.brandMark}>
228+
<div style={styles.brandTitle}>Lattice</div>
229+
<div style={styles.brandSubtitle}>Knowledge Coordination Protocol</div>
230+
</div>
231+
<h1 style={styles.title}>Structure the knowledge behind what you build</h1>
232+
<p style={styles.subtitle}>
233+
When you build with LLMs, research and reasoning vanish into chat logs. Lattice is a CLI that captures it —
234+
connecting sources, strategy, requirements, and code into a Git-native knowledge graph that any collaborator,
235+
human or agent, can pick up and build on.
236+
</p>
237+
<div style={styles.ctaRow}>
238+
<a href="/getting-started" style={styles.ctaPrimary}>
239+
Get Started
240+
</a>
241+
<a href="/reader?url=https://forkzero.github.io/lattice/lattice-data.json" style={styles.ctaSecondary}>
242+
See it live
243+
</a>
244+
</div>
245+
<span style={styles.installHint}>{INSTALL_CMD}</span>
89246
</div>
90-
<span style={styles.installHint}>{INSTALL_CMD}</span>
91247
</section>
92248
)
93249
}

‎src/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export const INSTALL_URL = 'https://forkzero.ai/lattice/install.sh'
22
export const INSTALL_CMD = `curl -fsSL ${INSTALL_URL} | sh`
3+
export const INSTALL_URL_WINDOWS = 'https://forkzero.ai/lattice/install.ps1'
4+
export const INSTALL_CMD_WINDOWS = `irm ${INSTALL_URL_WINDOWS} | iex`

‎src/data/projects.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const projects: Project[] = [
3737
description:
3838
'A lightweight proxy that streams S3 objects directly to clients. Signed URL generation, range requests, and multi-tenant bucket routing.',
3939
status: 'Production v3.x',
40-
statusColor: '#3b82f6',
40+
statusColor: 'hsl(180, 100%, 50%)',
4141
tech: ['TypeScript', 'Node.js'],
4242
url: 'https://github.com/forkzero/s3proxy',
4343
},

‎src/main.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { createRoot } from 'react-dom/client'
22
import { App } from './App'
3+
import { colors, fonts } from './tokens'
34

45
const root = document.getElementById('root')!
56

67
// Reset browser defaults
78
Object.assign(document.body.style, {
89
margin: '0',
910
padding: '0',
10-
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif",
11-
background: '#f8f9fa',
12-
color: '#1a1a2e',
11+
fontFamily: fonts.system,
12+
background: colors.bgSecondary,
13+
color: colors.textPrimary,
1314
lineHeight: '1.6',
1415
})
1516

‎src/pages/BlogPage.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ export function renderContent(content: string) {
6767
i++ // skip closing :::
6868
const calloutStyle =
6969
calloutType === 'insight'
70-
? { borderColor: colors.accentPurple, bg: `${colors.accentPurple}08` }
71-
: { borderColor: colors.accentBlue, bg: `${colors.accentBlue}08` }
70+
? { borderColor: colors.accentPurple, bg: `${colors.accentPurple}18` }
71+
: { borderColor: colors.accentBlue, bg: `${colors.accentBlue}18` }
7272
blocks.push(
7373
<div
7474
key={`callout-${i}`}
@@ -458,7 +458,7 @@ const s: Record<string, React.CSSProperties> = {
458458
margin: '2rem 0',
459459
},
460460
codeBlock: {
461-
background: '#1a1a2e',
461+
background: colors.bgDeep,
462462
color: '#e2e8f0',
463463
padding: '1.25rem',
464464
borderRadius: radius,
@@ -501,7 +501,7 @@ const s: Record<string, React.CSSProperties> = {
501501
// Blockquote
502502
blockquote: {
503503
borderLeft: `3px solid ${colors.accentBlue}`,
504-
background: `${colors.accentBlue}06`,
504+
background: `${colors.accentBlue}14`,
505505
margin: '1.5rem 0',
506506
padding: '1rem 1.25rem',
507507
borderRadius: `0 ${radius} ${radius} 0`,
@@ -522,7 +522,7 @@ const s: Record<string, React.CSSProperties> = {
522522
// Callout
523523
callout: {
524524
borderLeft: `3px solid ${colors.accentPurple}`,
525-
background: `${colors.accentPurple}08`,
525+
background: `${colors.accentPurple}18`,
526526
margin: '1.5rem 0',
527527
padding: '1rem 1.25rem',
528528
borderRadius: `0 ${radius} ${radius} 0`,
@@ -660,7 +660,7 @@ const s: Record<string, React.CSSProperties> = {
660660
fontSize: '0.8rem',
661661
fontWeight: 500,
662662
color: colors.accentBlue,
663-
background: `${colors.accentBlue}0a`,
663+
background: `${colors.accentBlue}14`,
664664
border: `1px solid ${colors.accentBlue}30`,
665665
borderRadius: '100px',
666666
padding: '0.3rem 0.75rem',

‎src/pages/GettingStartedPage.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function StepBadge({ number }: { number: number }) {
8181
height: '28px',
8282
borderRadius: '50%',
8383
background: colors.accentBlue,
84-
color: '#ffffff',
84+
color: colors.textOnAccent,
8585
fontSize: '0.85rem',
8686
fontWeight: 700,
8787
fontFamily: fonts.system,
@@ -221,6 +221,8 @@ const s: Record<string, React.CSSProperties> = {
221221
padding: '4rem 2rem 3rem',
222222
textAlign: 'center',
223223
color: '#ffffff',
224+
position: 'relative',
225+
overflow: 'hidden',
224226
},
225227
heroTitle: {
226228
fontSize: '2.5rem',
@@ -270,7 +272,7 @@ const s: Record<string, React.CSSProperties> = {
270272

271273
// Code blocks
272274
codeBlock: {
273-
background: '#1a1a2e',
275+
background: colors.bgDeep,
274276
color: '#e2e8f0',
275277
padding: '1.25rem',
276278
paddingTop: '1.75rem',
@@ -285,7 +287,7 @@ const s: Record<string, React.CSSProperties> = {
285287

286288
// Install section
287289
installBox: {
288-
background: '#1a1a2e',
290+
background: colors.bgDeep,
289291
borderRadius: radius,
290292
padding: '1.5rem',
291293
position: 'relative',

0 commit comments

Comments
 (0)