# Design Language for nonri.org ## Aesthetics and Tone nonri.org channels the atmosphere of an abandoned Soviet computing laboratory rediscovered by a traveling candy manufacturer -- brutalist concrete architecture stained with neon sugar spills, punch-card machines rewired to dispense bubblegum, and fluorescent tubes flickering behind raw steel grating in shades of electric magenta and acid lime. The aesthetic is **brutalist confectionery**: the uncompromising structural honesty of late-modernist architecture colliding head-on with the saccharine maximalism of a Japanese candy shop display. Every surface is honest about its materiality -- exposed grids, visible structure, unfinished edges -- but the content within those structures vibrates with candy-coated color so intense it borders on hallucinatory. The tone is **mysterious-moody** throughout: there is no friendliness here, no welcoming copy, no gentle onboarding. The site presents itself as a sealed dossier that happens to be color-coded in fluorescent pink and electric blue. Information is delivered with the clinical detachment of a declassified intelligence briefing, but the visual envelope is hyperchromatic and almost aggressive in its sweetness. The juxtaposition is deliberate: the brutalist architecture says "you were not meant to see this," while the candy-bright palette says "but now that you have, you cannot look away." Text is sparse, directive, and slightly menacing -- short imperative sentences, fragmentary labels, redacted-looking section markers. There is no humor, no warmth, only a strange and beautiful tension between structural severity and chromatic excess. The overall impression should feel like discovering a classified research facility where the scientists studied color theory so obsessively that the building itself began to mutate -- concrete walls bleeding fuchsia, steel I-beams sweating cyan condensation, ventilation ducts exhaling clouds of magenta particulate. The user should feel simultaneously surveilled and mesmerized, as though the site is both watching them and performing for them. ## Layout Motifs and Structure The layout operates on a **persistent sidebar + main canvas** architecture. The sidebar is a fixed vertical column occupying exactly 280px on the left edge of the viewport, rendered as a brutalist monolith: a solid slab of `#1A1A1A` (Anthracite) with no border-radius, no shadow, no softening of any kind. Its inner edge (the border facing the main canvas) is a raw 3px line of `#FF2D8A` (Hot Fuchsia) -- a searing chromatic seam where the dark architecture meets the luminous content zone. **Sidebar Interior:** The sidebar contains the site's navigational anatomy, presented as a vertical stack of isometric icon modules. Each navigation item is an isometric cube rendered in CSS (using `transform: rotateX(45deg) rotateZ(45deg)` with pseudo-elements for the three visible faces), where each cube face displays a different candy-bright color. The top face shows the item label in "Azeret Mono" at 11px, uppercase, letter-spacing 0.15em. When a section is active, its cube rotates 90 degrees on the Y-axis via a 400ms cubic-bezier transition, revealing a hidden face colored in `#00F0FF` (Cyan Shock). The sidebar scrolls independently of the main canvas using `overflow-y: auto` with a custom scrollbar styled as a 2px `#FF2D8A` track. **Main Canvas:** The remaining viewport width (calc(100vw - 280px)) serves as the main content stage. This is not a scrolling document but a **card-flip theater**: content is organized into discrete rectangular panels (cards) that occupy 100% of the main canvas viewport height. Navigation between sections triggers a full-card-flip animation -- the current card rotates 180 degrees on its vertical axis (Y-axis), revealing the next content section on its "back face." The flip uses `perspective: 1200px` on the parent container and `backface-visibility: hidden` on each card face to achieve a physical paper-flip effect. Each card has a `background-color` that cycles through the candy-bright palette: first card `#FF2D8A`, second `#00F0FF`, third `#BFFF00`, fourth `#FF6B2B`, cycling back. **Grid Within Cards:** Each card's interior uses a 12-column CSS Grid with 16px gutters and 32px padding from all edges. Content blocks within cards are positioned as brutalist modules: rectangular blocks with hard edges, no border-radius, 3px solid borders in `#1A1A1A`, and visible grid coordinates displayed in the top-left corner of each block in `Azeret Mono` at 9px (e.g., "C3-R2" for column 3, row 2). This grid-coordinate labeling reinforces the brutalist ethos of exposing structural information that most designs conceal. **Responsive Behavior:** Below 768px, the sidebar collapses into a top bar (height: 60px) where the isometric cubes are arranged horizontally in a single row. The card-flip axis switches from Y-axis to X-axis (cards flip top-to-bottom instead of left-to-right) to accommodate the vertical orientation of mobile devices. The grid within cards reduces to 4 columns with 12px gutters. ## Typography and Palette **Typography:** - **Display / Section Headers:** "Rubik Glitch" (Google Fonts) -- a display typeface built from the geometric Rubik family but with intentional structural fragmentation that makes each glyph appear to vibrate or stutter. Used at `clamp(2.5rem, 6vw, 5rem)` for section headers on each card face. All headers are uppercase with `letter-spacing: 0.04em`. The glitched geometry of this face perfectly embodies the brutalist-meets-candy tension: each letter is architecturally precise in its underlying structure but visually disrupted, as though the candy-bright colors are corroding the letterforms from within. Applied with `color: #1A1A1A` against candy-bright card backgrounds for maximum contrast. - **Body / Descriptive Text:** "Space Grotesk" (Google Fonts) at weights 400 and 500 -- a proportional sans-serif with a technical, slightly monospaced feel thanks to its squared counters and open apertures. Used at `clamp(0.9rem, 1.1vw, 1.15rem)` with `line-height: 1.65` for body paragraphs. Space Grotesk bridges the gap between the brutalist structural precision and readability; its open geometry allows it to breathe against the intense background colors without feeling decorative. Body text is set in `#1A1A1A` on light card backgrounds and `#FAF5F0` on dark card backgrounds. - **Labels / Grid Coordinates / Metadata:** "Azeret Mono" (Google Fonts) at weight 400 -- a monospaced face with a slightly condensed width and sharp, mechanical terminals. Used exclusively for structural metadata: grid coordinates, navigation labels, timestamps, section markers, and any text that functions as interface chrome rather than content. Set at 9px-12px, always uppercase, always with `letter-spacing: 0.12em`. Color alternates between `#FF2D8A` on dark surfaces and `#1A1A1A` on light surfaces. - **Accent / Pull Quotes:** "Fraunces" (Google Fonts) at weight 900 with optical size axis set to 72pt -- a display serif with exaggerated "wonky" features: asymmetric serifs, bulging bowls, and organic irregularity that contrasts sharply with the brutalist grid. Used sparingly for single-sentence pull quotes or emphatic callouts within cards, at `clamp(1.5rem, 3vw, 2.5rem)`. This eclectic-hybrid approach -- a wonky old-style serif erupting from within a brutalist monospace grid -- creates deliberate typographic friction. Set in `#1A1A1A` with a 4px underline offset in `#BFFF00` (Acid Lime). **Palette:** The palette is **candy-bright** against a brutalist dark scaffold: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Scaffold | Anthracite | `#1A1A1A` | Sidebar, card borders, structural elements | | Primary Candy | Hot Fuchsia | `#FF2D8A` | First card BG, accent lines, active states | | Secondary Candy | Cyan Shock | `#00F0FF` | Second card BG, sidebar active cube face, links | | Tertiary Candy | Acid Lime | `#BFFF00` | Third card BG, underlines, hover highlights | | Quaternary Candy | Tangerine Blaze | `#FF6B2B` | Fourth card BG, warning states, emphasis markers | | Text Dark | Ink Black | `#0D0D0D` | Primary body text on light candy backgrounds | | Text Light | Warm Chalk | `#FAF5F0` | Body text on dark backgrounds and sidebar text | | Structural Line | Neon Grape | `#B84DFF` | Dividers, grid lines within cards, metadata borders | The candy-bright colors are never used at reduced opacity; they are always at full saturation and full brightness. This is a deliberate brutalist choice: no gradients, no subtle tinting, no easing into color. Color arrives suddenly and completely, like flipping a switch in a dark room and finding yourself inside a candy factory. ## Imagery and Motifs **Isometric Icons as Architectural Artifacts:** All imagery on nonri.org takes the form of **isometric icons** -- stylized three-dimensional objects rendered in strict 30-degree axonometric projection using pure CSS or inline SVG. No photographs. No raster images. No illustrations in any traditional sense. Every visual element is a geometric construction that exists in isometric space, reinforcing the brutalist commitment to structural honesty while allowing the candy-bright palette to saturate every visible face of each form. Specific isometric icon implementations: 1. **Isometric Cube Modules:** The fundamental visual unit is a cube rendered with three visible faces, each face a different candy-bright color. A cube with top face `#BFFF00`, left face `#FF2D8A`, and right face `#00F0FF` becomes a trichromatic jewel. These cubes serve as section markers, list bullets, and decorative anchors within the card grid. Each cube is 40x40px in its bounding box, constructed from three CSS parallelogram pseudo-elements with `transform: skewY(30deg)` and `skewY(-30deg)` combinations. 2. **Isometric Stacks:** Groups of 3-5 cubes stacked vertically with 2px gaps create tower forms that serve as visual metaphors for hierarchy and accumulation. These stacks appear at the beginning of each content section within a card, growing taller as the user progresses deeper into the site (first section: 2 cubes, second: 3, third: 4, etc.). 3. **Isometric Room Dioramas:** At the top of each card, a miniature isometric room (approximately 200x150px) depicts an abstract environment related to the section's content. These rooms are assembled from flat CSS planes positioned in isometric space: floor plane, two wall planes, and furniture-like geometric objects (rectangular prisms, cylinders approximated with stacked thin rectangles). The rooms use the candy-bright palette with `#1A1A1A` outlines for depth definition. 4. **Isometric Grid Floor:** The background of the main canvas area (behind the cards, visible during flip transitions) displays a repeating isometric grid pattern -- a diamond lattice rendered as a CSS background using `repeating-linear-gradient` at 30-degree angles. The grid lines are 1px `#B84DFF` (Neon Grape) on `#1A1A1A`, creating a sense of infinite depth that the card panels float above. **Particle Effects as Atmospheric Interference:** The motif layer consists of **particle effects** that permeate the viewport as ambient visual noise, reinforcing the mysterious-moody tone: 1. **Candy Dust Particles:** A canvas element (positioned fixed, z-index above background but below content) renders 80-120 small particles (2-5px squares, not circles -- staying brutalist) that drift slowly across the viewport. Each particle is a random candy-bright color at 40-60% opacity, moving at randomized velocities between 0.2-0.8px per frame. Particles have no interaction with mouse or scroll; they are purely atmospheric, like fluorescent dust motes in a surveillance camera feed. 2. **Glitch Bursts on Card Flip:** When a card-flip transition triggers, a burst of 200 particles explodes from the card's rotation axis, radiating outward in a cone pattern before fading over 600ms. These burst particles are all `#FF2D8A` at 80% opacity, creating a visual "spray" effect as though the card's rotation is shedding pigment. 3. **Sidebar Particle Stream:** Within the sidebar, a thin column of particles (3-5 per frame) trickles downward continuously along the right edge (adjacent to the `#FF2D8A` border), like luminous rain running down a concrete wall. These particles are monochromatic `#00F0FF` at 30% opacity, 1-2px squares, moving at 1.5px/frame downward with slight horizontal jitter. ## Prompts for Implementation **Full-Screen Narrative Architecture:** The site must load as an encounter with a sealed system. On initial load, the viewport is entirely `#1A1A1A` for 300ms while fonts load. The sidebar then slides in from the left edge over 500ms with a sharp `cubic-bezier(0.25, 0, 0, 1)` easing -- it does not ease in gently; it arrives with mechanical authority, like a vault door sliding into position. Simultaneously, the first card panel fades from `#1A1A1A` to `#FF2D8A` over 400ms, starting 200ms after the sidebar begins its slide. The particle system initializes 100ms after the first card is visible. **Card-Flip Narrative Progression:** Each card panel represents a discrete narrative chapter. The user advances through chapters by clicking navigation cubes in the sidebar or by pressing designated keyboard shortcuts (arrow keys, number keys 1-4). Each flip is a full 180-degree Y-axis rotation lasting 700ms with `cubic-bezier(0.68, -0.55, 0.27, 1.55)` easing (slight overshoot for physical realism). During the mid-point of the flip (at 90 degrees, when the card is edge-on and invisible), the particle burst triggers. The incoming card face begins its rotation from -180 degrees to 0 degrees simultaneously, creating a seamless flip effect. There is no scrolling within cards; all content for each section must fit within the viewport. If content requires more space, it is distributed across multiple cards within the same section, with sub-navigation indicated by smaller cubes nested within the parent cube in the sidebar. **Brutalist Content Treatment:** All content within cards follows brutalist information design principles: - Text blocks have visible 2px `#1A1A1A` borders on all four sides - Section labels use redaction-style formatting: `[SECTION: 03 // CONTACT]` in Azeret Mono - Data is presented in raw, table-like structures with visible cell borders rather than styled cards or floating containers - Images (isometric icons) are positioned within the grid with visible coordinate markers - No drop shadows, no gradients, no rounded corners, no blur effects anywhere on the site - Hover states are abrupt: elements snap to their hover style in 0ms transition, reinforcing the mechanical, switch-like interaction model **Sidebar Interaction Model:** The sidebar is the sole navigation mechanism. Each isometric cube in the sidebar corresponds to a content card. Clicking a cube triggers: 1. The cube's Y-axis rotation (400ms, revealing the `#00F0FF` face) 2. A 100ms delay 3. The main canvas card-flip to the corresponding section 4. All other cubes reset to their default rotation A thin horizontal line (1px, `#B84DFF`) extends from the active cube to the right edge of the sidebar, visually connecting the navigation element to the content canvas -- a structural connective tissue that makes the relationship between navigation and content architecturally visible. **Responsive Degradation:** On mobile (below 768px), the card-flip animation simplifies to a cross-fade with a 200ms `#1A1A1A` blackout between cards (simulating a blink rather than a flip). The particle system reduces to 30 particles. The isometric cubes in the collapsed top bar reduce to flat colored squares (the isometric projection is abandoned for the navigation elements only; content isometric icons remain). The grid-coordinate labels are hidden on mobile to reclaim space. AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, gradient hero sections, stock photography, friendly/warm copywriting tone, rounded UI elements, subtle pastel color schemes, conventional hamburger menus, smooth-scrolling single-page layouts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Brutalist-Candy Chromatic Collision:** No other design in the portfolio combines brutalist structural ideology (raw edges, exposed grids, visible coordinates, mechanical transitions) with a candy-bright palette at full saturation. The frequency analysis shows brutalist at 9% and candy-bright at 1% -- their combination is unprecedented. Most brutalist designs pair with monochrome or dark-neon palettes; most candy-bright designs pair with playful or dopamine aesthetics. The deliberate tension between structural severity and chromatic excess creates a visual identity that cannot be confused with any other site. 2. **Card-Flip as Primary Navigation Paradigm:** While card-flip appears at 5% in the pattern frequency, it is universally used as a secondary micro-interaction (e.g., a single card flipping to reveal details). nonri.org elevates card-flip to the site's fundamental navigation architecture -- the entire content canvas flips between sections. This transforms a decorative pattern into a structural principle, creating a physical, tactile browsing experience where every page transition has the materiality of turning a physical card over. 3. **Isometric Navigation Cubes:** The sidebar's interactive isometric cubes are a navigation mechanism that exists nowhere else in the portfolio. Isometric-icons at 1% frequency are typically decorative illustrations; here they become functional interface elements that rotate, change color, and emit connecting lines to the content they control. The cubes serve simultaneously as navigation, wayfinding, progress indicator, and decorative motif -- a single design element performing four distinct roles. 4. **Particle Effects as Brutalist Atmospheric Layer:** Particle-effects at 1% are among the rarest motifs. Typically particles are associated with ethereal or sci-fi aesthetics. nonri.org uses square particles (not circles), candy-bright colors (not white or subtle), and mechanical behavior (no organic flowing) to create a particle system that is specifically brutalist: the particles are debris, not fairy dust. They reinforce the mysterious-moody tone by suggesting a space where the intense color is physically disintegrating the architecture -- pigment falling from saturated surfaces like concrete spalling. 5. **Eclectic-Hybrid Typography with Structural Justification:** At 2% frequency, eclectic-hybrid typography is rare. Most designs use a single typeface family or a conventional serif/sans pairing. nonri.org deploys four distinct typefaces (Rubik Glitch, Space Grotesk, Azeret Mono, Fraunces) with each assigned to a specific structural role: glitched display, technical body, metadata chrome, and emphatic serif. The typographic choices are not decorative eclecticism but functional brutalism -- each face is chosen for the structural job it performs, and their visual clash is a feature, not a bug. **Documented seed/style:** aesthetic: brutalist, layout: sidebar, typography: eclectic-hybrid, palette: candy-bright, patterns: card-flip, imagery: isometric-icons, motifs: particle-effects, tone: mysterious-moody **Avoided overused patterns:** centered layout (99%), warm palette (100%), scroll-triggered patterns (97%), friendly tone (98%), mono typography (99%), playful aesthetic (95%), minimal imagery (94%), vintage motifs (85%), parallax patterns (76%), stagger patterns (60%), gradient palette (90%)