# Cloud.ru Design System

> High-contrast technical canvas defined by a signature emerald primary and a rigorous grayscale foundation.

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

## TL;DR
Cloud.ru utilizes a high-contrast "monochrome plus one" system where a vibrant emerald green `#26d07c` serves as the singular high-voltage action color against a stark white `#ffffff` and graphite `#222222` background. Typography is strictly functional, leveraging the **SB Sans** family (Display for headers, Text for UI) to maintain a clean, engineering-led aesthetic. Geometric precision is maintained through a 4px base unit and a restrained border-radius scale that favors sharp corners (`0px`) or minimal rounding (`2px` to `4px`). The system avoids decorative gradients, relying instead on flat color blocks and subtle elevation shadows to define hierarchy.

## Signature DNA
1. **Emerald Action Voltage** (The use of `#26d07c` for primary CTAs and key brand indicators creates a high-contrast focal point against the achromatic base, observed on all analyzed pages).
2. **SB Sans Type Pairing** (The systematic split between `SB Sans Display` for high-impact headings and `SB Sans Text` for dense technical data ensures legibility across complex cloud pricing and documentation).
3. **Low-Radius Geometry** (A preference for `0px` and `2px` radii gives the interface a precise, "built" feel, moving away from the soft-pill trends of consumer SaaS).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, card surface, text on dark | 106 | 1 | `--sys-neutral-background1-level` |
| `{colors.graphite-dark}` | `#222222` | Dark section backgrounds, primary text | 33 | 1 | `--sys-graphite-text-main` |
| `{colors.graphite-main}` | `#41424e` | Secondary text, UI labels | 128 | 1 | `--sys-neutral-text-main` |
| `{colors.graphite-muted}` | `#656774` | De-emphasized text, borders | 101 | 1 | `--ref-gray-45` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#26d07c` | Primary CTA background, success indicators | 18 | 0.8 | Rendered value |
| `{colors.neutral-accent}` | `#787b8a` | Secondary UI accents, inactive states | 7 | 1 | `--sys-neutral-accent-default` |
| `{colors.blue-link}` | `#0000ee` | Inline text links | 24 | 0.8 | Rendered value |
| `{colors.claudia-disabled}` | `#aaaebd` | Disabled text (decorative_only) | 2 | 1 | `--sys-claudia-text-disabled` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| SB Sans Display | 400, 600 | Headings, Hero text | Inter | Proprietary |
| SB Sans Text | 400, 600 | Body, UI Labels, Data | Inter | Proprietary |
| Arial | 400 | Fallback, secondary tabs | System | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 60px | normal | 600 | Hero Headlines | `div.styles-module__NEdDbq__richText` |
| `{type.h2}` | 32px | 40px | normal | 600 | Section Titles | `h2.TariffPlans-module-scss-module__BflR9W__title` |
| `{type.h3}` | 24px | 32px | normal | 600 | Sub-section heads | `span.styles-module__4jt6Ea__typography` |
| `{type.h4}` | 22px | 28px | normal | 600 | Card Titles | `span.styles-module__4jt6Ea__typography.CalcCard-module-scss-module__Lt6mta__titl` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Body | `section.styles-module__3D8W2q__root` |
| `{type.body-strong}` | 16px | 24px | normal | 600 | UI Emphasis | `span.styles-module__4jt6Ea__typography.ProductChanger-module-scss-module__eKj4iq` |
| `{type.label}` | 14px | 20px | normal | 600 | Button labels | `span.styles-module__atbKaW__label` |
| `{type.caption}` | 12px | 16px | normal | 400 | Legal/Small print | `span.styles-module__IVV5Sa__typography` |

