DeskExpander

Overview

DeskExpander is an independent multi-screen laboratory and editorial platform serving remote professionals, digital nomads, and workspace optimizers. The brand embodies a "Vibrant Gradient Modernism" aesthetic—a design philosophy that marries technical precision with playful, energetic color gradients (primary blue #5b5bff transitioning through secondary purple #7b68ee to tertiary pink #ff6b9d). The UI celebrates workspace expansion as liberation, evoking clarity, possibility, and the joy of untethered productivity. Every interaction feels purposeful yet optimistic, never sterile.

The voice is authoritative yet approachable: knowledgeable without gatekeeping, opinionated without arrogance. Tone vocabulary includes "independent," "setup," "multi-screen," "professional," and "anywhere"—emphasizing autonomy and flexibility. Example sentence in brand voice: "Your dual-monitor setup isn't just productivity theater; it's the difference between shallow work and deep focus." The brand personality rejects minimalist austerity in favor of confident, gradient-forward visual energy that mirrors the dynamism of modern remote work.

Colors

The color system is built on a vibrant primary accent (oklch(0.557 0.213 261.5) / #5b5bff) that dominates CTAs, focus states, and brand moments. This saturated blue-violet is the signature DeskExpander color—used on "Find my setup" buttons, language selector active state, and badge highlights. It communicates energy and trustworthiness simultaneously. Secondary purple (#7b68ee, oklch(0.62 0.22 295)) and tertiary pink (#ff6b9d, oklch(0.70 0.18 35)) provide supporting accents for product badges, status indicators, and secondary UI elements. The surface stack is clean and light: white (#ffffff) as the base, with carefully calibrated grays (#e9ecef, #d0d0d0, #cccccc) for borders, dividers, and container backgrounds. Text is a near-black (#1a1a1a, oklch(0.205 0.024 261.55)) for maximum legibili

Typography

The type system uses the native system font stack (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) for maximum performance and platform familiarity—no custom web fonts. Display (60px, 900 weight, -0.04em tracking) is reserved for hero headlines like "Expand your workspace. Work from anywhere." and commands maximum attention with tight negative letter-spacing. Headline-lg (40px, 600 weight, -0.02em) and headline-md (28px, 600 weight, -0.01em) structure section breaks and card titles. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle descriptive copy and product descriptions with generous 24px/28px line-height for readability. Label-md (14px, 600 weight, 0.01em) and label-sm (12px, 600 weight, 0.05em) are used for buttons, badges, an

Layout

The layout follows a 12-column grid system with a max-width of 1280px (containerMaxWidth: 1280px), centered with auto margins. The gutter is 24px (spacing.md), applied consistently to all sections. Hero section uses a 2-column split on large screens (lg:grid-cols-2) with the left column holding text and CTAs, the right reserved for animated video and product imagery. Product cards are arranged in a responsive 3-column grid (lg:grid-cols-3) that collapses to 2 columns on tablets (sm:grid-cols-2) and 1 column on mobile. Vertical rhythm is maintained through consistent spacing: section separation uses lg spacing (40px), internal card padding uses md spacing (24px), and button/input padding uses sm spacing (12px). The disclosure banner at the top uses full-width layout with px-4 (16px) horizon

Elevation & Depth

Depth is achieved through a three-tier shadow system combined with subtle transforms. Level 1 (Base/Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to standard cards and input fields. This shadow is tight and focused, suggesting proximity without drama. Level 2 (Hover/Elevated): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) paired with transform: translateY(-4px), applied on card-hover and button-hover states. The Y-axis translation (negative 4px) creates a subtle lift effect that reinforces interactivity. Level 3 (Primary CTA/Glow): box-shadow: 0 3px 8px rgba(91, 91, 255, 0.25), a col

Shapes

The shape philosophy is "Technical Warmth"—sharp enough to feel modern and precise, rounded enough to feel approachable. Buttons and primary CTAs use rounded.lg (1rem / 16px) for a balanced, friendly appearance that's neither pill-shaped nor sharp. Cards and containers use rounded.xl (1.5rem / 24px) for a more generous, inviting curve that softens the grid-based layout. Input fields use rounded.DEFAULT (0.5rem / 8px) for a subtle, understated curve that maintains focus on content. The hero section uses rounded-3xl (1.5rem) to frame the gradient mesh and create a distinct, premium container. La

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the brand primary color (#5b5bff) with white text, 12px 20px padding, 44px height, and rounded.lg (16px). They include a color-tinted shadow (0 3px 8px rgba(91, 91, 255, 0.25)) and scale(1.02) transform on hover with a 150ms transition. Secondary buttons (button-secondary) use a white background with a 1px outline border (#cccccc), same padding and height, and transition to surface-container-high (#e0e0e0) on hover. Both button variants use label-md typography (14px, 600 weight).

Containers & Surfaces Cards (card) are the primary content container: white background, 1px outline border, 20px padding, rounded.xl (24px), and elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover (

Do's and Don'ts

**Do**

• Do use the primary blue (#5b5bff) exclusively for CTAs, focus states, and brand-critical moments—it's the signature DeskExpander color and must remain distinctive.
• Do apply the gradient mesh background (purple-to-blue) only in hero sections and premium containers; overuse dilutes impact.
• Do maintain the 24px gutter and max-width of 1280px across all breakpoints to preserve the grid rhythm and reading comfort.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, etc.) for all typography—it's performant, familiar, and aligns with the brand's technical-yet-warm personality.
• Do apply elevation shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and inputs; use color-tinted shadows (rgba(91, 91, 255, 0.25)) only for primary CTAs to signal hierarchy.
• Do use rounded.lg (16px) for buttons and rounded.xl (24px) for cards—this graduated scale helps users parse component importance at a glance.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs—primary blue is non-negotiable for the most important actions.
• Don't apply rounded.full (pill-shaped) to cards or large containers; reserve it for badges, language selectors, and small UI elements.
• Don't use custom web fonts; the system font stack is performant, accessible, and reinforces the brand's technical credibility.
• Don't exceed 1280px container width or deviate from the 24px gutter—the grid is the foundation of visual consistency.
• Don't apply blur-based glassmorphism or backdrop-filter effects; the design relies on clean shadows and color contrast for depth.
• Don't use more than three accent colors (primary blue, secondary purple, tertiary pink) in a single view—visual noise undermines the professional, independent positioning.