Espinoza Design Studio

Overview

Espinoza is a Russian design studio that embodies **Confident Modernism**—a design philosophy that merges Swiss-grid precision with bold, unapologetic color statements. The brand serves ambitious businesses seeking identity systems that command attention and communicate authority. The visual language is deliberately high-contrast: clean, minimal layouts anchored by a vivid red accent (#e93f3f) that appears on every primary call-to-action, creating an immediate visual hierarchy. The aesthetic rejects softness; every element is purposeful, every color choice deliberate. The emotional response is one of professional confidence tempered by creative sophistication—users feel they're engaging with a studio that understands both strategy and craft.

The tone is direct, authoritative, and intellectually rigorous. Espinoza speaks in the language of design professionals: strategy, identity systems, brand architecture, and visual language. The vocabulary avoids marketing clichés; instead, it emphasizes craft, methodology, and 16 years of proven expertise. Example sentence in brand voice: 'Мы разрабатываем системы идентичности, которые работают на всех носителях и выдерживают испытание временем.'

Colors

The color system is built on a **high-contrast, accent-driven model** where the primary red (#e93f3f) functions as the brand's signature accent—appearing exclusively on CTAs, key interactions, and moments requiring user attention. This is paired with a near-black secondary (#333333) for typography and structural elements, creating a monochromatic foundation that allows the red to dominate perceptually despite appearing less frequently. The surface stack is pure white (#ffffff) with subtle grays (#f0f2f4, #e8e8e8) for container differentiation, ensuring maximum legibility and a premium, uncluttered aesthetic. A tertiary green (#61ce70) is reserved for success states and secondary actions, providing a complementary accent without competing with the primary red. All text on white surfaces use

Typography

The type system employs a **two-family hierarchy**: Unbounded (a geometric, display-focused typeface from Google Fonts) for headlines, labels, and brand-forward moments; Noto Sans for body copy and interface text. This pairing creates visual tension—Unbounded's angular, confident letterforms (used at 600–700 weight for headlines) contrast with Noto Sans's neutral, highly legible body text (400 weight, 16px, 24px line-height). Headlines use Unbounded at 60px / 68px line-height with -0.04em letter-spacing to create visual compression and impact; body copy uses Noto Sans at 16px / 24px with 0 letter-spacing for maximum readability. Labels and CTAs use Unbounded at 14px with 0.02em letter-spacing and 500–600 weight, creating a crisp, technical feel. On small labels over busy backgrounds (e.g.,

Layout

The page grid is a **fixed 12-column layout with a 1140px container max-width**, centered on desktop and collapsing to 1024px on tablet and 767px on mobile. The hero section uses a 70vh minimum height with 230px top padding and 80px bottom padding, creating breathing room around the headline. Section separation is achieved through lg spacing (40px) between major content blocks, with md spacing (24px) used for internal component grouping. The gutter between columns is 24px, and horizontal padding on the container is 16px on mobile, scaling to 24px on tablet and above. White-space is treated as a structural element: the background is pure white (#ffffff), and negative space around text and buttons is never compressed. The layout philosophy is 'grid-first minimalism'—every element aligns to t

Elevation & Depth

Depth is conveyed through **subtle shadow and surface-color differentiation** rather than dramatic layering. The base layer (Level 1) is pure white (#ffffff) with no shadow. Level 2 (cards, input fields) uses surface-container-low (#f0f2f4) with a 1px border in outline-variant (#bbbbbb) and no shadow in the default state. Level 3 (elevated cards, modals, hover states) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and shifts the background to surface-container-high (#e8e8e8). Interactive hover states on buttons use the same shadow (0 4px 12px rgba(0, 0, 0, 0.08)) paired with a background-c

Shapes

The shape language is **Technical Roundness**—a deliberate middle ground between sharp corners and organic curves. Buttons and primary CTAs use 32px border-radius (rounded.xl), creating a pill-shaped form that feels contemporary and approachable while maintaining geometric precision. Cards and containers use 20px (rounded.lg) for a softer edge without sacrificing structure. Input fields and smaller components use 8px (rounded.DEFAULT) for subtle definition. The rationale: 32px on buttons creates a visual 'target' that draws the eye and signals clickability; 20px on cards provides enough roundn

Components

Action Elements Buttons are the primary interaction mechanism and use a **two-tier system**: Primary buttons (background: #e93f3f, color: #ffffff, border-radius: 32px, padding: 0 40px, height: 48px, font-family: Unbounded, font-size: 16px, font-weight: 400) are reserved for the most important actions ('Обсудить проект'). Secondary buttons (background: #333333, color: #ffffff, border-radius: 32px, padding: 0 24px, height: 48px, font-family: Unbounded, font-size: 17px, font-weight: 500) are used for supporting actions ('Посмотреть ключи'). Hover states transition the background-color over 200ms (transition: background-color 200ms ease-out) and apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Focus states add a 3px outline in primary (#e93f3f) with 4px offset.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use the red primary (#e93f3f) exclusively on CTAs and moments requiring user action—never dilute it with secondary uses.
• Do maintain the 32px border-radius on all primary buttons to create a consistent, recognizable interaction target.
• Do pair Unbounded headlines with Noto Sans body copy to create visual contrast and hierarchy without introducing additional typefaces.
• Do apply the 8px unit spacing system rigorously—all padding, margins, and gaps should be multiples of 8px (4px, 12px, 24px, 40px, 64px).
• Do use the surface-container stack (#f0f2f4, #e8e8e8, etc.) for card and container backgrounds instead of pure white to create subtle visual separation.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on hover states to signal interactivity without introducing new colors.

**Don't**

• Don't use the red primary (#e93f3f) on non-interactive elements or as a background color for large content areas—it's reserved for CTAs and accent moments.
• Don't introduce new typefaces beyond Unbounded and Noto Sans; the system's strength lies in the deliberate two-family pairing.
• Don't use border-radius values outside the defined scale (sm 4px, DEFAULT 8px, md 12px, lg 20px, xl 32px, full 9999px)—custom radii break the visual system.
• Don't apply shadows with blur radius > 12px or opacity > 0.12; the system is deliberately flat and minimal.
• Don't lighten or desaturate the primary red (#e93f3f) for hover or disabled states—use the fixed-dim variant (#d13636) instead.
• Don't use pure white (#ffffff) for text on white backgrounds; always use #1f1f1f (near-black) for body copy to maintain contrast and legibility.