316fe424ea
Static dark-mode site with hero, features, SpeckDL code example, philosophy section, and roadmap. Deployed via NixOS module to speckl.scoble.me with Cloudflare ACME DNS challenge.
272 lines
10 KiB
HTML
272 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Speckl — Spec-First Development with Dark Provenance</title>
|
|
<meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is a specification-first development system for regulated industries.">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0a0f;
|
|
--bg-elevated: #14141a;
|
|
--bg-card: #1a1a22;
|
|
--text: #e4e4e8;
|
|
--text-muted: #8a8a95;
|
|
--accent: #4a9eff;
|
|
--accent-glow: rgba(74, 158, 255, 0.3);
|
|
--border: #2a2a35;
|
|
--code-bg: #0d0d12;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.hero {
|
|
padding: 8rem 1.5rem 6rem;
|
|
text-align: center;
|
|
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%; left: -50%; width: 200%; height: 200%;
|
|
background: radial-gradient(circle at 30% 30%, var(--accent-glow) 0%, transparent 50%),
|
|
radial-gradient(circle at 70% 70%, rgba(100,100,255,0.1) 0%, transparent 40%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content { position: relative; max-width: 800px; margin: 0 auto; }
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 1rem;
|
|
background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: clamp(1.1rem, 3vw, 1.4rem);
|
|
color: var(--text-muted);
|
|
margin-bottom: 2.5rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 0.5rem;
|
|
padding: 0.875rem 1.75rem; border-radius: 0.5rem;
|
|
font-size: 1rem; font-weight: 500; text-decoration: none;
|
|
transition: all 0.2s ease; border: none; cursor: pointer;
|
|
}
|
|
|
|
.btn-primary { background: var(--accent); color: var(--bg); }
|
|
.btn-primary:hover { background: #3a8eef; transform: translateY(-1px); }
|
|
|
|
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
|
|
.btn-secondary:hover { background: var(--border); }
|
|
|
|
section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
|
|
section + section { border-top: 1px solid var(--border); }
|
|
|
|
h2 { font-size: 1.875rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text); }
|
|
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--accent); }
|
|
p { color: var(--text-muted); margin-bottom: 1rem; }
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--bg-card); border: 1px solid var(--border);
|
|
border-radius: 0.75rem; padding: 1.5rem;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
.feature-card:hover { border-color: var(--accent); }
|
|
|
|
.code-block {
|
|
background: var(--code-bg); border: 1px solid var(--border);
|
|
border-radius: 0.75rem; padding: 1.5rem; margin: 1.5rem 0;
|
|
overflow-x: auto;
|
|
font-family: 'SF Mono', Monaco, monospace;
|
|
font-size: 0.875rem; line-height: 1.7;
|
|
}
|
|
.code-block .kw { color: #ff79c6; }
|
|
.code-block .ty { color: #8be9fd; }
|
|
.code-block .st { color: #f1fa8c; }
|
|
.code-block .cm { color: #6272a4; }
|
|
|
|
.philosophy-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 2rem; margin-top: 2rem;
|
|
}
|
|
.philosophy-item { text-align: center; }
|
|
.philosophy-icon {
|
|
width: 48px; height: 48px; margin: 0 auto 1rem;
|
|
background: var(--bg-elevated); border: 1px solid var(--border);
|
|
border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.roadmap {
|
|
display: flex; gap: 0; margin-top: 2rem; flex-wrap: wrap;
|
|
}
|
|
.roadmap-phase {
|
|
flex: 1; min-width: 200px; padding: 1.5rem;
|
|
background: var(--bg-card); border: 1px solid var(--border);
|
|
}
|
|
.roadmap-phase:first-child { border-radius: 0.75rem 0 0 0.75rem; }
|
|
.roadmap-phase:last-child { border-radius: 0 0.75rem 0.75rem 0; }
|
|
.roadmap-phase + .roadmap-phase { border-left: none; }
|
|
.roadmap-phase h4 {
|
|
color: var(--accent); font-size: 0.875rem; text-transform: uppercase;
|
|
letter-spacing: 0.05em; margin-bottom: 0.5rem;
|
|
}
|
|
.roadmap-phase p { font-size: 0.9rem; margin: 0; }
|
|
|
|
footer {
|
|
text-align: center; padding: 3rem 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--text-muted); font-size: 0.875rem;
|
|
}
|
|
footer a { color: var(--accent); text-decoration: none; }
|
|
footer a:hover { text-decoration: underline; }
|
|
|
|
@media (max-width: 768px) {
|
|
.roadmap { flex-direction: column; }
|
|
.roadmap-phase, .roadmap-phase:first-child, .roadmap-phase:last-child {
|
|
border-radius: 0; border-left: 1px solid var(--border);
|
|
}
|
|
.roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
|
|
.roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="hero">
|
|
<div class="hero-content">
|
|
<h1>Speckl</h1>
|
|
<p class="hero-tagline">Spec-first development with dark provenance.<br>Write what your system should do. Prove it. Ship with full traceability.</p>
|
|
<div class="hero-cta">
|
|
<a href="https://os.scoble.me/forgejo/sscoble/speckl" class="btn btn-primary">Source Code</a>
|
|
<a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="what">
|
|
<h2>What is Speckl?</h2>
|
|
<p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
|
|
|
|
<div class="features">
|
|
<div class="feature-card">
|
|
<h3>🎯 Specification-First</h3>
|
|
<p>Write what your system should do in SpeckDL, a constraint-based specification language. Z3 proves your specs are consistent before any code exists.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>🔗 Dark Provenance</h3>
|
|
<p>Every function, every branch, every side effect links back to its source — a regulation, a design decision, a conversation. Invisible until needed, always complete.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>🤖 Multi-Agent System</h3>
|
|
<p>Orchestrator, team leads, and SMEs collaborate on specs. The harness scales automatically under load. No human coordination required.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h3>🛡️ Regulated by Design</h3>
|
|
<p>Speckl targets DO-178C, IEC 62304, ISO 26262, FDA 21 CFR 820. Compliance is structural, not bolted-on.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="speckdl">
|
|
<h2>SpeckDL: A Specification Language</h2>
|
|
<p>SpeckDL defines <em>what</em> a system does, not <em>how</em>. The compiler produces deterministic output: Z3 → Decision Structure → WASM. Same input, same output — every time.</p>
|
|
|
|
<div class="code-block">
|
|
<span class="kw">speck</span> <span class="ty">RetryHandler</span> {
|
|
input: { operation: Operation, maxRetries: Nat }
|
|
output: Result
|
|
<span class="cm">// Constraints the compiler proves via Z3</span>
|
|
constraint: maxRetries <= 5
|
|
constraint: backoff(delay(n)) == delay(n-1) * 2
|
|
constraint: totalDelay < 30s
|
|
<span class="cm">// Always-verified properties</span>
|
|
verify: always(implies(attempt > 1, delay > 0))
|
|
<span class="cm">// Dark provenance: where did this intent come from?</span>
|
|
provenance: { regulation: <span class="st">"DO-178C 6.4.2.2"</span> }
|
|
provenance: { design_decision: <span class="st">"ADR-0042"</span> }
|
|
source: conversation ref <span class="st">"slack://C123/456"</span>
|
|
review: manual
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="philosophy">
|
|
<h2>Why Specifications?</h2>
|
|
|
|
<div class="philosophy-grid">
|
|
<div class="philosophy-item">
|
|
<div class="philosophy-icon">📦</div>
|
|
<h3>Small and Stable</h3>
|
|
<p>Specs are orders of magnitude smaller than the code they generate. They change less often. The audit surface stays tractable.</p>
|
|
</div>
|
|
<div class="philosophy-item">
|
|
<div class="philosophy-icon">🔍</div>
|
|
<h3>Review the Boundary</h3>
|
|
<p>If Speck→WASM compilation preserves semantics, human review at the spec boundary satisfies assurance requirements.</p>
|
|
</div>
|
|
<div class="philosophy-item">
|
|
<div class="philosophy-icon">🤖</div>
|
|
<h3>AI-Generated, Human-Owned</h3>
|
|
<p>Agents generate code. Humans own specifications. The chain of custody for intent stays intact.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="roadmap">
|
|
<h2>Roadmap</h2>
|
|
|
|
<div class="roadmap">
|
|
<div class="roadmap-phase">
|
|
<h4>Phase D — Now</h4>
|
|
<p><strong>Open Standard:</strong> SpeckDL language, Dark Provenance methodology, reference implementations.</p>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<h4>Phase C — Parallel</h4>
|
|
<p><strong>Consulting:</strong> Hands-on engagements with regulated-industry teams.</p>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<h4>Phase A — 3-9mo</h4>
|
|
<p><strong>SaaS:</strong> Spec editor, live Z3 verification, provenance graph browser.</p>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<h4>Phase B — 9-18mo</h4>
|
|
<p><strong>Compliance API:</strong> Audit reports, traceability matrices.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>Speckl is open source under the <a href="https://os.scoble.me/forgejo/sscoble/speckl/src/branch/main/LICENSE">MIT License</a>.</p>
|
|
<p>Hosted at <a href="https://os.scoble.me">os.scoble.me</a> · Built by Scott Scoble / Greybeard Holdings</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|