Celesto AI

Overview

Celesto AI is a developer-centric platform for building and deploying AI agents with hardware-isolated cloud sandboxes. The design system embraces a "Technical Retro-Futurism" aesthetic—combining the raw authenticity of terminal interfaces with contemporary dark-mode sophistication. The brand personality is direct, precise, and unapologetically technical: it speaks to engineers who value transparency, control, and real infrastructure. The UI evokes the feeling of commanding powerful machines through clean, monospace-driven interfaces while maintaining visual warmth through strategic use of vibrant accent colors (primary orange-red #ff4d4d, secondary purple #c792ea, tertiary blue #0082fb). Voice example: "Deploy your agent in seconds. Each one gets a real machine, not a simulation."

Colors

The color system is built on a pure black canvas (surface: #000000) with a carefully calibrated grayscale stack for depth and contrast. Primary accent is a high-saturation orange-red (#ff4d4d) used exclusively for call-to-action buttons, critical interactions, and brand moments—this color commands attention on the dark background and maintains WCAG AAA contrast (ratio 8.5:1 against black). Secondary accent purple (#c792ea) and tertiary blue (#0082fb) provide supporting visual hierarchy for secondary actions, badges, and informational elements. The on-surface text is a cool off-white (#f8fafc) that reduces eye strain in dark environments while maintaining 15:1 contrast against the black background. Surface containers use a stepped grayscale from #0a0a0a (surface-dim) through #3a3a3a (surfac

Typography

The type system uses three distinct typefaces to reinforce information hierarchy and brand personality. Press Start 2P (display level, 72px, 400 weight) is reserved for hero headlines and brand moments, delivering retro-futuristic energy through its pixel-grid aesthetic. Instrument Serif (headline-lg/md, 48px–32px, 400 weight) provides elegant, measured typography for section headings and narrative copy, creating visual contrast against the technical interface. Instrument Sans (title-lg, 20px, 600 weight) bridges the gap between serif elegance and sans-serif efficiency for card titles and UI labels. Inter (body-lg/md, 18px–16px, 400 weight) handles body copy and descriptions with excellent readability at small sizes. JetBrains Mono (label-md/sm, 13px–12px, 400–500 weight) is used for code

Layout

The layout uses a 12-column grid system with a max-width of 1400px, allowing flexible content scaling from mobile (single column) to desktop (multi-column). The gutter spacing is consistently 24px (md spacing unit), creating predictable rhythm and breathing room. Section separation uses lg spacing (40px) for major content breaks and md spacing (24px) for subsections, establishing a clear visual hierarchy. The hero section spans full-width with asymmetric content placement: the terminal mockup occupies the left 40% of the viewport, while the headline and copy occupy the right 60%, creating dynamic visual balance. Container padding follows the gutter rule (24px on desktop, 16px on tablet, 12px on mobile) to maintain consistent margins. The design favors generous whitespace around interactive

Elevation & Depth

Depth is conveyed through layered shadows and subtle background color shifts rather than dramatic z-index stacking. Level 1 (Base): pure black background (surface: #000000) with no shadow. Level 2 (Standard Cards): surface-container (#1a1a1a) background with a 1px border at surface-container-highest (#3a3a3a) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) to separate from the canvas. Level 3 (Elevated/Modals): surface-container-high (#2a2a2a) background with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2) to create a distinct focus layer. Terminal cards use a semi-transp

Shapes

The shape philosophy is "Technical Precision with Warmth." Most interactive elements use a 4px border-radius (rounded.md) to signal they are clickable while maintaining the sharp, technical aesthetic of the brand. Buttons and input fields use 4px (rounded.md) for consistency with terminal-style interfaces. Cards and elevated surfaces use 6px (rounded.lg) to create slightly more breathing room and visual softness. Terminal mockups and code blocks use a full rounded pill style (rounded.full, 9999px) to evoke the classic Mac OS terminal window aesthetic, creating a nostalgic callback to retro com

Components

Action Elements Buttons are the primary interaction surface and use a strict two-tier system. Primary buttons (button-primary) use the brand accent orange-red (#ff4d4d) with 12px vertical and 32px horizontal padding, 4px border-radius, and 600 font-weight in JetBrains Mono at 13px. On hover (button-primary-hover), the background shifts to the lighter primary-container (#ff6b5b) with a 200ms transition. Secondary buttons (button-secondary) use a transparent background with a 1px border at outline-variant (#505050) and on-surface text (#f8fafc); on hover, the background fills with surface-container-high (#2a2a2a) and text shifts to primary (#ff4d4d), creating a visual "activation" effect. Ghost buttons (button-ghost) use a semi-transparent dark overlay (rgba(39, 39, 42, 0.4)) at 10px ver

Do's and Don'ts

**Do**

• Do use the primary orange-red (#ff4d4d) exclusively for high-priority CTAs and critical interactions—it is the brand's signature accent and must never be diluted.
• Do maintain the dark background (surface: #000000) as the dominant canvas; it reduces eye strain for developer audiences and creates maximum contrast for accent colors.
• Do use JetBrains Mono for all code snippets, terminal output, and technical labels to reinforce the developer-first positioning and authenticity.
• Do apply 24px (md) gutter spacing consistently across all sections to create predictable rhythm and breathing room.
• Do use the stepped grayscale surface stack (surface-dim through surface-container-highest) to create subtle depth without introducing color noise.
• Do ensure all interactive elements have a minimum height of 44px and padding of at least 10px vertical × 16px horizontal for touch accessibility.
• Do use 200ms cubic-bezier(0.4, 0, 0.2, 1) easing for all state transitions to feel responsive and polished.

**Don't**

• Don't use the primary accent color (#ff4d4d) for non-interactive elements or backgrounds—reserve it for buttons, links, and focus states only.
• Don't introduce new accent colors beyond primary (#ff4d4d), secondary (#c792ea), and tertiary (#0082fb); the system is intentionally limited to maintain visual clarity.
• Don't use system fonts or generic sans-serif; always specify Inter (body), JetBrains Mono (code), or the serif/sans-serif display faces to maintain brand consistency.
• Don't reduce padding below 10px vertical × 16px horizontal on buttons or inputs; the interface must remain touch-friendly and not cramped.
• Don't apply shadows with blur radius greater than 16px or opacity greater than 0.2 on standard cards; excessive shadow creates visual noise on the dark background.
• Don't use light backgrounds or light text on light backgrounds anywhere in the interface; the dark-mode foundation is non-negotiable for brand identity.
• Don't animate state changes faster than 150ms or slower than 300ms; the interface must feel responsive without feeling jarring or sluggish.