Skip to content

Commit 8dbc2bb

Browse files
jkyberneeesjkyberneees
committed
landing: align with shared design system from assets.21no.de
- Replace Google Fonts link with assets.21no.de/fonts/fonts.css - Replace custom :root vars with assets.21no.de/css/tokens.css - Rename all var(--bg)→--bg-primary, --bg2→--bg-secondary, --bg3→--bg-card, --border→--border-subtle, --text→--text-primary, --text2→--text-secondary, --accent2→--purple, --amber→--yellow - Use var(--font-sans) and var(--font-mono) for font families
1 parent e1fca69 commit 8dbc2bb

1 file changed

Lines changed: 50 additions & 63 deletions

File tree

‎docs/index.html‎

Lines changed: 50 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,14 @@
1616
<meta name="twitter:description" content="The fastest, minimal Go autonomous agent runtime. ~11 MB static binary, zero frameworks.">
1717
<meta name="keywords" content="Go, autonomous agent, AI agent, LLM, ReAct, MCP, Docker sandbox, CLI, zero-dependency, open-source">
1818
<meta name="robots" content="index, follow">
19-
<link rel="preconnect" href="https://fonts.googleapis.com">
20-
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
19+
<link rel="stylesheet" href="https://assets.21no.de/fonts/fonts.css">
20+
<link rel="stylesheet" href="https://assets.21no.de/css/tokens.css">
2121
<style>
22-
:root {
23-
--bg: #0a0a0b;
24-
--bg2: #121214;
25-
--bg3: #1a1a1e;
26-
--border: #252529;
27-
--text: #e4e4e7;
28-
--text2: #a1a1aa;
29-
--accent: #38bdf8;
30-
--accent2: #818cf8;
31-
--green: #4ade80;
32-
--amber: #fbbf24;
33-
--red: #f87171;
34-
}
3522
* { margin: 0; padding: 0; box-sizing: border-box; }
3623
body {
37-
background: var(--bg);
38-
color: var(--text);
39-
font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
24+
background: var(--bg-primary);
25+
color: var(--text-primary);
26+
font-family: var(--font-sans);
4027
line-height: 1.6;
4128
-webkit-font-smoothing: antialiased;
4229
}
@@ -48,9 +35,9 @@
4835
padding: 16px 24px; max-width: 1008px; margin: 0 auto;
4936
}
5037
nav .logo { font-weight: 700; font-size: 1.25rem; color: var(--accent); }
51-
nav .logo span { color: var(--text2); font-weight: 400; }
52-
nav a { color: var(--text2); text-decoration: none; font-size: 0.875rem; transition: color .15s; margin-left: 24px; }
53-
nav a:hover { color: var(--text); }
38+
nav .logo span { color: var(--text-secondary); font-weight: 400; }
39+
nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; transition: color .15s; margin-left: 24px; }
40+
nav a:hover { color: var(--text-primary); }
5441

5542
/* ── Hero ── */
5643
.hero {
@@ -59,18 +46,18 @@
5946
}
6047
.hero h1 {
6148
font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em;
62-
background: linear-gradient(135deg, var(--accent), var(--accent2));
49+
background: linear-gradient(135deg, var(--accent), var(--purple));
6350
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
6451
background-clip: text;
6552
}
6653
.hero .sub {
67-
font-size: 1.15rem; color: var(--text2); margin-top: 16px; max-width: 600px; margin-inline: auto;
54+
font-size: 1.15rem; color: var(--text-secondary); margin-top: 16px; max-width: 600px; margin-inline: auto;
6855
}
6956
.hero .sub .size { color: var(--green); font-weight: 600; }
7057
.install-block {
7158
display: inline-flex; align-items: center; padding: 4px 4px 4px 20px;
72-
background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
73-
font-family: 'JetBrains Mono', monospace; font-size: 0.875rem;
59+
background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px;
60+
font-family: var(--font-mono); font-size: 0.875rem;
7461
position: relative;
7562
}
7663
.hero .install-block {
@@ -87,9 +74,9 @@
8774

8875
/* ── Copy button ── */
8976
.copy-btn {
90-
background: transparent; border: 1px solid var(--border); color: var(--text2);
77+
background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary);
9178
padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem;
92-
font-family: 'Outfit', sans-serif; transition: all .15s; margin-left: 12px;
79+
font-family: var(--font-sans); transition: all .15s; margin-left: 12px;
9380
white-space: nowrap; line-height: 1;
9481
}
9582
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
@@ -98,7 +85,7 @@
9885

