platform/blackroad-media
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix brand compliance: pure black backgrounds, remove purple-tinted grays
Some checks failed
Deploy BlackRoad Cloud / build (push) Has been cancelled
Details
Deploy BlackRoad Cloud / deploy-cloudflare (push) Has been cancelled
Details
Deploy BlackRoad Cloud / deploy-railway (push) Has been cancelled
Details
Deploy BlackRoad Cloud / deploy-pis (push) Has been cancelled
Details

Browse Source 
- LucidiaTerminal root: #0d0d0d → #000
- BrandTemplate: replace all purple-tinted grays with pure blacks
  - #0a0a1a → #0a0a0a, #10102a → #111, #08081a → #080808
  - #40406a → #444, #7070a0 → #888, #a8a8c8 → #aaa, #e8e8f0 → #f0f0f0
  - rgba(100,140,255,*) borders → #1a1a1a/#141414/#222/#333
- All 21 pages now use pure black (#000) page backgrounds
- All grays are neutral (no purple/blue tint)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alexa Amundson
2026-03-09 02:44:51 -05:00
parent 5cf394d965
commit d8ac6a187c
3 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules node_modules
dist dist
.env* .env*
.vercel

138
src/pages/BrandTemplate.jsx
View File

@@ -10,14 +10,14 @@ const COLORS = [
]; ];
const GRAYS = [ const GRAYS = [
{ hex: "#0a0a1a", name: "Void", label: "950" }, { hex: "#000000", name: "Void", label: "950" },
{ hex: "#10102a", name: "Abyss", label: "900" }, { hex: "#0a0a0a", name: "Abyss", label: "900" },
{ hex: "#16163a", name: "Deep", label: "800" }, { hex: "#111111", name: "Deep", label: "800" },
{ hex: "#252545", name: "Dusk", label: "700" }, { hex: "#222222", name: "Dusk", label: "700" },
{ hex: "#40406a", name: "Mid", label: "500" }, { hex: "#444444", name: "Mid", label: "500" },
{ hex: "#7070a0", name: "Mist", label: "400" }, { hex: "#666666", name: "Mist", label: "400" },
{ hex: "#a8a8c8", name: "Haze", label: "300" }, { hex: "#888888", name: "Haze", label: "300" },
{ hex: "#e8e8f0", name: "Frost", label: "100" }, { hex: "#f0f0f0", name: "Frost", label: "100" },
]; ];
const TYPE_SAMPLES = [ const TYPE_SAMPLES = [
@@ -47,8 +47,8 @@ function SectionTab({ id, label, active, onClick }) {
onClick={() => onClick(id)} onClick={() => onClick(id)}
style={{ style={{
background: active ? "rgba(136,68,255,0.15)" : "transparent", background: active ? "rgba(136,68,255,0.15)" : "transparent",
border: active ? "1px solid rgba(136,68,255,0.4)" : "1px solid rgba(100,140,255,0.08)", border: active ? "1px solid rgba(136,68,255,0.4)" : "1px solid #1a1a1a",
color: active ? "#e8e8f0" : "#7070a0", color: active ? "#f0f0f0" : "#888888",
fontFamily: "'Inter', sans-serif", fontFamily: "'Inter', sans-serif",
fontWeight: 600, fontWeight: 600,
fontSize: 12, fontSize: 12,
@@ -94,14 +94,14 @@ function ColorChip({ color, mono = false }) {
onMouseEnter={e => e.currentTarget.style.transform = "translateY(-3px)"} onMouseEnter={e => e.currentTarget.style.transform = "translateY(-3px)"}
onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"} onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
> >
<div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 13, color: isLight ? "#0a0a1a" : "#e8e8f0" }}> <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 13, color: isLight ? "#0a0a0a" : "#f0f0f0" }}>
{color.name} {color.name}
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: isLight ? "#25254580" : "#e8e8f080" }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: isLight ? "#22222280" : "#f0f0f080" }}>
{color.hex.toUpperCase()} {color.hex.toUpperCase()}
</div> </div>
{color.token && ( {color.token && (
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: isLight ? "#25254560" : "#e8e8f060", marginTop: 2 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: isLight ? "#22222260" : "#f0f0f060", marginTop: 2 }}>
{color.token} {color.token}
</div> </div>
)} )}
@@ -109,7 +109,7 @@ function ColorChip({ color, mono = false }) {
<div style={{ <div style={{
position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
background: color.hex + "ee", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600, background: color.hex + "ee", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600,
color: isLight ? "#0a0a1a" : "#e8e8f0", color: isLight ? "#0a0a0a" : "#f0f0f0",
}}> }}>
COPIED COPIED
</div> </div>
@@ -123,8 +123,8 @@ function PaletteSection() {
<div style={{ display: "flex", flexDirection: "column", gap: 48 }}> <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
<div> <div>
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}> <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
<span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#e8e8f0" }}>Accent Spectrum</span> <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#f0f0f0" }}>Accent Spectrum</span>
<div style={{ flex: 1, height: 1, background: "rgba(100,140,255,0.08)" }} /> <div style={{ flex: 1, height: 1, background: "#1a1a1a" }} />
</div> </div>
<div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
{COLORS.map(c => <ColorChip key={c.hex} color={c} />)} {COLORS.map(c => <ColorChip key={c.hex} color={c} />)}
@@ -134,8 +134,8 @@ function PaletteSection() {
<div> <div>
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}> <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
<span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#e8e8f0" }}>Surface Scale</span> <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#f0f0f0" }}>Surface Scale</span>
<div style={{ flex: 1, height: 1, background: "rgba(100,140,255,0.08)" }} /> <div style={{ flex: 1, height: 1, background: "#1a1a1a" }} />
</div> </div>
<div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
{GRAYS.map(c => ( {GRAYS.map(c => (
@@ -146,8 +146,8 @@ function PaletteSection() {
<div> <div>
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}> <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
<span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#e8e8f0" }}>Gradient Stops</span> <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#f0f0f0" }}>Gradient Stops</span>
<div style={{ flex: 1, height: 1, background: "rgba(100,140,255,0.08)" }} /> <div style={{ flex: 1, height: 1, background: "#1a1a1a" }} />
</div> </div>
<div style={{ display: "flex", gap: 0 }}> <div style={{ display: "flex", gap: 0 }}>
{COLORS.map((c, i) => ( {COLORS.map((c, i) => (
@@ -157,7 +157,7 @@ function PaletteSection() {
height: 64, height: 64,
display: "flex", alignItems: "flex-end", padding: "8px 10px", display: "flex", alignItems: "flex-end", padding: "8px 10px",
}}> }}>
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#e8e8f0cc", fontWeight: 500 }}> <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#f0f0f0cc", fontWeight: 500 }}>
{c.stop}% {c.stop}%
</span> </span>
</div> </div>
@@ -173,36 +173,36 @@ function TypeSection() {
<div style={{ display: "flex", flexDirection: "column", gap: 4 }}> <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
{TYPE_SAMPLES.map((s, i) => ( {TYPE_SAMPLES.map((s, i) => (
<div key={i} style={{ <div key={i} style={{
background: "#10102a", background: "#111111",
border: "1px solid rgba(100,140,255,0.08)", border: "1px solid #1a1a1a",
padding: "28px 32px", padding: "28px 32px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 32, gap: 32,
}}> }}>
<div style={{ minWidth: 72 }}> <div style={{ minWidth: 72 }}>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#40406a", textTransform: "uppercase", letterSpacing: "0.1em" }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#444444", textTransform: "uppercase", letterSpacing: "0.1em" }}>
{s.label} {s.label}
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#40406a", marginTop: 4 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#444444", marginTop: 4 }}>
{s.size}px / {s.weight} {s.size}px / {s.weight}
</div> </div>
</div> </div>
<div style={{ flex: 1, height: 1, background: "rgba(100,140,255,0.06)" }} /> <div style={{ flex: 1, height: 1, background: "#141414" }} />
<div style={{ flex: 4, fontFamily: s.font, fontWeight: s.weight, fontSize: s.size, color: "#e8e8f0", lineHeight: 1.3 }}> <div style={{ flex: 4, fontFamily: s.font, fontWeight: s.weight, fontSize: s.size, color: "#f0f0f0", lineHeight: 1.3 }}>
{s.text} {s.text}
</div> </div>
</div> </div>
))} ))}
<div style={{ marginTop: 32, padding: "24px 32px", background: "#10102a", border: "1px solid rgba(100,140,255,0.08)" }}> <div style={{ marginTop: 32, padding: "24px 32px", background: "#111111", border: "1px solid #1a1a1a" }}>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.08em", marginBottom: 16 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.08em", marginBottom: 16 }}>
FONT IMPORT · GOOGLE FONTS FONT IMPORT · GOOGLE FONTS
</div> </div>
<pre style={{ <pre style={{
fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#7070a0", margin: 0, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#888888", margin: 0,
background: "#08081a", padding: 20, overflowX: "auto", lineHeight: 1.7, background: "#080808", padding: 20, overflowX: "auto", lineHeight: 1.7,
border: "1px solid rgba(100,140,255,0.06)", border: "1px solid #141414",
}}> }}>
{`@import url('https://fonts.googleapis.com/css2? {`@import url('https://fonts.googleapis.com/css2?
family=Space+Grotesk:wght@600;700& family=Space+Grotesk:wght@600;700&
@@ -218,19 +218,19 @@ function TypeSection() {
function TokenSection() { function TokenSection() {
const tokens = [ const tokens = [
{ group: "Background", rows: [ { group: "Background", rows: [
["--bg-base", "#0a0a1a", "Root surface"], ["--bg-base", "#0a0a0a", "Root surface"],
["--bg-card", "#10102a", "Card/panel surface"], ["--bg-card", "#111111", "Card/panel surface"],
["--bg-code", "#08081a", "Code block surface"], ["--bg-code", "#080808", "Code block surface"],
["--bg-hover", "#16163a", "Hover state"], ["--bg-hover", "#161616", "Hover state"],
]}, ]},
{ group: "Text", rows: [ { group: "Text", rows: [
["--text-primary", "#e8e8f0", "Primary content"], ["--text-primary", "#f0f0f0", "Primary content"],
["--text-secondary", "#a8a8c8", "Supporting content"], ["--text-secondary", "#aaaaaa", "Supporting content"],
["--text-muted", "#7070a0", "Labels / meta"], ["--text-muted", "#888888", "Labels / meta"],
["--text-disabled", "#40406a", "Disabled states"], ["--text-disabled", "#444444", "Disabled states"],
]}, ]},
{ group: "Border", rows: [ { group: "Border", rows: [
["--border-default", "rgba(100,140,255,0.08)", "Default border"], ["--border-default", "#1a1a1a", "Default border"],
["--border-active", "rgba(255,100,40,0.2)", "Active/focused border"], ["--border-active", "rgba(255,100,40,0.2)", "Active/focused border"],
["--border-glow", "rgba(136,68,255,0.4)", "Glow border"], ["--border-glow", "rgba(136,68,255,0.4)", "Glow border"],
]}, ]},
@@ -241,24 +241,24 @@ function TokenSection() {
<div style={{ display: "flex", flexDirection: "column", gap: 32 }}> <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
{tokens.map(g => ( {tokens.map(g => (
<div key={g.group}> <div key={g.group}>
<div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: "#e8e8f0", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 12 }}> <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: "#f0f0f0", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 12 }}>
{g.group} {g.group}
</div> </div>
<div style={{ border: "1px solid rgba(100,140,255,0.08)" }}> <div style={{ border: "1px solid #1a1a1a" }}>
{g.rows.map(([token, value, desc], i) => ( {g.rows.map(([token, value, desc], i) => (
<div key={token} style={{ <div key={token} style={{
display: "grid", gridTemplateColumns: "200px 1fr 1fr", display: "grid", gridTemplateColumns: "200px 1fr 1fr",
alignItems: "center", alignItems: "center",
padding: "12px 20px", padding: "12px 20px",
borderBottom: i < g.rows.length - 1 ? "1px solid rgba(100,140,255,0.06)" : "none", borderBottom: i < g.rows.length - 1 ? "1px solid #141414" : "none",
background: i % 2 === 0 ? "#10102a" : "#0a0a1a", background: i % 2 === 0 ? "#111111" : "#0a0a0a",
}}> }}>
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#4488FF" }}>{token}</span> <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#4488FF" }}>{token}</span>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}> <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ width: 18, height: 18, background: value, border: "1px solid rgba(255,255,255,0.1)" }} /> <div style={{ width: 18, height: 18, background: value, border: "1px solid rgba(255,255,255,0.1)" }} />
<span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#7070a0" }}>{value}</span> <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#888888" }}>{value}</span>
</div> </div>
<span style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "#40406a" }}>{desc}</span> <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, color: "#444444" }}>{desc}</span>
</div> </div>
))} ))}
</div> </div>
@@ -281,18 +281,18 @@ function ComponentSection() {
{ name: "Sentinel", role: "Security & Compliance", color: "#4488FF", status: "active" }, { name: "Sentinel", role: "Security & Compliance", color: "#4488FF", status: "active" },
]; ];
const statusColor = { active: "#00D4FF", idle: "#40406a", alert: "#FF2255" }; const statusColor = { active: "#00D4FF", idle: "#444444", alert: "#FF2255" };
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: 40 }}> <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
{/* Buttons */} {/* Buttons */}
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.1em", marginBottom: 16 }}>BUTTONS</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.1em", marginBottom: 16 }}>BUTTONS</div>
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}> <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
{["Primary", "Ghost", "Danger", "Arc"].map((label, i) => { {["Primary", "Ghost", "Danger", "Arc"].map((label, i) => {
const styles = [ const styles = [
{ background: "#e8e8f0", color: "#0a0a1a", border: "1px solid transparent" }, { background: "#f0f0f0", color: "#0a0a0a", border: "1px solid transparent" },
{ background: "transparent", color: "#a8a8c8", border: "1px solid rgba(100,140,255,0.2)" }, { background: "transparent", color: "#aaaaaa", border: "1px solid #333" },
{ background: "rgba(255,34,85,0.12)", color: "#FF2255", border: "1px solid rgba(255,34,85,0.3)", boxShadow: "0 0 12px rgba(255,34,85,0.15)" }, { background: "rgba(255,34,85,0.12)", color: "#FF2255", border: "1px solid rgba(255,34,85,0.3)", boxShadow: "0 0 12px rgba(255,34,85,0.15)" },
{ background: "rgba(0,212,255,0.1)", color: "#00D4FF", border: "1px solid rgba(0,212,255,0.3)", boxShadow: "0 0 12px rgba(0,212,255,0.2)" }, { background: "rgba(0,212,255,0.1)", color: "#00D4FF", border: "1px solid rgba(0,212,255,0.3)", boxShadow: "0 0 12px rgba(0,212,255,0.2)" },
]; ];
@@ -310,20 +310,20 @@ function ComponentSection() {
{/* Toggle */} {/* Toggle */}
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.1em", marginBottom: 16 }}>TOGGLE</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.1em", marginBottom: 16 }}>TOGGLE</div>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}> <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<div onClick={() => setToggled(!toggled)} style={{ <div onClick={() => setToggled(!toggled)} style={{
width: 48, height: 26, background: toggled ? "rgba(136,68,255,0.3)" : "#10102a", width: 48, height: 26, background: toggled ? "rgba(136,68,255,0.3)" : "#111111",
border: toggled ? "1px solid rgba(136,68,255,0.6)" : "1px solid rgba(100,140,255,0.15)", border: toggled ? "1px solid rgba(136,68,255,0.6)" : "1px solid #222",
position: "relative", cursor: "pointer", transition: "all 0.2s", position: "relative", cursor: "pointer", transition: "all 0.2s",
...(toggled ? { boxShadow: "0 0 14px rgba(136,68,255,0.35)" } : {}), ...(toggled ? { boxShadow: "0 0 14px rgba(136,68,255,0.35)" } : {}),
}}> }}>
<div style={{ <div style={{
position: "absolute", top: 3, left: toggled ? 24 : 3, width: 18, height: 18, position: "absolute", top: 3, left: toggled ? 24 : 3, width: 18, height: 18,
background: toggled ? "#8844FF" : "#40406a", transition: "all 0.2s", background: toggled ? "#8844FF" : "#444444", transition: "all 0.2s",
}} /> }} />
</div> </div>
<span style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: toggled ? "#e8e8f0" : "#7070a0" }}> <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: toggled ? "#f0f0f0" : "#888888" }}>
{toggled ? "Enabled" : "Disabled"} {toggled ? "Enabled" : "Disabled"}
</span> </span>
</div> </div>
@@ -331,26 +331,26 @@ function ComponentSection() {
{/* Input */} {/* Input */}
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.1em", marginBottom: 16 }}>INPUT</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.1em", marginBottom: 16 }}>INPUT</div>
<input <input
defaultValue="Z := yx − w" defaultValue="Z := yx − w"
style={{ style={{
background: "#08081a", border: "1px solid rgba(100,140,255,0.15)", background: "#080808", border: "1px solid #222",
color: "#e8e8f0", fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: "#f0f0f0", fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
padding: "12px 18px", width: 320, outline: "none", padding: "12px 18px", width: 320, outline: "none",
}} }}
onFocus={e => { e.target.style.borderColor = "rgba(136,68,255,0.5)"; e.target.style.boxShadow = "0 0 16px rgba(136,68,255,0.15)"; }} onFocus={e => { e.target.style.borderColor = "rgba(136,68,255,0.5)"; e.target.style.boxShadow = "0 0 16px rgba(136,68,255,0.15)"; }}
onBlur={e => { e.target.style.borderColor = "rgba(100,140,255,0.15)"; e.target.style.boxShadow = "none"; }} onBlur={e => { e.target.style.borderColor = "#222"; e.target.style.boxShadow = "none"; }}
/> />
</div> </div>
{/* Agent Grid */} {/* Agent Grid */}
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.1em", marginBottom: 16 }}>AGENT CARDS</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.1em", marginBottom: 16 }}>AGENT CARDS</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 2 }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 2 }}>
{agents.map(a => ( {agents.map(a => (
<div key={a.name} style={{ <div key={a.name} style={{
background: "#10102a", border: "1px solid rgba(100,140,255,0.08)", background: "#111111", border: "1px solid #1a1a1a",
padding: "20px 18px", position: "relative", overflow: "hidden", padding: "20px 18px", position: "relative", overflow: "hidden",
}}> }}>
<div style={{ <div style={{
@@ -363,8 +363,8 @@ function ComponentSection() {
</div> </div>
<div style={{ width: 8, height: 8, borderRadius: "50%", background: statusColor[a.status], boxShadow: `0 0 8px ${statusColor[a.status]}` }} /> <div style={{ width: 8, height: 8, borderRadius: "50%", background: statusColor[a.status], boxShadow: `0 0 8px ${statusColor[a.status]}` }} />
</div> </div>
<div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 15, color: "#e8e8f0" }}>{a.name}</div> <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 15, color: "#f0f0f0" }}>{a.name}</div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#7070a0", marginTop: 4 }}>{a.role}</div> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#888888", marginTop: 4 }}>{a.role}</div>
</div> </div>
))} ))}
</div> </div>
@@ -391,13 +391,13 @@ export default function BrandTemplate() {
}, []); }, []);
return ( return (
<div style={{ background: "#000", minHeight: "100vh", color: "#e8e8f0", fontFamily: "'Inter', sans-serif", overflowX: "hidden" }}> <div style={{ background: "#000", minHeight: "100vh", color: "#f0f0f0", fontFamily: "'Inter', sans-serif", overflowX: "hidden" }}>
{/* Header */} {/* Header */}
<div style={{ borderBottom: "1px solid rgba(100,140,255,0.08)" }}> <div style={{ borderBottom: "1px solid #1a1a1a" }}>
<GradientBar height={3} glow /> <GradientBar height={3} glow />
<div style={{ padding: "32px 48px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}> <div style={{ padding: "32px 48px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
<div> <div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#40406a", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#444444", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>
BlackRoad OS, Inc. · Design System · v2.0 BlackRoad OS, Inc. · Design System · v2.0
</div> </div>
<h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 42, margin: 0, letterSpacing: "-0.02em", lineHeight: 1 }}> <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 42, margin: 0, letterSpacing: "-0.02em", lineHeight: 1 }}>
@@ -407,7 +407,7 @@ export default function BrandTemplate() {
</span> </span>
</h1> </h1>
</div> </div>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#40406a", textAlign: "right", lineHeight: 2 }}> <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: "#444444", textAlign: "right", lineHeight: 2 }}>
<div>6 accents · 8 surfaces · Z:=yx−w</div> <div>6 accents · 8 surfaces · Z:=yx−w</div>
<div>3 typefaces · 186 repos · 48 domains · 8 agents</div> <div>3 typefaces · 186 repos · 48 domains · 8 agents</div>
</div> </div>
@@ -415,7 +415,7 @@ export default function BrandTemplate() {
</div> </div>
{/* Nav */} {/* Nav */}
<div style={{ display: "flex", gap: 0, borderBottom: "1px solid rgba(100,140,255,0.08)", padding: "0 48px" }}> <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #1a1a1a", padding: "0 48px" }}>
{SECTIONS.map(s => ( {SECTIONS.map(s => (
<SectionTab key={s.id} id={s.id} label={s.label} active={active === s.id} onClick={setActive} /> <SectionTab key={s.id} id={s.id} label={s.label} active={active === s.id} onClick={setActive} />
))} ))}

2
src/pages/LucidiaTerminal.jsx
View File

@@ -383,7 +383,7 @@ export default function LucidiaTerminal() {
} }
`}</style> `}</style>
<div style={{ width: "100vw", height: "100vh", background: "#0d0d0d", display: "flex", flexDirection: "column", overflow: "hidden", fontFamily: mono }}> <div style={{ width: "100vw", height: "100vh", background: "#000", display: "flex", flexDirection: "column", overflow: "hidden", fontFamily: mono }}>
{/* ── macOS-style title bar ─────────────────────────────── */} {/* ── macOS-style title bar ─────────────────────────────── */}
<div style={{ minHeight: 2, background: GRAD, backgroundSize: "200% 100%", animation: "gradShift 4s linear infinite", flexShrink: 0 }} /> <div style={{ minHeight: 2, background: GRAD, backgroundSize: "200% 100%", animation: "gradShift 4s linear infinite", flexShrink: 0 }} />