PyCharm by JetBrains

Overview

PyCharm's design system embodies **Technical Precision meets Vibrant Energy**—a modern aesthetic that serves professional developers, data scientists, and AI/ML engineers. The brand personality is confident, forward-thinking, and unapologetically technical. The UI leverages a deep charcoal-to-black canvas (#000000 to #191924) as the foundation, punctuated by a teal-cyan primary accent (#1fbba1) that signals interactivity and AI-driven intelligence, complemented by electric purple (#6b57ff) and electric yellow (#fefc4f) for secondary actions and highlights. The emotional response is one of clarity and control: the dark surfaces reduce cognitive load, while the vibrant accents guide users toward powerful features without distraction.

The brand voice is precise, direct, and occasionally playful. Vocabulary favors technical terms ("IDE," "refactoring," "profiling") without jargon gatekeeping. Tone examples: "Supercharged with an AI-enhanced IDE experience" (energetic, benefit-focused), "Built for web, data, and AI/ML professionals" (inclusive, aspirational). The design system communicates that PyCharm is both a serious tool for production work and an exciting platform for innovation.

Colors

The color system is organized around a **dark-first, accent-driven** philosophy. The surface stack anchors the UI in deep blacks and charcoals: surface (#000000) is the page background, surface-container (#191924) is the primary card/panel layer, and surface-container-highest (#3d3d47) is reserved for elevated modals or focus states. All surfaces use a 16-step grayscale progression to ensure sufficient contrast for accessibility (WCAG AA minimum 4.5:1 on body text).

Primary accent is teal-cyan (#1fbba1), applied to CTAs (Download button, primary links), focus states, and interactive highlights. It conveys trust, technology, and forward momentum. Secondary accent is electric purple (#6b57ff), used for supporting actions, badges, and secondary navigation—it adds visual rhythm without compet

Typography

The type system uses **JetBrains Sans** (UI) and **JetBrains Mono** (code/labels) to reinforce the brand's technical identity. Display (72px, 600 weight, -0.02em letter-spacing) is reserved for hero headlines; Headline-lg (48px, 600 weight) for section titles; Headline-md (32px, 600 weight) for subsection headers. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and UI labels; Label-sm (12px, 400 weight, JetBrains Mono) is used for code snippets, timestamps, and small UI text.

Typographic treatment rules: (1) Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.3) on white text over

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px, centered on the viewport. The page rhythm is built on a **lg (40px) spacing scale** for section separation, creating visual breathing room between hero, feature sections, and footer. Container padding uses gutter (24px) on desktop, reducing to 16px on tablets and 12px on mobile. White-space philosophy prioritizes clarity: generous margins around text blocks (40px above/below headlines), 24px padding inside cards, and 12px gutters between grid items.

The hero section spans full-width with a dark gradient background (black to dark teal) and animated SVG wave assets positioned at calc(50% + 366px) horizontally. Feature cards are arranged in a 3-column grid on desktop (1 column on mobile), each with 24px padding and

Elevation & Depth

Depth is conveyed through **layered shadows and strategic background color shifts** rather than blur or glassmorphism. Level 1 (Base): surface (#000000) with no shadow, used for the page background. Level 2 (Standard Cards): surface-container (#191924) with elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), used for cards, modals, and panels. Level 3 (Elevated/Hover): surface-container-high (#2a2a33) with elevation.lg (0 10px 32px rgba(0, 0, 0, 0.4)), applied on card-hover and modal focus states. Accent elements (primary buttons, badges) receive a subtle glow on hover: box-shadow 0px 0px 20px 0 rgb

Shapes

The shape philosophy is **Geometric Precision with Approachable Softness**—sharp enough to feel technical, rounded enough to feel modern. Buttons use border-radius: 9999px (full pill shape) for primary CTAs (Download, Learn More), creating a distinctive, clickable affordance. Secondary buttons and cards use border-radius: 1rem (16px) for a balanced, professional appearance. Input fields and smaller UI elements use border-radius: 0.5rem (8px) for subtle rounding. Badges and accent elements use border-radius: 9999px to emphasize their role as highlights. The rationale: pill-shaped buttons (9999p

Components

Action Elements Buttons are the primary interactive element. **button-primary** uses backgroundColor {colors.primary} (#1fbba1), textColor {colors.on-primary} (#000000), typography {typography.label-md}, rounded {rounded.full} (9999px), padding 12px 32px, and height 48px. On hover, **button-primary-hover** shifts to backgroundColor {colors.primary-container} (#0d8577) and applies boxShadow 0px 0px 20px 0 rgba(31, 187, 161, 0.4). **button-secondary** uses transparent background with a 2px solid border in {colors.primary}, same padding and height. **button-accent** (for tertiary actions like "Accept All") uses backgroundColor {colors.tertiary} (#fefc4f), textColor {colors.on-tertiary} (#000000), rounded {rounded.DEFAULT} (8px), padding 8px 16px, height 40px. On hover, it shifts to {color

Do's and Don'ts

**Do**

• Do use primary teal (#1fbba1) exclusively for main CTAs and focus states—it's the brand's signature accent and must remain distinctive.
• Do apply the full 12-column grid with lg (40px) section spacing to maintain visual rhythm and breathing room across all page layouts.
• Do use JetBrains Sans for all UI text and JetBrains Mono for code snippets and technical labels to reinforce the professional, technical brand identity.
• Do apply elevation shadows (0 3px 8px for standard, 0 10px 32px for elevated) to create depth hierarchy without relying on blur or glassmorphism.
• Do use border-radius 9999px (full pill) exclusively on primary buttons to create an instantly recognizable, clickable affordance.
• Do maintain a minimum 4.5:1 contrast ratio between text and background (e.g., white #ffffff on dark #191924 = 14.5:1) for WCAG AA compliance.

**Don't**

• Don't use secondary purple (#6b57ff) or tertiary yellow (#fefc4f) on primary CTAs—reserve these for supporting actions, badges, and alerts only.
• Don't apply rounded corners larger than 16px to cards or panels; the brand aesthetic requires geometric precision, not organic softness.
• Don't use system fonts (system-ui, -apple-system) as primary typefaces—always load JetBrains Sans and JetBrains Mono to maintain brand consistency.
• Don't apply blur effects (backdrop-filter) or glassmorphism—the design system relies on solid colors and shadows for depth, not transparency.
• Don't use text colors lighter than on-surface-variant (#b8b8c0) for body text on dark backgrounds; this risks accessibility failures and reduced readability.
• Don't mix rounded and sharp corners on related components (e.g., don't use 0px radius on buttons and 16px on cards in the same section).