DX&Beyond

Overview

DX&Beyond is an AI-led Business Innovation Consultancy that transforms enterprise complexity into strategic clarity. The design system embodies 'Energetic Minimalism'—a movement that pairs bold, saturated accent colors (specifically the signature coral-red #fc6736) with clean typography and generous whitespace to convey both urgency and sophistication. The brand personality is direct, confident, and forward-thinking: it speaks to C-suite executives and innovation leaders who demand clarity without compromise. The UI evokes momentum through dynamic color contrast and architectural precision in layout, never cluttered or decorative. Voice example: 'We uncover friction points that slow your transformation—then architect the path forward.'

Colors

The color system is anchored by a vibrant coral-red primary (#fc6736), which appears on all primary CTAs ('Book a Discovery Call'), hero backgrounds, and interactive focus states. This high-saturation accent is the visual signature of the brand's energy and urgency. Secondary blue (#1a6aff) provides a complementary accent for secondary actions and data visualization, while tertiary lime-green (#c3ff5b) is reserved for highlights and success states. The surface stack uses pure white (#ffffff) as the base, with a carefully calibrated gray scale (surface-container-low #f0f0f0, surface-container-high #e8e8e8) for layering and depth without visual noise. On-surface text is pure black (#000000) for maximum legibility; on-surface-variant (#6c6767) is used for secondary text and metadata. The outl

Typography

The type system combines Montserrat (a geometric sans-serif with strong personality) for display and headline levels, creating immediate visual impact and brand recognition. Poppins is used for title-lg to add warmth and approachability in mid-level headings. Body copy defaults to Arial for maximum legibility and web performance. Display text (126px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and creates a commanding presence; headline-lg (48px, 700 weight) is used for section titles and major content blocks. Body-md (16px, 400 weight, 24px line-height) is the standard for paragraph text and ensures comfortable reading at typical viewing distances. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive elements, with a slight letter

Layout

The layout system uses a fixed 1000px container max-width, centered on the viewport with symmetric margins, creating a focused, professional presentation suitable for enterprise audiences. The grid is 12 columns with 24px gutters, allowing flexible composition while maintaining visual rhythm. Whitespace is treated as a first-class design element: lg spacing (40px) separates major sections (hero, value propositions, case studies), md spacing (24px) divides content blocks within sections, and sm spacing (12px) is used for internal component padding. The hero section spans full-width with a bold coral background (#fc6736), establishing immediate brand presence; the navigation bar floats above with a muted sage-green (#a8c97a) pill-shaped container to create visual hierarchy without competing

Elevation & Depth

Depth in this system is achieved through subtle shadow layering and background color shifts rather than dramatic drop shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the clean foundation. Level 2 (Standard Card): background #f0f0f0 with box-shadow 0 4px 12px rgba(0,0,0,0.08), creating gentle separation from the base. Level 3 (Elevated/Modals): background #ffffff with box-shadow 0 16px 40px rgba(0,0,0,0.12), used for modals, overlays, and primary content containers. Hover states transition cards from Level 2 to Level 3 with a 200ms cubic-bezier(0.4, 0, 0.2, 1)

Shapes

The shape philosophy is 'Architectural Precision with Approachability'—combining sharp, geometric forms with strategic rounding to balance corporate authority with human warmth. Buttons use full rounding (border-radius: 9999px, or 50% on pill-shaped containers) to create a modern, friendly CTA aesthetic that stands out against rectangular content. Cards and containers use md rounding (12px / 0.75rem) to maintain a professional, structured appearance while avoiding harsh corners. Input fields use DEFAULT rounding (8px / 0.5rem) for a slightly more formal, data-entry feel. The navigation bar use

Components

Action Elements Buttons are the primary interaction mechanism and use full rounding (border-radius: 9999px) with 48px height and 16px vertical / 32px horizontal padding. Primary buttons use the coral accent (#fc6736) with white text (label-md, 600 weight) and transition to #ff8c6b on hover (200ms cubic-bezier(0.4, 0, 0.2, 1)). Secondary buttons use a transparent background with a 2px solid border in the primary color and the same hover transition to a light container background (#ffe8e0). Navigation buttons use a sage-green background (#a8c97a) with full rounding and 40px height, creating a distinct visual zone for site navigation. All buttons include a focus ring: 3px inset box-shadow with rgba(252, 103, 54, 0.1) for keyboard accessibility.

Containers & Surfaces Cards use md roun

Do's and Don'ts

**Do**

• Do use the coral primary (#fc6736) exclusively on primary CTAs and hero sections to maintain brand recognition and visual hierarchy.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between page sections to create breathing room and prevent cognitive overload.
• Do use Montserrat for display and headline levels (48px+) to establish immediate brand personality and authority.
• Do maintain the 1000px container max-width strictly to preserve focus and readability for enterprise audiences.
• Do transition interactive elements (buttons, cards, inputs) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) easing for smooth, professional feedback.

**Don't**

• Don't use the primary coral (#fc6736) on secondary elements or backgrounds—reserve it exclusively for high-priority CTAs and hero sections to avoid visual noise.
• Don't apply shadows deeper than lg elevation (0 16px 40px rgba(0,0,0,0.12)) or use multiple stacked shadows; the system uses a clean, three-level shadow hierarchy.
• Don't mix typefaces within a single heading or body section; use Montserrat for headlines, Poppins for titles, and Arial for body to maintain typographic clarity.
• Don't reduce the container max-width below 1000px on desktop or increase it beyond 1000px; this breaks the intended focus and reading rhythm.
• Don't use the secondary blue (#1a6aff) or tertiary lime (#c3ff5b) as primary brand colors or on main CTAs; these are supporting accents only.