# Infotecs.ru Design System

> Enterprise cybersecurity anchored in deep navy surfaces, punctuated by high-contrast teal accents and structured Roboto typography.

**Source:** https://infotecs.ru | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Infotecs utilizes a "Deep Security" aesthetic characterized by a dominant navy palette (`#243254`) and a vibrant teal primary accent (`#04a7b5`). The system relies on **Roboto** for all hierarchical levels, using bold weights (700) and large scales (48px) to establish authority in hero sections. Layouts are strictly modular, utilizing cards with generous 20px corner radii and subtle soft shadows (`rgb(240, 240, 246)`) to separate technical content from the white canvas. Interactive elements are clearly defined by teal borders or solid fills, maintaining a high-density information environment typical of enterprise software.

## Signature DNA
1. **The Teal Pulse** (`#04a7b5`): Used as the singular high-voltage accent for CTAs, active states, and primary iconography against both white and navy backgrounds.
2. **Soft-Shell Modularism**: Content is encapsulated in cards with a specific 20px radius and a light blue-tinted shadow, creating a layered effect that softens the technical density.
3. **Navy Foundation** (`#243254`): Large-scale structural blocks (footers, hero overlays, and tab headers) use this deep blue to signal stability and "defense" context.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surface | 150 | 1.0 | Computed Style |
| `{color.ink.darkest}` | `#000000` | Primary text, dropdown backgrounds | 47 | 1.0 | `--vs-colors--darkest` |
| `{color.surface.muted}` | `#f4f7f9` | Disabled states, subtle section backgrounds | 2 | 1.0 | `--vs-disabled-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#04a7b5` | CTAs, active borders, brand icons | 84 | 1.0 | Resolved Primary |
| `{color.navy}` | `#243254` | Section headers, footer background, primary text | 183 | 0.8 | Computed Style |
| `{color.blue.alt}` | `#245b8f` | Secondary text, link states | 81 | 0.8 | Computed Style |
| `{color.sky}` | `#48b2ed` | Decorative surface accents | 5 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.error}` | `#fb5858` | Deselect/Error states (from `--vs-dropdown-option--deselect-bg`) |
| `{color.link.active}` | `#5897fb` | Active dropdown selection (from `--vs-dropdown-option--active-bg`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Roboto** | 300, 400, 500, 700 | All headings, UI, and body | N/A (Google Font) | Apache 2.0 |
| **Arial** | 400 | Map UI, fallback body | N/A | System |
| **Verdana** | 400 | Legal/Copyright captions | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.h1}` | 48px | 56px | normal | 700 | Hero titles | `div.b-banner-with-slider__slide-title.h1` |
| `{type.heading.lg}` | 36px | 42px | normal | 700 | Section titles | `div.b-about-advantages__item-title` |
| `{type.heading.md}` | 32px | 36px | normal | 700 | Tab/Sub-section heads | `div.b-banner-tabs__title.h2` |
| `{type.heading.sm}` | 20px | 26px | normal | 700 | Card titles | `div#10` |
| `{type.body.lg}` | 18px | 21px | normal | 400 | Hero subtitles | `div.b-banner-with-slider__slide-subtitle` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body, buttons | `span.b-button__text` |
| `{type.body.sm}` | 14px | 18.2px | normal | 500 | Tags, metadata | `div.b-event-slider__slide-tag` |
| `{type.caption}` | 11px | 14px | normal | 400 | Copyright, small legal | `ymaps.ymaps-2-1-79-copyright__content` |

### Principles
1. **Bold Hierarchy**: Display headings must use weight 700 to contrast against the lighter body weights.
2. **Tight Leading**: Headings maintain a tight line-height (approx 1.15x) to keep multi-line titles cohesive.
3. **Weight-Based Emphasis**: Use weight 500 for interactive tags and metadata to distinguish from 400 body text.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 8px | 25 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 24px | 25 |
| `{space.xl}` | 32px | 10 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Form inputs, specific surfaces | 217 occurrences |
| `{radius.sm}` | 5px | Secondary buttons, small tags | `Surface` component |
| `{radius.md}` | 10px | Primary buttons, controls | `Rounded Button` component |
| `{radius.lg}` | 20px | Standard content cards | `Card` component |
| `{radius.full}` | 50% | Icon containers, avatars | `Card` (circular) component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgb(240, 240, 246) 3px 4px 30px 0px` | Standard feature cards | 41 occurrences |
| `{shadow.subtle}` | `rgba(34, 79, 122, 0.1) 0px 0px 15px 0px` | Hover states or secondary cards | 12 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary actions.
**Pages observed:** Home, About.
**Spec:** 
- Background: `rgba(255, 255, 255, 0)` (Secondary) or `#04a7b5` (Primary)
- Text: `#04a7b5` or `#ffffff`
- Radius: `10px`
- Padding: `10px 32px`
- Typography: `Roboto 16px`
**States observed:** Default | Hover: Captured | Active: Captured

