Dxillium

Overview

Dxillium embodies a **Terminal-Modernist** aesthetic that fuses the precision of command-line interfaces with contemporary product design. The brand serves enterprises seeking to accelerate software delivery through AI-native development, and the visual language reflects this mission: dark, focused, and unapologetically technical. The interface prioritizes clarity and speed, using a deep navy canvas (#0b0f19) punctuated by vivid cyan accents (#38bdf8) that command attention without distraction. Every interaction feels purposeful, as if the user is collaborating with an intelligent system rather than fighting against opacity.

The voice is direct, confident, and grounded in technical reality. Dxillium speaks in active verbs and concrete outcomes—"We replace slow, expensive development teams with autonomous AI agents"—never hedging or softening claims. The tone avoids marketing hyperbole; instead, it treats the reader as a peer who understands that machine speed and human oversight are not contradictory but complementary. Example: "Development at machine speed—coded by AI, architecturally reviewed by humans."

Colors

The color system is built on a **high-contrast, tech-forward palette** designed for both clarity and visual hierarchy. **Primary (#38bdf8)** is the signature cyan accent used exclusively for call-to-action buttons, interactive states, and key UI affordances—it commands 106 instances across the site and serves as the visual anchor for user intent. **On-Primary (#0b0f19)** ensures text on cyan buttons maintains WCAG AAA contrast (21:1 ratio). **Surface (#0b0f19)** is the foundational dark canvas that evokes a terminal environment; **Surface-Container (#151b2b)** lifts panels and cards 1 step, while **Surface-Container-High (#1e2741)** provides hover states with a 2-step lift. **Secondary (#94a3b8)** is a muted slate gray used for supporting text and disabled states, never competing with prim

Typography

The type system pairs **Inter** (humanist sans-serif, 300–700 weights) for all body and display text with **JetBrains Mono** (technical monospace, 400–500 weights) for terminal-style labels, status indicators, and code-like UI elements. This pairing reinforces the brand's dual nature: approachable yet technical. **Display (72px, 700 weight, -0.04em tracking)** is reserved for hero headlines like "The AI-First Software Factory" and commands the full visual weight of the page. **Headline-LG (40px, 600 weight)** anchors section introductions. **Body-LG (18px, 400 weight, 28px line-height)** is used for hero copy and ensures readability at arm's length; apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) when body text overlays complex background imagery to maintain legibility. **Body-MD (16px, 400

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px, centered with mx-auto. The hero section spans full-width with a 40px (lg spacing) gutter on desktop, collapsing to 24px (md spacing) on tablet and 12px (sm spacing) on mobile. **Section separation** uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, creating a clear visual rhythm. **Container padding** is consistently md (24px) for cards and panels, with sm (12px) internal spacing for nested elements. The tech-grid-bg pattern (linear-gradient with 20px × 20px cells at rgba(56, 189, 248, 0.03)) is applied to the page background to subtly reinforce the technical aesthetic without overwhelming content. **White-space philosophy**: embrace negative space; a card with 24px padding an

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than bright highlights or glassmorphism. **Level 1 (Base)**: The page background is #0b0f19 with the tech-grid-bg pattern overlay (rgba(56, 189, 248, 0.03) grid lines at 20px intervals). **Level 2 (Standard Card)**: Cards use surface-container (#151b2b) with a 1px border at outline-variant (#4b5563) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). **Level 3 (Elevated/Modal)**: Modals and floating panels use surface-container-high (#1e2741) with a 1px border at primary rgba (56, 189, 248, 0.3) and box-shadow: 0 8px

Shapes

The shape language is **Geometric Precision**—sharp, minimal, and functional. **Buttons and inputs** use rounded-DEFAULT (0.125rem / 2px), a nearly-square corner that evokes technical precision without feeling harsh. **Cards and panels** use rounded-md (0.5rem / 8px), providing just enough softness to feel contemporary while maintaining the technical edge. **Badges and tags** use rounded-full (9999px) for a pill shape, signaling "status" or "metadata." **Clip-path corners** (clip-corner class: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)) are applied sparingly to accent elements or hero im

Components

Action Elements **Button-Primary** (#38bdf8 background, #0b0f19 text, 16px padding horizontal, 44px height, rounded-DEFAULT, Inter 700 weight) is the primary call-to-action. On hover, shift backgroundColor to #2ba8e8 with a 200ms ease-out transition; do not add a shadow. On active/pressed, reduce opacity to 0.9 and apply transform: scale(0.98) for tactile feedback. **Button-Secondary** (transparent background, #38bdf8 text, 1px border at primary, 40px height, 8px vertical padding) is used for secondary actions like "Contact" or "Learn More." Hover state: backgroundColor rgba(56, 189, 248, 0.1) with the same 200ms transition. **Badge-Status** (rgba(56, 189, 248, 0.15) background, 1px border at rgba(56, 189, 248, 0.3), 4px vertical padding, rounded-full, JetBrains Mono 12px) displays sys

Do's and Don'ts

**Do**

• Do use primary (#38bdf8) exclusively for interactive affordances—buttons, links, focus rings, and active states. Overuse dilutes its signal.
• Do apply JetBrains Mono to all system-generated text, status indicators, and terminal-style output to reinforce the technical brand voice.
• Do maintain 24px (md spacing) as the default padding for cards and containers; it creates premium breathing room without wasting space.
• Do use 200ms ease-out transitions for all hover and focus state changes; faster feels twitchy, slower feels sluggish.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) to body text overlaid on complex backgrounds to ensure WCAG AA contrast.
• Do use the tech-grid-bg pattern (rgba(56, 189, 248, 0.03) at 20px intervals) as a subtle background texture to reinforce the technical aesthetic.

**Don't**

• Don't use secondary (#94a3b8) or tertiary (#ef4444) for primary CTAs; they lack the visual urgency of primary cyan.
• Don't apply rounded-lg or rounded-xl to buttons or inputs; the brand requires sharp, precise corners (rounded-DEFAULT) on interactive elements.
• Don't animate badges, status indicators, or terminal text; they are static information and animation would feel frivolous.
• Don't use box-shadows on buttons or form inputs; the brand favors flat, responsive interactions with focus rings instead.
• Don't mix Inter and JetBrains Mono within a single label or button; choose one typeface per component to maintain clarity.
• Don't exceed 1280px container width; the layout is designed for focused, scannable content, not sprawling layouts.