DataCamp

Overview

DataCamp embodies a "Tech-Forward Energetic" aesthetic—a design language that pairs deep navy foundations (#05192D) with vibrant neon accents (primary green #03EF62, secondary cyan #5EB1FF, tertiary purple #7933FF) to create an environment that feels both professional and electrifying. The brand serves learners seeking to master data science and AI, transforming complex technical education into an accessible, motivating experience. The UI voice is direct, encouraging, and achievement-focused: every interaction celebrates progress and capability.

The personality is optimistic yet grounded in technical rigor. DataCamp speaks in clear, action-oriented language that assumes intelligence without condescension. Example sentence: "Master Python in 5 hours—then build a real-world project that matters." The design system prioritizes clarity through high contrast (white text on dark backgrounds, neon CTAs on neutral surfaces) and uses motion and color strategically to guide users toward learning outcomes.

Colors

The color system operates on a dark-first principle with strategic neon accents. The primary surface stack anchors the entire palette: surface (#05192D) is the dominant background, with surface-container variants (#13253A, #213147, #303969) creating subtle depth through layering. On-surface text (#EFEFF5) maintains WCAG AAA contrast (15.2:1) against the dark base, ensuring readability across all contexts.

Primary (#03EF62, a vibrant neon green) is the brand's signature accent—used exclusively for high-priority CTAs ("Start Learning for Free", "Buy Now"), success states, and brand-critical interactions. It commands attention with a luminous quality that reads as energetic and trustworthy. Secondary (#5EB1FF, a bright cyan) supports information hierarchy, links, and secondary actions; it pa

Typography

The type system uses Studio-Feixen-Sans (a geometric, tech-forward sans-serif) exclusively, paired with Arial as a fallback. The hierarchy spans eight levels: display (60px, 800 weight) for hero statements; headline-lg (48px, 800 weight) for section titles; headline-md (32px, 700 weight) for subsections; title-lg (24px, 700 weight) for card headers; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard copy; label-md (14px, 700 weight) for buttons and interactive elements; and label-sm (12px, 600 weight) for metadata and captions. Letter-spacing tightens at display sizes (-0.04em) to enhance impact, while body text uses 0em spacing for natural readability. Line heights scale proportionally: display uses 68px (1.13x), headlines use 1.25x, and body uses 1.

Layout

The layout uses a 12-column grid with a fixed max-width of 1172px, centered with auto margins. The gutter is 16px (two spacing units), applied consistently to all container padding and inter-column gaps. Page rhythm follows a modular spacing scale: xs (4px) for micro-interactions, sm (12px) for component internal spacing, md (24px) for section padding and card gaps, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Hero sections use 64px vertical padding on desktop (32px on mobile), creating breathing room around the primary CTA. Cards and containers maintain md (24px) padding internally, with lg (40px) gaps between card groups. The container max-width of 1172px ensures content remains readable on ultra-wide displays while maintaining focus on the learn

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): no shadow; surface-container backgrounds (#13253A, #213147) provide visual separation through color alone. Level 2 (Standard Cards): box-shadow: 0px 3px 10px -1px rgba(0, 8, 32, 0.8), applied to cards, modals, and floating elements; this shadow has a 3px blur and -1px spread, creating a soft, contained depth. Level 3 (Elevated/Modals): box-shadow: 0px 8px 20px -4px rgba(0, 8, 32, 0.8), with an 8px blur and -4px spread for pronounced lift. Interactive hover states on cards transition to Level 2

Shapes

The shape philosophy is "Technical Precision"—favoring sharp, minimal corner radii that evoke engineering and clarity while remaining approachable. Buttons and inputs use the DEFAULT radius (4px), a subtle rounding that feels intentional without softness. Cards and containers use md (8px) for slightly more breathing room, signaling containment and grouping. Modals and elevated surfaces use lg (12px), creating visual distinction from standard UI elements. The full (9999px) radius applies only to badges and pill-shaped elements (e.g., user avatars, status indicators), reserving organic shapes fo

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#03EF62), textColor: {colors.on-primary} (#05192D), with label-md typography (14px, 700 weight), 4px border-radius, and 12px 24px padding, yielding a 48px height. On hover, transition to button-primary-hover (backgroundColor: {colors.primary-fixed-dim}, #03EF62 with 80% opacity) over 150ms, maintaining the same text color. button-secondary mirrors the primary structure but uses backgroundColor: {colors.inverse-surface} (#FFFFFF) with textColor: {colors.on-background} (#05192D), a 1px border in {colors.outline} (rgba(255, 255, 255, 0.15)), and the same 48px height. On hover, button-secondary-hover transitions to backgroundColor: {colors.surface-container-high} (#213147) wi

Do's and Don'ts

**Do**

• Do use primary (#03EF62) exclusively for high-priority CTAs and success states—never dilute its impact by overusing it on secondary actions.
• Do maintain the dark surface (#05192D) as the dominant background; light surfaces (#F7F7FC) are reserved for modals and inverse contexts only.
• Do apply 4px border-radius to all buttons and inputs to reinforce the technical precision aesthetic; avoid rounded corners on primary interactive elements.
• Do layer cards and containers using the surface-container stack (#13253A, #213147, #303969) to create visual hierarchy without relying on shadows alone.
• Do use Studio-Feixen-Sans at 800 weight for headlines and 700 weight for interactive labels to maximize legibility and brand recognition.
• Do apply the three-tier shadow system (Level 1: none, Level 2: 0px 3px 10px, Level 3: 0px 8px 20px) consistently; never mix shadow values or create custom shadows.

**Don't**

• Don't use primary green (#03EF62) for body text, backgrounds, or non-interactive elements—reserve it for CTAs, badges, and success indicators only.
• Don't apply border-radius greater than 12px to cards or containers; the geometric precision of the 4px–12px scale is core to the brand identity.
• Don't use light text (on-surface: #EFEFF5) on light backgrounds; maintain minimum 7:1 contrast ratios for accessibility, preferring dark text on light surfaces and light text on dark surfaces.
• Don't mix font families; Studio-Feixen-Sans is the exclusive typeface—Arial is a fallback only, never a design choice.
• Don't create custom shadows or use box-shadow values outside the three-tier system; consistency in depth perception is critical to the design system's coherence.
• Don't apply transparency or opacity to primary (#03EF62) in interactive states; use the fixed-dim variant (#03EF62 at reduced opacity or the darker #00C74E) to signal hover/active states.