Vertexa

Overview

Vertexa embodies a **Dark-Tech Minimalism** aesthetic—a design philosophy that pairs austere, near-black surfaces (rgb(10, 14, 26) / #0a0e1a) with a vibrant, saturated blue accent (#3b82f6) reserved exclusively for interactive elements and brand moments. The brand serves ambitious engineering teams building edge infrastructure and cloud platforms; the UI evokes precision, speed, and technical mastery through high contrast, generous whitespace, and a monochromatic foundation punctuated by electric blue. The emotional response is one of clarity and control: users feel they are operating a powerful, uncluttered instrument.

Vertexa's voice is direct, technical, and confident—never marketing-speak, always engineering-first. Vocabulary favors concrete nouns (deployments, latency, infrastructure) over abstractions. The tone is calm and authoritative, as if explaining a complex system to a peer. Example sentence in brand voice: "Deploy to 47 regions in parallel; watch real-time metrics stream as your service scales from zero to 10k requests per second."

Colors

The color system is built on a **high-contrast dark foundation** with a single, dominant accent. **Primary (#3b82f6)** is the electric blue used exclusively on call-to-action buttons ("Start Building"), interactive focus states, and brand-critical UI elements. It appears sparingly but commands attention through saturation and contrast against the near-black background. **Surface stack** ranges from #020617 (surface-container-lowest, used for deeply nested UI like code blocks) through #0a0e1a (base surface) to #2d3748 (surface-container-highest, for elevated modals and overlays). **On-surface** is #f5f5f5 (near-white, not pure white) for body text and secondary labels, ensuring readability without eye strain on dark backgrounds. **Secondary (#60a5fa)** is a lighter blue used for supporting

Typography

The type system uses **Inter** (Google Fonts, weights 300–700) exclusively, establishing a cohesive, modern, and highly legible foundation. **Display (60px, 700 weight, -0.04em letter-spacing)** is reserved for hero headlines like "Build Beyond the Ordinary"—large, bold, and commanding. **Headline-lg (40px, 700 weight)** anchors section titles; **headline-md (28px, 600 weight)** breaks up content into digestible chunks. **Body-lg (18px, 400 weight, 28px line-height)** is used for descriptive copy and marketing paragraphs, with generous line-height (1.56x) to ensure readability on dark backgrounds. **Body-md (16px, 400 weight)** is the default for UI labels and form text. **Label-md (14px, 600 weight, 0.01em letter-spacing)** is applied to buttons, badges, and navigation items, with subtle

Layout

Vertexa uses a **fluid 12-column grid** with a max-width of 1400px, centered on the viewport. The design favors **generous whitespace** and asymmetric layouts: the hero section pairs a large left-aligned headline (60px) with a right-aligned dashboard mockup, creating visual tension and guiding the eye. **Section spacing** follows the semantic scale: lg (40px) separates major sections (hero, features, pricing), md (24px) separates subsections, and sm (12px) separates inline elements. **Container padding** is consistently 24px (md) on desktop, reducing to 16px on tablet and 12px on mobile. The **gutter** between grid columns is 24px, maintaining rhythm and breathing room. Navigation and hero sections use full-width backgrounds (dark surface) with centered content, while feature cards and tes

Elevation & Depth

Elevation in Vertexa is achieved through **layered surfaces and subtle shadows**, not through dramatic depth effects. **Level 1 (Base)**: The background is a solid, flat #0a0e1a with no texture or gradient. **Level 2 (Standard Cards)**: Cards use background #111827 (surface-container) with a 1px border at rgba(0, 0, 0, 0.3) and a soft shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). This creates a subtle lift without visual heaviness. **Level 3 (Elevated/Modals)**: Modals and floating panels use #1f2937 (surface-container-high) with a stronger shadow: box-shadow: 0 16px 40px rgba(0, 0, 0, 0.

Shapes

Vertexa employs a **Technical Softness** philosophy: border-radius values are modest and consistent, avoiding both sharp corners (which feel cold) and excessive rounding (which feels playful). **Buttons and inputs** use 8px (1rem) radius, creating a slightly rounded rectangle that feels engineered yet approachable. **Cards and containers** use 8px radius as well, maintaining visual cohesion. **Badges and small UI elements** use 4px (0.25rem) for tighter, more technical appearance. **Full-width sections** have no radius (0px), emphasizing their role as layout anchors. The rationale: 8px is the

Components

Action Elements **Button-primary** is the hero CTA: 48px height, 12px–24px padding, #3b82f6 background, white text, 8px radius, no border. On hover, the background shifts to #60a5fa (primary-fixed-dim) and a subtle glow appears: box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3). On active/press, the background darkens to #2563eb (inverse-primary). Transition time is 200ms ease. **Button-secondary** is a ghost button: transparent background, 1px border at #404040 (outline-variant), on-surface text, 8px radius, same 48px height. On hover, the background fills with #1f2937 (surface-container-high) and the border brightens to #737373 (outline). This creates a clear visual hierarchy: primary buttons demand action, secondary buttons offer alternatives.

Containers & Surfaces **Card** is the

Do's and Don'ts

**Do**

• Do use the primary blue (#3b82f6) exclusively for interactive elements and brand moments—never for decorative backgrounds or text.
• Do maintain high contrast: pair dark surfaces (#0a0e1a) with light text (#f5f5f5) or bright accents (#3b82f6) to ensure accessibility and visual clarity.
• Do apply consistent 8px border-radius to buttons, cards, and inputs to reinforce the technical-yet-approachable aesthetic.
• Do use the full spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px) to create rhythm and breathing room; never compress spacing below 12px for interactive elements.
• Do transition interactive states over 200ms (ease) to provide smooth, responsive feedback without feeling sluggish.

**Don't**

• Don't introduce new accent colors—the blue family (#3b82f6, #60a5fa, #1d4ed8) is the complete palette for interactive elements; resist the urge to add greens, purples, or other hues.
• Don't use pure white (#ffffff) for text or backgrounds; stick to #f5f5f5 (on-surface) and #0a0e1a (surface) to maintain the dark-tech aesthetic and reduce eye strain.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.2); excessive depth undermines the minimalist, precision-focused brand.
• Don't round corners beyond 8px on standard UI elements; full-radius (9999px) is reserved for badges and pills only.
• Don't mix typefaces—Inter is the sole font family; avoid system fonts, serif fonts, or display fonts outside of the approved Google Fonts catalog.