11x

Overview

11x is an enterprise AI platform that transforms revenue teams through digital workers—autonomous agents that execute, learn, and optimize across customer touchpoints. The design system embodies "Warm Modernism," a philosophy that marries earthy, natural color palettes (warm beiges, deep teals, rich browns) with clean, geometric typography and minimal ornamentation. This aesthetic evokes both human warmth and technological precision, reflecting the brand's core promise: AI that feels trustworthy, capable, and aligned with human intent.

The voice is authoritative yet approachable—confident without arrogance, precise without jargon. 11x speaks to revenue leaders as peers, using concrete business outcomes rather than technical abstractions. Example: "Your team closes 40% more deals while your reps focus on strategy" rather than "AI-powered automation increases efficiency." The UI reinforces this through generous whitespace, deliberate color blocking, and typography that prioritizes clarity over decoration.

Colors

The 11x color system is anchored in a warm, earthy primary palette that conveys stability and human-centered design. Primary (#f5ece6, a soft cream-beige) is used sparingly on CTAs and interactive highlights—it's warm enough to feel inviting but neutral enough to maintain enterprise credibility. Secondary (#1e4b57, a deep teal) serves as the accent for active states, focus rings, and brand-critical UI elements, providing strong contrast against light surfaces while evoking trust and depth. Tertiary (#be905c, a warm bronze) is reserved for tertiary actions, badges, and supporting visual elements.

The surface stack is deliberately minimal: surfaces range from pure white (#ffffff) to warm off-whites (#f9f9f9, #f6f5f5) and progress through warm grays (#ede2d7, #e7d3bf, #d7cecc). This warm-gra

Typography

The type system uses ES Allianz (or Arial as fallback) throughout, a humanist sans-serif that balances geometric precision with organic warmth. Display (152px, 500 weight) is reserved for hero headlines and sets the visual anchor; headline-lg (56px, 500 weight) and headline-md (40px, 500 weight) establish section hierarchy with tight line-height (64px and 48px respectively) to maintain visual density. Body text (16px, 400 weight, 24px line-height) is set at a comfortable 1.5 line-height ratio for sustained reading; body-lg (20px) is used for callouts and emphasized copy. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) handle UI labels and metadata. All display and headline sizes use -0.04em to -0.02em letter-spacing to tighten the visual presentation; body and label sizes use 0

Layout

The layout system uses a 12-column grid with a 1440px max-width container, maintaining a 24px gutter on desktop (reduced to 16px on tablet, 12px on mobile). The design favors a fluid, breathing approach: sections are separated by 40px (lg spacing) on desktop, 24px on tablet, and 16px on mobile. Hero sections occupy full viewport height with a dark overlay (rgba(0, 0, 0, 0.3)) over photographic backgrounds to ensure text legibility. Content sections use a 2-column or 3-column layout depending on context, with cards and components respecting the 24px gutter. The container-max-width of 1440px ensures content never stretches beyond comfortable reading width. Whitespace is semantic: use md spacing (24px) for related content grouping, lg spacing (40px) for section separation, and xl spacing (64p

Elevation & Depth

Depth in 11x is conveyed through subtle shadows and layering rather than dramatic depth effects. Level 1 (Base): flat surfaces with no shadow, used for primary content areas and the page background. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and floating elements. This shadow is tight and directional, suggesting a card lifted 4-8px above the surface. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on hover or when a card becomes interactive. The increased blur (24px vs 8px) and spread create a sense of lift without

Shapes

The shape system follows "Warm Geometric Rationalism"—a balance between soft, approachable curves and clean, purposeful angles. Buttons use full (9999px) border-radius, creating pill-shaped CTAs that feel friendly and inviting while remaining professional. Cards and containers use lg (1rem / 16px) border-radius, a moderate curve that suggests softness without appearing playful. Input fields and smaller UI elements use DEFAULT (0.5rem / 8px) radius, maintaining a clean, technical appearance. The rationale: full-radius buttons draw the eye and encourage interaction; lg-radius cards feel substant

Components

Action Elements Buttons are the primary interaction driver. Button-primary uses primary background (#f5ece6) with on-primary text (#222222), full border-radius (9999px), and 12px vertical / 24px horizontal padding, resulting in a 48px height. On hover, the background shifts to primary-container (#e7d3bf) with a smooth 200ms transition. Button-secondary uses secondary background (#1e4b57) with white text, identical padding and radius, and shifts to secondary-fixed-dim (#b8d4df) on hover. Both buttons use label-md typography (14px, 500 weight) and apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to indicate lift.

Containers & Surfaces Cards are the primary content container. Base card uses surface-container-lowest (#f6f5f5) background, lg border-radius (1rem), md padding (24

Do's and Don'ts

**Do**

• Do use primary (#f5ece6) exclusively on primary CTAs and key interactive elements—it's a rare, high-impact accent that loses power if overused.
• Do apply secondary (#1e4b57) to focus states, active tabs, and secondary CTAs to create a consistent, trustworthy interaction language.
• Do maintain 24px gutters and 40px section spacing on desktop to preserve the breathing room that defines the warm modernist aesthetic.
• Do use full border-radius (9999px) on all buttons and pill-shaped elements; avoid sharp corners on interactive components.
• Do apply the 200ms ease-out transition to all hover and active state changes to ensure smooth, professional motion.
• Do use ES Allianz at 16px body size with 24px line-height for optimal readability; never drop below 14px for body text.

**Don't**

• Don't use cool grays (#cccccc, #999999) in the surface stack—stick to the warm gray progression (#ede2d7 through #d7cecc) to maintain cohesion.
• Don't apply shadows larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) or use black shadows; the warm aesthetic requires restraint.
• Don't mix border-radius values arbitrarily—use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use primary (#f5ece6) as a background for large content areas; it's an accent, not a surface. Use surface-container variants instead.
• Don't reduce padding below sm (12px) on cards or containers; the warm modernist style relies on generous whitespace.
• Don't apply focus outlines without the 3px glow (rgba(30, 75, 87, 0.1)); the glow is part of the accessibility and aesthetic strategy.