### Principles
1. **Headings are always weight 600.** No light or medium weights are used for display text.
2. **Strict Sans-Serif environment.** No serifs are permitted in the UI or brand communications.
3. **Normal tracking.** The system does not utilize negative letter-spacing, even at display sizes.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 12 |
| `{space.sm}` | 12px | 29 |
| `{space.md}` | 16px | 7 |
| `{space.lg}` | 24px | 39 |
| `{space.xl}` | 32px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, primary buttons | 420 occurrences |
| `{radius.xs}` | 2px | Small buttons, input fields | 52 occurrences |
| `{radius.sm}` | 4px | Content cards, surface containers | 107 occurrences |
| `{radius.lg}` | 24px | Floating panels/Modals | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.base}` | `rgba(0, 0, 0, 0.08) 0px 0px 8px 0px, rgba(0, 0, 0, 0.08) 0px 8px 16px 0px` | Hovered cards, floating UI | Observed on 4 elements |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Action (e.g., "In Console", "Register")
**Pages observed:** cloud.ru, cloud.ru/about
**Spec:** Background `#26d07c` / Text `#000000` / Border `0px` / Radius `2px` / Padding `0px 32px` / Typography `{type.body}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface
**Role:** Standard layout container
**Pages observed:** cloud.ru, cloud.ru/about
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `4px` / Padding `0px`
**States observed:** Default: captured

### Tier 2: Patterns
#### Card
**Role:** Feature display and pricing tiers
**Pages observed:** cloud.ru, cloud.ru/pricing
**Spec:** Background `#fdfdfd` / Text `#000000` / Border `0px` / Radius `4px` / Shadow `none`
**States observed:** Default: captured

#### Dark Surface
**Role:** High-contrast footer or hero sections
**Pages observed:** cloud.ru, cloud.ru/about
**Spec:** Background `#222222` / Text `#ffffff` / Border `1px solid #ececec` / Radius `0px` / Padding `24px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Tariff Card
**Role:** Pricing plan selection
**Pages observed:** cloud.ru/pricing
**Spec:** Background `#eeeff3` / Text `#000000` / Radius `4px` / Typography `{type.h2}`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1440px |
| Section Padding | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, full-width buttons, hidden top-nav menu |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), horizontal navigation |

## Imagery & decoration
Cloud.ru uses 3D isometric technical illustrations featuring the brand emerald `#26d07c`. Graphics are strictly geometric, often utilizing grid patterns or circuit-like motifs. Photography is absent in the analyzed scope.

## Do's
- Use `#26d07c` for the primary path to conversion.
- Maintain `SB Sans Display` weight 600 for all headings.
- Align all elements to the 4px grid system.
- Use `#222222` for high-contrast section breaks.
- Keep card radius at a maximum of `4px`.

## Don'ts
- **Wrong:** Using a pill-shaped button (9999px radius). **Right:** Use `2px` or `0px` radius. **Reason:** Brand identity is grounded in geometric precision, not soft consumer aesthetics.
- **Wrong:** Applying gradients to primary buttons. **Right:** Use flat `#26d07c`. **Reason:** The system relies on solid color blocks for technical clarity.
- **Wrong:** Using `#0000ee` for primary buttons. **Right:** Use `#26d07c`. **Reason:** Blue is reserved for inline text links, not primary CTAs.
- Do not use weights lighter than 400 for body text.
- Do not use shadows on default state cards; reserve for elevation/hover.

## Similar brands
- DigitalOcean
- Google Cloud Platform
- Hetzner
- Scaleway

## Quick start
```css
:root {
  --color-primary: #26d07c;
  --color-graphite-dark: #222222;
  --color-graphite-main: #41424e;
  --color-white: #ffffff;
  --font-display: "SB Sans Display", sans-serif;
  --font-text: "SB Sans Text", sans-serif;
  --radius-sm: 4px;
  --radius-xs: 2px;
  --space-unit: 4px;
}
```

## Agent prompt examples
- "Generate a pricing card using a white background, 4px border radius, and an emerald green (#26d07c) primary button with 2px radius."
- "Create a hero section with a graphite (#222222) background, SB Sans Display weight 600 heading in white, and a primary emerald CTA."
- "Design a technical data table using SB Sans Text at 14px, with graphite-muted (#656774) borders."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Error and Warning semantic colors were not present on the analyzed marketing pages.
- Mobile-specific typography scale was not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Page | https://cloud.ru | 1440x900 | 2026-06-06 |
| About Page | https://cloud.ru/about | 1440x900 | 2026-06-06 |
| Mobile Main | https://cloud.ru | 390x844 | 2026-06-06 |