Olha Lazarieva

Overview

Olha Lazarieva's design system embodies **Architectural Minimalism**—a discipline rooted in geometric precision, high-contrast surfaces, and deliberate whitespace that prioritizes clarity over decoration. The brand serves creative directors, design-forward brands, and enterprises seeking portfolio-grade web experiences; the aesthetic evokes a sense of controlled sophistication, where every pixel serves a narrative purpose. The UI philosophy treats typography and motion as primary design materials: Sofia Sans Condensed's bold, uppercase headlines (146px, -0.08em letter-spacing) anchor visual hierarchy, while Spline Sans Mono's monospaced body text (24px, 0.04em tracking) introduces technical precision and approachability. The emotional response is one of quiet confidence—a designer's portfolio that doesn't shout, but commands attention through restraint.

The brand voice is direct, professional, and unapologetically design-centric. Vocabulary patterns favor technical terms ("craft," "memorable," "experience") over marketing hyperbole. Tone is conversational yet authoritative, never casual. Example sentence in brand voice: "I craft web experiences that translate brand strategy into pixel-perfect interactions."

Colors

The color palette operates on a **high-contrast, neutral-dominant model** with a single accent: primary blue (#4f82d4) serves as the signature interactive color, reserved exclusively for CTAs, focus states, and brand-critical moments. The surface stack anchors the system: surface (#f7f7f7) is the default canvas, surface-bright (#ffffff) provides maximum contrast for hero sections, and surface-container-highest (#c2cabb) introduces subtle depth for layered UI. On-surface (#101010) is the primary text color—a true black that ensures 16:1 WCAG AAA contrast against all light surfaces. Secondary grays (on-surface-variant #908c8c, outline #aaa8a8) create a three-tier hierarchy for supporting text, borders, and disabled states. The outline-variant (#aaaaaa) is used for subtle dividers and seconda

Typography

The type system employs a **two-font pairing strategy**: Sofia Sans Condensed (700 weight, uppercase, -0.08em letter-spacing) handles all display and headline scales, creating a bold, architectural presence; Spline Sans Mono (300–400 weight, 0.04–0.08em letter-spacing) manages body, label, and interactive text, introducing technical restraint and readability. Display (146px, 144px line-height) is reserved for hero titles and section breaks; headline-lg (48px) anchors subsections; body-lg (24px, Spline Sans Mono, 0.04em tracking) is used for navigation links and prominent CTAs. The monospace choice for body text is deliberate—it signals precision and craftsmanship, differentiating this portfolio from generic web typography. All text over busy backgrounds or images should apply text-shadow:

Layout

The layout operates on a **fixed 1100px container max-width** (padding: 0 15px on mobile), centered with margin: 0 auto. The grid system uses 12 columns with a 24px gutter (md spacing). Section separation employs lg spacing (40px) for breathing room between major content blocks; internal component spacing uses md (24px) for card padding and sm (12px) for input fields. The design favors a single-column layout on mobile (max-width: 1100px), transitioning to multi-column on desktop. Whitespace is treated as a design material: hero sections occupy 100dvh (100% of device viewport height), and content sections are never cramped—minimum 40px vertical separation between distinct content zones. The header is fixed-position with mix-blend-mode: difference on desktop (creating a semi-transparent over

Elevation & Depth

Depth is conveyed through **layered surfaces and motion rather than shadow alone**. The elevation system defines three levels: Level 1 (Base) is the surface (#f7f7f7) with no shadow; Level 2 (Standard Card) introduces box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) and a 1px border at outline-variant (#aaaaaa); Level 3 (Elevated/Modal) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a 2px border. Interactive elements (buttons, links) lift on hover with transform: translateY(-2px) and a contextual shadow—primary buttons gain 0 8px 24px rgba(79, 130, 212, 0.24). The page transition overlay (sli

Shapes

The shape language is **Geometric Precision**—a philosophy that treats border-radius as a structural element, not decoration. Buttons and interactive components use rounded.lg (1rem / 16px) for a subtle, professional appearance; cards and containers use rounded.md (0.75rem / 12px) for a slightly softer edge; input fields use rounded.DEFAULT (0.5rem / 8px) for minimal visual weight. The full radius (3rem / 48px) is reserved for badges and pill-shaped elements. All radius values are applied consistently: a 48px button always has 16px corners, never 8px or 24px. The rationale is architectural: sh

Components

Action Elements Buttons are the primary interactive primitive. **button-primary** (background: #4f82d4, color: #ffffff, height: 48px, padding: 0 24px, rounded: 1rem) uses Spline Sans Mono label-md (16px, 300 weight, 0.06em tracking, uppercase). On hover, the background darkens to #3d6ab8, the element lifts with transform: translateY(-2px), and a contextual shadow (0 8px 24px rgba(79, 130, 212, 0.24)) appears over 300ms. **button-secondary** is transparent with a 2px border (outline-variant #aaaaaa) and on-surface text; hover state fills the background with surface-container-high (#dedede). Links use the **link-interactive** component: display: flex, align-items: center, padding: 0 35px, with a 2px underline (background: #efefef) that animates via scaleX(1) → scaleX(0) on hover over 800

Do's and Don'ts

**Do**

• Do use Sofia Sans Condensed at 700 weight, uppercase, with -0.08em letter-spacing for all headlines—this is the brand's visual signature.
• Do apply the cubic-bezier(0.11, 0.82, 0.39, 0.92) easing curve to all transitions; it is the brand's motion language and must be consistent.
• Do reserve primary blue (#4f82d4) exclusively for interactive elements (buttons, focus states, links); never use it for backgrounds or decorative elements.
• Do maintain 40px (lg spacing) vertical separation between major content sections; whitespace is a design material, not wasted space.
• Do use Spline Sans Mono for all body and label text; the monospace choice signals precision and differentiates the portfolio aesthetic.

**Don't**

• Don't use rounded corners larger than 1rem (16px) on buttons or standard cards—this softens the architectural precision.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12); excessive shadow depth contradicts the minimalist philosophy.
• Don't mix Sofia Sans Condensed and Spline Sans Mono weights arbitrarily; Sofia is always 700, Spline is 300–400 only.
• Don't use color transitions outside the primary blue accent; secondary grays and neutrals should never animate or shift on interaction.
• Don't apply text-transform: lowercase or capitalize to headlines; uppercase is mandatory for architectural consistency.