#### Surface Tag
**Role:** Categorization and status labels.
**Pages observed:** Home, About.
**Spec:**
- Background: `rgba(0, 0, 0, 0)`
- Border: `1px solid #04a7b5`
- Radius: `5px`
- Padding: `12px 36px`
- Typography: `Roboto 14px`

### Tier 2: Patterns

#### Feature Card
**Role:** Main content container for products and solutions.
**Pages observed:** Home, About.
**Spec:**
- Background: `#ffffff`
- Radius: `20px`
- Padding: `30px 24px`
- Shadow: `rgb(240, 240, 246) 3px 4px 30px 0px`
- Typography: `Roboto 20px` (Title)

#### Circular Icon Plate
**Role:** Visual anchor for service lists.
**Pages observed:** Home, About.
**Spec:**
- Background: `#04a7b5` or `rgba(36, 91, 143, 0.05)`
- Radius: `50%`
- Width/Height: Consistent square ratio (e.g., 60px x 60px)

### Tier 3: Surface-specific

#### Navy Header/Footer
**Role:** Global navigation and site map.
**Pages observed:** All.
**Spec:**
- Background: `#243254`
- Text: `#ffffff`
- Typography: `Roboto 14px` (Links)

#### Solution Tab
**Role:** Switcher for "By Task" or "By Industry" views.
**Pages observed:** Home.
**Spec:**
- Background (Active): `#243254`
- Text (Active): `#ffffff`
- Radius: `0px` (Sharp)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Column Grid | 12-column desktop |
| Section Padding | 100px (Vertical) |
| Card Gap | 24px - 30px |

## Do's
- Use `#04a7b5` for all primary interactive triggers.
- Apply `{radius.lg}` (20px) to all content-heavy cards.
- Ensure headings use Roboto Bold (700) for clear hierarchy.
- Use `#243254` for high-contrast structural backgrounds (footers/headers).
- Maintain 30px internal padding for standard feature cards.

## Don'ts
- **Wrong:** Using `#48b2ed` as a primary button background. **Right:** Use `#04a7b5`. **Reason:** Teal is the functional brand primary; sky blue is decorative.
- **Wrong:** Applying sharp corners to feature cards. **Right:** Use 20px radius.
- **Wrong:** Using Arial for main site headings. **Right:** Use Roboto.
- **Wrong:** Overlapping shadows on cards. **Right:** Use the single `rgb(240, 240, 246)` 30px spread shadow.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #04a7b5;
  --color-navy: #243254;
  --color-canvas: #ffffff;
  --radius-card: 20px;
  --radius-button: 10px;
  --shadow-main: 3px 4px 30px 0px rgb(240, 240, 246);
  --font-main: 'Roboto', sans-serif;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "primary": { "value": "#04a7b5" },
    "navy": { "value": "#243254" },
    "background": { "value": "#ffffff" }
  },
  "size": {
    "radius": {
      "card": { "value": "20px" },
      "button": { "value": "10px" }
    }
  }
}
```

## Agent prompt examples
- "Generate a product feature card using a white background, 20px border radius, and a 3px 4px 30px shadow in rgb(240, 240, 246). The title should be Roboto Bold 20px in #243254."
- "Create a primary CTA button with a teal #04a7b5 background, 10px border radius, and white Roboto 16px text."
- "Design a section header using a #243254 background with white Roboto 14px navigation links."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://infotecs.ru | Desktop 1440 | 2026-06-06 |
| About | https://infotecs.ru/about | Desktop 1440 | 2026-06-06 |
| Mobile Home | https://infotecs.ru | Mobile 390 | 2026-06-06 |