Cloudstudio

Overview

Cloudstudio is an AI-native studio building production-grade AI agents, RAG pipelines, and Claude-powered products with 18+ years of operational expertise. The brand aesthetic embraces **Playful Maximalism**—a collision of bold, saturated color backgrounds (yellow #FFF48D, cyan #8ED8FF, electric purple #A3B1FF, coral #FFAFA3, mint #A9E8AE, pink #FFC0DD) paired with stark black typography and interactive micro-interactions that feel alive and responsive. The visual language evokes a sense of creative energy and technical confidence, where every interaction—from button hovers to theme switches—feels intentional and delightful. The brand personality is direct, unpretentious, and unapologetically bold: it ships, it works, and it doesn't apologize for taking up visual space. Voice: conversational yet authoritative, playful yet precise. Example: "We don't just call APIs. We ship agents that actually think."

Colors

The color system is built on a **multi-theme foundation** where the primary background (--bg) and accent (--accent) are identical, creating a unified, immersive canvas. The default theme uses a vibrant yellow (#FFF48D) as the dominant surface, with deep charcoal (#0E0E0C) as the primary text and interactive element color. This creates maximum contrast (WCAG AAA compliant) and ensures readability at any size. Secondary colors include a verdant green (#46C98B) for success states and confirmations, a soft sage (#D8DFAE) for tertiary accents, and a warm cream (#FAF7EA) for card backgrounds. The system supports six alternate themes—cielo (sky blue #8ED8FF), electrico (electric purple #A3B1FF), coral (#FFAFA3), menta (mint #A9E8AE), rosa (pink #FFC0DD), and melocoton (peach #FFD9A0)—each with it

Typography

The type system is anchored in **Bricolage Grotesque**, a geometric sans-serif that conveys both playfulness and technical precision. Display (137px, 700 weight, -0.02em tracking) is reserved for hero headlines and brand moments; headline-lg (56px, 700 weight) for section titles; headline-md (40px, 700 weight) for subsections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle content with generous line-height (28px and 24px respectively) for readability. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 600 weight, 0.03em tracking) are used for UI labels, buttons, and metadata. Geist Mono (14px, 400 weight) is used sparingly for code snippets and technical references. All interactive text (buttons, links) uses label-md weight 700 to signal affordance. Apply te

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1320px, centered on the viewport. The gutter is 24px, providing breathing room between sections. White-space is generous: lg spacing (40px) separates major sections, md spacing (24px) separates cards and components, and sm spacing (12px) separates inline elements. The hero section spans full-width with the background color extending edge-to-edge, creating an immersive entry point. Cards and containers use surface-container-lowest (#FAF7EA) with md spacing (24px) internal padding. The container-max-width of 1320px ensures content remains readable on ultra-wide displays while maintaining visual cohesion. Spacing tokens are applied consistently: use lg for section separation, md for component padding, sm for internal elemen

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than blur or glassmorphism. Level 1 (Base): the full-width background color (#FFF48D or theme variant) with no shadow. Level 2 (Standard Card): surface-container-lowest (#FAF7EA) with box-shadow: 0 4px 12px rgba(14, 14, 12, 0.08), creating a gentle lift. Level 3 (Elevated/Modals): surface-container-low (#F5F2E6) with box-shadow: 0 8px 30px rgba(14, 14, 12, 0.35), signaling prominence. Interactive elements (buttons, pills) use no shadow at rest but transition to Level 2 shadow on hover. The cookie banner uses Leve

Shapes

The shape language is **Rounded Maximalism**—a philosophy that softens the geometric precision of the grid with generous border-radius values. Buttons and pills use full (100px) border-radius, creating a capsule shape that feels friendly and approachable. Cards and containers use md (0.75rem / 12px) or lg (1rem / 16px) radius, balancing softness with structure. Input fields use DEFAULT (0.5rem / 8px) radius for subtle definition. The full radius is applied to interactive elements (pills, badges, theme switcher) to signal playfulness and interactivity. This contrasts with the stark, high-contra

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles: **Primary buttons** (background: #0E0E0C, color: #FFF48D, padding: 18px 32px, height: 56px, border-radius: 100px, font-weight: 700) are used for CTAs like "Book a call →" and "Let Dot drive →". On hover, the background shifts to primary-container (#3A3A30) with a 200ms ease transition. **Secondary buttons** (background: transparent, border: 2px solid #0E0E0C, color: #0E0E0C, padding: 11px 20px, height: 40px) are used for lower-priority actions like "Contact" or "Learn more". On hover, the background fills with surface-container-high (#E8E5D0). **Pill buttons** (background: #0E0E0C, color: #FFF48D, padding: 12px 24px, border-radius: 100px) are used for theme switchers and interactive toggles; on h

Do's and Don'ts

**Do**

• Do use the full border-radius (100px) on all interactive elements (buttons, pills, badges) to signal affordance and playfulness.
• Do apply label-md weight 700 to all button text to create visual hierarchy and ensure CTAs stand out.
• Do transition background colors and shadows over 200ms ease to make interactions feel responsive without being jarring.
• Do maintain the high contrast between primary (#0E0E0C) and on-primary (#FFF48D) for accessibility and visual impact.
• Do use the theme system to allow users to personalize their experience—each theme (cielo, electrico, coral, menta, rosa, melocoton) should feel cohesive and intentional.
• Do apply box-shadow: 0 8px 30px rgba(14, 14, 12, 0.35) to elevated elements (modals, banners) to create clear visual hierarchy.

**Don't**

• Don't use rounded corners smaller than md (12px) on cards or containers—the brand embraces softness, not minimalism.
• Don't apply shadows to buttons at rest; reserve shadows for hover states and elevated containers only.
• Don't mix font families within a single component; Bricolage Grotesque is the primary typeface, Geist Mono is reserved for code.
• Don't use colors outside the defined palette (primary, secondary, tertiary, error, surface stack) without explicit brand approval.
• Don't reduce letter-spacing on body text below 0em; the brand prefers generous tracking for readability.
• Don't apply opacity or transparency to primary (#0E0E0C) or on-primary (#FFF48D); use the full-saturation colors for maximum contrast.