# Design Language for senggack.net ## Aesthetics and Tone senggack.net channels the visual language of a 1920s Parisian cabaret poster as reimagined by a glitch artist working in a Tokyo basement at 3AM. The editorial aesthetic is stripped of politeness -- every element carries deliberate tension between Art Deco's geometric precision and the volatile flicker of neon signage bleeding through rain-streaked glass. Think of the opening credits of a neo-noir film: sharp geometric type silhouetted against pulsing magenta and cyan light, star motifs that feel more like occult sigils than decoration, and ruled borders that electrify and animate as if powered by unstable current. The tone is **edgy-rebellious** -- unapologetically confrontational, refusing the soft touch of "friendly" or "approachable" design. The site speaks in declarations, not suggestions. There is an undercurrent of theatrical defiance: the visual rhetoric of a manifesto printed on black card stock, folded into the pocket of a leather jacket. The mood oscillates between the calculated elegance of a fashion editorial and the raw charge of underground zine culture. Nothing is pastel. Nothing is round. Nothing is safe. The domain name "senggack" itself carries a percussive, staccato energy -- the design leans into that rhythm with sharp transitions, angular geometry, and abrupt visual breaks that mirror the syllabic punch of the name. ## Layout Motifs and Structure The site employs a **split-screen** layout as its foundational architecture -- the viewport is cleaved vertically into two asymmetric panels (roughly 55% left, 45% right) that operate as independent narrative tracks. The left panel serves as the "stage" -- carrying primary visual content, hero imagery composed of line illustrations overlaid on dark fields, and large-scale typography. The right panel functions as the "manifesto rail" -- dense editorial text, pull quotes rendered in Art Deco display type, and interactive border-animated elements. **Split Behavior:** - On initial load, the two panels are separated by a 2px animated border that pulses between #FF006E (hot magenta) and #00F5D4 (electric mint) using a `border-color` animation over 3 seconds with `ease-in-out` timing. - The panels scroll independently using `overflow-y: auto` on each half, creating a disorienting parallax-like effect without traditional parallax scripting. The left panel scrolls at the natural rate; the right panel auto-scrolls at 0.7x speed via a scroll event listener that applies `scrollTop` adjustments. - At three key narrative breakpoints (approximately 25%, 50%, 75% scroll depth on the left panel), the split collapses: the dividing border expands to fill the full viewport width as a horizontal band of animated neon, then recedes to reveal a full-bleed interstitial section -- a single full-width star-celestial illustration occupying the entire screen. - After each interstitial, the split re-forms with the panels swapping sides (left becomes right, right becomes left), achieved via CSS Grid `grid-template-columns` transition from `55fr 45fr` to `45fr 55fr` with a 0.8s `cubic-bezier(0.22, 1, 0.36, 1)` ease. **Section Architecture (7 zones):** 1. **Overture** -- Full-bleed hero, both panels unified momentarily with the site title in massive Art Deco display type, a single animated star constellation rotating slowly behind it. 2. **Split A** -- Left: line illustration of a figure in a dramatic pose, rendered in single-weight white strokes on black. Right: editorial manifesto text introducing the domain's purpose. 3. **Interstitial I** -- Full-width celestial map, constellations drawn with SVG `` and `` elements, border-animated with staggered stroke-dashoffset reveals. 4. **Split B (swapped)** -- Left: dense typographic content with pull quotes in gilded Art Deco frames. Right: large-scale line illustration of an architectural interior (arched doorways, geometric floor tiles) rendered in neon stroke colors. 5. **Interstitial II** -- Full-width animated border grid: a matrix of rectangles whose borders animate in sequence, creating a cascading neon wave across the screen. 6. **Split C** -- Left: scrolling gallery of star-motif badges/emblems, each border-animated on viewport entry. Right: closing editorial statement. 7. **Coda** -- Full-bleed black field with a single pulsing star at center, the domain name below it in display type, no other elements. **No traditional navigation.** The only way forward is scrolling. A subtle progress indicator -- a thin neon line along the left edge of the viewport -- grows from top to bottom as the user scrolls. ## Typography and Palette **Typography:** - **Display / Headlines:** "Poiret One" (Google Fonts) -- a geometric Art Deco display face with perfectly circular Os, sharp angular geometry, and delicate single-weight strokes that echo the line-illustration imagery. Used at 4rem-8rem for section titles with `letter-spacing: 0.12em` and `text-transform: uppercase`. The extreme letter-spacing transforms the type into a decorative element in its own right, evoking the signage of 1920s Parisian storefronts. - **Editorial Body:** "Libre Baskerville" (Google Fonts) -- a refined serif with generous x-height and crisp contrast between thick and thin strokes, providing the gravitas of traditional editorial typesetting. Used at 1.125rem-1.25rem, `line-height: 1.75`, weight 400 for body text and 700 for emphasis. The serif quality contrasts deliberately with Poiret One's geometric purity, creating productive visual friction. - **Accent / Labels / UI Elements:** "Share Tech Mono" (Google Fonts) -- a monospace face with a technical, utilitarian character. Used at 0.75rem-0.875rem for metadata labels, navigation hints, scroll indicators, and small captions. Weight 400 only. `letter-spacing: 0.08em`. The monospace grid rhythm against the fluid serif body creates a typographic tension that reinforces the edgy tone. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Primary | Void Black | #0A0A0F | Main background for both panels, all sections | | Background Secondary | Deep Indigo | #12101F | Subtle lift for cards, pull-quote containers, hover states | | Neon Accent 1 | Hot Magenta | #FF006E | Primary accent -- animated borders, headlines on dark, progress bar | | Neon Accent 2 | Electric Mint | #00F5D4 | Secondary accent -- link underlines, star illustration strokes, interactive states | | Neon Accent 3 | Ultraviolet | #7B2FBE | Tertiary accent -- gradient endpoints, shadow glows, interstitial backgrounds | | Text Primary | Silver Chalk | #E0DFE3 | Body text on dark backgrounds | | Text Secondary | Smoke Gray | #8A8892 | Captions, metadata, secondary labels | | Danger / Emphasis | Neon Red-Orange | #FF4040 | Sparingly used for critical emphasis, error states, single pull-quote highlights | The palette is strictly **dark-neon** -- no whites, no pastels, no warm tones. The background never rises above #12101F. All accent colors are fully saturated neons that read as self-luminous against the void. The color relationships are analogous within the neon range (magenta-violet-mint) with the red-orange serving as a complementary disruptor. ## Imagery and Motifs **Line Illustration System:** All imagery on the site is rendered as single-weight **line illustrations** -- no fills, no gradients within shapes, no photographic content. Every illustration uses a consistent 1.5px stroke width (scaled responsively) in either Silver Chalk (#E0DFE3) or one of the neon accent colors. The illustration style draws from 1920s fashion editorial line drawings (elongated figures, dramatic poses, angular drapery) crossed with astronomical chart engravings (precise celestial geometry, constellation notation). Specific illustration subjects: - A figure in a long coat, facing away, standing beneath a star-scattered sky -- rendered in white strokes on void black, occupying the left panel of Split A. - An Art Deco theater interior with arched proscenium, geometric floor tiling, and receding perspective lines -- rendered in Electric Mint strokes, right panel of Split B. - A series of celestial emblems: five-pointed stars enclosed in concentric circles, with radiating lines and orbital paths -- these serve as section dividers and decorative anchors. **Star-Celestial Motif System:** Stars are the dominant decorative motif, but they are rendered with geometric precision rather than whimsy: - **Navigation Stars:** Small 5-pointed stars (16px) in Hot Magenta, positioned at the left edge of the viewport at each section boundary. They pulse with a `scale` animation (1.0 to 1.3, 2s infinite `ease-in-out`) when the corresponding section is active. - **Constellation Maps:** SVG compositions of `` nodes (r=3px, filled with Electric Mint) connected by `` elements (stroke-width: 1px, stroke: Silver Chalk at 40% opacity). These maps span the full width during interstitial sections and animate via `stroke-dashoffset` from fully hidden to fully revealed over 2.5 seconds on scroll entry. - **Hero Star:** A large geometric star construction at the center of the Overture section -- built from overlapping rotated squares (SVG `` elements rotated 0deg, 22.5deg, 45deg, 67.5deg) with animated border strokes cycling through the three neon accents. **Border Animation Patterns:** Borders are not static decoration -- they are the primary animation vocabulary: - Section containers have 1px borders in Smoke Gray that, on scroll-triggered entry, animate to 2px in Hot Magenta via `border-color` and `border-width` transitions over 0.6s. - Pull-quote boxes use a "drawing" border animation: each side of the border draws on sequentially (top, right, bottom, left) using four separate `` elements with `scaleX`/`scaleY` transforms and staggered 0.15s delays. - The central dividing line between split panels uses a continuous gradient animation: `background: linear-gradient(180deg, #FF006E, #7B2FBE, #00F5D4)` with `background-size: 100% 300%` animated via `background-position` keyframes, creating a slowly cycling neon river between the two halves. **Decorative Geometry:** Art Deco geometric patterns are used sparingly but with high visual impact: - Chevron bands (three nested V-shapes) in Ultraviolet at 20% opacity, positioned as `::before` pseudo-elements on section headers. - Sunburst radiating lines (18 lines at 20-degree intervals emanating from a central point) behind the Hero Star, animated with a slow 30-second rotation. - Stepped zigzag patterns along the bottom edge of interstitial sections, built from CSS `clip-path: polygon()` shapes. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as an uninterrupted editorial scroll -- a visual manifesto that unfolds across the split-screen architecture. There is no navigation bar, no hamburger menu, no footer links. The only affordance is a thin neon progress line (2px wide, Hot Magenta, `position: fixed` on the left edge) that grows from `height: 0` to `height: 100vh` as the user scrolls. The scroll itself is the navigation, and each section transition should feel like turning a page in a provocative art book. **Border Animation as Primary Interaction:** The dominant interaction pattern is **border-animate**. Every interactive element communicates state through border behavior rather than background color changes or opacity shifts: - Hover on text links: a 1px underline in Electric Mint draws on from left to right via `scaleX(0)` to `scaleX(1)` with `transform-origin: left`. - Hover on star emblems: the border circle expands by 4px and shifts from Smoke Gray to Hot Magenta. - Section entry (via IntersectionObserver at 0.15 threshold): container borders animate from transparent to neon accent colors with a sequential draw-on effect. - The split-panel divider border cycles color continuously -- this never stops, providing a persistent sense of electrical energy. **Split-Screen Scroll Choreography:** Implement the dual-panel independent scroll using CSS Grid with two columns, each with `overflow-y: auto` and `height: 100vh`. The differential scroll speed (right panel at 0.7x) should be implemented via JavaScript: listen to the `scroll` event on the left panel and programmatically set `rightPanel.scrollTop = leftPanel.scrollTop * 0.7`. The interstitial collapse animations use CSS Grid `grid-template-columns` transitions -- when the interstitial trigger point is reached (detected via IntersectionObserver on sentinel elements), transition `grid-template-columns` from `55fr 45fr` to `1fr 0fr` over 0.6s, display the full-bleed interstitial, then transition to `45fr 55fr` (or back to `55fr 45fr` for the final split). **SVG Constellation Reveal:** Each constellation SVG should have all `` elements initially set with `stroke-dasharray` equal to their length and `stroke-dashoffset` equal to their length (fully hidden). On scroll entry, animate `stroke-dashoffset` to `0` with staggered delays (each line starts 0.1s after the previous) using CSS transitions. The `` node endpoints should fade in (`opacity: 0` to `1`) simultaneously with their connecting lines. **Art Deco Typography Animation:** Display headlines in the Overture and Interstitial sections should animate character-by-character: each letter wrapped in a `` with initial `opacity: 0; transform: translateY(20px)`, then staggered into view with 0.04s delay per character using CSS `transition-delay` calculated via inline styles or CSS custom properties (`--char-index`). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, team photo sections, feature comparison tables, cookie banners. This is not a product page. It is a visual experience. ## Uniqueness Notes **Differentiators from other designs:** 1. **True Split-Screen Architecture with Independent Scroll:** Only 1% of existing designs use split-screen layout. This design goes further by implementing genuinely independent scrolling panels with differential speed (0.7x ratio), panel swapping at narrative breakpoints, and animated collapse/expand transitions between split and full-bleed modes. No other design in the portfolio treats the viewport division as a dynamic, animated structural element that reorganizes itself throughout the scroll journey. 2. **Border Animation as Primary Visual Language:** While 97% of designs use scroll-triggered animations, only 2% use border-animate as the core interaction pattern. This design elevates border behavior from a decorative afterthought to the dominant animation vocabulary -- every state change, every section entry, every interactive moment communicates through border drawing, border color cycling, and border expansion. The continuously animated neon divider between panels is an element with no equivalent in other designs. 3. **Star-Celestial Motif as Structural Element:** Only 1% of designs use star-celestial motifs. Here, stars are not decorative sprinkles -- they are structural navigation markers (the pulsing edge stars), full-viewport interstitial content (SVG constellation maps with stroke-dashoffset reveal), and the central hero element (the rotating geometric star construction). The celestial vocabulary is integrated into every layer of the design rather than applied as surface decoration. 4. **Art Deco Display Typography in Dark-Neon Context:** The combination of Poiret One's geometric Art Deco letterforms with a strict dark-neon palette (only 2% frequency for dark-neon, 3% for art-deco-display) creates a visual fusion that exists nowhere else in the portfolio. The extreme letter-spacing (0.12em) and uppercase treatment transform the type into a luminous geometric pattern against the void-black background, recalling both 1920s Parisian signage and contemporary neon installations. 5. **Line-Illustration-Only Imagery Policy:** With only 2% of designs using line-illustration as their imagery approach, the strict prohibition on fills, gradients, and photography creates a radically unified visual surface. Every visual element shares the same 1.5px stroke weight, creating a coherent world where figures, architecture, constellations, and decorative geometry all belong to the same drawn universe. **Chosen Seed:** aesthetic: editorial, layout: split-screen, typography: art-deco-display, palette: dark-neon, patterns: border-animate, imagery: line-illustration, motifs: star-celestial, tone: edgy-rebellious **Avoided Overused Patterns:** playful aesthetic (96%), centered layout (99%), warm palette (100%), scroll-triggered as primary pattern (97%), mono typography (99%), friendly tone (99%), minimal imagery (95%), vintage motifs (88%). None of these appear as primary choices in this design.