Skip to content

Commit 2db3227

Browse files
bmadcodebmadcode
authored
style: update docs theme to match bmadcode.com Ghost blog (#54)
Replace purple/electric blue accent with Ghost blog design tokens: - Background #0a0a0a, surface #1a1a1a, borders #262626 - Accent blue #3b82f6, text #fafafa/#a1a1a1/#666666 - Inter body, Space Grotesk headings, JetBrains Mono code - Remove logo images, use text title
1 parent 4f17f28 commit 2db3227

3 files changed

Lines changed: 66 additions & 52 deletions

File tree

‎website/astro.config.mjs‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,6 @@ export default defineConfig({
4141
title: 'BMad Builder',
4242
tagline: 'Tool for creating custom BMad agents and modules.',
4343

44-
logo: {
45-
light: './public/img/bmad-light.png',
46-
dark: './public/img/bmad-dark.png',
47-
alt: 'BMad Builder',
48-
replacesTitle: true,
49-
},
5044
favicon: '/favicon.ico',
5145

5246
// Social links

‎website/src/components/Banner.astro‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
1313
width: 100vw;
1414
margin-left: calc(-50vw + 50%);
1515
height: var(--ai-banner-height, 2.75rem);
16-
background: #334155;
17-
color: rgb(148, 163, 184);
16+
background: #1a1a1a;
17+
color: #a1a1a1;
1818
padding: 0.5rem 1rem;
1919
font-size: 0.875rem;
20-
border-bottom: 1px solid rgba(140, 140, 255, 0.15);
20+
border-bottom: 1px solid #262626;
2121
display: flex;
2222
align-items: center;
2323
justify-content: center;
2424
box-sizing: border-box;
25-
font-family: system-ui, sans-serif;
25+
font-family: 'Inter', system-ui, sans-serif;
2626
}
2727

2828
.ai-banner span {
@@ -32,11 +32,12 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
3232
max-width: 100%;
3333
}
3434
.ai-banner a {
35-
color: #8C8CFF;
35+
color: #3b82f6;
3636
text-decoration: none;
3737
font-weight: 600;
3838
}
3939
.ai-banner a:hover {
40+
color: #fafafa;
4041
text-decoration: underline;
4142
}
4243

‎website/src/styles/custom.css‎

Lines changed: 60 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* BMad Builder Documentation - Custom Styles for Starlight
3-
* Electric Blue theme optimized for dark mode
3+
* Dark theme matching bmadcode.com Ghost blog
44
*
55
* CSS Variable Mapping:
66
* Docusaurus → Starlight
@@ -9,6 +9,9 @@
99
* --ifm-font-color-base → --sl-color-text
1010
*/
1111

12+
/* Google Fonts - match Ghost blog typography */
13+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
14+
1215
/* ============================================
1316
COLOR PALETTE - Light Mode
1417
============================================ */
@@ -19,10 +22,10 @@
1922
/* Full-width content - override Starlight's default 45rem/67.5rem */
2023
--sl-content-width: 100%;
2124

22-
/* Primary accent colors - purple to match BMAD */
23-
--sl-color-accent-low: #e0e0ff;
24-
--sl-color-accent: #8c8cff;
25-
--sl-color-accent-high: #4141ff;
25+
/* Primary accent colors - blue to match Ghost blog */
26+
--sl-color-accent-low: #dbeafe;
27+
--sl-color-accent: #2563eb;
28+
--sl-color-accent-high: #1d4ed8;
2629

2730
/* Text colors */
2831
--sl-color-white: #1e293b;
@@ -35,12 +38,13 @@
3538
--sl-color-black: #f8fafc;
3639

3740
/* Font settings */
38-
--sl-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
41+
--sl-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
42+
--sl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
3943
--sl-text-base: 1rem;
4044
--sl-line-height: 1.7;
4145

4246
/* Code highlighting */
43-
--sl-color-bg-inline-code: rgba(140, 140, 255, 0.1);
47+
--sl-color-bg-inline-code: rgba(59, 130, 246, 0.08);
4448
}
4549

4650
/* ============================================
@@ -50,35 +54,49 @@
5054
/* Full-width content - override Starlight's default */
5155
--sl-content-width: 100%;
5256

53-
/* Primary accent colors - purple to match BMAD */
54-
--sl-color-accent-low: #2a2a5a;
55-
--sl-color-accent: #8c8cff;
56-
--sl-color-accent-high: #b9b9ff;
57+
/* Primary accent colors - blue to match Ghost blog */
58+
--sl-color-accent-low: rgba(59, 130, 246, 0.12);
59+
--sl-color-accent: #3b82f6;
60+
--sl-color-accent-high: #60a5fa;
5761

5862
/* Background colors */
59-
--sl-color-bg: #1b1b1d;
60-
--sl-color-bg-nav: #1b1b1d;
61-
--sl-color-bg-sidebar: #1b1b1d;
62-
--sl-color-hairline-light: rgba(140, 140, 255, 0.1);
63-
--sl-color-hairline: rgba(140, 140, 255, 0.15);
63+
--sl-color-bg: #0a0a0a;
64+
--sl-color-bg-nav: #0a0a0a;
65+
--sl-color-bg-sidebar: #0a0a0a;
66+
--sl-color-hairline-light: rgba(255, 255, 255, 0.06);
67+
--sl-color-hairline: #262626;
6468

6569
/* Text colors */
66-
--sl-color-white: #f8fafc;
70+
--sl-color-white: #fafafa;
6771
--sl-color-gray-1: #e2e8f0;
68-
--sl-color-gray-2: #cbd5e1;
72+
--sl-color-gray-2: #a1a1a1;
6973
--sl-color-gray-3: #94a3b8;
70-
--sl-color-gray-4: #64748b;
74+
--sl-color-gray-4: #666666;
7175
--sl-color-gray-5: #475569;
72-
--sl-color-gray-6: #334155;
73-
--sl-color-black: #1b1b1d;
76+
--sl-color-gray-6: #262626;
77+
--sl-color-black: #0a0a0a;
7478

7579
/* Code highlighting */
76-
--sl-color-bg-inline-code: rgba(140, 140, 255, 0.15);
80+
--sl-color-bg-inline-code: rgba(59, 130, 246, 0.15);
7781
}
7882

