Udevs

Overview

Udevs is a professional IT solutions and business automation firm serving enterprise clients across Central Asia. The design system embodies 'Technical Minimalism'—a philosophy that combines the precision and clarity of enterprise software with the accessibility and warmth of modern consumer interfaces. The brand personality is authoritative yet approachable, speaking to C-suite decision-makers and technical teams with equal confidence. The visual language prioritizes information hierarchy, trust-building through consistency, and rapid cognitive processing of complex service offerings. Voice: direct, solution-focused, never jargon-heavy. Example: 'We automate your workflows so your team focuses on strategy, not spreadsheets.'

Colors

The color system is anchored by Primary Blue (#1b5bf7), a vibrant, action-oriented accent that signals trust, innovation, and digital transformation—used exclusively on call-to-action buttons, active navigation states, and key interactive elements. The surface stack progresses from the brightest white (#ffffff) for card backgrounds through carefully calibrated grays (#f2f4f7 → #e5e7eb → #dfe2e8) to create visual separation without introducing color noise. On-surface text is set to near-black (#0d0d0d) for maximum legibility on light backgrounds, with secondary text using mid-gray (#6b7280) for hierarchy. The primary-container (#eef3ff) provides a soft blue tint for badges and highlights, while the outline-variant (#d1d5db) creates subtle borders that define card and input boundaries withou

Typography

The type system uses Inter exclusively, a geometric sans-serif chosen for its exceptional clarity at small sizes and its neutral, corporate-friendly personality. Display (60px, 700 weight) anchors hero sections with -0.04em letter-spacing to create visual tension and authority. Headline-lg (40px, 700) is used for page titles and major section breaks, while headline-md (28px, 600) structures subsections. Body text lives at 16px (body-md, 400 weight) with 24px line-height, providing comfortable reading rhythm for dense technical content. Labels use 14px (600 weight) with 0.01em letter-spacing for UI controls, and 12px (700 weight) with 0.12em letter-spacing for metadata and badges. The weight progression (400 → 600 → 700) creates clear hierarchy without requiring color shifts. Instruction: a

Layout

The layout system uses a 12-column grid with a 1240px max-width container, maintaining consistent horizontal rhythm across all screen sizes. The spacing scale is semantic: lg (40px) separates major sections (hero from portfolio, portfolio from services), md (24px) groups related content blocks, and sm (12px) creates breathing room within cards. The gutter is fixed at 24px, ensuring consistent padding around the container on desktop. Hero sections use centered, single-column layouts with max-width constraints (720px for text) to focus attention. Portfolio and service cards are displayed in a 3-column grid on desktop, collapsing to 2 columns at 900px and 1 column below 640px. White-space philosophy: generous margins between sections (80px on desktop, 60px on mobile) prevent cognitive overloa

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual heaviness of drop-shadows. Level 1 (base): no shadow; surfaces sit flush on the background. Level 2 (cards, inputs): box-shadow 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that suggests subtle lift without drama. Level 3 (hover states, elevated modals): box-shadow 0 10px 30px rgba(0, 0, 0, 0.1), a larger blur radius and spread that creates clear visual separation. Primary buttons receive a branded shadow (0 4px 12px rgba(27, 91, 247, 0.15)) that echoes the primary color, reinforcing their interactive nature.

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften the technical nature of the interface without introducing organic or playful qualities. Buttons use lg (1rem / 16px) border-radius, creating a modern, approachable pill-like form that signals interactivity. Cards and containers use xl (1.5rem / 24px) border-radius, a more generous curve that creates visual breathing room and suggests premium, enterprise-grade design. Input fields use DEFAULT (0.5rem / 8px) border-radius, a subtle curve that maintains form-like familiarity. Badges and pills use fu

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use #1b5bf7 background with white text, 48px height, 12px vertical padding, and 24px horizontal padding. The label-md typography (14px, 600 weight) ensures readability at any size. On hover, the background shifts to #1244d6 with an expanded shadow (0 6px 16px rgba(27, 91, 247, 0.25)), creating a clear affordance. On active/pressed state, the background darkens to #0f3ab8 with a reduced shadow (0 2px 8px rgba(27, 91, 247, 0.2)), providing tactile feedback. Secondary buttons use transparent backgrounds with a 1px outline in #d1d5db, maintaining visual weight while reducing visual hierarchy. Transition timing: all button state changes use 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion.

#

Do's and Don'ts

**Do**

• Do use Primary Blue (#1b5bf7) exclusively on interactive elements—buttons, links, and active states—to create a consistent call-to-action language.
• Do maintain the 24px gutter and lg (40px) section spacing to create breathing room and prevent cognitive overload in dense content layouts.
• Do apply the full 6-level surface-container stack to create precise visual hierarchy: use surface-container-lowest for embedded content, surface-container-high for hover states, and surface-container-highest for modals.
• Do use Inter 600 weight for all labels and UI controls to create clear visual distinction from body text (400 weight) without introducing additional font families.

**Don't**

• Don't use Primary Blue on passive surfaces, backgrounds, or body text—reserve it exclusively for interactive elements to maintain clarity and focus.
• Don't introduce shadows larger than 0 10px 30px rgba(0, 0, 0, 0.1) or use drop-shadows on text, as this creates visual heaviness inconsistent with the Technical Minimalism aesthetic.
• Don't reduce the border-radius below DEFAULT (0.5rem / 8px) on any interactive element, as this introduces unnecessary sharpness and reduces the approachable, modern feel.
• Don't mix font families—Inter is the sole typeface for all UI text, headings, and labels. Avoid Open Sans or Poppins in component-level design.