Kononenko Architectural Bureau

Overview

Kononenko Architectural Bureau operates within the aesthetic framework of Architectural Minimalism—a design philosophy that strips away ornament to reveal the essential logic of form, material, and spatial relationships. The brand identity mirrors this ethos: a monochromatic palette of pure black (#000000), white (#ffffff), and carefully calibrated grays (#929292, #6c757d, #505050) creates visual restraint that amplifies the impact of architectural photography and technical documentation. The UI communicates precision, intellectual rigor, and the contemplative quality of built space. Every element—from typography to spacing—reflects the discipline of architectural practice: no decoration without purpose, no color without structural meaning.

The brand voice is measured, authoritative, and deeply informed by the language of architecture and urbanism. Sentences are declarative and spare: 'Systematic clarity. Architectural concept, facade and planning solutions, sketch project, working documentation, visualizations.' The vocabulary privileges technical terms (facade, working documentation, spatial concept) over marketing language. Tone is never breathless or promotional; instead, it conveys the quiet confidence of practitioners who understand that the work speaks louder than claims. The personality is cerebral, European in sensibility, and resistant to trend—a bureau that has been refining its craft for decades and sees no reason to chase novelty.

Colors

The color system is rooted in absolute contrast and hierarchical clarity. Primary (#000000) serves as the dominant accent and interactive focus—it appears on CTAs, hover states, and the hero section background, commanding attention through its intensity rather than frequency. On-primary (#ffffff) ensures legibility at maximum contrast (WCAG AAA compliant). The secondary palette of grays (#929292 for outline, #6c757d for secondary-container, #505050 for tertiary) creates a tonal ladder for secondary information, disabled states, and contextual hierarchy. Surface colors range from pure white (#ffffff, surface) through carefully spaced increments (surface-container-low #e9ecef, surface-container #e2e2e2, surface-container-high #d0d0d0) to support layering without introducing color. This monoc

Typography

The type system employs two distinct families to encode meaning: 'n' (a geometric sans-serif, likely a custom or Helvetica-adjacent typeface) for all UI, navigation, and body text; 'h' (a serif, likely a classical serif such as Garamond or similar) for project titles, captions, and contextual metadata. This pairing—sans-serif for system, serif for content—creates a visual distinction between interface and architectural artifact. Display sizes (72px, 48px) are set in the sans-serif at 400 weight with tight line-height (80px, 56px) and negative letter-spacing (-0.02em to -0.015em), creating a compressed, authoritative presence. Body text (16px–18px) maintains generous line-height (24px–28px) and minimal letter-spacing (0.005em–0.01em) for legibility in long-form documentation. Labels and UI

Layout

The layout system employs a 12-column grid with a maximum container width of 1130px, establishing a fixed-width, centered composition that reflects the precision of architectural drawing. Horizontal rhythm is governed by a semantic spacing scale: lg (40px) for major section separation, md (24px) for component padding, sm (12px) for internal element gaps. Vertical rhythm uses larger increments (160px–300px margins between sections) to create dramatic breathing room and emphasize the contemplative pace of the site. The gutter width is 30px, providing sufficient separation between grid columns without excessive fragmentation. On mobile (breakpoint: 767.98px), the layout shifts to a single-column flow with flex-direction: column and reduced gaps (24px instead of 40px), maintaining the hierarch

Elevation & Depth

Depth in this system is conveyed through subtle shadow and layering rather than color gradation. The primary shadow treatment is applied to project cards and overlays: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffuse shadow that suggests a thin lift from the surface. On hover, project images receive a more pronounced shadow (0 0 1.5vw rgba(0, 0, 0, 0.4)) and a scale transform (1.02) to signal interactivity. The hero section employs a full-bleed background image with a semi-transparent overlay (rgba(0, 0, 0, 0.15)) to ensure text legibility without obscuring the architectural

Shapes

The shape philosophy is rooted in Architectural Sharpness—a commitment to right angles, clean edges, and minimal rounding that reflects the precision of built form. Border-radius is applied sparingly: buttons and inputs use rounded: DEFAULT (0.5rem / 8px) for a subtle softening that prevents harsh corners without compromising the austere aesthetic. Cards and containers use rounded: DEFAULT or no rounding at all, allowing photography and content to extend to sharp edges. The only exception is the full (9999px) radius, reserved for circular elements such as avatar rings or badge indicators. This

Components

Action Elements Buttons employ a two-state system: button-primary (background-color: #000000, text-color: #ffffff, padding: 12px 24px, height: 44px, rounded: 8px) for primary CTAs such as 'Contact' or 'Inquire'; button-primary-hover (background-color: #1a1a1a, text-color: #ffffff) for the hover state, achieved via a 0.3s transition-duration cubic-bezier(0.17, 0.84, 0.44, 1). Secondary buttons use a transparent background with a 1px border (border: 1px solid #929292) and black text, allowing them to recede visually while remaining interactive. Navigation links are unstyled by default (background: transparent, text-color: #000000) and transition to primary color (#000000 → #000000, or inverse on dark backgrounds) on hover with a 0.3s ease transition. All interactive elements use mix-blen

Do's and Don'ts

**Do**

• Do use the monochromatic palette (#000000, #ffffff, grays #929292–#505050) as the primary visual language—let architectural photography carry the color narrative.
• Do apply generous vertical spacing (160px–300px margins between sections) to create contemplative rhythm and prevent visual clutter.
• Do use the sans-serif family (n) for all UI and navigation, reserving the serif family (h) for project metadata and captions to encode meaning through typography.
• Do maintain 1px borders in outline-variant (#b8b8b8) for dividers and card edges—hairline precision reinforces the architectural aesthetic.
• Do apply the cubic-bezier(0.17, 0.84, 0.44, 1) easing curve to all interactive transitions (0.3s–0.6s duration) for consistent motion language.
• Do ensure all text meets WCAG AAA contrast ratios (black on white, white on black) for accessibility and visual clarity.

**Don't**

• Don't introduce secondary colors or gradients—the monochromatic palette is the brand's defining constraint and strength.
• Don't round corners excessively (avoid border-radius > 1rem)—sharp edges and minimal rounding reflect architectural precision.
• Don't use drop shadows on buttons or primary interactive elements—rely on color contrast and state changes instead.
• Don't apply text-shadow or text-outline to body text—maintain pure black or white typography for maximum legibility.
• Don't use mix-blend-mode on interactive elements except mix-blend-mode: difference on fixed headers over images.
• Don't compress vertical spacing below 40px between major sections—the brand's contemplative pace depends on generous breathing room.