Syntphony

Overview

Syntphony is NTT DATA's enterprise Product Composable Platform, designed to orchestrate complex business transformations through a unified, modular architecture. The brand embodies 'Aspirational Clarity'—a design philosophy that pairs ethereal, expansive hero imagery (mountain peaks above clouds, infinite horizons) with precise, technical typography and a restrained, professional color palette. The UI evokes a sense of elevation and perspective: users are positioned above complexity, gaining clarity and control. The emotional response is one of confidence and possibility—the platform promises to harmonize disparate systems into a coherent, scalable whole.

The voice is authoritative yet approachable: precise without jargon, ambitious without hyperbole. Syntphony speaks in measured, declarative sentences that emphasize capability and orchestration. Example: 'Compose your platform. Orchestrate your business. Transform at scale.' The brand avoids breathless marketing language, instead grounding claims in technical credibility and enterprise-grade reliability.

Colors

The Syntphony color system centers on a deep navy primary (#005b96) paired with a near-black secondary (#070f26), creating a sophisticated, enterprise-grade foundation. Primary (#005b96) is the signature accent—used on all call-to-action buttons, interactive states, and key focus elements. It conveys trust, stability, and technical authority. On hover, primary shifts to primary-container (#004983), a deeper, more saturated blue that signals active engagement without jarring the user. The secondary color (#070f26) anchors the header and dark-mode contexts, providing visual weight and hierarchy. Tertiary (#0072BC) and its lighter variant quaternary (#19a3fc) serve as supporting accents for secondary actions, status indicators, and progressive disclosure elements. Surface colors range from pu

Typography

The typography system pairs serif headlines (Headings: Georgia-based, 400 weight, -0.02em letter-spacing) with a clean sans-serif body font (Type: Noto Sans, 400 weight). This pairing communicates both sophistication and accessibility—the serif headlines convey editorial authority and timelessness, while the sans-serif body ensures legibility at all scales. Display text (60px, 68px line-height) is reserved for hero sections and major announcements; headline-lg (50px) anchors page sections; headline-md (36px) breaks content into digestible chunks. Body text uses 16px for standard reading (24px line-height) and 18px for emphasized content (28px line-height), ensuring 1.5x minimum line-height for accessibility. Labels and UI text use 14px (label-md, 700 weight) for buttons and interactive ele

Layout

Syntphony uses a 12-column fluid grid with a maximum container width of 1440px, allowing content to scale responsively from mobile (320px) to ultra-wide displays (1920px+). The gutter between columns is 24px (16px padding on each side), providing consistent breathing room. Section separation follows a semantic spacing scale: lg (40px) for major section breaks, md (24px) for component grouping, and sm (12px) for inline element spacing. The hero section spans full viewport width with a fixed header (16px padding, 70px total height) overlaid at z-index 1000. Content containers use 24px horizontal padding on mobile, scaling to 40px on tablets and 64px on desktop. White-space is used strategically to emphasize hierarchy: large margins (40px+) separate distinct content zones, while tighter spaci

Elevation & Depth

Depth in Syntphony is conveyed through a restrained shadow system and layered container backgrounds rather than dramatic depth effects. Level 1 (Base): white or light gray surfaces (surface, surface-container-low) with no shadow, establishing the primary reading plane. Level 2 (Elevated Cards/Modals): 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that lifts elements 4–8px above the base. Level 3 (Floating Actions/Overlays): 0px 30px 70px rgba(46, 45, 79, 0.15), a larger, more diffuse shadow suggesting 20–30px elevation. Focus states use a 4px outline with rgba(0, 91, 150, 0.1) (primary c

Shapes

Syntphony employs 'Architectural Precision'—a shape philosophy that favors subtle, controlled radius values over organic or heavily rounded forms. Buttons use 4px (sm / 0.25rem) border-radius, creating a crisp, technical appearance that aligns with enterprise software conventions. Cards and containers use 8px (DEFAULT / 0.5rem) for a slightly softer, more approachable feel while maintaining geometric clarity. Modals and elevated surfaces use 12px (md / 0.75rem) to signal importance and separation from the base layer. Input fields match buttons at 4px, ensuring visual consistency in the interac

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses 8px 24px padding, 40px height, and 4px border-radius, with label-md typography (14px, 700 weight). Background is primary (#005b96), text is white. On hover, background shifts to primary-container (#004983) with a 200ms transition. On active/pressed, background becomes secondary-container (#2c3347) to signal state change. Focus state adds a 4px outline with rgba(0, 91, 150, 0.1). Button-secondary uses transparent background with a 1px primary border, allowing secondary actions to coexist without visual dominance. The "Play our video manifesto" CTA on the hero uses button-primary styling, positioned center-bottom of the hero section with 24px margin-bottom.

Containers & Surfaces Cards us

Do's and Don'ts

**Do**

• Do use primary (#005b96) exclusively for call-to-action buttons and key interactive states—never use it for decorative elements or backgrounds.
• Do maintain 24px minimum padding on all card and container elements; white-space is a design feature, not wasted space.
• Do apply 200ms transitions to all color and shadow changes; instant state changes feel broken and unrefined.
• Do use serif headlines (Headings font family) only for display and headline scales; body text must always use the Type sans-serif font.
• Do ensure all interactive elements have a visible focus state with 4px outline at rgba(0, 91, 150, 0.1) for accessibility compliance.

**Don't**

• Don't use secondary (#070f26) or tertiary (#0072BC) as primary button backgrounds; they dilute the primary accent and confuse interaction hierarchy.
• Don't apply border-radius greater than 12px to buttons, inputs, or cards; Syntphony is architecturally precise, not playful or organic.
• Don't use box-shadow values larger than 0px 30px 70px rgba(46, 45, 79, 0.15); excessive shadow depth undermines the clean, technical aesthetic.
• Don't mix serif and sans-serif fonts within the same line or paragraph; maintain clear typographic separation between headlines and body.
• Don't reduce padding below 12px on interactive elements or below 24px on container interiors; cramped spacing signals low-quality implementation.