The design system serves as a cohesive framework that ensures consistency and visual integration throughout the project. It provides a set of guidelines, styles, and elements contributing to a unified and user-friendly mapping experience. Any graphic decision made within a project must align with the design system and be justified by permissions and restrictions within the guidelines. Additionally, the design system enhances the efficiency of the design process.
MPORTANT NOTE! This design system may be displayed incorrectly on most mobile devices (including iPhone) and some Windows-run computers. The issue stems from not outlining the text in the SVG files. However, to be honest, I'm not very enthusiastic about redoing everything now... Maybe later, one day... :)
Gridline every: 1 mm
Subdivisions: 2
Snap to: grid
CMYK colors
Green metro line CMYK: 75/0/100/0
Yellow metro line CMYK: 0/35/85/0
Ruby metro line CMYK: 35/100/35/10
Rose metro line CMYK: 0/66/3/0
Stroke width: 5,5 pt
Turquoise metrobus line CMYK: 80/10/45/0
Stroke width: 5,5 pt
Grey train line CMYK: 0/0/0/100
Stroke width: 5,5 pt
STCP bus lines CMYK: 0/0/0/100
Other bus lines CMYK: 75/68/67/90
Tram lines CMYK: 70/15/0/0
Funicular lines CMYK: 10/100/50/0
Stroke width: 0,5 mm
Arrows on one-direction lines:
An isosceles triangle inscribed in a rectangle sized 2 x 3 mm
Stroke width: 0,5 mm
Stroke color: corresponds to the line color
When a 0,5 lines crosses a 5,5 line, and underlying line 2 pt width is needed in order to create a "bridge"
Spacing between 5,5 pt lines: 4 mm
Spacing between 0,5 pt lines: 3 mm
Spacing between 5,5 pt and 0,5 pt lines: 4 mm
Rounding radius on 5,5 pt lines with a 90° bend: 8 mm
Rounding radius on two adjacent 5,5 pt lines with a 90° bend:
Outer line: 12 mm
Inner line: 8 mm
Rounding radius on 5,5 pt lines with a 135° bend: 12 mm
Rounding radius on 5,5 pt lines with a 90° bend on a bifurcation: 16 mm
Rounding radius on 0,5 pt lines with a 90° bend: 3 mm
Rounding radius on 0,5 pt lines with a 135° bend: 5 mm
Rounding radius on two adjacent 0,5 pt lines with a 90° bend:
Outer line: 5 mm
Inner line: 3 mm
Rounding radius on two adjacent 0,5 pt lines with a 135° bend:
Outer line: 5 mm
Inner line: 3 mm
Metro station circle:
Diameter: 3 mm
Fill: corresponds to the line color
Stroke width: 2 pt
Stroke align: to outside
Stroke color: white
Stroke color on colored background: corresponds to the background color
Bus stops circle:
Diameter: 2 mm. Fill: white
Stroke width: 0,5 pt. Stroke color: black. Stroke align: to inside
Tram stops circle:
Diameter: 2 mm. Fill: blue CMYK 85/50/0/0.
Stroke width: 0 pt.
Transfer between 0,5 pt lines:
Diameter of the circumference: 4 mm
Spacing between the centers of circumferences: 3 mm
Rounding radius at the corner of merged circumferential areas: 1,77 mm
Transfer between 5,5 pt lines:
Diameter of the circumference: 5 mm
Spacing between the centers of circumferences: 4 mm
Rounding radius at the corner of merged circumferential areas: 2 mm
Transfer between 0,5 pt and 5,5 pt lines:
Diameter of the circumferences: 4 and 5 mm
Spacing between the centers of circumferences: 3,5 mm
Rounding radius at the corner of merged circumferential areas: 2 mm
Complex transfer between 0,5 pt and 5,5 pt lines:
Diameter of the circumferences: 4 and 5 mm
Spacing between the centers of circumferences: 3 mm / 4 mm/ 4 mm
Rounding radius at the corner of merged circumferential areas: 1,77 mm / 2 mm / 2 mm
Complex transfer between 0,5 pt and 5,5 pt lines in L shape:
Diameter of the circumferences: 4 and 5 mm
Spacing between the centers of circumferences: 4 mm
Rounding radius at the corner of merged circumferential areas: outer: 2,14 mm, inner: 0,84 mm
Metro and train stations:
Typeface: Fira Sans Condensed
Width: 500 medium
Font size: 11 pt
Leading: 11 pt
Color: black
Bus and tram stops:
Typeface: Fira Sans Condensed
Width: 400 regular
Font size: 10 pt
Leading: 10 pt
Color: black
STCP terminal bus numbers and provided destinations:
Typeface: Fira Sans Condensed
Number width: 600 semibold
Destination width: 400 regular
Font size: 8 pt
Leading: 8 pt
Color CMYK: 18/100/91/8
Arrows alignment
Other terminal bus numbers and provided destinations:
Typeface: Fira Sans Condensed
Number width: 600 semibold
Destination width: 400 regular
Font size: 8 pt
Leading: 8 pt
Color CMYK: 85/50/0/0
Arrows alignment
Leading between terminal stop and number/destination (baseline): 3 mm
Passing transportation on a line:
Typeface: Fira Sans Condensed
Style and width: 400 regular italic
Font size: 8 pt
Leading: 8,5 pt
Color for STCP bus numbers: black
Color for other buses number: CMYK 85/50/0/0
Color for tram numbers: 71/16/0/0
Baseline aligned to the closest circle
Distace between matrioshka and text: 1 mm
Baseline aligned to the closest circle
Distace between matrioshka and text: 1 mm
Baseline aligned to matrioshka bottom point
Distace between matrioshka and text: 1 mm
Baseline aligned to circle top point
Distace between circle's right point and text: 1 mm
Alternative positioning:
Baseline elevated 1 mm top from the circle's bottom point
Distace between circle's right point and text: 1,5 mm
Distance between baseline and matrioshka's bottom point: 4 mm
Text aligned to matrioshka right point
Baseline elevated 1 mm top from circle's bottom point
Distace between matrioshka's right point and text: 1,5 mm
Distance between baseline and matrioshka's bottom point: 3 mm
Distance between baseline and matrioshka's top point: 1 mm
Text aligned to circle's right pont
Distance between baseline and matrioshka's bottom point: 3 mm
Text aligned to circle's right pont
Distance between baseline and matrioshka's bottom point: 3 mm
Text aligned to closest circle's left point
Distance between baseline and natrioshka's bottom point: 3,5 mm
Alternative positioning:
Baseline aligned to closest circle's bottom point
Distance between text and matrioska's right point: 1 mm
Baseline aligned to the closest circle
Distance between text and matrioshka's right point: 1 mm
Baseline aligned to circle's right point.
Distance between text and matrioshka's right point: 1 mm
Distance between text and circle's right point: 1 mm
Text aligned to the centre of the circle
Distance between baseline circle's top point: 1 mm
Distance between baseline and circle's bottom point: 3,5 mm
Bus number above line, distance between text baseline and bus line: 1 mm
Bus number below line, distance between text baseline and bus line: 3 mm
When the space is limited, it's permitted to place the text in between lines.
Bus number above line, distance between text baseline and bus line: 0,5 mm
Bus number below line, distance between text baseline and bus line: 3,5 mm
Distance between vertical line and text: 1 mm
When the bus line is 45° inclined:
Bus number above line, distance between text baseline and bus line: 0,7 mm
Bus number below line, distance between text baseline and bus line: 1,5 mm
Icon size: 3 x 3 mm
Icon CMYK color: 30/50/75 10
Andante icon CMYK color: 85/50/0/0
When icon above text:
Distance between icon bottom and text baseline: 3 mm
When icon is left positioned, text is aligned to the right, and vice versa
Icon and text are aligned to the text bottom baseline
Distance between icon's lateral side and text: 1 mm
Alternatively, for optical alignment, an icon can be moved upwards, so the first text baseline is 1 mm lower icon's top point
Icon and text can be centrally aligned
Distance between icon's bottom point and first text baseline: 3 mm
Stadium rectangle size: 9 x 14 mm
Stroke: stylized brush
Stroke CMYK color: 24/40/62/0
When stadium positioned horizontally:
Icon is centrally aligned with stadium's top border
First text line's baseline runs along stadium's horisontal axis
When stadium positioned vertically:
Top icon point is 1,5 mm lower top stadium border point
Distance between bottom icon point and text's first baseline: 3 mm
Parks, gardens and natural reservations:
Typeface: Fira Sans Condensed
Font width: 400 regular
Font size: 8 pt
Leading: 8,5 pt
Font color CMYK: 90/30/95/30
Rectangle fill: patten
Rectangle border width: 0,25 mm
Rectangle border CMYK color: 50/0/100/0
Rectangle corner rounding: min. 2 mm
Beaches:
Typeface: Fira Sans Condensed
Font width: 400 regular
Font size: 8 pt
Leading: 8,5 pt
Font color CMYK: 90/30/95/30
Rectangle color CMYK: 0/12/25/0
Rectangle border width: 0,25 mm
Rectangle border CMYK color: 0/33/79/0
Rectangle corner rounding: min. 2 mm
Cemiteries:
Typeface: Fira Sans Condensed
Font width: 400 regular
Font size: 8 pt
Leading: 8,5 pt
Font color CMYK: 0/0/0/100
Rectangle fill: 0/0/0/20
Rectangle border width: 0,25 mm
Rectangle border CMYK color: 0/0/0/30
Rectangle corner rounding: min. 2 mm
Industrial zones:
Typeface: Fira Sans Condensed
Font width: 400 regular
Font size: 8 pt
Leading: 8,5 pt
Font color CMYK: 0/0/0/100
Rectangle fill: pattern
Rectangle border width: 0,25 mm
Rectangle border CMYK color: 0/0/0/25
Rectangle corner rounding: min. 2 mm
Minimal distance between points of interest and transport lines: 1 mm
Optimal distance between points of interest and transport lines: 2 mm
Rivers:
Stroke: a pattern brush
River title:
Typeface: Baskerville semibold italic
Font size: 9,6 pt
Tracking: 60
CMYK color: 85/50/0/0
Walkable transfer:
Dashed line: dash 1 pt, gap 1 pt
Stroke width: 0,25 pt
Stroke color: black
CMYK colors for Andante zones:
Green: 10/0/17/0
Yellow: 2/0/16/0
Pink: 0/11/0/0
Purple: 7/8/0/0
Orange: 0/9/11/0
White: 0/0/0/0
Zone abbreviation style:
Typeface: Fira Sans
Font weight: 700 bold
Font size: 30 pt
Tracking: 20
Font color: transparent
Stroke color CMYK: 0/0/0/20
Stroke width: 1 pt
