e5a817a0ca
- Hero: reduced padding, centered glow effect properly - Sections: max-width 960px for better wide-screen centering - Features: 2×2 grid (was auto-fit causing orphaned 4th card) - Roadmap: 4-column grid (was flex causing wrap issues) - Diagram: centered with display:block + margin:auto - Philosophy: 3-column grid (was auto-fit) - All grids: proper responsive breakpoints at 768px and 1024px - Tighter vertical spacing throughout
380 lines
No EOL
16 KiB
HTML
380 lines
No EOL
16 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.">
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||
<link rel="canonical" href="https://speckl.scoble.me/">
|
||
<meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
|
||
<meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://speckl.scoble.me/">
|
||
<meta property="og:image" content="https://speckl.scoble.me/favicon.svg">
|
||
<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;
|
||
--max-width: 960px;
|
||
}
|
||
|
||
* { 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 ===== */
|
||
.hero {
|
||
padding: 6rem 2rem 5rem;
|
||
text-align: center;
|
||
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 50%; width: 800px; height: 800px;
|
||
transform: translate(-50%, -40%);
|
||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||
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;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-tagline {
|
||
font-size: clamp(1.05rem, 2.5vw, 1.3rem);
|
||
color: var(--text-muted);
|
||
margin-bottom: 2rem;
|
||
font-weight: 300;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-cta {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ===== BUTTONS ===== */
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||
padding: 0.75rem 1.5rem; border-radius: 0.5rem;
|
||
font-size: 0.95rem; 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); }
|
||
|
||
/* ===== SECTIONS ===== */
|
||
section {
|
||
padding: 4rem 2rem;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
section + section { border-top: 1px solid var(--border); }
|
||
|
||
h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--text); }
|
||
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent); }
|
||
p { color: var(--text-muted); margin-bottom: 1rem; }
|
||
|
||
/* ===== FEATURES (2×2 grid) ===== */
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.25rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
border-radius: 0.75rem; padding: 1.25rem;
|
||
transition: border-color 0.2s ease;
|
||
}
|
||
.feature-card:hover { border-color: var(--accent); }
|
||
|
||
/* ===== CODE BLOCK ===== */
|
||
.code-block {
|
||
background: var(--code-bg); border: 1px solid var(--border);
|
||
border-radius: 0.75rem; padding: 1.25rem; margin: 1.5rem 0;
|
||
overflow-x: auto;
|
||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||
font-size: 0.85rem; line-height: 1.65;
|
||
}
|
||
.code-block pre {
|
||
margin: 0; padding: 0; background: transparent; border: none;
|
||
font-family: inherit; font-size: inherit; line-height: inherit;
|
||
white-space: pre; overflow-x: auto;
|
||
}
|
||
.code-block .kw { color: #ff79c6; }
|
||
.code-block .ty { color: #8be9fd; }
|
||
.code-block .st { color: #f1fa8c; }
|
||
.code-block .cm { color: #6272a4; }
|
||
|
||
/* ===== ARCHITECTURE DIAGRAM ===== */
|
||
.diagram-container { margin: 1.5rem 0; }
|
||
.diagram-container h3 {
|
||
text-align: center;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ===== PHILOSOPHY ===== */
|
||
.philosophy-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.5rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
.philosophy-item { text-align: center; }
|
||
.philosophy-icon {
|
||
width: 44px; height: 44px; margin: 0 auto 0.75rem;
|
||
background: var(--bg-elevated); border: 1px solid var(--border);
|
||
border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
/* ===== ROADMAP ===== */
|
||
.roadmap {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 0;
|
||
margin-top: 1.5rem;
|
||
}
|
||
.roadmap-phase {
|
||
padding: 1.25rem;
|
||
background: var(--bg-card); border: 1px solid var(--border);
|
||
}
|
||
.roadmap-phase + .roadmap-phase { border-left: none; }
|
||
.roadmap-phase:first-child { border-radius: 0.5rem 0 0 0.5rem; }
|
||
.roadmap-phase:last-child { border-radius: 0 0.5rem 0.5rem 0; }
|
||
.roadmap-phase h4 {
|
||
color: var(--accent); font-size: 0.8rem; text-transform: uppercase;
|
||
letter-spacing: 0.05em; margin-bottom: 0.4rem;
|
||
}
|
||
.roadmap-phase p { font-size: 0.85rem; margin: 0; }
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer {
|
||
text-align: center; padding: 2.5rem 2rem;
|
||
border-top: 1px solid var(--border);
|
||
color: var(--text-muted); font-size: 0.85rem;
|
||
}
|
||
footer a { color: var(--accent); text-decoration: none; }
|
||
footer a:hover { text-decoration: underline; }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 768px) {
|
||
.features { grid-template-columns: 1fr; }
|
||
.philosophy-grid { grid-template-columns: 1fr; }
|
||
.roadmap { grid-template-columns: 1fr; }
|
||
.roadmap-phase { border-radius: 0 !important; }
|
||
.roadmap-phase + .roadmap-phase { border-left: 1px solid var(--border); border-top: none; }
|
||
.roadmap-phase:first-child { border-radius: 0.5rem 0.5rem 0 0 !important; }
|
||
.roadmap-phase:last-child { border-radius: 0 0 0.5rem 0.5rem !important; }
|
||
}
|
||
|
||
@media (min-width: 769px) and (max-width: 1024px) {
|
||
.features { grid-template-columns: repeat(2, 1fr); }
|
||
.roadmap { grid-template-columns: repeat(2, 1fr); }
|
||
.roadmap-phase:nth-child(2) { border-radius: 0 0.5rem 0 0; }
|
||
.roadmap-phase:nth-child(3) { border-radius: 0 0 0 0.5rem; border-top: none; border-left: 1px solid var(--border); }
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero { padding: 4rem 1.25rem 3rem; }
|
||
.hero h1 { font-size: 2rem; }
|
||
.hero-tagline { font-size: 1rem; }
|
||
.btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
|
||
section { padding: 3rem 1.25rem; }
|
||
.code-block { padding: 1rem; font-size: 0.8rem; }
|
||
h2 { font-size: 1.4rem; }
|
||
}
|
||
</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://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
|
||
<a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
|
||
<a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord</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="diagram-container">
|
||
<h3>System Architecture</h3>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; display: block; margin: 0 auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
|
||
<defs>
|
||
<marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
|
||
<polygon points="0 0, 10 3.5, 0 7"/>
|
||
</marker>
|
||
</defs>
|
||
<!-- Orchestrator -->
|
||
<rect x="170" y="15" width="260" height="65" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
|
||
<text x="300" y="45" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="15" font-weight="bold">Orchestrator</text>
|
||
<text x="300" y="63" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="11">Accepts Specks, decomposes tasks</text>
|
||
<!-- Arrow: Orchestrator → Team Lead Verification -->
|
||
<line x1="220" y1="80" x2="165" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
|
||
<!-- Arrow: Orchestrator → Team Lead Codegen -->
|
||
<line x1="380" y1="80" x2="435" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
|
||
<!-- Team Lead: Verification -->
|
||
<rect x="60" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="2"/>
|
||
<text x="165" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
|
||
<text x="165" y="197" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="12">Verification</text>
|
||
<!-- Team Lead: Codegen -->
|
||
<rect x="330" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="2"/>
|
||
<text x="435" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
|
||
<text x="435" y="197" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="12">Codegen</text>
|
||
<!-- Arrow: Team Lead Verification → Z3 SME -->
|
||
<line x1="165" y1="210" x2="165" y2="250" stroke="#f59e0b" stroke-width="2" marker-end="url(#arr)"/>
|
||
<!-- Arrow: Team Lead Codegen → TypeScript SME -->
|
||
<line x1="435" y1="210" x2="435" y2="250" stroke="#10b981" stroke-width="2" marker-end="url(#arr)"/>
|
||
<!-- SME: Z3 -->
|
||
<rect x="60" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="1.5"/>
|
||
<text x="165" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Z3 SME</text>
|
||
<text x="165" y="295" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="11">(verify)</text>
|
||
<!-- SME: TypeScript -->
|
||
<rect x="330" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="1.5"/>
|
||
<text x="435" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">TypeScript SME</text>
|
||
<text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<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. Every spec includes <strong>provenance</strong>: traceability to regulations, design decisions, and source conversations — embedded in the spec, not added later.</p>
|
||
|
||
<div class="code-block"><pre><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
|
||
}</pre></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 A — Now</h4>
|
||
<p><strong>Open Standard:</strong> SpeckDL language, Dark Provenance methodology, reference implementations.</p>
|
||
</div>
|
||
<div class="roadmap-phase">
|
||
<h4>Phase B — Parallel</h4>
|
||
<p><strong>Consulting:</strong> Hands-on engagements with regulated-industry teams.</p>
|
||
</div>
|
||
<div class="roadmap-phase">
|
||
<h4>Phase C — 3–9mo</h4>
|
||
<p><strong>SaaS:</strong> Spec editor, live Z3 verification, provenance graph browser.</p>
|
||
</div>
|
||
<div class="roadmap-phase">
|
||
<h4>Phase D — 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://codeberg.org/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> |