Typography
IDE font
The system fonts are used for the IDE user interface by default. The default font sizes are below:
macOS | SF Pro Text | 13 |
---|---|---|
Window | Segoe UI | 12 |
Linux | Ubuntu | 15 |
Users can change the default font size in Settings. If the default font size is changed, other font sizes used in the UI are scaled respectively.
Use the built-in text styles from the table below whenever possible.
Font | Font size | Usage Examples |
---|---|---|
H0 bold
| Default + 12 | Rich text headers. See the "What’s New" page example below. |
H1 bold
| Default + 9 | |
H2
| Default + 5 | |
H2 bold
| Small page header. Examples: Plugin name, GitHub timeline header | |
H3
| Default + 3 | Accent body text |
H3 bold
| Headers in dialogs with a small number of elements (Customize page on Welcome screen, Login page in Get from VCS dialog) | |
H4 bold (Default bold)
| Default | Header in dialogs with a large number of elements (Run configurations dialog), notification header, breadcrumbs in settings, header in navigation popup, accent elements in lists and trees. Use Group header to divide the page on groups, but not to draw too much attention to the headings. |
Default
| Default | Labels, inputs, links, trees, tables and other controls; text outputs, notifications, shortcuts |
Paragraph | Default Line height default + 3 | Multiline description text |
Medium
| macOS: Default - 1 Win: Default Linux: Default - 1 | Tool window header, navigation bar, editor breadcrumbs, editor tabs (small on macOS) |
Medium bold
| Module in the navigation bar | |
Small
| macOS: Default - 2 Win: Default Linux: Default - 2 | Status bar, tool window buttons, inline help, help text in tooltips, separators in lists |
If none of the built-in sizes work and a custom one is needed, define it as the default size +/- constant value. Do not hardcode font sizes.
Use the underlined text style for hovered links.
Editor font
JetBrains Mono font is used by default for the Editor.
Name | Font size | Usage |
---|---|---|
Default | Default | Editor |
Small | Default - 1 | Line number |
Colors
The IDE text colors are in the table below. The editor text colors are managed by the editor color theme.
Name | Light | Dark | Usage | Color key |
---|---|---|---|---|
Default | 000 | BBB | Labels, inputs, trees, etc. |
Examples:
|
Info panel | 808080 | 8C8C8C | Inline help, shortcuts |
|
Info input | 999999 | 787878 | Additional info in lists (paths, counters), placeholder |
|
Disabled | 8C8C8C | 777777 | Disabled labels, disabled links |
Examples:
|
Selected | FFF on BACKGROUND | FFF on BACKGROUND | Selected text |
Examples:
|
Link | 2470B3 | 589DF6 | Links | Use the component Color keys:
|
Error | C7222D | FF5261 | Inline errors text |
|
Examples
What’s New page that appears in the Editor tab:
Plugin page in the Settings dialog:
Log in to GitHub page in the dialog: