АльфаСклад

Overview

АльфаСклад is a self-storage marketplace serving Moscow's residential and business communities with boxes, containers, cells, and storage units. The design system embodies 'Warm Brutalism'—a philosophy that rejects unnecessary ornamentation while maintaining human warmth through generous spacing (24px gutter), approachable typography (Manrope at 16px body), and a signature red accent (#E63F3A) that signals trust and action. The interface prioritizes clarity and accessibility: every interaction is predictable, every CTA is unmistakable, and the color palette (cream #F8F6F2 background, charcoal #141414 text, warm grays #A09E96) evokes a professional yet approachable storage facility. The brand personality is direct, reassuring, and practical—never corporate-speak, always solution-focused. Example sentence in brand voice: 'Выбрать склад за две минуты, оплатить онлайн, получить доступ сегодня—никаких звонков, никаких бумаг.'

Colors

The color system centers on a warm, neutral foundation with a bold red accent. Primary (#E63F3A) is the signature action color used exclusively on CTAs ('Выбрать склад', 'Онлайн-аренда'), hover states, and district badges. It conveys urgency and trust—the color of a warehouse seal. The surface stack (surface #F8F6F2, surface-container #E8E5DF, surface-container-high #D9D5CE) creates subtle depth without darkness, allowing content to breathe. On-surface (#141414) is near-black for maximum readability on cream backgrounds. Secondary (#16A34A) and tertiary (#2563EB) are reserved for status indicators and district tags (САО, ЦАО, ЮАО), each with distinct semantic meaning. Error red (#DC2626) is used only for availability warnings ('0 свободных помещений'). The outline color (#A09E96) is a warm

Typography

The type system uses Manrope exclusively, a humanist sans-serif that balances geometric precision with organic warmth—perfect for a brand that must feel both professional and approachable. Display (56px, 600 weight) is reserved for hero headlines ('Аренда помещений в Москве'). Headline-lg (40px, 600) anchors section titles. Body-md (16px, 400) is the workhorse for all body copy and card descriptions, set at 24px line-height for comfortable reading. Label-md (14px, 500) is used for button text and form labels, with 0.01em letter-spacing for subtle emphasis. All headlines use -0.01em to -0.02em letter-spacing to create visual weight and hierarchy. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when placed over photographic backgrounds to ensure legibility without

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The gutter is consistently 24px (md spacing), creating a rhythm that feels neither cramped nor wasteful. Hero section uses full-width background with 64px (lg spacing) vertical padding top and bottom. Warehouse cards are arranged in a responsive grid (4 columns on desktop, 2 on tablet, 1 on mobile) with 24px gap between cards. Container padding is always 24px on desktop, 16px on tablet, 12px on mobile. Section separation uses 64px (xl spacing) vertical margin. The stats row at the bottom of the hero uses equal-width columns with 1px solid #E8E5DF dividers (outline-variant). White-space is generous: never compress spacing below md (24px) for breathing room between major sections.

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness. Level 1 (Base): flat surfaces on the cream background (#F8F6F2) with no shadow. Level 2 (Standard Card): warehouse cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts the card 4px. Level 3 (Hover/Elevated): on hover, cards transition to box-shadow: 0 14px 28px rgba(20, 20, 20, 0.12) with transform: translateY(-2px), creating a sense of lift and interactivity. Buttons use no shadow at rest; on hover, primary buttons gain box-shadow: 0 3px 8px rgba(230, 63, 58, 0.25) to reinforce the action.

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used strategically to soften hard edges without sacrificing clarity. Buttons use rounded.lg (1rem / 16px) for a friendly, clickable appearance. Cards use rounded.md (0.75rem / 12px) to distinguish them from buttons while maintaining visual hierarchy. Input fields use rounded.DEFAULT (0.5rem / 8px) for a more utilitarian feel. District badges use rounded.DEFAULT (0.5rem) to match inputs. The logo and circular elements (metro icons, availability indicators) use 50% border-radius. No element uses rounded.full (9999px) except for tr

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #E63F3A background, white text, 14px Manrope 500, 11px 22px padding, and 1rem border-radius. On hover, the background darkens to #CC2F2A and a 0 3px 8px rgba(230, 63, 58, 0.25) shadow appears. On active/pressed, the background becomes #B92621. Secondary buttons (button-secondary) are transparent with a 1px primary border and primary text; on hover, they fill with #FDECEB (primary-container) and text becomes #B92621 (on-primary-container). All button transitions use 150ms ease-out. Buttons must never be smaller than 44px height to ensure mobile accessibility.

Containers & Surfaces Warehouse cards (card-warehouse) are the core content unit. They use white background (#FFFFFF), 0 3px 8

Do's and Don'ts

**Do**

• Do use primary red (#E63F3A) exclusively for CTAs and interactive elements—never for decorative text or backgrounds.
• Do maintain 24px gutter spacing between major sections and 12px between smaller components to create visual rhythm.
• Do apply Manrope at 16px body-md for all body copy to ensure readability and brand consistency across all devices.
• Do use the surface-container stack (#E8E5DF, #D9D5CE, #C4C0BA) for subtle depth—never use pure grays or blacks for backgrounds.
• Do test all buttons and inputs at 44px minimum height to ensure mobile touch targets are accessible.

**Don't**

• Don't use primary red for body text, backgrounds, or decorative elements—reserve it exclusively for actions and focus states.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black shadows; maintain warmth with dark-gray shadows.
• Don't mix typefaces—Manrope is the only font family; Montserrat is used only in the header navigation as a legacy exception.
• Don't compress spacing below 12px (sm) between components or below 24px (md) between sections; white-space is a design feature.
• Don't round corners more than 1rem (16px) on cards or buttons; excessive rounding dilutes the functional, professional aesthetic.