Decimal Point Analytics

Overview

Decimal Point Analytics is an enterprise AI data analytics and market research platform serving C-suite executives and data teams who demand precision, clarity, and actionable intelligence. The design system embodies 'Technical Sophistication with Human Clarity'—a visual language that balances the authority of deep blue (#1976d2) technical infrastructure with strategic accent colors (magenta #cc3366 and accent blue #1863dc) that guide user attention to critical CTAs and data insights. The aesthetic draws from contemporary SaaS design principles: clean typography hierarchies, generous whitespace, and purposeful color restraint that lets data visualizations breathe. The brand voice is confident, precise, and never patronizing—it speaks to intelligent users who value efficiency and accuracy over decoration. Example: 'Your market data, analyzed in real time—decisions made with certainty, not guesswork.'

Colors

The color system is anchored in a deep, professional blue (#1976d2) that establishes technical credibility and appears across the AppBar, primary buttons, and interactive states. This primary blue is paired with a vibrant magenta secondary (#cc3366) reserved exclusively for primary CTAs ('Contact Us', 'Get Started') to create visual urgency and guide conversion. A tertiary accent (#1863dc) provides additional hierarchy for secondary interactive elements and data highlights. The surface stack ranges from near-white (#fafbfd) for the main canvas to progressively darker grays (#d0d5dd, #dce1e8) for container layering, ensuring sufficient contrast (WCAG AA+) while maintaining a light, airy aesthetic. On-surface text is pure black (#000000) for maximum readability at body sizes (16px+). Hover s

Typography

The type system pairs Lora (serif) for display-level headlines—conveying editorial authority and data-driven storytelling—with Poppins (sans-serif) for all body, label, and UI text, ensuring legibility at small sizes and a modern, approachable tone. Display text (55px, 500 weight, Lora) is reserved for hero headlines and major section breaks; it uses -0.02em letter-spacing to tighten the letterforms and create visual impact. Headline-lg (34px, 600 weight, Poppins) anchors section introductions; headline-md (28px, 600 weight) is used for subsection titles. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) form the reading layer, with consistent 24px line-height for comfortable scanning. Label-md (14px, 500 weight) is applied to buttons, form labels, and navigation items; label-sm (1

Layout

The layout follows a 12-column grid system with a maximum container width of 1536px, allowing content to scale gracefully from mobile (100% width with 16px horizontal padding) to desktop (83.33% grid width at 1200px+ breakpoints). Vertical rhythm is established through a consistent 8px unit system: section spacing uses 40px (lg) for major breaks between hero, features, and footer; card and component spacing uses 24px (md) for internal padding and 12px (sm) for tighter groupings. The AppBar maintains a fixed 64px height on desktop (48px on landscape mobile) with 24px horizontal padding. Hero sections employ generous top/bottom margins (40px–64px) to create breathing room around display typography. Grid gaps are set to 16px for both row and column spacing, creating a cohesive rhythm across c

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics Material Design principles while remaining subtle and professional. Level 1 (sm): 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24)—used for standard cards, input fields, and resting buttons to establish baseline separation from the surface. Level 2 (md): 0px 3px 6px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.12)—applied to the AppBar, elevated cards, and hover states on interactive elements to signal interactivity and focus. Level 3 (lg): 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 3px 6px rgba(0, 0, 0, 0.10)—res

Shapes

The shape language follows 'Precise Modernism'—sharp, geometric corners that convey technical precision and data-driven clarity, avoiding the softness of rounded corners that might suggest playfulness or informality. Buttons use 12px border-radius (xl) to provide subtle rounding that softens the geometric edge while maintaining a professional appearance; this is applied consistently across primary, secondary, and text button variants. Cards and containers use 6px (md) for a tighter, more technical feel that aligns with data visualization aesthetics. Input fields and form elements use 4px (DEFA

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct variants. Button-primary (secondary color #cc3366, 40px height, 8px 24px padding, 12px border-radius) is reserved for high-intent CTAs like 'Contact Us' and 'Get Started'; it uses white text (on-secondary) and transitions to #b8285c on hover with a 250ms ease. Button-secondary (transparent background, primary blue text #1976d2, 1px border at rgba(25, 118, 210, 0.5), 40px height, 6px 16px padding) is used for secondary actions and navigation links; hover state applies rgba(25, 118, 210, 0.04) background. Button-text (rgba(25, 118, 210, 0.04) background, primary blue text, 40px height, 6px 8px padding) is used for tertiary actions and inline links; it provides visual feedback without a border. All button

Do's and Don'ts

**Do**

• Do use primary blue (#1976d2) for navigation, interactive states, and data highlights—it establishes technical authority and guides user attention through the interface.
• Do reserve magenta (#cc3366) exclusively for primary CTAs and high-intent actions; overuse dilutes its conversion power and confuses visual hierarchy.
• Do maintain 24px (md) spacing between major sections and 12px (sm) spacing within component groups to create visual rhythm and improve scannability.
• Do apply 250ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for smooth, professional feedback.
• Do use Lora serif for display headlines (55px+) to convey editorial authority; use Poppins sans-serif for all body and UI text for legibility and modernity.
• Do enforce a maximum container width of 1536px to prevent content from stretching excessively and maintain optimal line-length for readability.

**Don't**

• Don't use rounded corners larger than 12px on buttons or cards—it softens the technical aesthetic and undermines the brand's data-driven positioning.
• Don't apply multiple shadow layers or use drop-shadow filters; stick to the three-tier elevation system (sm/md/lg) to maintain visual clarity and hierarchy.
• Don't mix Lora and Poppins at the same size or weight level; use Lora exclusively for display (55px+) and Poppins for everything else to avoid visual confusion.
• Don't override the primary blue (#1976d2) or secondary magenta (#cc3366) with custom hex values in component implementations; always reference the color tokens to maintain consistency.
• Don't use opacity or rgba overlays for hover states on buttons; instead, shift to the fixed-dim or container variants (e.g., primary-fixed-dim #bbdefb) for predictable, accessible contrast.
• Don't apply padding larger than 24px (md) inside cards or containers unless explicitly required for whitespace; excessive padding dilutes content density and reduces information scannability.