Skip to content
Digital Service Center

Brand

Logo and design system

Mark, palette, typography and motion rules in one place, so the site, documents and hardware look the same.

Mark concept

The mark is a DSC monogram. The letter D is drawn as one smooth open line — the contour is deliberately broken at the bottom: a system open to new connections.

Inside the letter are three connected dots: software, artificial intelligence and hardware. The traces between them read at once as a circuit board path, a neural network node and a data flow.

The mark is built from straight lines and arcs of constant radius. It stays legible from a 16 px favicon to screen printing on a device chassis, with no separate simplified version.

Logo versions

Logo versions

The horizontal lockup is primary. The monogram is used where width is short.

  • Digital Service Center

    Primary horizontal

    Website, decks, documents

  • Digital Service Center

    On dark

    Covers, video, hardware

  • Compact monogram

    Avatar, stamp, labelling

  • Single colour

    Engraving, fax, embossing

What we never do

  • Never stretch the mark or change individual stroke weights
  • Never place the logo on a busy background without a plate
  • Never fill the letter D with a gradient — the gradient lives in the nodes only
  • Never add shadows or outlines to the mark
  • Clear space around the mark is at least the height of an inner dot

Palette

Palette

Light neutrals carry the page. Brand colours act as accents: they never cover more than a few percent of the surface.

  • Canvas
    #F7F8FA
  • Surface
    #FFFFFF
  • Ink
    #101114
  • Muted
    #6B7078
  • Brand
    #176BFF
  • Sky
    #64C7FF
  • Violet
    #755CFF
  • mesh gradient

Typography

Typography

Manrope for headings, Inter for body text. Sizes use clamp(): one set of rules serves both a phone and a wide monitor.

  • Aa--text-displayclamp(2.75rem, 1.4rem + 5.4vw, 6rem)
  • Технологии--text-h1clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem)
  • Единая экосистема--text-h2clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem)
  • Направления работы--text-h3clamp(1.375rem, 1.05rem + 1.1vw, 2rem)
  • Подзаголовок раздела--text-leadclamp(1.0625rem, 0.98rem + 0.55vw, 1.4375rem)
  • Основной текст страницы--text-bodyclamp(1rem, 0.97rem + 0.16vw, 1.0625rem)

Motion

Motion

Animation explains structure rather than drawing attention to itself.

  • Primary easing — cubic-bezier(0.22, 1, 0.36, 1): fast start, soft landing
  • Block reveal — 0.6–0.8 s with no more than 24 px of travel
  • Data pulses follow the connection lines, not decorative paths
  • Every effect switches off under prefers-reduced-motion: reduce
  • Parallax and hover are not attached on mobile devices