GMI Cloud

Overview

GMI Cloud is an AI-native inference platform engineered for production workloads at scale. The design system embodies **Architectural Minimalism with Technical Precision**—a stark, high-contrast aesthetic that prioritizes clarity and performance over ornamentation. The brand personality is uncompromising: direct, confident, and deeply technical. The UI uses a pure black canvas (#000000) with a vibrant lime accent (#ddea4d) that signals action and energy, paired with geometric line-art illustrations and monospace typography to reinforce the infrastructure-grade nature of the platform.

The voice is authoritative yet accessible: concise, jargon-aware, and action-oriented. Sentences are short and declarative. Example: "Deploy serverless. Scale instantly. Pay only for compute." The brand avoids marketing fluff; every word serves a function. The visual language—sharp 0px borders, geometric grids, high-contrast text—mirrors the deterministic, predictable nature of GPU infrastructure.

Colors

The color system is built on a **high-contrast, energy-efficient palette** optimized for dark-mode technical interfaces. **Primary (#ddea4d, lime)** is the signature accent used exclusively for call-to-action buttons, active states, and critical interactive elements. It commands attention against the black background and signals "go" or "execute." **Secondary (#262626, near-black)** provides subtle depth for card backgrounds and secondary containers, maintaining visual hierarchy without introducing competing colors. **Tertiary (#3080ff, electric blue)** is reserved for links, status indicators, and secondary accent contexts where a cooler tone is needed.

The surface stack is built on pure black (#000000) as the base, with incremental grays (#0a0a0a, #171717, #262626, #404040) for layering

Typography

The type system pairs **Alpha Lyrae** (custom serif, weights 400–500) for all body and display text with **GeistMono** (monospace, weights 400–500) for labels, inputs, and code-like elements. This pairing reinforces the brand's dual nature: elegant communication layered over technical precision. Display sizes (110px, 56px) use tight line-heights (1.09–1.14) and negative letter-spacing (-0.04em to -0.02em) to create visual impact and density. Body text (16–18px) uses 1.5 line-height for comfortable reading on dark backgrounds. Monospace labels (12–14px) are applied to all buttons, form inputs, and status badges to signal "machine-readable" interactions. Apply **text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)** on small labels (label-sm, 12px) when layered over busy backgrounds or geometric illust

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px, centered on larger screens. Spacing follows a strict 8px unit system: **xs (4px)** for micro-spacing within components, **sm (12px)** for internal padding, **md (24px)** for section gutters and card padding, **lg (40px)** for major section separation, and **xl (64px)** for hero-to-content transitions. The hero section uses **clamp()** functions for responsive typography (e.g., font-size: clamp(56px, 10vh, 110px)) to scale elegantly across viewports. Container padding is **24px on mobile, 40px on tablet, 64px on desktop**. White-space is aggressive: sections are separated by at least 40px vertically, and cards maintain 24px internal padding. This rhythm creates breathing room and emphasizes the technical, uncluttered nat

Elevation & Depth

Depth is achieved through **high-contrast layering and subtle shadows**, not through blur or transparency. The elevation model uses three levels: **Level 1 (Base)** is the pure black background (#000000) with no shadow. **Level 2 (Standard Cards/Inputs)** sits at **box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)** with a 1px solid border at rgba(255, 255, 255, 0.08), creating a crisp, defined edge. **Level 3 (Modals/Popovers)** uses **box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)** with a 1px border at rgba(255, 255, 255, 0.12). No blur filters or glassmorphism; the system relies on color contrast and

Shapes

The shape philosophy is **Architectural Sharpness**: all border-radius values are **0px** (sharp 90° corners) by default, except for badges and pills which use **border-radius: 9999px** (full). This creates a stark, industrial aesthetic that mirrors infrastructure and hardware. The sharp corners reinforce precision and technical authority; the rare use of full-radius on badges creates visual distinction for status elements. No rounded buttons, no soft corners on cards—every edge is a right angle. This choice also optimizes rendering performance and aligns with the brand's no-nonsense positioni

Components

Action Elements Buttons use **GeistMono** at 14px, weight 500, with 12px vertical and 24px horizontal padding (44px total height). Primary buttons (#ddea4d on black) have no border and transition to #b8d600 on hover over 150ms. Secondary buttons are transparent with a 1px outline at #525252, transitioning to #262626 background on hover. All buttons use **cursor: pointer** and **transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1)** for consistent motion. Ghost buttons (transparent, no border) are used for tertiary actions and shift to rgba(255, 255, 255, 0.08) background on hover.

Containers & Surfaces Cards use **background: #171717** with a 1px border at #404040 and **box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)**. Internal padding is 24px. On hover, background shifts to #262626 over

Do's and Don'ts

**Do**

• Do use the lime primary (#ddea4d) exclusively for high-priority CTAs and active states—it is the brand's signature and must never be diluted.
• Do maintain sharp 0px border-radius on all UI elements except badges and pills; the architectural sharpness is core to the brand identity.
• Do apply GeistMono to all interactive labels, buttons, and form inputs to reinforce the technical, infrastructure-grade nature of the platform.
• Do use the full 8px spacing scale (4px, 12px, 24px, 40px, 64px) consistently; never invent intermediate values.
• Do layer text with text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) when placed over geometric illustrations or busy backgrounds to ensure 4.5:1 contrast minimum.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for standard card elevation; never use blur or glassmorphism effects.

**Don't**

• Don't use rounded corners (border-radius > 0) on buttons, cards, or inputs—the sharp aesthetic is non-negotiable.
• Don't introduce new accent colors; secondary (#262626) and tertiary (#3080ff) are supporting roles only. Lime is the only primary accent.
• Don't use system fonts or generic sans-serif; Alpha Lyrae and GeistMono are the only approved typefaces.
• Don't apply transparency or blur effects to backgrounds; the design system is flat and high-contrast, not glassmorphic.
• Don't exceed 1280px container width or use asymmetric padding; the grid is strict and centered.
• Don't use soft shadows or multiple shadow layers; stick to the three-level elevation model with explicit box-shadow values.