Skip to content

Commit bb858b1

Browse files
shotwelljclaude
shotwellj
and
claude
committed
design: apply AIR Blackbox Brand Kit to the hosted demo
Mirrors the reskinned airblackbox.ai/demo/platform: monochrome ink/ground palette, Archivo, ruled header with the compact mark, square corners, signal red reserved for failures and CTAs. Behavior unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent 4e5d0bb commit bb858b1

1 file changed

Lines changed: 56 additions & 55 deletions

File tree

‎hosted-demo.html‎

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,74 @@
66
<title>AIR Platform — Interactive Demo</title>
77
<meta name="description" content="Interactive walkthrough of the AIR Blackbox platform: record every LLM call as a tamper-evident audit record, block runaway agents at the proxy, verify the chain, export evidence.">
88
<link rel="icon" type="image/svg+xml" href="https://airblackbox.ai/favicon.svg">
9+
<link rel="stylesheet" href="https://airblackbox.ai/brand/brand.css">
910
<style>
1011
:root {
11-
--bg: #0a0a0a;
12-
--surface: #12121f;
13-
--surface2: #16213e;
14-
--border: #2a2a4a;
15-
--text: #e0e0f0;
16-
--dim: #6a6a8a;
17-
--green: #4ade80;
18-
--red: #f87171;
19-
--yellow: #fbbf24;
20-
--cyan: #22d3ee;
21-
--purple: #a78bfa;
22-
--mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
12+
--bg: #f3f2f2; /* ground */
13+
--surface: #ffffff;
14+
--surface2: #f3f2f2;
15+
--border: #201e1d; /* ink rules everywhere */
16+
--text: #201e1d;
17+
--dim: #6b6866; /* neutral */
18+
--green: #201e1d; /* ok states are ink: only failures are red */
19+
--red: #ec3013; /* signal */
20+
--yellow: #6b6866; /* gated/pending reads as neutral */
21+
--cyan: #6b6866;
22+
--purple: #6b6866;
23+
--mono: 'SF Mono', ui-monospace, monospace;
2324
}
2425
* { margin: 0; padding: 0; box-sizing: border-box; }
2526
body {
26-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
27+
font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
2728
background: var(--bg); color: var(--text); min-height: 100vh;
2829
}
2930
a { color: var(--cyan); }
3031

