Imrich Kascak

Overview

Imrich Kascak's portfolio embodies Architectural Minimalism—a design philosophy that prioritizes structural clarity, negative space, and the profound power of restraint. The brand serves technologists and visionaries exploring the intersection of AI, cryptocurrency, design, and code. The aesthetic is ethereal yet grounded: a near-white canvas (#fbfbfd) with ultra-light typography (font-weight: 200 at 224px) creates an almost immaterial quality, as if the words float rather than sit. The emotional response is one of clarity and forward momentum—the tagline "Future is now" is not breathless marketing but a calm assertion of inevitability.

The voice is precise, understated, and unadorned. Imrich speaks through absence as much as presence: the portfolio contains no flourish, no animation beyond subtle parallax (transform: translate3d(var(--parallax-x), var(--parallax-y), 0)), no color beyond a single accent green (#60e198) reserved for future moments. The vocabulary is architectural—sections "snap" into view, navigation "scrolls" with intention, indicators pulse with purpose. Example sentence in brand voice: "AI. BTC. Design. Coding. Sleep. Repeat." Each word is a pillar; together they form the structure of a technologist's life.

Colors

The color system operates on a principle of near-monochromatic depth with a single, strategic accent. Primary (#1d1d1f, near-black) dominates as the text and interactive anchor, paired with its inverse on-primary (#fbfbfd, near-white) for maximum contrast and legibility at 224px display sizes. The surface stack ranges from #fbfbfd (surface, the page background) through #f5f5f7 (surface-dim) to #d2d2d7 (surface-container-highest, used for dividers and subtle separations). Secondary (#60e198, a vivid emerald-green) is reserved exclusively for future states, hover effects, and accent moments—it appears sparingly, making each occurrence feel intentional and premium. Tertiary (#86868b, a warm gray) serves as the on-surface-variant for secondary text, labels, and metadata. The gradient overlay u

Typography

The type system is built on a single, carefully tuned typeface family: the system stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif) ensures consistency across platforms while respecting native OS rendering. Display (224px, font-weight: 200, letter-spacing: -0.055em, line-height: 0.9) is the hero—each section word ("AI", "BTC", "DESIGN", "CODING", "SLEEP", "REPEAT") uses this ultra-light weight to create an almost ethereal presence. Headline-lg (40px, font-weight: 600) and headline-md (28px, font-weight: 600) provide structural hierarchy for future content sections. Body-md (16px, font-weight: 400, line-height: 24px) is the workhorse for navigation and descriptive text. Label-md (15px, font-weight: 600, letter-spacing: 0.01em) is used for header bra

Layout

The page uses a full-viewport, snap-scroll architecture (scroll-snap-type: y mandatory, scroll-snap-align: start, scroll-snap-stop: always) that forces users into intentional, section-by-section navigation. Container max-width is 1440px, but the hero sections occupy 100vw × 100vh (min-height: 100vh, flex-col, items-center, justify-center) to create immersive, full-bleed moments. The spacing scale is semantic: lg (40px) separates major sections; md (24px) is the default gutter for padding and margins; sm (12px) is used for internal component spacing. The header uses px-5 md:px-10 lg:px-14 (20px, 40px, 56px respectively) to scale with viewport, maintaining visual balance. The footer uses pb-28 md:pb-36 (112px, 144px) to create breathing room before the end. The parallax effect (--parallax-x:

Elevation & Depth

Depth in this system is achieved through subtle layering and the physics of light, not shadow. Level 1 (Base): the gradient overlay (radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 55%), opacity: 0.34) creates a soft luminous quality at the top of the viewport. Level 2 (Interactive Elements): buttons and links use a 1px border at rgba(0, 0, 0, 0.07) and a soft shadow (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) to separate from the background. Level 3 (Modals/Dropdowns): the custom select panel uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border at #d0d0

Shapes

The shape philosophy is Geometric Precision with Organic Softness—sharp where it matters, rounded where it invites touch. Buttons use rounded-full (border-radius: 9999px) to create pill-shaped affordances that feel both modern and approachable; this 44px height (padding: 12px 24px) is optimized for touch targets on mobile. Navigation links use a scale-x animation (scale-x-0 to scale-x-100, transform-origin: left) to draw an underline from left to right on hover, reinforcing the architectural theme of construction. Section indicator dots use rounded-full (8px diameter) to create perfect circles

Components

Action Elements Buttons are the primary interactive component. Button-primary uses background-color: {colors.primary} (#1d1d1f), color: {colors.on-primary} (#fbfbfd), border-radius: 9999px, padding: 12px 24px, height: 44px, and typography: label-md (15px, font-weight: 600). On hover, button-primary-hover shifts to background-color: {colors.primary-container} (#d2d2d7), color: {colors.on-primary-container} (#1d1d1f), with a transition: background-color 300ms ease-out. Button-secondary uses background-color: {colors.primary-container} (#d2d2d7) and reverses on hover to background-color: {colors.surface-container-high} (#e8e8ed). All buttons use cursor: pointer and touch-action: manipulation for mobile optimization.

Navigation & Indicators Nav-link components use typography: title-lg

Do's and Don'ts

**Do**

• Do use the ultra-light display weight (font-weight: 200) exclusively for hero section headings at 224px or larger; it creates the signature ethereal quality.
• Do reserve the secondary green (#60e198) for future states, accent moments, and hover effects—never use it for body text or backgrounds.
• Do maintain the full-viewport snap-scroll architecture; each section should occupy 100vh and snap-align: start to enforce intentional navigation.
• Do apply the gradient overlay (radial-gradient with rgba(255, 255, 255, 0.9) and rgba(210, 210, 215, 0.25)) to every page to maintain visual consistency.
• Do use rounded-full (9999px) exclusively for buttons and interactive pills; use rounded (4px) for inputs and technical components.
• Do animate nav links with a scale-x underline (origin-left, 300ms ease-out) rather than opacity changes to reinforce the architectural theme.

**Don't**

• Don't use font-weight above 600 for body text; the system relies on weight contrast between display (200) and body (400) for hierarchy.
• Don't introduce new accent colors; the green (#60e198) is the only non-neutral color and must remain reserved for intentional moments.
• Don't break the snap-scroll behavior; every section must snap-align: start and snap-stop: always to maintain the immersive, full-bleed experience.
• Don't apply shadows heavier than box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); the system prioritizes light and clarity over depth.
• Don't use rounded corners smaller than 4px or larger than 9999px; the system uses only these two values to maintain geometric precision.
• Don't add decorative elements or patterns; the brand is built on absence and restraint—every pixel must earn its place.