platform architecture diagram infrastructure enterprise ai layers architecture platform layers diagram infrastructure enterprise stack platform architecture section tech stack diagram infrastructure overview section layered architecture visualization
Platform Architecture Base
Fetch pattern JSON:
curl https://webspire.de/patterns/platform/base.json base.html
<section class="ws-platform bg-[var(--ws-platform-bg)] py-24">
<div class="mx-auto max-w-7xl px-6">
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-[0.15em] text-[var(--ws-platform-accent)]">Architecture</p>
<h2 class="mt-4 text-balance text-3xl font-bold tracking-tight text-[var(--ws-platform-text)] sm:text-4xl">Powered by a deeply configurable platform</h2>
<p class="mx-auto mt-5 max-w-2xl text-base text-[var(--ws-platform-text-soft)]">One foundation. Every layer is replaceable, composable, and deployable in your own infrastructure.</p>
</div>
<!-- Architecture diagram -->
<div class="relative mt-16 overflow-hidden rounded-2xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-diagram-bg)] p-8 md:p-14">
<!-- Grid background -->
<div class="pointer-events-none absolute inset-0 opacity-30"
style="background-image: linear-gradient(var(--ws-platform-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ws-platform-grid-line) 1px, transparent 1px); background-size: 32px 32px;">
</div>
<!-- Diagram layers (top → bottom: Application → Orchestration → Models → Infrastructure) -->
<div class="relative space-y-3">
<!-- Layer: Application -->
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5">
<p class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-platform-text-muted)]">Application Layer</p>
<div class="flex flex-wrap gap-2">
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Web App</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Mobile SDK</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">API Integration</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Copilot Plugin</span>
</div>
</div>
<!-- Connector -->
<div class="flex justify-center">
<div class="h-4 w-px bg-[var(--ws-platform-border)]"></div>
</div>
<!-- Layer: Orchestration -->
<div class="rounded-xl border border-[var(--ws-platform-accent)]/30 bg-[var(--ws-platform-accent)]/5 p-5">
<p class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-platform-accent)]">Orchestration & Agents</p>
<div class="flex flex-wrap gap-2">
<span class="rounded-lg border border-[var(--ws-platform-accent)]/20 bg-[var(--ws-platform-accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">RAG Pipeline</span>
<span class="rounded-lg border border-[var(--ws-platform-accent)]/20 bg-[var(--ws-platform-accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Tool Calling</span>
<span class="rounded-lg border border-[var(--ws-platform-accent)]/20 bg-[var(--ws-platform-accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Multi-Agent</span>
<span class="rounded-lg border border-[var(--ws-platform-accent)]/20 bg-[var(--ws-platform-accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Guardrails</span>
<span class="rounded-lg border border-[var(--ws-platform-accent)]/20 bg-[var(--ws-platform-accent)]/10 px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Memory</span>
</div>
</div>
<!-- Connector -->
<div class="flex justify-center">
<div class="h-4 w-px bg-[var(--ws-platform-border)]"></div>
</div>
<!-- Layer: Models -->
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5">
<p class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-platform-text-muted)]">Model Layer</p>
<div class="flex flex-wrap gap-2">
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Foundation Model</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Fine-tuned Model</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Embedding Model</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Code Model</span>
</div>
</div>
<!-- Connector -->
<div class="flex justify-center">
<div class="h-4 w-px bg-[var(--ws-platform-border)]"></div>
</div>
<!-- Layer: Infrastructure -->
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5">
<p class="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--ws-platform-text-muted)]">Infrastructure</p>
<div class="flex flex-wrap gap-2">
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">On-Premise</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Private Cloud</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">Managed API</span>
<span class="rounded-lg border border-[var(--ws-platform-border)] bg-[var(--ws-platform-chip-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-platform-text)]">VPC Isolation</span>
</div>
</div>
</div>
</div>
<!-- Bottom metrics row -->
<div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5 text-center">
<p class="text-2xl font-bold text-[var(--ws-platform-text)]">99.9%</p>
<p class="mt-1 text-xs text-[var(--ws-platform-text-muted)]">Uptime SLA</p>
</div>
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5 text-center">
<p class="text-2xl font-bold text-[var(--ws-platform-text)]"><100ms</p>
<p class="mt-1 text-xs text-[var(--ws-platform-text-muted)]">P50 Latency</p>
</div>
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5 text-center">
<p class="text-2xl font-bold text-[var(--ws-platform-text)]">SOC 2</p>
<p class="mt-1 text-xs text-[var(--ws-platform-text-muted)]">Certified</p>
</div>
<div class="rounded-xl border border-[var(--ws-platform-border)] bg-[var(--ws-platform-layer-bg)] p-5 text-center">
<p class="text-2xl font-bold text-[var(--ws-platform-text)]">GDPR</p>
<p class="mt-1 text-xs text-[var(--ws-platform-text-muted)]">Compliant</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
platformarchitecturediagraminfrastructureenterpriseailayers
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | Yes | Section title describing the platform. |
| subtext | No | One-sentence description of the architecture. |
| diagram | Yes | Layered architecture cards with labeled chip groups. |
| metrics | No | Bottom row of KPI metrics (uptime, latency, certifications). |
Platform architecture section with a visual layered diagram on a subtle grid background. Four labeled layers (Application → Orchestration → Models → Infrastructure) connected by vertical lines. The highlighted middle layer (accent color) draws attention to the key differentiator. Bottom metrics row shows SLAs and certifications. Fully responsive, dark mode compatible.