FacilCloud

Overview

FacilCloud is a cloud infrastructure provider delivering managed VPS, web hosting, and reseller hosting solutions to developers and businesses seeking reliability at competitive pricing. The design system embodies 'Technical Confidence'—a modern aesthetic that pairs deep navy backgrounds (evoking stability and technical depth) with vibrant orange accents (#ff6c2d) that signal energy, action, and forward momentum. The UI conveys precision and control: every interaction feels responsive, every surface intentional. The brand personality is direct and professional yet approachable—the voice avoids jargon bloat while maintaining technical credibility. Example: 'Your VPS scales instantly. No downtime, no surprises.'

The visual language prioritizes clarity and accessibility. Montserrat's geometric, open letterforms at 400–600 weight reinforce the brand's modern, no-nonsense character. The color palette is deliberately restrained: the light neutral surface (#f7f9f9) provides breathing room, while the orange primary and secondary blue (#337ab7) create a confident, energetic contrast. This system is built for rapid scanning and decision-making—users should understand their options within seconds.

Colors

The FacilCloud color system is organized around a high-contrast, action-oriented palette. Primary (#ff6c2d) is the brand's signature accent—a warm, saturated orange deployed on all call-to-action buttons, interactive links, and focus states. It commands attention without aggression, signaling 'click here' with confidence. Secondary (#337ab7) is a professional blue used for supporting interactive elements, badges, and secondary CTAs; it reinforces trust and technical competence. Tertiary (#fa1358) is a vivid pink-red reserved for alerts, error states, and high-priority notifications—it demands immediate attention.

The surface stack is anchored in a cool, light neutral (#f7f9f9) that serves as the default page background, reducing eye strain during extended use. Surface-container-highest (#

Typography

Montserrat is the sole typeface, chosen for its geometric clarity and strong personality at all weights. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand statements—it commands the page. Headline-lg (40px, 600 weight) is used for section titles and major content divisions. Headline-md (28px, 600 weight) breaks up subsections. Title-lg (20px, 600 weight) labels cards and form sections. Body-lg (18px, 400 weight, 28px line-height) is the default for long-form content and ensures 1.5x line-height for readability. Body-md (16px, 400 weight, 24px line-height) is used in forms, metadata, and compact layouts. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, maintaining visual weight despite smaller size. Label-sm (12px, 5

Layout

The layout system uses a 12-column grid with a max-width of 1280px, ensuring content remains scannable on all screen sizes. The default gutter is 24px, providing consistent breathing room between columns. Sections use 50px padding top and bottom (padding-top: 50px; padding-bottom: 50px) to create clear visual rhythm and separation. The light surface background (#f7f9f9) is the default canvas; white sections (background-color: #ffffff) are introduced strategically to break monotony and highlight key content blocks like forms and pricing tables. Container-form elements (forms, cards, modals) sit at 20px–30px padding with a consistent box-shadow (0 0 15px 0 rgba(49, 59, 81, 0.5)) to lift them off the background. Spacing scale: xs (4px) for micro-interactions, sm (12px) for compact layouts, md

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered depth. Level 1 (Base): The default surface (#f7f9f9) has no shadow; it is the ground plane. Level 2 (Cards & Forms): Standard cards and form containers use box-shadow: 0 0 15px 0 rgba(49, 59, 81, 0.5), a soft, spread shadow that suggests elevation without drama. This shadow is applied to .container-form and card components. Level 3 (Hover & Focus): On hover, cards transition to box-shadow: 0 16px 40px rgba(0,0,0,0.12), a larger, more diffuse shadow that indicates interactivity and in

Shapes

The shape philosophy is 'Technical Precision with Approachability'—sharp enough to feel modern and engineered, rounded enough to feel human. Buttons use border-radius: 9999px (full pill shape), signaling action and friendliness while maintaining a tech-forward aesthetic. Cards and form containers use border-radius: 1rem (16px), a moderate roundness that balances structure with softness. Input fields use border-radius: 0.5rem (8px), a subtle curve that distinguishes them from the page background without overwhelming. Modals and overlays use border-radius: 5px (from SweetAlert defaults), maintai

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background-color: #ff6c2d, padding: 12px 32px, height: 48px, border-radius: 9999px, and typography label-md (14px, 600 weight). On hover, the background transitions to #ff8c5a (primary-fixed-dim) over 200ms. On focus, a 3px box-shadow: 0 0 0 3px rgba(255, 108, 45, 0.29) appears around the button, maintaining focus visibility. Button-secondary uses a transparent background with a 2px solid border in #ff6c2d, same padding and height as primary. On hover, the background fills with #eeeeee (surface-container-high) while the border remains orange. All buttons use cursor: pointer and transition: background-color 200ms ease-in-out to signal interactivity.

Containers & Surfaces Cards use background-color: #

Do's and Don'ts

**Do**

• Do use the orange primary (#ff6c2d) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it is the visual anchor that guides user attention.
• Do maintain the 50px section padding (top and bottom) to create consistent visual rhythm and prevent content from feeling cramped or overwhelming.
• Do apply the form-shadow (0 0 15px 0 rgba(49, 59, 81, 0.5)) to all elevated containers (forms, cards, modals) to create clear visual hierarchy and lift them from the background.
• Do use Montserrat at 400 weight for body text and 600 weight for labels and headings—this weight contrast reinforces information hierarchy without requiring multiple typefaces.
• Do include 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness and reduce perceived latency.

**Don't**

• Don't use the secondary blue (#337ab7) or tertiary pink (#fa1358) as primary CTAs—reserve them for supporting actions, badges, and alerts to maintain visual clarity.
• Don't apply shadows heavier than 0 16px 40px rgba(0,0,0,0.12)—excessive depth creates visual noise and contradicts the system's emphasis on clarity and precision.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px)—inconsistent rounding fragments the visual language.
• Don't set line-height below 1.5x for body text or below 1.4x for headlines—tight line-height reduces readability and contradicts the system's accessibility-first approach.
• Don't apply text-shadow or text-outline to body text on light backgrounds—reserve these techniques for text over busy hero overlays or dark sections where contrast is at risk.