3132
/* Nav */
32-
.nav { background: #080b14; border-bottom: 1px solid #21262d; padding: 14px 0; position: sticky; top: 0; z-index: 200; }
33+
.nav { background: var(--bg); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); padding: 12px 0; position: sticky; top: 0; z-index: 200; }
3334
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
34-
.nav-logo { color: #e6edf3; font-weight: 700; font-size: 16px; text-decoration: none; font-family: var(--mono); }
35-
.nav-logo span { color: var(--yellow); }
35+
.nav-logo { color: var(--text); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
36+
.nav-logo span { color: var(--text); }
3637
.nav-links { display: flex; gap: 20px; align-items: center; }
37-
.nav-links a { color: #8b949e; text-decoration: none; font-size: 13px; }
38-
.nav-links a:hover { color: var(--yellow); }
39-
.nav-links .cta { background: var(--yellow); color: #080b14; padding: 5px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; }
38+
.nav-links a { color: var(--dim); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
39+
.nav-links a:hover { color: var(--text); }
40+
.nav-links .cta { background: var(--red); color: var(--bg); padding: 6px 12px; font-weight: 700; font-size: 11px; }
4041

4142
.container { max-width: 1160px; margin: 0 auto; padding: 40px 24px 80px; }
4243
header.hero { text-align: center; margin-bottom: 34px; }
4344
header.hero h1 { font-size: 32px; font-weight: 800; letter-spacing: -1px; }
44-
header.hero h1 span { color: var(--yellow); }
45+
header.hero h1 span { color: var(--text); border-bottom: 4px solid var(--red); }
4546
header.hero p { color: var(--dim); font-size: 15px; max-width: 640px; margin: 10px auto 0; line-height: 1.7; }
4647

4748
/* Scenario buttons */
4849
.scenarios { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
4950
.scn {
5051
background: var(--surface); border: 1px solid var(--border); color: var(--text);
51-
padding: 10px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
52+
padding: 10px 16px; font-size: 13.5px; font-weight: 600;
5253
cursor: pointer; transition: all .15s; font-family: inherit;
5354
}
54-
.scn:hover:not(:disabled) { border-color: var(--yellow); transform: translateY(-1px); }
55+
.scn:hover:not(:disabled) { border-color: var(--text); border-width: 2px; transform: translateY(-1px); }
5556
.scn:disabled { opacity: .45; cursor: not-allowed; }
5657
.scn.done { border-color: var(--green); }
5758
.scn.done::after { content: " ✓"; color: var(--green); }
58-
.scn .num { color: var(--yellow); margin-right: 6px; font-family: var(--mono); }
59+
.scn .num { color: var(--red); margin-right: 6px; font-family: var(--mono); }
5960
.scn.reset-btn { border-color: transparent; color: var(--dim); font-weight: 400; }
6061
.scn.reset-btn:hover { color: var(--red); border-color: var(--red); }
6162

6263
/* Architecture map */
63-
.arch { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px 18px; margin-bottom: 18px; }
64+
.arch { background: var(--surface); border: 1px solid var(--border); padding: 22px 18px 18px; margin-bottom: 18px; }
6465
.arch-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
6566
.arch-row + .arch-row { margin-top: 14px; }
6667
.node {
67-
border: 1px solid var(--border); background: var(--surface2); border-radius: 8px;
68+
border: 1px solid var(--border); background: var(--surface2);
6869
padding: 9px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--dim);
6970
transition: all .25s; text-align: center; position: relative;
7071
}
7172
.node small { display: block; font-size: 10px; margin-top: 2px; color: var(--dim); font-family: inherit; }
72-
.node.lit { color: var(--text); border-color: var(--cyan); box-shadow: 0 0 14px rgba(34,211,238,.25); }
73-
.node.ok { border-color: var(--green); color: var(--text); box-shadow: 0 0 12px rgba(74,222,128,.22); }
74-
.node.warn { border-color: var(--yellow); color: var(--text); box-shadow: 0 0 14px rgba(251,191,36,.3); }
75-
.node.err { border-color: var(--red); color: var(--text); box-shadow: 0 0 16px rgba(248,113,113,.35); }
73+
.node.lit { color: var(--text); border-color: var(--text); border-width: 2px; }
74+
.node.ok { border-color: var(--text); color: var(--text); border-width: 2px; }
75+
.node.warn { border-color: var(--red); color: var(--red); border-width: 2px; }
76+
.node.err { border-color: var(--red); color: var(--red); border-width: 2px; }
7677
.arrow { color: var(--dim); font-family: var(--mono); font-size: 14px; }
7778
.arrow.lit { color: var(--cyan); }
7879

@@ -81,63 +82,63 @@
8182
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
8283

8384
/* Terminal */
84-
.term { background: #0d1117; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
85-
.term-bar { background: #161b22; padding: 9px 14px; display: flex; gap: 7px; align-items: center; border-bottom: 1px solid #21262d; }
86-
.dot { width: 11px; height: 11px; border-radius: 50%; }
85+
.term { background: #201e1d; border: 2px solid var(--border); overflow: hidden; }
86+
.term-bar { background: #201e1d; padding: 9px 14px; display: flex; gap: 7px; align-items: center; border-bottom: 1px solid #3a3735; }
87+
.dot { width: 11px; height: 11px; }
8788
.term-title { color: var(--dim); font-size: 11.5px; font-family: var(--mono); margin-left: 8px; }
8889
.term-body {
8990
padding: 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
9091
height: 460px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
9192
}
92-
.term-body .g { color: var(--green); } .term-body .r { color: var(--red); }
93-
.term-body .y { color: var(--yellow); } .term-body .c { color: var(--cyan); }
94-
.term-body .p { color: var(--purple); } .term-body .d { color: var(--dim); }
93+
.term-body { color: #c9c6c4; } .term-body .g { color: #f3f2f2; font-weight: 600; } .term-body .r { color: #ff7a5c; }
94+
.term-body .y { color: #b8b5b3; } .term-body .c { color: #9c9997; }
95+
.term-body .p { color: #9c9997; } .term-body .d { color: #8a8785; }
9596
.term-body .w { color: #fff; font-weight: 600; }
96-
.cursor { display: inline-block; width: 7px; height: 14px; background: var(--green); vertical-align: -2px; animation: blink 1s step-start infinite; }
97+
.cursor { display: inline-block; width: 7px; height: 14px; background: #f3f2f2; vertical-align: -2px; animation: blink 1s step-start infinite; }
9798
@keyframes blink { 50% { opacity: 0; } }
9899

99100
/* Chain panel */
100-
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
101+
.panel { background: var(--surface); border: 1px solid var(--border); padding: 16px; }
101102
.panel h3 { font-size: 13px; font-family: var(--mono); color: var(--dim); font-weight: 600; margin-bottom: 12px; letter-spacing: .4px; }
102103
.panel h3 b { color: var(--text); }
103104
.chain { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
104105
.rec {
105106
border: 1px solid var(--border); border-left: 3px solid var(--green); background: var(--surface2);
106-
border-radius: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 11px; transition: all .25s;
107+
padding: 8px 10px; font-family: var(--mono); font-size: 11px; transition: all .25s;
107108
}
108109
.rec .top { display: flex; justify-content: space-between; gap: 8px; color: var(--text); }
109110
.rec .hash { color: var(--dim); font-size: 10px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
110111
.rec .hash b { color: var(--cyan); font-weight: 400; }
111112
.rec.blocked { border-left-color: var(--yellow); }
112-
.rec.broken { border-left-color: var(--red); border-color: var(--red); background: rgba(248,113,113,.07); }
113+
.rec.broken { border-left-color: var(--red); border-color: var(--red); background: #fdece8; }
113114
.rec.broken .hash b { color: var(--red); }
114-
.rec.tampered { border-left-color: var(--red); border-color: var(--red); background: rgba(248,113,113,.14); }
115-
.rec .tag { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; background: rgba(74,222,128,.15); color: var(--green); }
116-
.rec.blocked .tag { background: rgba(251,191,36,.15); color: var(--yellow); }
117-
.rec.tampered .tag, .rec.broken .tag { background: rgba(248,113,113,.15); color: var(--red); }
115+
.rec.tampered { border-left-color: var(--red); border-color: var(--red); background: #fbdcd5; }
116+
.rec .tag { font-size: 9.5px; padding: 1px 6px; border: 1px solid var(--text); color: var(--text); font-weight: 600; }
117+
.rec.blocked .tag { border-color: var(--dim); color: var(--dim); }
118+
.rec.tampered .tag, .rec.broken .tag { border-color: var(--red); color: var(--red); }
118119
.chain-empty { color: var(--dim); font-family: var(--mono); font-size: 11.5px; padding: 14px 4px; }
119120
.chain-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
120121
.mini {
121-
background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 6px;
122+
background: transparent; border: 1px solid var(--border); color: var(--text);
122123
padding: 6px 11px; font-size: 11.5px; font-family: var(--mono); cursor: pointer;
123124
}
124-
.mini:hover:not(:disabled) { border-color: var(--yellow); }
125+
.mini:hover:not(:disabled) { border-color: var(--text); }
125126
.mini:disabled { opacity: .4; cursor: not-allowed; }
126127
.verdict { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; min-height: 17px; }
127128

128129
/* Stats */
129130
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
130-
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
131-
.stat .v { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--yellow); }
131+
.stat { background: var(--surface); border: 1px solid var(--border); padding: 12px; text-align: center; }
132+
.stat .v { font-family: var(--font, inherit); font-size: 20px; font-weight: 800; color: var(--text); }
132133
.stat .k { color: var(--dim); font-size: 10.5px; margin-top: 3px; letter-spacing: .5px; text-transform: uppercase; }
133134

134135
/* CTA */
135-
.cta-box { margin-top: 40px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
136+
.cta-box { margin-top: 40px; text-align: center; background: #201e1d; color: #f3f2f2; border: 2px solid var(--border); padding: 28px; }
136137
.cta-box h2 { font-size: 20px; margin-bottom: 8px; }
137-
.cta-box p { color: var(--dim); font-size: 13.5px; margin-bottom: 16px; }
138+
.cta-box p { color: #b8b5b3; font-size: 13.5px; margin-bottom: 16px; }
138139
.cta-box code {
139-
display: inline-block; background: #0d1117; border: 1px solid var(--border); border-radius: 8px;
140-
padding: 11px 18px; font-family: var(--mono); font-size: 13px; color: var(--green);
140+
display: inline-block; background: #f3f2f2; border: none;
141+
padding: 11px 18px; font-family: var(--mono); font-size: 13px; color: #201e1d;
141142
}
142143
.foot { text-align: center; color: var(--dim); font-size: 11.5px; margin-top: 26px; line-height: 1.7; }
143144
</style>
@@ -146,7 +147,7 @@
146147

147148
<nav class="nav">
148149
<div class="nav-inner">
149-
<a href="https://airblackbox.ai/" class="nav-logo">AIR <span>Blackbox</span></a>
150+
<a href="https://airblackbox.ai/" class="nav-logo"><svg width="24" height="24" viewBox="0 0 96 96" fill="none"><path d="M48 8 L82.6 28 L82.6 68 L48 88 L13.4 68 L13.4 28 Z" stroke="#201e1d" stroke-width="9"/><circle cx="48" cy="48" r="11" fill="#201e1d"/></svg>airblackbox</a>
150151
<div class="nav-links">
151152
<a href="https://airblackbox.ai/">Home</a>
152153
<a href="https://airblackbox.ai/demo/hub">Demos</a>
@@ -192,9 +193,9 @@ <h1>The AIR Platform, <span>live</span></h1>
192193
<div class="grid">
193194
<div class="term">
194195
<div class="term-bar">
195-
<div class="dot" style="background:#ff5f57"></div>
196-
<div class="dot" style="background:#febc2e"></div>
197-
<div class="dot" style="background:#28c840"></div>
196+
<div class="dot" style="background:#6b6866"></div>
197+
<div class="dot" style="background:#8a8785"></div>
198+
<div class="dot" style="background:#c9c6c4"></div>
198199
<span class="term-title">air-platform — zsh</span>
199200
</div>
200201
<div class="term-body" id="term"><span class="d">Click </span><span class="y">1 · Boot the stack</span><span class="d"> to begin.</span>

0 commit comments

Comments
 (0)