JetBrains Brand Design System Deep-Dive

1. Brand Overview

JetBrains is a developer-focused brand, and they design like one. This is not “make it pretty” design — it’s sharp-edged functional design with a dash of personality in color. If you’ve used IntelliJ IDEA, WebStorm, PyCharm, or any of their other IDEs, you know they live in the intersection of high productivity and technical precision.

Their website reflects that engineering mindset. The layout is dense but well-structured. Typography is clear, no frills. Colors are vibrant but purposeful — the bright yellow (#fefc4f) and electric blue (#18a3fa) jump out against a very dark baseline background (#19191c). It reads tech-heavy but not sterile, thanks to these accent pops.

Audience? Developers, mainly. People who want clarity, speed, and an interface that doesn’t waste time. This isn’t “startup playful” — there’s no excessive rounded corners everywhere, no bubbly icons. But it’s not austere either. They’ve injected enough life into the palette to stop it feeling corporate grey.

Philosophically, JetBrains keeps things consistent: one typography family, a tight spacing system (8px scale), and repeatable component styles. That’s a big deal — consistency is the one thing that lets deeply technical users trust your UI. If the doc site, marketing site, and product all feel cut from the same cloth, you’re in safe hands.

They lean on their custom “JetBrains Sans” and “JetBrains Mono” fonts — an in-house decision that says “we own the stack.” It creates visual continuity between the product UI and website. The mono font surfaces for technical contexts like code snippets and cookie banners.

There’s a lot of black and dark grey, but it’s never flat — colored outlines, bright CTA buttons, and subtle shadows keep visual hierarchy strong without decorative clutter. Links behave predictably, buttons have well-defined hover/active states, and the grid alignment is precise.

This brand asks you to respect their system. Deviations will feel wrong fast. The visual language is specific — high-contrast colors, thin borders, tight typography, zero wasted spacing — all aimed to keep visual load low and interaction speed high. Developers will feel at home. I love that they don’t try to “design for everyone” — they design for their audience.

2. Color System

2.1 Primary Colors

Their primary is yellow — rgb(254, 252, 79) → #fefc4f. It’s loud, attention-grabbing, but not neon enough to hurt. This sits opposite the deep dark greys in their UI and immediately signals “click me.” In a developer context, yellow also signals “warning” but here it’s warm, energetic CTA. Think highlighter pen on a deep black IDE background.

Secondary semantic color: white (#ffffff). It’s the neutral canvas when they don’t want black.

The “electric blue” (#18a3fa) shows up in links and accents. Compared to competitors like GitHub (cool grey + blue) or Microsoft (safer blue), JetBrains’ blue is hotter and more saturated. Stands out more, less corporate.

2.2 Complete Palette

(You could list all 40+ CSS variables, but these are the key players.)

2.3 Color Relationships

Contrast is high. Primary yellow (#fefc4f) on black (#000000) gives WCAG AAA easily. Electric blue (#18a3fa) on dark grey (#19191c) also passes. This is critical for dev audiences — these sites are scanned fast, and low contrast hurts.

They clearly support dark and light themes via “primary-fog-light” and “primary-dim-dark” variants. Dark mode is dominant — most backgrounds hover near #19191c/#252528. Transparent white tints overlay text/background with subtle layering instead of flat blocks.

2.4 Usage Guide

• Yellow + black = strongest CTA. Use sparingly or it gets noisy.
• Electric blue for links — don’t mix with yellow unless it’s a multicolor illustration.
• Keep semantic neutrals (grey 20, grey 95) for structure.
• Avoid mixing multiple saturated accents in one block — this is not a rainbow brand.
• Light mode variants exist, but if you work in dark mode context, stick to the dark palette tokens.

3. Typography

3.1 Font Families

Main: JetBrains Sans.
Fallbacks: Inter, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial.

Secondary (monospace contexts): JetBrains Mono, only in “JetSites Cookie Banner” contexts.
Fallbacks: Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Courier New.

No Google Fonts / Adobe Fonts — this is custom.

3.2 Type Scale

They even use minuscule letter-spacing in a few cases (e.g. 0.024px) — barely perceptible, but adds balance.

3.3 Hierarchy

One family means hierarchy is built purely via size and weight. Titles are heavy and big (up to 79px). Body text hovers at 16–20px. Captions drop to 13px. Mono font pops when context changes to code/dev — perfect signal. The hierarchy is obvious, no over-decoration. Strong sizes ensure scanning works at speed.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. They also use micro-units (1px, 2px) for borders or hairline gaps.

Common values:

That massive 492 count for 6px spacing is telling — this micro-gap is everywhere, probably in icon margins, nav spacing, button paddings.

4.2 Layout

Breakpoints are precise:
385px, 400px, 500px, 640px, 800px, 1000px, and a bunch in the 1000–1780 range. They fine-tune at specific widths — thinking about pixel-fit for their content blocks rather than just “mobile / tablet / desktop.”

5. Visual Elements

• Border Radius:

  • 4px: small cards
  • 6px 6px 0px 0px: top corners for cards/badges
  • 16px: buttons/menus
  • 20px: spans & buttons
  • 24px: cards/divs
  • 26px: pill-like buttons.
    Mix of tight (4px) and soft (26px) depending on function.

• Shadows:
  Some elements use strong offset shadows for retro/print-style buttons:

  • rgb(0,0,0) 6px 6px 0px 0px
  • rgba(0,0,0,0.682) 20px 20px 0px 0px
    Elsewhere: inset borders with white tints.

• Borders:
  Thin, often white with opacity, or colored (rgb(123, 97, 255)) for emphasis. They use none none solid patterns for underlines.

6. Components

6.1 Buttons

Variant 1: ch2-btn primary
Default:

• BG: #fefc4f
• Color: #000000
• Padding: 0 16px
• Radius: 0
• Shadow: rgb(0,0,0) 6px 6px 0px 0px

Hover:

• Box-shadow bright yellow glow (rgba(254, 252, 79, 0.4) 0px 0px 20px)
• Opacity: 0 (odd behaviour — possibly swapped content)

Active:

• BG: #19191c
• Outline: none
• Box-shadow: inset 1px primary

Focus:

• Box-shadow: var(--_rs-color-primary-t-dim) 0 0 0 4px
• BG: rgb(58,192,70) (green!)

Variant 2: ch2-btn secondary Same as primary but BG starts as white.

Variant 3: Large CTA
BG: rgb(72,224,84) green

• Padding: 12px 32px
• Radius: 26px
• Hover turns yellow (#fefc4f) with 2px border solid yellow

6.2 Links

Four styles:

• Electric blue → dark grey on hover
• Black with underline → removes underline on hover
• White → stays white
• Dark grey → darkens slightly on hover

6.3 Forms

No text input styles in provided data. Likely inline with product UI (sharp borders, small radii) but not extracted.

6.4 Cards

Radii: 4px, 24px
Borders: thin solid in purple (#7b61ff) or teal (rgba(12, 226, 200, 0.7))

7. Design Tokens (CSS Variables)

:root {
  /* Colors - Semantic */
  --color-primary: #fefc4f;
  --color-secondary: #ffffff;

  /* Palette accents */
  --color-electric-blue: #18a3fa;
  --color-deep-grey: #19191c;
  --color-black: #000000;
  --color-focus-blue: #005fcc;
  --color-hover-yellow: #fefc4f;

  /* Neutrals */
  --rs-color-grey-20: #d1d1d2;
  --rs-color-grey-10: #e8e8e8;
  --rs-color-grey-95: #252528;
  --rs-color-grey-60: #757577;
  --rs-color-grey-40: #a3a3a4;

  /* Functionals */
  --wt-color-success: #4dbb5f;
  --rs-color-danger: #f45c4a;
  --wt-color-error: #ef341e;

  /* Typography */
  --font-jetbrains-sans: "JetBrains Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial;
  --font-jetbrains-mono: "JetBrains Mono", Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md-top: 6px 6px 0 0;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 26px;

  /* Shadows */
  --shadow-offset-sm: rgb(0,0,0) 6px 6px 0 0;
  --shadow-offset-lg: rgba(0,0,0,0.682) 20px 20px 0 0;
}

8. AI Coding Assistant Prompt

# JetBrains Design System Specification

You are a JetBrains design expert. Build UIs matching their visual language exactly.

## Brand Context
JetBrains builds tools for developers. Their design language is high-contrast, precise, and minimal decoration. Colors are saturated and purposeful. Typography is clear, sans-serif for UI, monospace for code.

## Color Palette
- Primary Yellow: #fefc4f — Primary CTAs, key actions
- Secondary White: #ffffff — Text and background blocks
- Electric Blue: #18a3fa — Links, highlights
- Deep Grey: #19191c — Page background, dark containers
- Black: #000000 — Text, shadows, borders
- Focus Blue: #005fcc — Focus outlines
- Success Green: #4dbb5f — Success states
- Danger Red: #f45c4a — Error states
- Neutral Grey 20: #d1d1d2 — Borders
- Neutral Grey 95: #252528 — Dark backgrounds

## Typography
Font families:
- Headings & body: "JetBrains Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial
- Code: "JetBrains Mono", Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono

Type sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 79px | 500 | 0.90 | Hero titles |
| H1 | 72px | 600 | 1.00 | Main headings |
| H2 | 43px | 600 | 1.14 | Section headings |
| H3 | 35px | 600 | 1.20 | Sub-headings |
| Body Large | 20px | 400 | 1.40 | Paragraphs |
| Body Small | 16px | 400 | 1.50 | Secondary text |
| Caption | 13px | 400 | 1.54 | Labels

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px.
Use multiples for margins/padding.

## Border Radius
- sm: 4px — small cards
- md-top: 6px 6px 0 0 — badges/cards top corners
- md: 16px — buttons
- lg: 20px — large buttons
- xl: 24px — cards
- pill: 26px — pill buttons

## Shadows & Depth
- Small offset: rgb(0,0,0) 6px 6px 0 0 — retro button style
- Large offset: rgba(0,0,0,0.682) 20px 20px 0 0
- Inset borders for depth

## Component Specifications

### Primary Button
Default:
- background: #fefc4f
- color: #000000
- padding: 0 16px
- border-radius: 0px
- box-shadow: rgb(0,0,0) 6px 6px 0 0
Hover:
- box-shadow: rgba(254,252,79,0.4) 0px 0px 20px
Active:
- background: #19191c
Focus:
- box-shadow: var(--_rs-color-primary-t-dim) 0 0 0 4px

### Secondary Button
Same as primary but default background is #ffffff.

### Link Styles
- Electric blue (#18a3fa), no underline; hover: #161616
- Black underline (#000000); hover removes underline
- White (#ffffff); stays same on hover

### Card
- background: #ffffff or #252528
- border-radius: 4px or 24px
- border: 1px solid rgba(12,226,200,0.7) or #7b61ff

## Layout & Responsive Rules
Breakpoints: 385px, 400px, 500px, 640px, 800px, 1000px, 1050px, 1145px, 1240px, 1276px, 1430px, 1540px, 1776px.
Adjust font size and spacing at each break to maintain rhythm.

## Interaction Rules
- Transition timing: 150ms ease on background, color changes
- Focus indicators: visible outlines with focus blue
- Hover states: glow or shadow for CTAs

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use JetBrains Sans for body; JetBrains Mono for code
- Respect border radius tokens
- Keep link colors consistent

## DON'T List
- Don’t use random shadows
- Don’t mix unrelated font families
- Don’t introduce new border styles
- Don’t alter link hover behavior

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #fefc4f;
  color: #000;
  padding: 0 16px;
  border-radius: 0;
  box-shadow: rgb(0,0,0) 6px 6px 0 0;
}
.btn-primary:hover {
  box-shadow: rgba(254,252,79,0.4) 0 0 20px;
}
```

Link:
```css
.link {
  color: #18a3fa;
  text-decoration: none;
}
.link:hover {
  color: #161616;
}
```

Card:
```css
.card {
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(12,226,200,0.7);
}
```

9. Summary

TL;DR — JetBrains’ design system is developer-native: precise typography, high-contrast colors, and an 8px grid. It mixes dark mode dominance with saturated accents to keep interfaces lively. Buttons have crisp geometry, links are predictable, and layout breakpoints are surgical.

Brand Keywords:

• tech-focused
• high-contrast
• precision-grid
• developer-friendly