Design
Reference architecture
A blueprint scoped to your constraints, not a generic template.
- Multi-tenancy model
- Network & ingress design
- Cost guardrails
Design system · v1
The shape of
Stakater.
The reference implementation of every primitive in design.md.
When you redesign a page, this is the gold standard to study.
SRE on-call · 24/7
Tokens
Palette
Duotone canvas — purple and off-white — with a single dimmed-orange accent at #F25533.
background.dark
#1A0D32
background.dark-deep
#0A0614
background (main)
#F5F5F5
background.alt
#E8E8E8
brand.red
#F25533
brand.red-dark
#D83C1E
surface.border
#D9D9D9
text.secondary
#5a5668
Type
Type scale
Hero H1 · 44/60/68 · tracking -1.8px Platform engineering
Section H2 · 32/40 Kubernetes, operated
Card H3 · 20/22 Managed OpenShift
Body · 16 · max 60ch Body copy stays at 15–16px with generous line-height and a maximum measure of 58–60 characters, so the eye never has to leap across the page.
Primitives
Eyebrows, tags & status
Eyebrow
Light tone
Muted tone
Small
MonoTag
Kubernetes OpenShift GitOps
StatusDot Live · streaming
Cards · light band
Square-corner cards
Operate
Day-2 operations
We run it so your engineers ship product, not platform.
- 24/7 SRE on-call
- Patching & upgrades
- Incident response
Included
What you get
- SLA
- 99.95%
- Onboarding
- 2–4 weeks
Cards · feature grid
Feature cards
The default marketing card (<FeatureCard>): warm cream rounded-[12px], a white icon plate, a hover-lift. One always-orange featured card per grid (often spanning two columns). For dense data use the square <Card> above.
Managed Platform
The always-orange featured card — gradient fill, white icon plate, dot-grid + glow. One per grid.
SOC2GitOps24/7
GitOps Delivery
Standard cream feature card with a white icon plate.
Security & Policy
Hover lifts the card and warms the title to brand-red.
Observability
Title pins to the bottom; the icon plate sits top-left.
Cards · purple band
Translucent panels & matrix
DIY vs Stakater
The honest comparison
Orange for Stakater, muted hairline for the alternative — never green/red.
- Borders carry weight, not shadows
- 4px corners read engineered
- Mono labels are the spine
| Capability | DIY | Stakater |
|---|---|---|
| Managed control plane | ||
| 24/7 SRE on-call | ||
| Self-hosted option | ||
| Platform engineers to hire |
How it works
Three steps, no carousel
01 / Step
Assess
We map your current platform, constraints, and the gap to where you need to be.
02 / Step
Design
A reference architecture and a migration path, scoped to your team and timeline.
03 / Step
Operate
Day-2 operations and 24/7 support so the platform stays healthy as you scale.
Global chrome · header
Mega-menu
Shown statically with the menu open for reference. The nav and content here are sample data — decoupled from src/data/navigation.ts. The live (deprecated) header still wraps this page from the top.
Global chrome · footer
Footer
The purple "stamp". Sample content — links, certs, and legal are placeholders.