Komponentyzlin

Overview

Komponentyzlin is a Czech B2B manufacturer of shoe components, serving the footwear industry with precision-engineered materials and parts. The brand aesthetic is 'Authentic Industrial Minimalism'—combining earthy, lifestyle-driven hero imagery (outdoor boots on rocky terrain) with a clean, professional digital interface. The visual identity evokes trust, durability, and craftsmanship: warm earth tones (browns, tans) meet cool professional blues and oranges, creating a sense of grounded expertise. The emotional response is one of reliability and technical competence without coldness; the brand feels approachable yet authoritative.

The tone of voice is direct, professional, and matter-of-fact. Komponentyzlin speaks in clear, functional language—no marketing hyperbole, no flowery adjectives. The vocabulary emphasizes precision, quality, and partnership: 'Czech manufacturer,' 'components,' 'production,' 'partnership.' Example sentence in brand voice: 'Jsme český výrobce obuvnických komponentů—we deliver precision components on schedule, every time.'

Colors

The color system balances industrial authenticity with digital clarity. Primary (#0693e3) is a confident, professional blue used for CTAs, links, and interactive focus states—it signals trust and technical competence without aggression. Secondary (#ff6900) is a warm, energetic orange derived from the WordPress preset palette, used sparingly for highlights, badges, and accent elements that draw attention to key information. Tertiary (#9b51e0) provides a sophisticated purple accent for tertiary actions and status indicators. The neutral foundation is anchored in clean whites (#ffffff) and light grays (#eeeeee, #e9ecef, #cdcdcd), creating a professional, uncluttered canvas. Error red (#cf2e2e) is reserved for validation and critical alerts. Surface stack: surface (#ffffff) is the primary page

Typography

The type system uses Source Sans Pro as the primary family, with Open Sans and system fallbacks, reflecting a pragmatic, web-safe approach suited to industrial B2B communication. Display (52px, weight 100) is reserved for hero headlines and brand statements, set in a light weight to convey openness and confidence. Headline-lg (40px, weight 600) anchors section titles and major content blocks. Body-lg (20px, weight 300) is the primary reading size for hero text overlays and prominent copy, using a light weight for elegance. Body-md (16px, weight 400) serves standard paragraph text and UI labels. Label-md (14px, weight 600) is applied to button text and form labels, ensuring clarity and hierarchy. All type below 16px should receive text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) when rendered over

Layout

The layout follows a fluid, single-column grid with a max-width of 840px, reflecting the B2B focus on content clarity over expansive layouts. The grid uses 12 columns at desktop, collapsing to 4 columns on tablet and 1 column on mobile. Spacing is semantic and generous: lg spacing (40px) separates major sections (hero, features, contact); md spacing (24px) divides subsections and card groups; sm spacing (12px) provides breathing room within components. The container max-width of 840px ensures text remains readable and focused, avoiding the visual fatigue of full-width layouts. Hero sections use full-bleed background images with a semi-transparent overlay (rgba(0, 0, 0, 0.3) to rgba(0, 0, 0, 0.5)) to ensure text legibility; white text (on-surface inverted to #ffffff) sits at 52px display we

Elevation & Depth

Depth is achieved through subtle, restrained shadows and layering rather than dramatic effects. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Cards, inputs, secondary surfaces): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid #cdcdcd. This creates a gentle lift and definition without visual heaviness. Level 3 (Modals, elevated cards on hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: #f5f5f5. The shadow spread is kept tight (8px blur, 0px offset) to maintain a professional, grounded feel. Hover states transition smoothly (200ms ease-in-out

Shapes

The shape philosophy is 'Technical Softness'—combining sharp, functional geometry with subtle rounding for approachability. Buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel modern and clickable, contrasting with the industrial content. Cards and containers use md rounding (0.75rem / 12px) for a balanced, professional appearance—not too sharp (which reads cold), not too rounded (which reads playful). Form inputs use DEFAULT rounding (0.5rem / 8px) for a clean, utilitarian feel. The rationale: full rounding on buttons makes them unmistakably interactive; mod

Components

Action Elements Buttons are the primary interactive element. Button-primary uses {colors.primary} (#0693e3) background with white text, full rounding (9999px), and 48px height with 12px vertical / 32px horizontal padding. On hover, the background darkens to #0575c7 with a 200ms transition. Button-secondary is transparent with a 2px primary-colored border, same dimensions and rounding. Links are underlined only on hover (border-bottom: 1px solid {colors.primary}), using body-md typography with no text-decoration by default.

Containers & Surfaces Cards use {colors.surface-container-lowest} (#eeeeee) background with md rounding (12px), md padding (24px), and a 1px outline in {colors.outline-variant} (#b0b0b0). Box-shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shif

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0693e3) for all primary CTAs and interactive focus states—it's the signature brand accent and must be instantly recognizable.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to support the clean, professional aesthetic and prevent visual clutter.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to cards and elevated surfaces—never use harsh, high-spread shadows.
• Do use full rounding (9999px) exclusively on buttons to create unmistakable affordance; never apply full rounding to cards or containers.
• Do ensure all text below 16px receives text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) when overlaid on photography to guarantee legibility.

**Don't**

• Don't use near-black or near-white as primary or secondary colors—the brand relies on the confident blue (#0693e3) and warm orange (#ff6900) for visual identity.
• Don't apply multiple shadows or blur effects in sequence; the aesthetic is clean and restrained, not layered or glassmorphic.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; they become visually unclear and feel unfinished.
• Don't exceed 840px container max-width on desktop—wider layouts dilute the focused, professional reading experience.
• Don't animate transitions longer than 200ms; the brand voice is direct and efficient, not leisurely or decorative.