9986
/* ── Sections ── */
10087
section { padding: 64px 0; }
101-
section + section { border-top: 1px solid var(--border); }
88+
section + section { border-top: 1px solid var(--border-subtle); }
10289
h2 {
10390
font-size: 1.75rem; font-weight: 700; margin-bottom: 24px;
10491
letter-spacing: -.02em;
@@ -107,25 +94,25 @@
10794
h3 {
10895
font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; margin-top: 28px;
10996
}
110-
p, li { color: var(--text2); font-size: 0.9375rem; }
97+
p, li { color: var(--text-secondary); font-size: 0.9375rem; }
11198
a { color: var(--accent); text-decoration: none; }
11299
a:hover { text-decoration: underline; }
113100

114101
/* ── Five Whys ── */
115102
.whys { list-style: none; }
116103
.whys li {
117-
padding: 20px 0; border-bottom: 1px solid var(--border);
104+
padding: 20px 0; border-bottom: 1px solid var(--border-subtle);
118105
display: flex; gap: 16px; align-items: flex-start;
119106
}
120107
.whys li:last-child { border-bottom: none; }
121108
.whys li .q { font-weight: 700; color: var(--accent); min-width: 60px; font-size: 1rem; }
122-
.whys li .a { color: var(--text2); }
123-
.whys li .a strong { color: var(--text); }
109+
.whys li .a { color: var(--text-secondary); }
110+
.whys li .a strong { color: var(--text-primary); }
124111

125112
/* ── Feature grid ── */
126113
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
127114
.features .card {
128-
background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
115+
background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px;
129116
padding: 24px;
130117
}
131118
.features .card .icon { font-size: 1.5rem; margin-bottom: 8px; }
@@ -134,42 +121,42 @@
134121

135122
/* ── Terminal carousel ── */
136123
.carousel {
137-
background: #0d0d11; border: 1px solid var(--border); border-radius: 12px;
124+
background: #0d0d11; border: 1px solid var(--border-subtle); border-radius: 12px;
138125
overflow: hidden; margin: 20px 0;
139126
}
140127
.carousel .bar {
141128
display: flex; align-items: center; gap: 8px;
142-
padding: 8px 16px; background: var(--bg2);
143-
border-bottom: 1px solid var(--border);
129+
padding: 8px 16px; background: var(--bg-secondary);
130+
border-bottom: 1px solid var(--border-subtle);
144131
}
145132
.carousel .bar .dot { width: 10px; height: 10px; border-radius: 50%; }
146133
.carousel .bar .dot:nth-child(1) { background: #ff5f56; }
147134
.carousel .bar .dot:nth-child(2) { background: #ffbd2e; }
148135
.carousel .bar .dot:nth-child(3) { background: #27c93f; }
149136
.carousel .bar .label {
150-
margin-left: auto; font-size: 0.75rem; color: var(--text2);
151-
font-family: 'JetBrains Mono', monospace;
137+
margin-left: auto; font-size: 0.75rem; color: var(--text-secondary);
138+
font-family: var(--font-mono);
152139
}
153140
.carousel .slides {
154141
position: relative; min-height: 280px;
155142
}
156143
.carousel .slide {
157144
position: absolute; inset: 0; padding: 20px 24px;
158145
opacity: 0; transition: opacity .6s ease;
159-
font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;
146+
font-family: var(--font-mono); font-size: 0.8125rem;
160147
line-height: 1.7; overflow-y: auto;
161148
pointer-events: none;
162149
}
163150
.carousel .slide.active { opacity: 1; position: relative; pointer-events: auto; }
164151
.carousel .slide .prompt { color: var(--green); }
165-
.carousel .slide .output { color: var(--text2); }
152+
.carousel .slide .output { color: var(--text-secondary); }
166153
.carousel .slide .info { color: #6b7280; font-style: italic; }
167154
.carousel .nav {
168155
display: flex; justify-content: center; gap: 8px;
169156
padding: 8px 0 16px;
170157
}
171158
.carousel .nav button {
172-
background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
159+
background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary);
173160
width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
174161
font-size: 0.75rem; transition: all .15s;
175162
}
@@ -179,7 +166,7 @@
179166
/* ── Install steps ── */
180167
.steps { list-style: none; }
181168
.steps li {
182-
padding: 16px 0; border-bottom: 1px solid var(--border);
169+
padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
183170
display: flex; gap: 16px;
184171
}
185172
.steps li:last-child { border-bottom: none; }
@@ -189,73 +176,73 @@
189176
font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; margin-top: 2px;
190177
}
191178
.steps li code {
192-
background: var(--bg3); padding: 2px 8px; border-radius: 4px;
193-
font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;
179+
background: var(--bg-card); padding: 2px 8px; border-radius: 4px;
180+
font-family: var(--font-mono); font-size: 0.8125rem;
194181
}
195182

196183
/* ── Code blocks ── */
197184
pre {
198-
background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
185+
background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px;
199186
padding: 20px; overflow-x: auto; font-size: 0.8125rem; margin: 16px 0;
200187
position: relative;
201188
}
202-
pre code { font-family: 'JetBrains Mono', monospace; color: var(--text); }
189+
pre code { font-family: var(--font-mono); color: var(--text-primary); }
203190
pre .clip {
204191
position: absolute; top: 12px; right: 12px;
205-
background: var(--bg2); border: 1px solid var(--border); color: var(--text2);
192+
background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-secondary);
206193
padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 0.6875rem;
207-
font-family: 'Outfit', sans-serif; transition: all .15s;
194+
font-family: var(--font-sans); transition: all .15s;
208195
}
209196
pre .clip:hover { border-color: var(--accent); color: var(--accent); }
210197
pre .clip.copied { border-color: var(--green); color: var(--green); }
211198
.hljs-comment { color: #6b7280; }
212199
.hljs-string { color: var(--green); }
213200
.hljs-keyword { color: var(--accent); }
214-
.hljs-number { color: var(--amber); }
201+
.hljs-number { color: var(--yellow); }
215202

216203
/* ── Platform tags ── */
217204
.platform-tags {
218205
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
219206
}
220207
.platform-tags .tag {
221-
background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
222-
padding: 6px 12px; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace;
223-
color: var(--text2);
208+
background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px;
209+
padding: 6px 12px; font-size: 0.75rem; font-family: var(--font-mono);
210+
color: var(--text-secondary);
224211
}
225212
.platform-tags .tag .ok { color: var(--green); }
226213

227214
/* ── Table comparison ── */
228215
.compare { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
229216
.compare th, .compare td {
230-
text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border);
217+
text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
231218
}
232-
.compare th { color: var(--text2); font-weight: 500; }
233-
.compare td:first-child { font-weight: 500; color: var(--text); }
219+
.compare th { color: var(--text-secondary); font-weight: 500; }
220+
.compare td:first-child { font-weight: 500; color: var(--text-primary); }
234221
.compare .win { color: var(--green); font-weight: 600; }
235222

236223
/* ── Command list ── */
237224
.cmd-list { list-style: none; }
238225
.cmd-list li {
239226
padding: 10px 0; display: flex; gap: 16px;
240-
border-bottom: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem;
227+
border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.8125rem;
241228
}
242229
.cmd-list li:last-child { border-bottom: none; }
243230
.cmd-list li .cmd { color: var(--green); white-space: nowrap; min-width: 220px; }
244-
.cmd-list li .desc { color: var(--text2); }
231+
.cmd-list li .desc { color: var(--text-secondary); }
245232

246233
/* ── Doc links ── */
247234
.doc-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
248235
.doc-links a {
249-
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
236+
background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px;
250237
padding: 14px 16px; font-size: 0.8125rem; font-weight: 500; transition: border-color .15s;
251238
}
252239
.doc-links a:hover { border-color: var(--accent); text-decoration: none; }
253-
.doc-links a span { display: block; font-weight: 400; color: var(--text2); font-size: 0.75rem; margin-top: 2px; }
240+
.doc-links a span { display: block; font-weight: 400; color: var(--text-secondary); font-size: 0.75rem; margin-top: 2px; }
254241

255242
/* ── Footer ── */
256243
footer {
257-
border-top: 1px solid var(--border); padding: 32px 0; text-align: center;
258-
color: var(--text2); font-size: 0.8125rem;
244+
border-top: 1px solid var(--border-subtle); padding: 32px 0; text-align: center;
245+
color: var(--text-secondary); font-size: 0.8125rem;
259246
}
260247
footer a { color: var(--accent); }
261248

@@ -368,7 +355,7 @@ <h2>The <span class="hl">Five Whys</span></h2>
368355
<!-- ═══ Terminal Demos Carousel ═══ -->
369356
<section id="demos">
370357
<h2>See it in <span class="hl">action</span></h2>
371-
<p style="margin-bottom:20px;color:var(--text2);font-size:0.9375rem">
358+
<p style="margin-bottom:20px;color:var(--text-secondary);font-size:0.9375rem">
372359
Real terminal output from real runs. Click through the examples.
373360
</p>
374361

@@ -575,7 +562,7 @@ <h2>Install in <span class="hl">5 seconds</span></h2>
575562
</ul>
576563

577564
<h3>One-line binary install</h3>
578-
<p style="color:var(--text2);font-size:0.875rem;margin-bottom:16px">
565+
<p style="color:var(--text-secondary);font-size:0.875rem;margin-bottom:16px">
579566
No Go toolchain? Auto-detects your OS and architecture:
580567
</p>
581568

0 commit comments

Comments
 (0)