CoderXP

Overview

CoderXP is a premium AI software engineering workspace designed for developers, founders, and technical craftspeople who demand precision and control. The brand embodies a "Technical Minimalism" aesthetic—a marriage of austere dark surfaces with vibrant cyan accents that evoke both the precision of code editors and the energy of modern AI. The interface prioritizes clarity through high contrast (near-black backgrounds at #07090e with bright cyan at #38bdf8), glassmorphic surfaces with subtle blur effects, and a monospace-informed typography hierarchy that respects the developer's need for scannable, unambiguous information. The emotional response is one of calm competence: the UI feels like a well-engineered tool, not a consumer product.

The brand voice is direct, technical, and unapologetically craft-focused. Vocabulary patterns emphasize engineering rigor ("engineered," "execution," "workspace") and developer autonomy ("bring-your-own-keys," "local model bridge"). The tone avoids hype; instead, it speaks in concrete capabilities and architectural decisions. Example sentence in brand voice: "CoderXP brings real code execution and local LLM support to your workflow—no vendor lock-in, no compromises."

Colors

The color system is built on a dark, high-contrast foundation optimized for extended screen time and code readability. The primary color, cyan (#38bdf8), is the signature accent—used exclusively on primary CTAs, focus states, and key interactive elements. It appears in the hero CTA button, navigation highlights, and accent text (e.g., the "XP" in the logo). Secondary colors include amber (#f59e0b) for warnings or secondary actions, and teal (#06b6d4) for tertiary highlights. The surface stack progresses from the deepest background (#07090e, used for body and page background) through container layers (#151617 for cards, #1a1b1d for elevated surfaces, #1f2124 for the highest interactive surfaces). The outline color (#2a2c2f) provides subtle borders and dividers; outline-variant (#3f3f46) is

Typography

The type system uses Inter as the primary typeface for all UI text, with JetBrains Mono reserved for code snippets, terminal-style content, and technical labels. The hierarchy spans from display (72px, 700 weight, -0.04em letter-spacing) for hero headlines down to label-sm (12px, 500 weight, 0.02em letter-spacing) for badges and micro-text. Display and headline-lg use negative letter-spacing (-0.04em to -0.02em) to create visual density and impact, while body text (16–18px, 400 weight) maintains 24–28px line-height for comfortable reading. The type system communicates precision through tight tracking on headlines and generous line-height on body copy. For small labels over busy backgrounds or glass surfaces, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. Code-md (Jet

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered with symmetric padding (24px gutter on desktop, 16px on tablet, 12px on mobile). The hero section spans full width with centered text content, using lg spacing (40px) for section separation and md spacing (24px) for internal component gaps. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. White-space is generous but purposeful: the hero has 64px (xl spacing) above and below the headline, and 40px (lg spacing) between the headline and supporting copy. Cards and glass surfaces use md spacing (24px) for internal padding, with sm spacing (12px) for gaps between nested elements. The spacing scale is semantic: use xl for major section breaks, lg for component

Elevation & Depth

Depth in CoderXP is achieved through a layered combination of glassmorphism, subtle shadows, and border treatments rather than aggressive drop shadows. Level 1 (Base): The background is a solid #07090e with no shadow. Level 2 (Standard Cards): surface-container (#151617) with a 1px border at #2a2c2f and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Glass Surfaces): rgba(15, 19, 28, 0.6) with backdrop-filter: blur(20px), 1px border at rgba(56, 189, 248, 0.15), and box-shadow: 0 0 25px -5px rgba(56, 189, 248, 0.1). Level 4 (Modals/Overlays): rgba(15, 19, 28, 0.8) with backdrop-fi

Shapes

The shape philosophy is "Technical Precision"—rounded corners are used strategically to soften the technical aesthetic without sacrificing clarity. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a modern, approachable feel while remaining distinct from fully rounded elements. Cards and glass surfaces use lg (16px) for consistency with buttons. Input fields use DEFAULT (0.5rem / 8px) for a tighter, more technical appearance. Badges and pills use full (9999px) for maximum roundness, signaling secondary or supplementary information. The hero image container

Components

Action Elements Primary buttons use {colors.primary} (#38bdf8) background with {colors.on-primary} (#040508) text, 14px 24px padding, 48px height, and lg (16px) border-radius. On hover, the background shifts to #0ea5e9 with intensified glow (box-shadow: 0 0 25px -5px rgba(56, 189, 248, 0.35)). On active, the background darkens to #0284c7 with reduced glow (0.15 opacity). All button state transitions use a 200ms cubic-bezier(0.4, 0, 0.2, 1) easing. Secondary buttons use {colors.surface-container} background with a 1px {colors.outline} border, maintaining the same padding and height. Ghost buttons have transparent background with {colors.on-surface-variant} text, and on hover shift to rgba(56, 189, 248, 0.08) background with {colors.primary} text.

Containers & Surfaces Standard card

Do's and Don'ts

**Do**

• Do use cyan (#38bdf8) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it is the signature accent and should never be diluted or overused.
• Do maintain high contrast between text and background; minimum WCAG AA compliance (4.5:1 for body text, 3:1 for large text) is non-negotiable for accessibility and readability.
• Do apply glassmorphic surfaces (backdrop-filter: blur(20px–40px) with rgba backgrounds) only to elevated or modal layers; never use on base surfaces to avoid visual confusion.
• Do use Inter for all UI text and JetBrains Mono exclusively for code, terminal output, and technical labels—never mix typefaces within a single component.
• Do respect the spacing scale: use xl (64px) for major section breaks, lg (40px) for component groups, md (24px) for card interiors, and sm (12px) for tight element spacing.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) anywhere in the interface; the palette is carefully calibrated to #07090e and #f3f4f6 for reduced eye strain and visual cohesion.
• Don't apply shadows heavier than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) on standard cards; CoderXP uses subtle depth, not dramatic drop shadows.
• Don't override the primary cyan accent with secondary colors (amber, teal) on CTAs; secondary colors are for warnings, tertiary actions, and status indicators only.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the technical precision aesthetic.
• Don't apply text-shadow or text-stroke to body copy; reserve these techniques for small labels (12px or smaller) over busy glass backgrounds only.