CloudThinker

Overview

CloudThinker is an AI-powered agentic operations platform designed for cloud infrastructure teams seeking intelligent automation and real-time visibility. The design system embodies Cyberpunk Minimalism—a movement that pairs austere, high-contrast dark interfaces with neon accent colors to convey technological sophistication and precision. The visual language uses a deep teal-to-black gradient background (#121212 to #0a0a0a) pierced by vibrant cyan (#10f9f1), electric blue (#2cc0f2), and lime-green (#54f3a6) accents, evoking a sense of clarity, speed, and intelligent control. The UI feels both futuristic and functional, transforming complex cloud operations into an intuitive, visually striking experience.

The brand voice is direct, technical, and confident—never verbose, always precise. CloudThinker speaks to engineers and operators in their language: actionable insights, clear metrics, and zero ambiguity. Example sentence: 'Your agents orchestrated 47 deployments with zero failures—cost optimized by 23%.' The tone avoids marketing hyperbole; instead, it delivers data-driven clarity wrapped in a premium, forward-thinking aesthetic.

Colors

The color system is built on a dark-first philosophy with three primary accent families: Cyan (primary, #10f9f1) for core actions and focus states, Electric Blue (secondary, #2cc0f2) for supporting information and secondary CTAs, and Lime Green (tertiary, #54f3a6) for success states and highlights. The surface stack ranges from near-black (#0a0a0a for surface-dim) through mid-tone charcoal (#161616 for surface-container) to lighter grays (#2a2a2a for surface-container-highest), providing subtle depth without sacrificing contrast. Primary (#10f9f1) is reserved exclusively for the most important interactive elements—primary buttons, active focus rings (applied as 0 0 0 3px rgba(16, 249, 241, 0.1)), and brand-critical links. Secondary (#2cc0f2) supports secondary buttons, informational badges

Typography

The type system uses Poppins across all scales, chosen for its geometric clarity and contemporary weight distribution. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight, -0.02em) and Headline-md (30px, 600 weight, -0.01em) structure major sections and modal titles. Body-lg (18px, 400 weight, 0.01em) and Body-md (16px, 400 weight, 0.01em) handle primary and secondary body copy, with consistent 24px line-height for readability over the dark background. Label-md (14px, 500 weight, 0.01em) and Label-sm (12px, 500 weight, 0.05em) are applied to buttons, badges, and form labels. On small labels over busy or gradient backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to maintain legibility. All headline weights (60

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on desktop and fluid on mobile (full-width with 24px gutter padding). The page rhythm is built on a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for component internal spacing, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The authentication page uses a split-screen layout (50vw left hero, 50vw right form) on desktop, collapsing to a single-column stack on mobile. Form containers maintain a max-width of 400px to optimize input field readability. Whitespace is generous but purposeful: 40px vertical rhythm between major sections, 24px between form fields, and 12px between label and input. This spacing creates v

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background layering rather than dramatic drop-shadows. Level 1 (Base): The background is a smooth dark gradient (from #121212 to #0a0a0a) with optional subtle grain texture (opacity 2–3%) to prevent flatness. Level 2 (Standard Cards): Cards use surface-container (#161616) with a 1px border at outline (#4b5563), paired with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4). Level 3 (Elevated/Modals): Modals and floating panels use surface-container-high (#1f1f1f) with a 1px border at primary (#10f9f1) on focus, and box-shadow: 0 16px 40px

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are applied strategically to soften the austere dark interface while maintaining precision. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a modern, approachable feel without excessive roundness. Cards and containers use xl (1.5rem / 24px) for a premium, breathing quality. Input fields use DEFAULT (0.5rem / 8px) for a tighter, more utilitarian appearance—this distinction signals input areas as functional rather than decorative. Badges and pills use full (9999px) for maximum roundness, emphasizing their role as ligh

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#10f9f1) background with {colors.on-primary} (#0a1f1e) text, 12px 24px padding, 48px height, and {rounded.lg} (1rem). On hover, the background transitions to {colors.primary-fixed-dim} (#10f9f1 at 90% opacity) over 200ms with cubic-bezier(0.2, 0, 0.38, 0.9) easing. Focus state adds a 3px spread ring at rgba(16, 249, 241, 0.1). Button-secondary uses a transparent background with 1px border at {colors.outline} (#4b5563), text in {colors.primary}, and on hover transitions to {colors.surface-container-high} (#1f1f1f) with border upgraded to {colors.primary}. Button-ghost uses rgba(16, 249, 241, 0.08) background, transitioning to rgba(16, 249, 241, 0.15) on hover—ideal for tertia

Do's and Don'ts

**Do**

• Do use {colors.primary} (#10f9f1) exclusively for primary CTAs, focus rings, and brand-critical interactive elements—never dilute its impact with secondary uses.
• Do maintain at least 44px height for all touch targets (buttons, inputs, list items) to ensure mobile accessibility and comfortable interaction.
• Do apply the cubic-bezier(0.2, 0, 0.38, 0.9) easing curve to all interactive transitions (hover, focus, active states) for a consistent, snappy feel.
• Do use {spacing.md} (24px) as the default vertical rhythm between major sections and {spacing.sm} (12px) between form fields to create visual breathing room.
• Do layer dark surfaces using the surface-container stack (lowest → low → DEFAULT → high → highest) rather than arbitrary grays to maintain systematic depth.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or decorative elements—reserve it for interactive states and focus indicators only.
• Don't apply shadows larger than 40px blur radius; the system prioritizes clarity and precision over dramatic depth.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't reduce the contrast of on-surface text (#e5e7eb) below WCAG AA standards (4.5:1 minimum) when placed on dark backgrounds.
• Don't animate transitions faster than 200ms or slower than 400ms; the system uses cubic-bezier(0.2, 0, 0.38, 0.9) for a responsive, premium feel.