Aiven DESIGN.md

Open source data infrastructure design with practical cloud clarity, warm orange accents, and production-ready service management surfaces.

1. Visual Theme & Atmosphere

Aiven should feel like managed data infrastructure that removes operational drag. The product language needs to support PostgreSQL, Kafka, ClickHouse, OpenSearch, MySQL, Valkey, metrics, backups, compliance, BYOC, and multi-cloud deployment without making the interface feel like raw cloud plumbing.

• Mood: reliable, practical, cloud-neutral, engineer-friendly, production-ready
• Density: medium-to-high for service consoles and usage tables
• Character: warm action accents, calm neutral surfaces, service cards, region/cloud metadata

2. Color Palette & Roles

Use orange for action and product emphasis. Use green strictly for healthy services, uptime, backup status, or successful changes.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #FF6B00;
  border-radius: 999px;
  background: #FF6B00;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.service-card {
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 18px;
}

.cloud-panel {
  border-radius: 20px;
  background: #FFF4E8;
  padding: 24px;
}

.input {
  min-height: 44px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0 14px;
}

5. Layout Principles

Organize around cloud, region, service type, plan, connection details, backups, observability, and compliance.

6. Depth & Elevation

css.shadow-card { box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06); }
.shadow-panel { box-shadow: 0 18px 42px rgba(17, 24, 39, 0.10); }

Use borders for console density and subtle elevation for onboarding, cloud selection, and service creation panels.

7. Do's and Don'ts

Do make managed services, cloud choice, SLA, and compliance visible. Do show service health clearly. Do not make multi-cloud controls look abstract. Do not hide cost, region, or backup state.

8. Responsive Behavior

Keep service actions and status controls at least 44px tall.

9. Agent Prompt Guide

Design like Aiven: practical managed open source data infrastructure, warm orange action accents, white service cards, cloud/region metadata, clear health and SLA states, and calm production console density.