CloudMinister

Overview

CloudMinister is a B2B cloud infrastructure provider serving Indian enterprises, startups, and developers with VPS hosting, dedicated servers, and managed cloud solutions. The design system embodies "Technical Confidence with Warmth"—a modern aesthetic that balances the authority of enterprise infrastructure with the approachability of a trusted partner. The visual language uses bold, saturated accent colors (golden-orange primary, vibrant teal secondary, electric blue tertiary) against a clean white canvas and a deep navy hero section, creating visual hierarchy that guides users from discovery to conversion. The brand personality is knowledgeable yet conversational: precise technical details paired with human-centered language. Example: "Deploy your Linux or Windows VPS in hours with guaranteed resources, 99.9% uptime SLA, and expert 24/7 support from CloudMinister."

Colors

The color system is built on a triadic accent palette layered over a neutral foundation, reflecting CloudMinister's multi-service positioning and technical sophistication. Primary (#ee9408, golden-orange) is the dominant call-to-action color, used exclusively on conversion buttons ('Buy Now'), pricing highlights, and key interactive elements—it commands attention without aggression. Secondary (#07c07e, vibrant teal) supports success states, positive confirmations, and secondary CTAs like 'Contact us', creating a complementary energy. Tertiary (#1062fe, electric blue) anchors technical features, trust badges, and premium tier indicators. The surface stack uses Bootstrap's gray palette: white (#ffffff) as the default canvas, with surface-container-low (#f8f9fa) for subtle section separation,

Typography

The type system uses a two-family pairing: Plus Jakarta Sans (weights 200–900) for headlines and labels, delivering geometric warmth and technical credibility; Public Sans (weights 100–700) for body and UI text, providing neutral readability at small sizes. Display (60px, weight 900, -0.04em tracking) is reserved for hero headlines like 'Scalable VPS Servers Fully Managed Always On', commanding the viewport with maximum impact. Headline-lg (48px, weight 900) is used for section titles and modal headers. Headline-md (32px, weight 700) breaks up content zones. Title-lg (24px, weight 600) labels feature cards and subsections. Body-lg (18px, weight 400, 28px line-height) is the default for marketing copy and long-form descriptions. Body-md (16px, weight 400, 24px line-height) is the standard f

Layout

The layout system uses a 12-column responsive grid with a max-width of 1320px (matching Bootstrap's lg breakpoint), ensuring content remains scannable on desktop while adapting fluidly to tablets and mobile. The gutter is fixed at 24px (3 × 8px unit), applied symmetrically to all container edges and between grid columns. Section separation uses lg spacing (40px) for major content blocks (hero, features, pricing, testimonials), md spacing (24px) for subsection breaks, and sm spacing (12px) for component-level padding. The hero section occupies 100vw width with 80px vertical padding and a deep navy background (#080f2c), creating a visual anchor that separates the navigation from the main content. Card-based layouts (service offerings, pricing tiers) use a 3-column grid on desktop, collapsing

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reinforces visual hierarchy without relying on color shifts. Level 1 (Base/Resting): no shadow or a minimal 1px shadow (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and input fields, keeping the interface flat and modern. Level 2 (Hover/Interactive): 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards on hover, buttons on focus, and dropdown panels, lifting elements 4–8px off the canvas. Level 3 (Elevated/Modal): 0 8px 24px rgba(0, 0, 0, 0.12) for modals, tooltips, and floating action buttons, creating clear separation from the bac

Shapes

The shape philosophy is 'Technical Precision with Approachability'—sharp enough to feel modern and authoritative, rounded enough to feel human and welcoming. Buttons use sm radius (0.25rem / 4px), creating a subtle roundness that avoids the softness of full rounding while maintaining a contemporary feel. Cards and containers use lg radius (1rem / 16px), balancing geometric clarity with organic warmth. Input fields use DEFAULT radius (0.5rem / 8px), a middle ground that feels both functional and refined. Badges and pills use full radius (9999px), emphasizing their role as discrete, self-contain

Components

Action Elements Buttons are the primary conversion drivers and use a consistent 44px height (12px vertical padding + 20px line-height) with 12px horizontal padding for label-md text. Primary buttons (#ee9408 background, white text) are reserved for high-intent CTAs like 'Buy Now' and 'Get Started', using sm radius (4px) and md elevation (0 3px 8px) to stand out. On hover, the background shifts to #ffa42f (primary-container) with a 200ms ease-out transition, signaling interactivity without changing shape or size. Secondary buttons (transparent background, #ee9408 border, #ee9408 text) are used for lower-intent actions like 'Learn More' or 'Contact us', maintaining visual hierarchy while offering an alternative path. Tertiary buttons (#1062fe border and text) are used for technical or pr

Do's and Don'ts

**Do**

• Do use primary (#ee9408) exclusively on high-intent CTAs like 'Buy Now' and 'Get Started'—never on decorative elements or secondary navigation.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and interactive elements to create clear depth hierarchy without relying on color shifts.
• Do pair Plus Jakarta Sans (headlines, labels) with Public Sans (body, UI text) to maintain geometric warmth in headlines while ensuring neutral readability in body copy.
• Do use lg spacing (40px) between major content sections (hero, features, pricing) to create visual breathing room and improve cognitive load.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to signal interactivity without jarring motion.

**Don't**

• Don't use primary (#ee9408) on body text, backgrounds, or decorative elements—reserve it exclusively for interactive components and conversion-critical UI.
• Don't apply shadows larger than lg elevation (0 8px 24px) on standard cards; reserve lg elevation for modals and floating elements to maintain hierarchy.
• Don't mix Plus Jakarta Sans and Public Sans within a single text block; use Plus Jakarta for all headlines and labels, Public Sans for all body and UI text.
• Don't use sm spacing (12px) between major sections; use lg spacing (40px) to create visual separation and improve scannability.
• Don't apply instant state changes (0ms transitions) on interactive elements; use 150–200ms ease-out to provide visual feedback and prevent perceived lag.