Kacper Siudak

Overview

Kacper Siudak's design system embodies a 'Minimalist-Technical' aesthetic that bridges the gap between austere Swiss typography and contemporary digital craft. The brand serves freelancers, small businesses, and creative professionals seeking modern, functional web and visual identity solutions. The UI evokes precision and clarity through bold typographic hierarchies (200px display type, 56px headlines), a restrained color palette anchored by a vibrant forest green (#228b22) accent, and generous white space that prioritizes content over decoration. The emotional response is one of professional confidence tempered by approachability—a designer who understands both craft and commerce.

The brand voice is direct, conversational, and Polish-inflected: it avoids corporate jargon and instead speaks in concrete, action-oriented language. Example: 'Tworzę nowoczesne strony internetowe i identyfikacje wizualne dla freelancerów, małych firm i twórców' (I create modern websites and visual identities for freelancers, small businesses, and creators). The vocabulary emphasizes 'estetyczne' (aesthetic), 'funkcjonalne' (functional), and 'kreatywne' (creative)—three pillars that define every design decision. Typography is the primary storytelling tool: Inter Display at 700 weight dominates hero sections, while Manrope (600 weight) grounds UI elements and navigation. The palette is deliberately limited: white (#ffffff), near-black (#090909), warm grays (#eaeaea, #d9d9d9), and the signature green accent that appears on all CTAs, focus states, and interactive elements.

Colors

The color system operates on a principle of 'functional minimalism': the vast majority of the interface is neutral (white, light gray, near-black text), allowing the primary accent—forest green (#228b22)—to command attention on interactive elements. Primary (#228b22) is deployed exclusively on call-to-action buttons, focus rings, active states, and brand-critical interactions; it conveys trust and growth without aggression. The surface stack progresses from pure white (#ffffff, surface-bright) through warm off-whites (#fafaf9, #f9f9f9) to light grays (#eaeaea, #d9d9d9), creating subtle visual hierarchy without relying on color shifts. On-surface text is near-black (#090909) for maximum legibility at all sizes, with on-surface-variant (#63615e) reserved for secondary text and captions. Seco

Typography

The type system is a two-font pairing: Inter Display (700, 600, 500 weights) for all display and headline scales, and Inter (400 weight) for body text, creating a clear distinction between structural hierarchy and readable content. Manrope (600 weight) bridges the gap, used for UI labels, button text, and navigation to add warmth and personality to interactive elements. Display type (200px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and sets an aspirational, confident tone; headline-lg (56px, 600 weight, -0.02em) anchors section introductions; headline-md (40px, 600 weight) supports subsections. Body text (16–18px, 400 weight, 24–28px line-height) is set in Inter with generous leading to ensure readability at all viewport sizes. Labels and button text (12–14px, 600

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered on the viewport with symmetric gutters of 24px on desktop and 12px on mobile. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections, md (24px) creates breathing room within sections, and sm (12px) groups related elements. The hero section spans full-width with a background image and overlay, using the full display typography (200px) to create immediate visual impact. Content sections below the fold use a two-column or three-column layout depending on content type (e.g., portfolio grid, pricing table, testimonials). Cards and containers maintain consistent padding (24px) and use subtle borders (1px solid #eaeaea) to define edges without visual heaviness. The cookie banner a

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic visual separation. The elevation system uses three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and small containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for full-screen overlays and critical modals. Inset shadows (inset 0 0 4px rgba(0, 0, 0, 0.05)) are used sparingly on input fields and recessed elements to create a subtle depression effect. The header navigation uses a frosted-glass effect (backdrop-filter: blur(8px), background: r

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the geometric precision of the grid while maintaining a modern, professional aesthetic. Buttons and CTAs use full-radius (9999px) to create a pill-shaped, approachable form that invites interaction; this is the most distinctive shape in the system and appears on all primary and secondary buttons. Cards and containers use md radius (10px) for a subtle roundness that feels contemporary without being overly playful. Input fields use DEFAULT radius (8px) to maintain visual hierarchy—slightly less rounded tha

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 24px horizontal padding. Primary buttons (#228b22 background, white text, Manrope 600, full-radius) are used for all critical CTAs (e.g., 'Poznajmy się' / 'Let's meet'). Hover state transitions the background to #1a6b1a (200ms ease-out) and maintains white text. Active state darkens further to #0f4d0f. Secondary buttons use a light gray background (#f5f4f3) with near-black text and a 1px outline in #eaeaea; hover state transitions to #eaeaea background. Ghost buttons use a transparent background with a 1px primary-colored border and primary text; hover state fills the background with primary-container (#228b221a). All buttons use a 200ms ease-out transition on background-

Do's and Don'ts

**Do**

• Do use the primary green (#228b22) exclusively on interactive elements—buttons, focus rings, active states—to create a clear visual hierarchy and guide user attention.
• Do maintain generous white space (lg spacing: 40px) between major sections to create visual breathing room and support the minimalist aesthetic.
• Do pair Inter Display (700 weight) with Manrope (600 weight) for UI labels to create a clear distinction between structural hierarchy and interactive elements.
• Do use full-radius (9999px) on all buttons and badges to signal interactivity; reserve md/DEFAULT radius for containers and inputs.
• Do apply subtle shadows (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers to create depth without visual heaviness.
• Do use 200ms ease-out transitions on all interactive state changes (hover, focus, active) to feel responsive and polished.

**Don't**

• Don't use the primary green on non-interactive elements (backgrounds, text, decorative elements); it must remain reserved for CTAs and focus states to maintain visual clarity.
• Don't apply multiple accent colors (green, blue, red) to the same section; use one primary accent per section and reserve secondary/tertiary colors for supporting information or errors.
• Don't use rounded corners on structural elements (grids, containers, sections); reserve full-radius for buttons and badges, and md/DEFAULT for cards and inputs.
• Don't apply heavy shadows (lg elevation) to cards or containers; reserve lg elevation for modals and full-screen overlays only.
• Don't mix font families within a single text block; use Inter Display for headlines, Inter for body, and Manrope for UI labels—never combine them.
• Don't reduce padding or spacing below the sm scale (12px) in cards or containers; maintain visual consistency and breathing room across all components.