Confluent DESIGN.md

Data-streaming platform design with bright coral energy, dark product framing, and concise technical storytelling. Confluent’s current site balances cloud-native momentum with enterprise readability.

1. Visual Theme & Atmosphere

Overall Aesthetic

Confluent communicates real-time data infrastructure with urgency and clarity. The system should feel technically serious, but also modular and easy to navigate across many use cases and product pathways.

Mood & Feeling

• Innovative: streaming and AI ideas should feel current
• Credible: the platform must read as enterprise-grade
• Energetic: bright accent color creates forward motion
• Modular: capability breadth should feel grouped, not sprawling
• Technical: product frames and proof need to feel real

Design Density

Medium density. Confluent pages cover many capabilities, but they keep readability through strong sectioning and repeated module patterns.

Visual Character

• Coral-red accent as the strongest brand cue
• White content surfaces balanced by dark technical frames
• Short technical headlines and capability cards
• Clear CTA rhythm for demos, trials, and product exploration

2. Color Palette & Roles

Core Brand Colors

Neutral and Dark Surfaces

Supportive Colors

Color Usage Rules

• Use coral as the clearest brand and action signal.
• Let neutral surfaces carry most layout structure.
• Use dark product frames to signal technical depth and demo realism.

3. Typography Rules

Font Stack

css/* Modern data-platform sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Confluent typography should feel current, technical, and concise. The hierarchy needs to help users scan platform breadth without fatigue.

Practical Rules

• Keep headlines short and momentum-oriented.
• Use modular body copy chunks rather than long essays.
• Use mono for technical snippets and code-adjacent values.

4. Component Stylings

Buttons

Primary Button

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

.button-primary:hover {
  background: #E84A32;
  border-color: #E84A32;
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #132238;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #132238;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  font: 400 16px/1.2 Inter, sans-serif;
}

Cards and Product Frames

Feature Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
}

Dark Product Frame

css.product-frame {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Break the platform story into clear capability and use-case bands.
• Repeat CTA patterns for demo, trial, and product exploration.
• Use product screenshots and proof blocks to reinforce credibility.
• Keep the experience scannable even when broad.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 8px 18px rgba(19, 34, 56, 0.08);
}

.shadow-dark {
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.18);
}

Depth Rules

• Use white cards and dark frames intentionally.
• Let screenshots and real UI add technical richness.
• Keep the main layout airy and uncluttered.

7. Do's and Don'ts

Do

• Use coral as the main action and brand cue.
• Keep platform breadth modular.
• Use dark frames to anchor technical storytelling.
• Preserve clear CTA hierarchy and visual rhythm.
• Make technical concepts feel manageable.

Don't

• Flood the interface with bright accents.
• Turn product narratives into vague AI visual effects.
• Overload single cards with too much text.
• Let screenshots feel detached from surrounding layout.

8. Responsive Behavior

Responsive Rules

• Stack feature cards and product frames cleanly on smaller screens.
• Keep demo and trial actions visible early in the flow.
• Simplify proof density before shrinking type too far.
• Preserve strong card and section boundaries on mobile.

Mobile Character

Confluent mobile should still feel energetic and technical. The coral-led hierarchy and modular product story should remain strong even when vertically stacked.

9. Agent Prompt Guide

Quick Reference

• Mood: innovative, technical, modular
• Primary accent: coral #FF5F46
• Core structure: light neutral base with dark product frames
• Typography: concise modern enterprise sans
• Components: pill CTAs, feature cards, dark showcases

Prompt Snippet

textDesign this interface in the style of Confluent’s current data streaming platform website. Use coral-red (#FF5F46) for primary emphasis, clean neutral surfaces, dark product showcase frames, and concise modern typography. The result should feel energetic, cloud-native, and technically credible without becoming noisy.