ХОЧУ САЙТ

Overview

ХОЧУ САЙТ is a Moscow-based full-cycle web studio that combines bold, energetic visual identity with professional digital expertise. The brand embodies "Vibrant Professionalism"—a design movement that pairs saturated, confident primary colors (vivid purple #4d36f5) with clean, minimalist layouts and authoritative typography. The studio serves mid-market and enterprise clients seeking integrated web development, SEO optimization, and ongoing technical support. The visual language evokes trust through precision (sharp 12px border-radius on cards, exact 62px headline sizing) while the electric purple accent communicates innovation and forward momentum. Users encounter a sense of capable energy: the interface feels neither corporate-sterile nor playful, but rather purposeful and results-driven.

The brand voice is direct, confident, and solution-oriented. Copy avoids jargon while maintaining technical credibility—phrases like "полный цикл услуг" (full-cycle services) and "13 лет опыта" (13 years of experience) anchor the narrative in proven capability. Tone is warm but not casual; the studio positions itself as a knowledgeable partner, not a vendor. Example sentence in brand voice: "Мы закроем все вопросы — от визуала до кода" (We'll handle everything—from visuals to code).

Colors

The color system centers on a vibrant purple primary (#4d36f5) that dominates CTAs, hero headlines, and key interactive elements. This saturated, medium-value purple sits at the intersection of energy and professionalism—bright enough to command attention (used on the 48px primary button with 0 3px 8px rgba(77, 54, 245, 0.2) shadow), yet sophisticated enough for B2B contexts. The surface stack is anchored in pure white (#ffffff) for maximum contrast and clarity, with a carefully calibrated gray progression: surface-container (#eeeeee) for subtle backgrounds, surface-container-high (#e9ecef) for hover states on secondary elements, and surface-container-highest (#e0e0d0) for disabled or tertiary interactions. Supporting colors include a secondary blue (#007aff, used sparingly for secondary C

Typography

The type system employs a two-family strategy: Druk Wide Cyr for headlines and display text, Golos Text for body and UI labels. Druk Wide Cyr is a geometric, high-contrast typeface that conveys modernity and confidence—its condensed letterforms create visual impact at large sizes (62px for display, 48px for headline-lg) while maintaining readability. The 500 font-weight (not 700) prevents heaviness, allowing the purple accent color to dominate. Golos Text, a contemporary Russian sans-serif, provides warm, approachable body copy at 16px (body-md) with 24px line-height for comfortable reading. The type hierarchy is strict: display (62px, -0.04em letter-spacing) for hero headlines, headline-lg (48px, -0.02em) for section titles, title-lg (24px, 600 weight) for card headers, body-lg (18px) for

Layout

The layout employs a 12-column grid system with a max-width of 1240px, centered on the viewport. The spacing scale is semantic: lg (40px) separates major sections (hero from services, services from case studies), md (24px) is the standard gutter for card padding and section margins, and sm (12px) handles internal component spacing (button icon-to-text distance, form field margins). The container uses a fluid approach on mobile (100vw with 24px side padding) and fixed-width on desktop (1240px centered). White-space is generous but purposeful—the hero section occupies ~60% of viewport height with the headline (62px Druk Wide Cyr) positioned at 40px from the top, leaving breathing room for the supporting copy and CTA. Cards are arranged in a 3-column grid on desktop (each 360px wide with 24px

Elevation & Depth

Depth is conveyed through subtle shadow layering and strategic use of the surface-container stack rather than dramatic drop shadows. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, input fields) uses elevation.md: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that suggests the element is slightly lifted. Level 3 (primary buttons, elevated cards on hover) applies elevation.lg: 0 8px 24px rgba(0, 0, 0, 0.12), a broader, softer shadow that increases perceived distance. The primary button (#4d36f5) adds a color-tinted shadow: 0 3px 8p

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are used strategically to soften the interface while maintaining a modern, technical aesthetic. The rounded scale progresses from sharp (sm: 0.25rem / 4px for small UI elements like badges) to moderate (DEFAULT: 6px for form inputs and small buttons) to generous (md: 12px for standard cards and medium buttons, lg: 16px for large cards and hero elements, xl: 24px for modals and prominent containers, full: 9999px for circular icon buttons and pill-shaped badges). The primary button uses rounded.md (12px), creating a subtle softness th

Components

Action Elements Primary buttons (button-primary) are the hero of the interaction layer: 48px height, 12px 24px padding, rounded.md (12px), background {colors.primary} (#4d36f5), text {colors.on-primary} (white), with label-md typography (14px, 600 weight). The button includes a subtle shadow (0 3px 8px rgba(77, 54, 245, 0.2)) that lifts on hover. On hover (button-primary-hover), the background shifts to #3d2ae5 (darker purple) and shadow expands to 0 6px 16px rgba(77, 54, 245, 0.3), creating a smooth 150ms transition (transition: all 0.15s ease). On active (button-primary-active), the background becomes #2d1ad5 and shadow contracts to 0 2px 4px, signaling press. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in {colors.primary}, matching the p

Do's and Don'ts

**Do**

• Do use the primary purple (#4d36f5) exclusively for CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain the 12px border-radius standard on all cards and medium buttons; it's the visual signature of this system.
• Do pair Druk Wide Cyr headlines with Golos Text body copy; the contrast between geometric and humanist typefaces creates visual interest.
• Do apply the lg spacing (40px) between major sections to create breathing room and visual hierarchy.
• Do use the surface-container stack (from #fafafa to #e0e0e0) for progressive depth; never jump directly from white to dark gray.
• Do include the color-tinted shadow (rgba(77, 54, 245, 0.2)) on primary buttons to reinforce brand identity.

**Don't**

• Don't use the primary purple on body text or backgrounds—it's reserved for interactive elements and accents only.
• Don't apply border-radius larger than 24px (xl) on standard components; it dilutes the geometric precision aesthetic.
• Don't mix Druk Wide Cyr and Golos Text in the same headline; use Druk Wide Cyr exclusively for display/headline levels.
• Don't use shadows larger than elevation.lg (0 8px 24px); excessive depth contradicts the clean, modern aesthetic.
• Don't apply the primary color to disabled states; use on-surface-variant (#6c757d) with reduced opacity (0.5) instead.
• Don't nest more than 2 levels of surface-container backgrounds; it creates visual confusion and breaks the hierarchy.