Marcin Rusak Studio

Overview

Marcin Rusak Studio operates within the aesthetic movement of 'Refined Materiality'—a design philosophy that privileges tactile authenticity, botanical research, and the poetic tension between preservation and entropy. The brand serves designers, collectors, and institutions seeking work that investigates material transformation through rigorous process documentation. The visual language is deliberately restrained: a luminous white canvas (#ffffff) anchored by a sophisticated warm grey primary (#999999) and deep charcoal secondary (#666666), creating an atmosphere of contemplative minimalism. The UI evokes the feeling of a curated archive—clean, intentional, and reverent toward the objects it displays.

The brand voice is precise, scholarly yet accessible, and never promotional. Vocabulary patterns favour material terminology ('transformation', 'research', 'process', 'decay', 'preservation') over marketing language. Tone is calm, authoritative, and slightly poetic—the voice of a practitioner speaking to fellow practitioners. Example sentence in brand voice: 'We create works shaped by botanical research and the natural process of transformation.'

Colors

The colour system operates on a principle of 'monochromatic restraint with tonal depth.' Primary (#999999) serves as the signature accent—used sparingly on interactive elements, focus states, and key navigation—never as a background. The surface stack progresses from pure white (#ffffff, surface) through carefully calibrated greys: surface-container-low (#f0f0f0), surface-container (#e8e8e8), and surface-container-high (#dddddd), enabling subtle visual hierarchy without introducing colour. On-surface text is set at #282828, a near-black that maintains legibility while preserving the refined aesthetic. Secondary (#666666) is reserved for hover states, borders, and secondary CTAs, creating a two-tone interactive system. The outline and outline-variant tokens (#999999 and #bbbbbb respectively

Typography

The type system is hierarchical and deliberately restrained, built on three distinct font families that work in concert. Glossy Display Trial (300 weight, condensed variant) anchors display and headline levels—its refined, elongated letterforms (#72px at display, #48px at headline-lg) communicate sophistication and editorial authority. Domaine Text (400 weight) handles title-level content (#24px, 32px line-height), introducing a serif warmth that humanizes the interface. Unica 77 LL (500 weight) serves all body and label text, providing geometric clarity and excellent legibility at small sizes (#16px body-md, #14px label-md). Letter-spacing is conservative across all levels (ranging from -0.02em on display to +0.03em on labels), reinforcing the brand's precision. Apply text-shadow: 0 2px 4

Layout

The layout system uses a fluid 12-column grid on desktop (911px+) with a 16px gutter, collapsing to a single-column mobile layout. Container max-width is 1280px, with consistent padding of 16px on mobile and 24px on desktop. Section spacing follows a semantic rhythm: lg spacing (40px) separates major content blocks, md spacing (24px) divides subsections, and sm spacing (12px) groups related elements. The hero section spans full viewport height (100vh / 100svh) with a video background, establishing an immersive entry point. Below the fold, content is organized in modular card-based sections with 24px padding and 1px borders at #dddddd, creating visual breathing room. The grid-template-columns property uses repeat(12, minmax(0, 1fr)) on desktop, enabling flexible component placement. White-s

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid border at #dddddd with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (Modals & Overlays): same border treatment with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), increasing the perceived distance. Hover states on interactive elements transition the shadow from md to lg over 250ms (transition: box-shadow 0.25s ease-in-out), providing tactile feedback. Focus s

Shapes

The shape philosophy is 'Architectural Softness'—a balance between precision and approachability. Border-radius follows a deliberate scale: buttons and inputs use 0.5rem (8px), cards use 1rem (16px), and full-width containers use 0px (sharp edges). This hierarchy signals function: smaller radius on interactive elements suggests precision and control, while larger radius on containers creates visual containment. The most frequent radius observed is 0.5rem (19 instances), confirming this as the system default for interactive components. Avoid 50% border-radius except for avatar images and badge

Components

Action Elements Buttons use a two-state system: button-primary (#999999 background, white text, 44px height, 10px vertical / 24px horizontal padding, 0.5rem radius) for primary CTAs, and button-secondary (transparent background, #282828 text, 1px border at #999999) for secondary actions. Hover states transition the background to #d9d9d9 (primary-fixed-dim) over 250ms, with the border shifting to #666666. Focus states add a 3px outline at rgba(153, 153, 153, 0.1). Active states darken the background to #888888 with white text (#fefefe), signalling engagement. All buttons use {typography.label-md} (14px, 500 weight, 0.02em letter-spacing).

Containers & Surfaces Cards are the primary container component: 1px border at #dddddd, 1rem border-radius, 32px padding (24px on mobile), white

Do's and Don'ts

**Do**

• Do use the primary grey (#999999) exclusively for interactive elements—buttons, links, focus states—never as a background or body text.
• Do maintain generous white-space around content blocks; use lg spacing (40px) between major sections to reinforce the contemplative aesthetic.
• Do apply the Glossy Display Trial font family only to display and headline levels; never use it for body text or labels.
• Do use the shadow system (0 3px 8px rgba(0, 0, 0, 0.15)) consistently on all elevated surfaces to create visual hierarchy without introducing colour.
• Do transition all interactive state changes over 250ms using cubic-bezier(0.5, 0, 0, 1) easing to maintain the refined, deliberate feel.

**Don't**

• Don't introduce accent colours beyond the primary grey (#999999) and secondary charcoal (#666666); the monochromatic palette is essential to the brand identity.
• Don't use border-radius values outside the defined scale (sm: 0.2rem, DEFAULT: 0.5rem, md: 0.75rem, lg: 1rem, xl: 1.5rem, full: 9999px).
• Don't apply shadows with coloured components (e.g., blue or warm shadows); use only black with opacity (rgba(0, 0, 0, x)).
• Don't set text smaller than 12px (label-sm) or larger than 72px (display) without explicit design review; the type scale is carefully calibrated.
• Don't use the Unica 77 LL font family at weights other than 500; the system does not support bold or light variants.