2GIS Design System Deep Dive

1. Brand Overview

2GIS is a mapping and directory platform. This isn’t Google Maps clone territory — it’s built with a utilitarian, no-fuss personality. The interface is stripped down to what’s necessary for navigating and finding locations, but with just enough polish to feel modern. You can see the design philosophy immediately: minimal chrome, neutral colors, precise typography, and a predictable component rhythm.

The vibe: pragmatic urban navigation. The colors are restrained, dominated by deep gray (#262626), balanced neutrals, and a couple of functional greens and blues for interactive states. It’s clear they’re not chasing "brand splash" — they want clarity over decoration. Buttons are clean, shadows are subtle and functional, and the typography is consistent across headings, buttons, and links.

This is aimed at users who value quick orientation and legibility over visual extravagance. Think commuters, delivery drivers, or tourists — people who want the UI to get out of their way. The design system supports that: the palette avoids bright distractions, the spacing grid is tight, and the type ramp is compressed to keep everything readable without overwhelming the map canvas.

From a design systems perspective, 2GIS leans toward a functionalist approach: strict spacing multiples (mostly 4px and 8px), a single font family (SBSansText with Helvetica/Arial fallbacks), and predictable component states. There’s no random flair — buttons have logical hover colors, links shift on hover, and shadows are used sparingly to differentiate layers.

I like the discipline here. It’s easy to imagine a team making ad-hoc visual tweaks over time, but 2GIS keeps things consistent. The result: a brand experience that’s easy to scale across apps, kiosks, and web without losing its identity.

2. Color System

2.1 Primary Colors

The main brand color in this UI is a vivid green (#30ad00), used for links and certain interactive highlights. There’s also a secondary green (#299400) and a functional blue (#0072ce) for actions. The base text color is dark gray (#262626), with mid-gray (#929292) for secondary text.

The psychology here:

• Green suggests "go", approval, or active state — appropriate for navigation prompts.
• Blue signals interactive elements, especially in mapping contexts (water, selection, tech).
• Gray keeps the rest of the interface neutral, letting the map content dominate.

Compared to competitors like Google Maps (which uses brighter blues and more color variety), 2GIS is more muted — possibly to keep focus on map detail.

2.2 Complete Palette

2.3 Color Relationships

Dark gray text on white background passes WCAG AA easily — high contrast. The greens on white also pass comfortably. The cool gray (#989bab) is borderline for body text on white — it’s fine for captions but too low contrast for primary content. Blue (#0072ce) on white is safe for accessibility.

There’s no explicit dark mode here — the palette is clearly optimized for a light UI. Greens and blues are saturated enough to stand out against the pale background without clashing with map colors.

2.4 Usage Guide

• Pairing: White + dark gray = default text. White + green = clickable link. White + blue = clickable action.
• Avoid: Using cool gray for large blocks of text — it’s meant for subtle info.
• Interactive: Hover states often shift color to black, ensuring clarity.
• Map overlays: Keep accents minimal — the map already has its own visual hierarchy.

3. Typography

3.1 Font Families

Everything runs on SBSansText with fallbacks to Helvetica and Arial. No Google Fonts or Adobe Fonts — likely a custom corporate font.

This consistency works well. There’s no mix of serif headings or decorative scripts — it’s utilitarian sans-serif across the board.

3.2 Type Scale

3.3 Hierarchy

The type hierarchy is compressed — the largest text is 20px, which is actually a button label. Headings are 19px, so titles feel compact. Body/links hover around 14px, captions dip to 13px or 11px.

This keeps the interface tight, which works for a dense mapping UI where screen real estate is precious. Line heights are generous enough for readability, and letter-spacing is slightly negative — tightening text without hurting legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with some 4px increments. Actual values:

4.2 Layout

Single breakpoint at 840px — likely the switch between mobile and desktop layouts. No wide desktop grid — this is more about stacking vs side-by-side panels.

5. Visual Elements

Border Radius System

Shadow System

Shadows are subtle — mostly small blur, low opacity. Examples:

• rgba(38,38,38,0.5) 0px 1px 3px 0px — standard soft shadow
• rgb(230,230,230) 0px 0px 0px 1px — border-like shadow
• Occasional inset shadows for pressed states

Borders & Dividers

Minimal borders — mostly 1px solid rgb(230,230,230) for separators, or bottom borders in lists.

6. Components

6.1 Buttons

Primary (circular)
Default:

• bg: #ffffff
• text: #262626
• padding: 0px
• radius: 200px
• border: 4px solid #ffffff
• shadow: rgba(64,64,64,0.5) 0px 1px 3px 0px
  Hover: text #999999

Secondary (rectangular)
Default:

• bg: #f2f2f2
• text: #929292
• radius: 4px
• border: none
  Hover: text #999999
  Active: text #028eff

6.2 Links

Multiple variants: green, cool gray, dark green, black, blue, dark gray. All remove underline in default, add underline on hover. Hover color often shifts to black.

6.3 Forms

Text inputs:

• bg: transparent
• text: #262626
• border: none
• padding: 12px 6px 12px 16px
  No visible focus style in data — likely handled in JS.

6.4 Cards

Not explicitly defined, but shadows suggest cards use rgba(38,38,38,0.5) 0px 1px 3px 0px and small radius.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #262626;
  --color-mid-gray: #929292;
  --color-white: #ffffff;
  --color-cool-gray: #989bab;
  --color-blue: #0072ce;
  --color-green: #30ad00;
  --color-dark-green: #299400;

  /* Typography */
  --font-family-base: "SBSansText", Helvetica, Arial;
  --font-size-button-lg: 20px;
  --font-size-heading: 19px;
  --font-size-body: 14px;
  --font-size-caption-sm: 13px;
  --font-size-link-xs: 11px;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 200px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(38,38,38,0.5) 0px 1px 3px 0px;
  --shadow-light-border: rgb(230,230,230) 0px 0px 0px 1px;
}

8. AI Coding Assistant Prompt

# 2GIS Design System Specification

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

## Brand Context
2GIS values functional clarity and minimalism. The interface prioritizes legibility, restrained color use, and consistent spacing. Components are compact, with predictable states and subtle depth.

## Color Palette
- Dark Gray: #262626 — Primary text, icons
- Mid Gray: #929292 — Secondary text, inactive states
- White: #ffffff — Backgrounds, surfaces, buttons
- Cool Gray: #989bab — Tertiary text, captions
- Blue: #0072ce — Links, active states
- Green: #30ad00 — Primary links, affirmative states
- Dark Green: #299400 — Secondary links, hover states

## Typography
Font: "SBSansText", Helvetica, Arial  
No web font import — assume system fallback if SBSansText unavailable.

| Element    | Size  | Weight | Line Height | Letter Spacing | Use For |
|------------|-------|--------|-------------|----------------|---------|
| Button-lg  | 20px  | 400    | —           | —              | Primary action buttons |
| Heading-1  | 19px  | 400/500| 1.26        | -0.9px         | Titles |
| Button-sm  | 19px  | 400    | 1.26        | -0.9px         | Secondary actions |
| Body/link  | 14px  | 400    | 1.21/1.29   | -0.6/-0.7px    | Main body text |
| Caption    | 13px  | 400    | 1.23        | -0.6px         | Small labels |
| Link-xs    | 11px  | 400/500| 1.27        | -0.4px         | Footer links |

## Spacing & Grid
Base: 8px grid.  
Values: 3px, 4px, 5px, 6px, 8px, 9px, 10px, 12px, 16px, 20px, 28px.  
Use multiples for all paddings and margins.

## Border Radius
- none: 0px — square edges
- sm: 4px — inputs, small buttons
- md: 10px — rare large rounding
- pill: 200px — circular buttons
- full: 50% — avatars, icons

## Shadows & Depth
- Soft: rgba(38,38,38,0.5) 0px 1px 3px 0px — buttons, cards
- Light border: rgb(230,230,230) 0px 0px 0px 1px — separators

## Component Specifications

### Primary Button (circular)
Default: bg #ffffff, color #262626, padding 0px, radius 200px, border 4px solid #ffffff, shadow soft  
Hover: color #999999  
Font: 20px, weight 400

### Secondary Button (rectangular)
Default: bg #f2f2f2, color #929292, radius 4px, no border, no shadow  
Hover: color #999999  
Active: color #028eff  
Font: 14px, weight 400

### Navigation Link (green variant)
Default: color #30ad00, no underline  
Hover: color black, underline

### Input Field
Default: bg transparent, color #262626, border none, radius 0px, padding 12px 6px 12px 16px  
No explicit focus style — add if needed for accessibility.

## Layout & Responsive Rules
Breakpoint: 840px — mobile vs desktop.  
On mobile: stack panels, reduce padding.  
On desktop: side-by-side content, maintain 16px gutters.

## Interaction Rules
- Transitions: 150ms ease on hover/active states
- Hover: color shift to black for links
- Focus: ensure visible indicator for accessibility

## DO List
- Use only colors from the palette
- Maintain multiples of 8px for spacing
- Use SBSansText for all text
- Keep button shapes consistent with radius tokens
- Ensure hover states change color for clarity

## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners in same component
- Don’t use large shadows — keep depth subtle
- Don’t use cool gray for body text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #262626;
  padding: 0;
  border-radius: 200px;
  border: 4px solid #ffffff;
  box-shadow: rgba(64,64,64,0.5) 0px 1px 3px 0px;
  font-size: 20px;
  font-weight: 400;
  transition: color 150ms ease;
}
.btn-primary:hover {
  color: #999999;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #f2f2f2;
  color: #929292;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 150ms ease;
}
.btn-secondary:hover {
  color: #999999;
}
.btn-secondary:active {
  color: #028eff;
}
```

### Input Field
```css
.input-text {
  background: transparent;
  color: #262626;
  border: none;
  border-radius: 0px;
  padding: 12px 6px 12px 16px;
  font-family: "SBSansText", Helvetica, Arial;
}
.input-text:focus {
  outline: 2px solid #0072ce;
}
```

9. Summary

TL;DR — 2GIS runs a tight, utilitarian design system: muted palette, compact type ramp, 8px grid, subtle shadows. Everything is built for clarity over decoration.

Brand Keywords:

• functional-minimalist
• urban-pragmatist
• compact-clarity
• map-focused