7983
/* ============================================
8084
TYPOGRAPHY
8185
============================================ */
86+
87+
/* Space Grotesk for all headings - match Ghost blog */
88+
.sl-markdown-content h1,
89+
.sl-markdown-content h2,
90+
.sl-markdown-content h3,
91+
.sl-markdown-content h4,
92+
.sl-markdown-content h5,
93+
.sl-markdown-content h6,
94+
.site-title,
95+
starlight-toc h2 {
96+
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
97+
letter-spacing: -0.02em;
98+
}
99+
82100
.sl-markdown-content h1 {
83101
margin-bottom: 1.5rem;
84102
}
@@ -137,14 +155,14 @@
137155

138156
/* Active state - thin left accent bar */
139157
.sidebar-content a[aria-current='page'] {
140-
background-color: rgba(140, 140, 255, 0.08);
158+
background-color: rgba(59, 130, 246, 0.08);
141159
color: var(--sl-color-accent);
142160
border-left-color: var(--sl-color-accent);
143161
font-weight: 600;
144162
}
145163

146164
:root[data-theme='dark'] .sidebar-content a[aria-current='page'] {
147-
background-color: rgba(140, 140, 255, 0.1);
165+
background-color: rgba(59, 130, 246, 0.1);
148166
color: var(--sl-color-accent-high);
149167
border-left-color: var(--sl-color-accent);
150168
}
@@ -215,7 +233,8 @@ header.header .header.sl-flex {
215233
}
216234

217235
:root[data-theme='dark'] header.header {
218-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
236+
box-shadow: none;
237+
border-bottom: 1px solid #262626;
219238
}
220239

221240
.site-title {
@@ -264,20 +283,20 @@ header.header .header.sl-flex {
264283
.card:hover {
265284
transform: translateY(-3px);
266285
border-color: var(--sl-color-accent);
267-
box-shadow: 0 8px 24px rgba(140, 140, 255, 0.15);
286+
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
268287
}
269288

270289
:root[data-theme='dark'] .card {
271-
background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
272-
border-color: rgba(140, 140, 255, 0.2);
290+
background: #1a1a1a;
291+
border-color: #262626;
273292
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
274293
}
275294

276295
:root[data-theme='dark'] .card:hover {
277-
border-color: rgba(140, 140, 255, 0.5);
296+
border-color: #3b82f6;
278297
box-shadow:
279-
0 8px 32px rgba(140, 140, 255, 0.2),
280-
0 0 0 1px rgba(140, 140, 255, 0.1);
298+
0 8px 32px #262626,
299+
0 0 0 1px rgba(59, 130, 246, 0.1);
281300
}
282301

283302
/* Starlight card grid */
@@ -296,11 +315,11 @@ header.header .header.sl-flex {
296315
}
297316

298317
:root[data-theme='dark'] .sl-link-card {
299-
border-color: rgba(140, 140, 255, 0.2);
318+
border-color: #262626;
300319
}
301320

302321
:root[data-theme='dark'] .sl-link-card:hover {
303-
border-color: rgba(140, 140, 255, 0.5);
322+
border-color: #3b82f6;
304323
}
305324

306325
/* ============================================
@@ -340,21 +359,21 @@ table {
340359
}
341360

342361
:root[data-theme='dark'] table {
343-
border-color: rgba(140, 140, 255, 0.1);
362+
border-color: rgba(59, 130, 246, 0.1);
344363
}
345364

346365
:root[data-theme='dark'] table th {
347-
background-color: rgba(140, 140, 255, 0.05);
366+
background-color: rgba(59, 130, 246, 0.05);
348367
}
349368

350369
:root[data-theme='dark'] table tr:nth-child(2n) {
351-
background-color: rgba(140, 140, 255, 0.02);
370+
background-color: rgba(255, 255, 255, 0.02);
352371
}
353372

354373
/* Blockquotes */
355374
blockquote {
356375
border-left-color: var(--sl-color-accent);
357-
background-color: rgba(140, 140, 255, 0.05);
376+
background-color: rgba(59, 130, 246, 0.05);
358377
border-radius: 0 8px 8px 0;
359378
padding: 1rem 1.25rem;
360379
}
@@ -391,19 +410,19 @@ blockquote {
391410

392411
/* Note aside */
393412
.starlight-aside--note {
394-
background-color: rgba(140, 140, 255, 0.08);
413+
background-color: rgba(59, 130, 246, 0.08);
395414
}
396415

397416
.starlight-aside--note .starlight-aside__title {
398-
color: #8c8cff;
417+
color: #3b82f6;
399418
}
400419

401420
:root[data-theme='dark'] .starlight-aside--note {
402-
background-color: rgba(140, 140, 255, 0.12);
421+
background-color: rgba(59, 130, 246, 0.12);
403422
}
404423

405424
:root[data-theme='dark'] .starlight-aside--note .starlight-aside__title {
406-
color: #8c8cff;
425+
color: #3b82f6;
407426
}
408427

409428
/* Caution aside */

0 commit comments

Comments
 (0)