Plotly

Overview

Plotly is a data visualization platform built for teams who demand both technical precision and visual elegance. The brand embodies 'Chromatic Minimalism'—a design philosophy that pairs a near-black canvas (rgba(12, 12, 12, 1)) with vivid, saturated accent colors (primary #7a76ff, secondary #7fe4ff, tertiary #00bbff) to create a sense of clarity and focus. The UI evokes a sense of data-driven confidence: complex information becomes intuitive through careful color hierarchy, generous whitespace, and purposeful interaction patterns. Users feel empowered, not overwhelmed.

Plotly's voice is direct, precise, and forward-thinking. The brand speaks to data professionals and AI-native teams with vocabulary like 'build', 'connect', 'share', and 'everywhere'—action-oriented language that emphasizes capability and reach. Tone is conversational yet authoritative, never patronizing. Example sentence in Plotly's voice: 'Connect to data, build with AI agents, and share your analytics everywhere.'

Colors

Plotly's color system is rooted in high contrast and chromatic saturation. The surface stack anchors the entire palette: surface (#0c0c0c) is the dominant background, with surface-container (#141414) and surface-container-high (#1f1f1f) providing subtle depth for cards and modals. On-surface (#ebebeb) is the primary text color, delivering 92% luminance contrast against the dark canvas. Primary (#7a76ff) is the brand's signature accent—a saturated violet used exclusively on CTAs, focus states, and key interactive elements. It appears on 'DOWNLOAD PLOTLY STUDIO' and 'GET DEMO' buttons, commanding attention without aggression. Secondary (#7fe4ff) and tertiary (#00bbff) are supporting accents: secondary is used for highlights and secondary CTAs, while tertiary marks status indicators and data-

Typography

The type system pairs Roboto for headlines and Open Sans for body text, creating a hierarchy that balances technical credibility with approachability. Display (60px, 700 weight) and headline-lg (52px, 600 weight) are reserved for hero statements and section titles, using -0.04em letter-spacing to tighten the letterforms and convey confidence. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) are the workhorses for descriptive copy and UI labels, set at 28px and 24px line-height respectively to ensure readability over the dark background. Label-md (14px, 600 weight) is applied to button text and small UI elements, with 0.01em letter-spacing to add subtle emphasis. All text over dark surfaces uses rgba(255, 255, 255, 0.92) for on-surface color, providing sufficient contrast while avo

Layout

Plotly uses a 12-column fluid grid with a maximum container width of 1400px, allowing the design to breathe on ultra-wide displays while maintaining focus on smaller screens. The gutter spacing is 24px (md), creating a consistent rhythm between sections. Hero sections use lg spacing (40px) for vertical separation between headline, body copy, and CTAs, establishing a clear visual hierarchy. Cards and content blocks are padded with md spacing (24px), while internal elements use sm spacing (12px) for tighter grouping. The layout philosophy prioritizes whitespace as a design tool: negative space around data visualizations and CTAs prevents cognitive overload and guides the user's eye to the most important actions. Container max-width of 1400px ensures that even on large monitors, the content r

Elevation & Depth

Depth in Plotly is conveyed through subtle shadows and layered surfaces rather than dramatic drop shadows. Level 1 (Base) is the surface itself (#0c0c0c), which serves as the canvas. Level 2 (Standard Cards) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) and a 1px border at surface-container-high (#1f1f1f), creating a gentle lift. Level 3 (Elevated/Modals) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) with a 2px border, signaling modal prominence. Primary buttons receive an additional chromatic shadow: box-shadow: 0 4px 12px rgba(122, 118, 255, 0.3), which reinforces the primary color an

Shapes

Plotly employs 'Technical Roundness'—a shape philosophy that balances approachability with precision. Buttons use rounded-lg (16px), creating a friendly, modern appearance while maintaining enough angularity to feel professional. Cards and containers use rounded-lg (16px) for consistency with buttons, reinforcing a cohesive component library. Input fields use rounded-DEFAULT (8px), a tighter radius that signals functional, utilitarian purpose. Badges and pills use rounded-full (9999px), emphasizing their role as discrete, self-contained elements. The rationale: larger radii (16px+) on primary

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses backgroundColor: {colors.primary} (#7a76ff), textColor: {colors.on-primary} (white), with padding: 12px 24px and height: 48px for comfortable touch targets. On hover, the background shifts to {colors.primary-container} (#5a56d9) and the shadow expands from 0 4px 12px rgba(122, 118, 255, 0.3) to 0 8px 24px rgba(122, 118, 255, 0.4), creating a smooth 200ms transition. Button-secondary uses a transparent background with a 2px solid border at {colors.primary}, allowing secondary CTAs ('DEMO ENTERPRISE') to coexist without competing for attention. On hover, the background fills with rgba(122, 118, 255, 0.08), providing subtle feedback. Button-ghost is used for tertiary actions and navigation links, with no back

Do's and Don'ts

**Do**

• Do use primary (#7a76ff) exclusively on CTAs and focus states—it is the brand's most precious color and must remain reserved for moments of user action.
• Do maintain at least 24px (md) spacing between major sections and 12px (sm) spacing between related elements to preserve visual breathing room and prevent cognitive overload.
• Do apply the 200ms ease-out transition timing to all interactive elements (buttons, inputs, cards) to create a consistent, responsive interaction model.
• Do use Roboto 600 weight for headlines and Open Sans 400 weight for body copy to maintain the technical-yet-approachable voice.
• Do layer box-shadows with chromatic tints (e.g., rgba(122, 118, 255, 0.3) on primary buttons) to reinforce color hierarchy and guide attention.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as backgrounds—always use the surface stack (surface #0c0c0c, surface-container #141414) to maintain the chromatic minimalist aesthetic.
• Don't apply primary color (#7a76ff) to non-interactive elements like body text or decorative shapes—reserve it for buttons, links, and focus indicators only.
• Don't exceed 40px (lg) spacing between sections or the layout will feel fragmented; use md (24px) as the default section separator.
• Don't use rounded-full (9999px) on buttons or cards—reserve it for badges and pills only to maintain clear component hierarchy.
• Don't animate transitions faster than 200ms or slower than 400ms; the brand voice is confident and responsive, not sluggish or jarring.