# Design Language for okurairi.com ## Aesthetics and Tone okurairi.com inhabits the visual world of a Scandinavian design atelier that has been corrupted by a faulty data stream -- a pristine Helsinki studio where the marble sample boards have begun to pixelate, where the precisely arranged portfolio prints flicker with digital interference, and where the clean birchwood display tables are reflected in screens showing cascading glitch artifacts. The name "okurairi" (Japanese: entry, stepping inside) reinforces the threshold quality: you are crossing from the orderly analog world of Nordic craft into a liminal digital space where material surfaces break apart into signal noise. The aesthetic is **Scandinavian** in its bones -- functional, restrained, governed by the principle that every element must earn its place -- but the surface treatment is deliberately corrupted. Think of a Kinfolk magazine layout where every third page has been run through a VHS tape degausser. The color temperature stays cool and muted (no dopamine bursts, no warm amber), but the visual stability is intermittently disrupted by controlled glitch events: horizontal scan-line tears, RGB channel splitting, block displacement, and data-moshing artifacts that treat the clean design substrate as raw signal to be bent. The tone is **tech-tutorial**: instructive, precise, matter-of-fact. Not the cheerful explainer, but the seasoned practitioner who documents process with clinical specificity. Each portfolio piece is presented as a case study with the detached authority of a technical manual. The voice says "here is how this was made" rather than "look how beautiful this is." Captions read like commit messages. Descriptions read like architecture decision records. The entire site functions as a tutorial on the intersection of material craft and digital corruption -- teaching by showing, with no salesmanship. ## Layout Motifs and Structure The layout follows a **portfolio-grid** composition -- a structured matrix of project thumbnails and case-study entries arranged in a CSS Grid system that references the modular organization of a Scandinavian design catalogue. Unlike the chaotic masonry or freeform organic layouts common in the portfolio, this grid is deliberately rigid and orthogonal, its precision serving as the stable substrate against which glitch disruptions become meaningful. Without order, there is no disorder. **Grid Architecture:** - **Primary Grid:** A 4-column grid at desktop widths (1200px+), with uniform 24px gutters and 48px outer margins. Columns are equal-width, creating a metronomic rhythm. At tablet (768-1199px), the grid reduces to 2 columns. At mobile (<768px), single column with 24px side margins. - **Portfolio Cells:** Each cell in the grid is a square (1:1 aspect ratio enforced via `aspect-ratio: 1 / 1` or the padding-bottom trick). This uniform shape creates the visual effect of a specimen tray or a type case -- regular compartments holding different contents. The strict geometry references both Scandinavian functional design (everything in its place) and the pixel grid of digital imagery (every cell a tile in a larger mosaic). - **Feature Rows:** Every third row breaks the 4-column pattern: a single cell spans all 4 columns at a 4:1 aspect ratio, creating a wide cinematic band that functions as a "chapter divider." These feature rows contain full-bleed glitch-art compositions or marble texture studies that interrupt the grid's regularity. They are the controlled chaos -- scheduled disruptions in an otherwise orderly system. - **Vertical Rhythm:** Between rows, a 24px gap maintains the strict modularity. No section has special spacing. The grid is the grid. Content adapts to the grid, never the reverse. - **Navigation:** A thin horizontal bar at the very top of the viewport -- 48px tall, spanning full width, with the domain name flush-left in Commissioner at 14px (weight 400, uppercase, letter-spacing +0.12em) and three navigation labels flush-right in the same treatment. The navigation bar has no background color -- it is transparent, letting the marble texture beneath show through, with a 1px bottom border in #a0b0b8 at 30% opacity. On scroll, the bar becomes fixed with a subtle `backdrop-filter: blur(8px)` frosted effect. - **No Sidebar, No Hero:** The grid begins immediately below the navigation bar. There is no hero section, no splash screen, no introductory text block. The portfolio cells ARE the introduction. The site teaches by presenting, not by preamble. ## Typography and Palette **Typography:** - **Primary / Display / Body:** "Commissioner" (Google Fonts) -- a low-contrast, variable sans-serif with a wide design space that allows seamless transitions between weights without font-family changes. This is the ONLY font used on the entire site. The restriction to a single typeface family is a deliberate Scandinavian design decision: maximum versatility from minimum means. Commissioner is used at the following specifications: - **Portfolio titles:** Weight 700 (Bold), 1.25rem, uppercase, letter-spacing +0.08em, color #2c3e50. These are terse, technical labels -- project codenames rather than marketing headlines. - **Case study headings:** Weight 500 (Medium), 2rem, sentence case, letter-spacing +0.01em, line-height 1.3, color #2c3e50. - **Body text / descriptions:** Weight 300 (Light), 1rem, sentence case, letter-spacing +0.005em, line-height 1.7, color #4a5568. Long-form text uses a max-width of 65ch for optimal reading measure. - **Technical annotations:** Weight 400 (Regular), 0.8125rem, uppercase, letter-spacing +0.1em, color #7b8a94. Used for dates, categories, metadata -- the margin notes of the portfolio. - **Navigation:** Weight 400 (Regular), 0.875rem, uppercase, letter-spacing +0.12em, color #4a5568. - **Monospace Accent:** "IBM Plex Mono" (Google Fonts) -- used exclusively for code-like elements: version numbers, technical specifications, process annotations, and the "commit message" style captions beneath portfolio images. Weight 400, 0.8125rem, color #7b8a94. This font is the "technical voice" that reinforces the tech-tutorial tone -- it signals "this is documentation" rather than "this is marketing." **Palette:** The palette is **analogous** -- built from a narrow band of the color wheel spanning blue-gray through teal to sage-green, with no warm colors whatsoever. The temperature is permanently set to Nordic winter: overcast skies, fjord water, lichen on granite. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Primary | Bone White | #f0ece4 | Main canvas, portfolio cell backgrounds when not showing images | | Background Secondary | Frost Gray | #e2ddd5 | Alternate row backgrounds, card hover states | | Text Primary | Fjord Ink | #2c3e50 | Headlines, portfolio titles, primary text | | Text Secondary | Slate Mist | #4a5568 | Body text, descriptions | | Text Tertiary | Storm Gray | #7b8a94 | Annotations, metadata, timestamps | | Accent Primary | Nordic Teal | #3a8f8b | Interactive elements, links, selected states, glitch artifact base color | | Accent Secondary | Fjord Deep | #2c6e6a | Hover states, focus rings, secondary glitch channel | | Accent Tertiary | Lichen Sage | #6b9e7e | Tertiary glitch channel, success states, subtle highlights | | Border | Mist Line | #a0b0b8 | Grid lines, dividers, at 30% opacity | | Glitch Artifact | Signal Red | #c45a5a | RGB-split red channel displacement, used ONLY in glitch effects, never as UI color | | Glitch Artifact | Signal Blue | #5a7ac4 | RGB-split blue channel displacement, used ONLY in glitch effects | | Dark Surface | Charcoal | #1a1a2e | Used in feature-row backgrounds, dark-mode portfolio cells | The analogous relationship between Nordic Teal (#3a8f8b), Fjord Deep (#2c6e6a), and Lichen Sage (#6b9e7e) creates a cohesive, low-tension palette that reads as a single material -- like different depths of the same body of water. The Signal Red and Signal Blue exist ONLY within glitch effects and are never used as interface colors, preserving the cool-temperature integrity of the design. ## Imagery and Motifs **Glitch-Art System:** The primary visual treatment is **glitch-art** -- the deliberate corruption of digital image data to produce artifacts that reveal the hidden structure of the medium. On okurairi.com, glitch effects are not applied randomly or universally; they are choreographed events that activate on specific triggers and affect specific regions of the layout, maintaining the Scandinavian principle of intentional restraint. Specific glitch techniques: 1. **RGB Channel Splitting:** Portfolio cell images have their red, green, and blue channels separated and offset by 2-6 pixels in opposing directions. Achieved via CSS: three copies of the same image positioned absolutely, each with `mix-blend-mode: screen` and a color filter (`filter: saturate(0) brightness(1.2)` combined with background-color overlays in #c45a5a, #6b9e7e, and #5a7ac4). The offset increases on hover, creating a "signal degradation" effect as you approach. On mobile/touch, the split activates on tap and holds for 600ms before recomposing. 2. **Scan-Line Overlay:** A repeating horizontal line pattern (1px transparent, 1px rgba(0,0,0,0.03)) created via `repeating-linear-gradient` is applied over all portfolio cells. This extremely subtle CRT scan-line effect is barely visible at normal viewing distances but becomes apparent on close inspection, reinforcing the "digital signal" metaphor without dominating the clean Scandinavian surface. 3. **Block Displacement:** On the feature-row (full-width) elements, rectangular sections of the image are displaced -- shifted 4-12px horizontally -- using CSS clip-path and transform combinations triggered on scroll. The displacement creates the appearance of a corrupted JPEG where macroblocks have shifted out of alignment. Each feature row has 3-5 displaced blocks, positioned using data attributes and calculated via a simple stagger function. 4. **Data-Mosh Freeze Frames:** When a portfolio cell is clicked/tapped, the transition to the case-study view begins with a 300ms "freeze" where the image appears to data-mosh: vertical bands of the image stretch and repeat (achieved by rapidly toggling between `object-fit: cover` and `object-fit: fill` with clipped viewports). This lasts exactly 300ms before the clean case-study layout resolves. **Marble-Classical Motifs:** Underlying the glitch-art surface is a **marble-classical** texture system that provides the material foundation of the site. The marble is not decorative ornamentation but structural substrate -- the Scandinavian "honest materials" philosophy applied to digital surface. 1. **Marble Background Texture:** The base background of the site uses a subtle, CSS-generated marble pattern: an SVG filter combining `feTurbulence` (type: "fractalNoise", baseFrequency: "0.025 0.018", numOctaves: 4, seed: 77) with `feDisplacementMap` and `feColorMatrix` to produce a faint veined pattern in shades of #f0ece4 through #e2ddd5. The veining is barely perceptible -- a 5-8% opacity overlay -- suggesting Carrara marble viewed from a great distance. It is the material truth of the surface, not a feature. 2. **Marble Cell Borders:** Each portfolio grid cell has a 1px border that, instead of being solid, uses a marble-patterned stroke generated via SVG `` elements. The veining within the border is gray (#a0b0b8), creating the impression that the grid lines are carved from the same stone as the background. On hover, the border opacity increases from 30% to 60%. 3. **Classical Proportions:** The grid's 1:1 cell ratio and 4:1 feature-row ratio reference classical architectural proportions. The 24px gutter corresponds to a modular unit that governs all spacing on the site -- margins, padding, line-heights. This strict modularity echoes the mathematical order of classical architecture while remaining functionally Scandinavian. 4. **Veined Dividers:** Between major sections of a case-study page, horizontal dividers are rendered as SVG paths that follow the organic, branching pattern of marble veins rather than straight lines. Each divider is unique (generated from different turbulence seeds), but all share the same color (#a0b0b8 at 40% opacity) and width (spanning 60% of the content area, centered). ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport marble surface -- the entire screen is the bone-white (#f0ece4) marble texture at its most pristine, with veining barely visible. For 1.2 seconds, nothing else is visible. Then, a single horizontal scan line (1px, #3a8f8b at 60% opacity) sweeps from the top of the viewport to the bottom over 0.8 seconds, like a flatbed scanner digitizing the marble surface. As the scan line passes, it "reveals" the portfolio grid beneath: cells fade in with a staggered delay (each cell 80ms after the previous, reading left-to-right, top-to-bottom) using `opacity: 0 → 1` and a subtle 8px upward translation. The stagger creates a cascade effect -- the grid materializes as if being rendered in real-time by the scanning process. **Portfolio Grid Interaction:** Each portfolio cell begins in its "clean" state: a muted, desaturated thumbnail within the marble-bordered square. On hover (desktop) or long-press (mobile), the cell undergoes a 400ms transition sequence: 1. (0-100ms) The RGB channels begin to separate, red shifting 2px left, blue shifting 2px right 2. (100-200ms) The scan-line overlay opacity increases from 3% to 12%, becoming visibly apparent 3. (200-300ms) The image saturates from 60% to 100%, revealing its true colors through the glitch 4. (300-400ms) The cell border brightens from 30% to 60% opacity, and a subtle `box-shadow: 0 0 20px rgba(58, 143, 139, 0.15)` teal glow appears The reverse sequence plays on mouse-leave, the image "recomposing" itself back to its clean, desaturated state. The effect communicates: the pristine surface is a facade; interaction reveals the vibrant, corrupted truth beneath. **Case Study Pages:** Clicking a portfolio cell triggers the data-mosh freeze (300ms), then the viewport transitions to the case-study layout. The case study is a single-column layout (max-width: 65ch + 200px margin for annotations) that reads like a technical document: - The project title in Commissioner Weight 500 at 2.5rem - A metadata block in IBM Plex Mono: date, category, tools, duration -- formatted like a YAML front-matter block with leading `---` dividers - Body text in Commissioner Weight 300 with generous line-height (1.7) - Full-width image breaks with the block-displacement glitch applied on scroll - Technical annotations in the right margin (desktop only) in IBM Plex Mono, connected to their reference point by thin dashed lines in #a0b0b8 **Stagger Animation System:** All list-based content (portfolio grid, navigation items, metadata entries, annotation lists) uses a stagger animation pattern: items enter sequentially with an 80ms delay between each, using a shared `@keyframes stagger-in` animation (opacity 0 → 1, translateY 8px → 0, duration 400ms, easing cubic-bezier(0.25, 0.46, 0.45, 0.94)). The stagger is not spring-based or elastic -- it is linear and metronomic, matching the Scandinavian preference for predictable, functional motion. No bounce, no overshoot, no playfulness. Items arrive and stop. The rhythm is the interest. **Scrolling Behavior:** The site uses no parallax, no scroll-hijacking, and no scroll-triggered entrance animations beyond the initial page load. Once the grid has materialized, all content is simply present. Scrolling is native, unmodified, and instant. The only scroll-linked behavior is the block-displacement effect on feature rows, which uses a lightweight `IntersectionObserver` to toggle a CSS class that activates the displacement transforms. This restraint is deliberate: in a portfolio of sites dominated by scroll-triggered animations (97% frequency), okurairi.com's static presence is itself a differentiator. **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, newsletter signup forms, "above the fold" urgency, hero sections with taglines, gradient backgrounds, warm color accents, playful micro-interactions, bouncing elements, emoji, exclamation marks. ## Uniqueness Notes **Differentiators from other designs:** 1. **Single-Typeface System (Commissioner Variable):** While 99% of designs in the portfolio use monospace as a primary or paired font and 37% use humanist typefaces, okurairi.com uses Commissioner as its sole typeface family, leveraging its variable-weight axis (300-700) to create all typographic hierarchy. Commissioner appears at only 1% frequency in existing designs. IBM Plex Mono is used strictly for code-like annotations, not as a design element. This single-family discipline is a direct expression of the Scandinavian "less but better" philosophy. 2. **Controlled Glitch on Clean Substrate:** No other design pairs Scandinavian minimalism with glitch-art imagery. The Scandinavian aesthetic (5% frequency) has never been combined with glitch-art imagery (5% frequency) in the existing portfolio. The tension between the two -- perfect order deliberately disrupted by signal corruption -- creates a visual narrative absent from all other designs. The glitch effects are surgical and restrained, not chaotic or maximalist. 3. **Portfolio-Grid as Primary Architecture:** At only 2% usage, the portfolio-grid layout is dramatically underrepresented. okurairi.com's strict 4-column equal-cell grid (with 4:1 feature-row interruptions) creates a specimen-tray aesthetic that no other design achieves. The enforced 1:1 aspect ratio for cells and the absence of any hero section or introductory text block make the grid itself the entire user experience. 4. **Analogous Cool-Only Palette:** The analogous palette type appears at only 3% frequency, and okurairi.com's specific implementation -- a blue-gray/teal/sage band with zero warm colors -- is unique in the portfolio. Signal Red and Signal Blue exist only within glitch artifacts and are never exposed as UI colors, maintaining absolute cool-temperature consistency across the entire interface. 5. **Tech-Tutorial Tone Without Tutorial Content:** At 1% frequency, the tech-tutorial tone is nearly absent from existing designs. okurairi.com applies this tone to portfolio presentation rather than actual tutorials: project descriptions read like technical documentation, metadata is formatted as YAML front-matter, and annotations reference implementation details. The site teaches how design was made, not what it looks like. 6. **Anti-Scroll-Animation Stance:** In a portfolio where 97% of designs use scroll-triggered animations and 77% use parallax, okurairi.com deliberately refuses both. After the initial staggered grid reveal, the site is completely static. Scrolling is native. This is the most radical differentiator: in a sea of motion, stillness is the statement. **Chosen Seed:** aesthetic: scandinavian, layout: portfolio-grid, typography: commissioner-versatile, palette: analogous, patterns: stagger, imagery: glitch-art, motifs: marble-classical, tone: tech-tutorial **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (97%), minimal imagery (94%), vintage motifs (85%), friendly tone (98%), parallax patterns (77%), gradient palette (90%)