RH Medical Equipment

Overview

RH Medical Equipment is Ukraine's premier medical device marketplace, serving healthcare professionals with ultrasound, endoscopy, X-ray, and laboratory equipment. The design system embodies a "Professional Clarity" aesthetic—combining technical precision with approachable warmth. The UI prioritizes trust through a clean, structured layout with strategic use of the signature red accent (#d63940) on high-stakes CTAs, while cool blues and greens provide secondary emphasis for secondary actions and status indicators. The brand personality is authoritative yet accessible: the voice is direct, knowledgeable, and solution-focused, avoiding jargon while maintaining clinical credibility. Example sentence in brand voice: "Гарантія до 18 місяців і розстрочка платежу — обладнання, яке працює для вас."

Colors

The color system is anchored by a bold, energetic red primary (#d63940) used exclusively on primary CTAs, active states, and brand-critical interactions—this red commands attention without aggression, reflecting the urgency of medical equipment decisions. The surface stack progresses from pure white (#ffffff) for the main canvas through carefully calibrated grays (#f8fafc → #e2e8f0 → #0f172a for text) to create visual hierarchy without introducing competing colors. Secondary accent blue (#2aabee) supports informational elements, secondary CTAs, and status indicators, while tertiary green (#10b981) marks positive confirmations and success states. On dark overlays (hero cards with rgba(15, 23, 42, 0.65)), white text (#ffffff) maintains 4.5:1+ contrast. The outline color (#94a3b8) is used for

Typography

The type system pairs Manrope (bold, geometric, 700–800 weight) for headlines and display text with Inter (neutral, highly legible, 400–600 weight) for body and UI labels. This pairing creates visual distinction: Manrope's confident weight (800 on display, 700 on headlines) conveys authority and expertise, while Inter's clean proportions ensure readability at small sizes (12px labels, 16px body). Display text (60px, 800 weight, -0.04em tracking) is reserved for hero headlines; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body text uses 16px at 400 weight with 24px line-height for comfortable reading; labels use 14px at 600 weight for UI controls. On small labels over busy backgrounds (e.g., badge components over medical imagery), apply

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a 24px gutter on desktop and collapsing to 12px on tablet. Page rhythm is established through lg spacing (40px) for section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element gaps. The hero section uses a full-width dark overlay (rgba(15, 23, 42, 0.65)) with 50px padding inside cards, creating breathing room for the mission statement. Container widths observed in the DOM (1555px, 1366px, 1206px) are normalized to the 1280px max-width to maintain consistency. White-space is generous: section margins use lg (40px), card interiors use md (24px), and list items use sm (12px). This hierarchy ensures that the eye can rest between content blocks, preventing cognitive overlo

Elevation & Depth

Depth is conveyed through a layered shadow and backdrop-filter system rather than flat design. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the primary reading plane. Level 2 (Standard Cards): rgba(15, 23, 42, 0.65) background with backdrop-filter: blur(8px) and a 1px border at rgba(255, 255, 255, 0.1), creating a frosted-glass effect that separates content from the background image. Level 3 (Elevated/Interactive): the same card treatment with increased opacity (0.75) and a subtle box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on hover. Primary CTAs receive an accent gl

Shapes

The shape philosophy is "Technical Precision with Approachability"—using rounded corners to soften technical interfaces without sacrificing clarity. Buttons use lg radius (1rem / 16px), creating a friendly, clickable appearance while remaining professional. Cards use xl radius (1.5rem / 24px), emphasizing their role as distinct content containers. Input fields use DEFAULT radius (0.5rem / 8px), maintaining a compact, form-like appearance. Badges and chips use full radius (9999px), making them feel like discrete, self-contained tokens. The rationale: larger radii (xl, full) are reserved for con

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#d63940) background with white text, 16px Inter 700 weight, 12px 30px padding, and lg radius (16px). On hover, the background transitions to #b6262c (primary-dark) over 200ms with ease-out timing. On active/focus, the background darkens to #a01f24 and receives box-shadow: 0 0 10px 0 rgba(214, 57, 64, 0.4) to create a glowing accent effect. The button-secondary variant uses a transparent background with a 2px solid border at primary red, maintaining the same text color and typography; on hover, it fills with {colors.primary-container} (#fde8e9) while keeping the border. All buttons have a minimum height of 48px to meet touch-target accessibility standards.

Containers & S

Do's and Don'ts

**Do**

• Do use primary red (#d63940) exclusively on high-priority CTAs and active states—never on secondary UI or decorative elements.
• Do maintain 24px gutters and lg spacing (40px) between sections to create visual breathing room and prevent cognitive overload.
• Do apply backdrop-filter: blur(8px) to all card overlays to create depth and visual separation from background imagery.
• Do use Manrope 700–800 weight for headlines to convey authority and expertise; reserve Inter for body and UI labels.
• Do include box-shadow: 0 0 10px 0 rgba(214, 57, 64, 0.4) on active primary buttons to create a glowing accent effect that draws attention.

**Don't**

• Don't use primary red on more than one CTA per section—multiple red buttons dilute urgency and confuse hierarchy.
• Don't apply shadows darker than 0 4px 12px rgba(0,0,0,0.08) on cards; the glassmorphic effect relies on subtle depth, not harsh shadows.
• Don't mix Manrope and Inter weights arbitrarily; use Manrope 700+ only for headlines, Inter 400–600 for everything else.
• Don't reduce border-radius below 8px on interactive elements; the brand relies on approachable, rounded corners to soften technical interfaces.