# JetBrains — Design System
> Professional-grade development tools and IDEs for software engineers and teams.
- **Canonical:** https://uiuxskills.com/library/jetbrains
- **Source:** https://www.jetbrains.com/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:16.067Z

---

---
version: alpha
name: JetBrains
description: Professional-grade development tools and IDEs for software engineers and teams.
tone: Professional, authoritative, technical, and helpful.
color-scheme: light
colors:
  primary: "#0047FD"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  warning: "#F57C00"
  info: "#0288D1"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0036C7"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0036C7"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

JetBrains maintains a highly professional, technical, and performance-oriented visual identity. The design system emphasizes clarity, density, and functional hierarchy, catering to a developer audience that values efficiency and tool reliability.

## Colors

The color palette is strictly functional, utilizing a high-contrast blue for primary interactions and a neutral grayscale for structural elements to ensure maximum readability.

*   Primary (#0047FD): The core brand blue used for primary CTAs and active states.
*   Surface (#FFFFFF): Main background color for the application and marketing site.
*   Surface-dim (inferred) (#F5F5F5): Light gray background for section differentiation.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and active elements.
*   Outline (inferred) (#E0E0E0): Border color for cards and input fields.
*   Error (inferred) (#D32F2F): Semantic color for errors and alerts.
*   Success (inferred) (#388E3C): Semantic color for success states.
*   Warning (inferred) (#F57C00): Semantic color for warnings.
*   Info (inferred) (#0288D1): Semantic color for informational elements.

## Typography

The typography uses a clean, system-based sans-serif stack to maintain a professional and legible interface across all technical documentation and product marketing.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-lg (inferred): Used for sub-section headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Label-sm (inferred): Used for small labels and metadata.

## Layout

The site employs a responsive grid system with a max-width container that centers content. Spacing is consistent, utilizing a 4px base unit to manage margins and padding. The page follows a logical progression: nav, hero, features, ecosystem, teams, business, and footer. The hero pattern features a centered headline and subhead with a primary CTA, while the responsive behavior ensures navigation collapses into a drawer on mobile viewports.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows on interactive cards and navigation elements. The values are inferred based on the clean, flat aesthetic.

*   Elevation.sm: Subtle lift for interactive cards on hover.
*   Elevation.md: Standard depth for cards and UI containers.
*   Elevation.lg: Pronounced depth for modal or drawer overlays.

## Shapes

The brand uses a conservative approach to border-radius, favoring small values to maintain a sharp, professional look. Components utilize the `rounded.sm` (2px) and `rounded.md` (4px) tokens for most UI elements, avoiding overly rounded or soft edges.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
These are the primary action drivers, featuring a `{colors.primary}` background and `{colors.on-primary}` text. Use these for main conversion points like "Download" or "Learn more."

### Card
The standard container for grouping related content, utilizing `{rounded.md}` and a `{colors.outline}` border. Use these to organize feature lists or product highlights.

### Badge
Small, informative labels using `{colors.surface-dim}` backgrounds. Use these to categorize content or display status indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Avoid using `{colors.primary}` for large background fills. |
| Apply `{typography.headline-lg}` for main section headers. | Never use `{typography.label-sm}` for primary body content. |
| Use `{rounded.md}` for all card containers. | Do not use rounded corners larger than `{rounded.lg}`. |
| Maintain `{spacing.md}` between grid items. | Avoid excessive use of shadows; keep elevation minimal. |
| Use `{colors.on-surface}` for body text. | Do not mix font families; stick to system sans-serif. |
| Apply `{elevation.sm}` to interactive cards on hover. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.outline}` for input field borders. | Avoid low-contrast borders for input fields. |
| Use `{badge.backgroundColor}` for secondary labels. | Do not use high-saturation backgrounds for metadata. |

## Content Style

CTA labels use imperative verbs in sentence case, kept clear and concise to drive immediate action.

Headings are benefit-driven and professional, focusing on the value provided to the developer or business user rather than marketing fluff.

Copy density is designed to be scannable, utilizing short paragraphs and clear headings to allow users to digest technical information quickly.

## Imagery & Icons

The imagery style is mixed, incorporating high-fidelity product screenshots, clean vector icons, and professional logo lockups. All visual assets should maintain a high-contrast, technical aesthetic that aligns with the professional brand tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for JetBrains, a minimal enterprise developer-tools brand. Match its precise, technical, and authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw shadow strings.
2. Respect the components block exactly. Use only the variants defined there (`button-primary`, `button-secondary`, `card`, `card-elevated`, `badge`, `badge-error`, `badge-success`, `badge-warning`, `badge-info`). Do not invent variants.
3. Apply the radius scale conservatively: `{rounded.sm}` for inputs, `{rounded.md}` for cards, no radius larger than `{rounded.lg}` on any element, per the Shapes narrative.
4. When the Do's and Don'ts table conflicts with a user request, surface the conflict explicitly before proceeding — do not silently override the spec.
5. Tokens marked "(inferred)" in the prose are visual approximations. If an authoritative source (theme file, Storybook, metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for interactive components when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values — no arbitrary sizes.
- Render `{elevation.sm}` on interactive cards on hover; keep shadow usage minimal per the Do's and Don'ts.
- Write CTAs in imperative sentence case, matching the Content Style section.

**Must NOT:**
- Invent colors, font families, or radii outside the spec.
- Use generic system-default utility values when a brand token exists.
- Apply `{colors.primary}` as a large background fill.
- Use radius larger than `{rounded.lg}` on any element.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or reorder page copy, headings, navigation items, or page sections.

## When in doubt
- If a value isn't in the spec, ask the user before inventing one.
- For background roles, default to `{colors.surface}` or `{colors.surface-dim}`; for text on those surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, follow the Layout narrative; if absent, apply mobile-first with one breakpoint at 768px.
- Prefer composing existing components over introducing new tokens.
- Inferred tokens are approximations — flag them in comments if used in production-bound output.