# Design Language for desca.works ## Aesthetics and Tone desca.works adopts a glitch aesthetic -- the creative beauty found in digital errors, broken signals, and visual corruption. The ".works" suffix is a confident declaration ("it works!") that contrasts deliciously with the glitch theme of things breaking. Imagine a repair shop where broken screens are displayed as art, their corrupted pixels forming unexpected beauty -- a celebration of failure as a creative force. The visual language draws from Rosa Menkman's glitch manifesto, the datamoshing techniques of Takeshi Murata, and the RGB-split photography of Sterling Crispin. The palette is navy-metallic, grounding the chaotic glitch effects in a sophisticated, dark base. The tone is energetic, buzzing with the live-wire intensity of circuits on the edge of failure. Glassmorphic cards (frosted glass panels) contain content as if protecting it from the glitch effects raging around them -- order within chaos. ## Layout Motifs and Structure The layout uses a **minimal-navigation** structure with almost no visible navigation, allowing the glitch visual effects to dominate. A single small "status indicator" dot in the top-right corner is the only persistent UI element. **Primary structure:** - **Signal acquisition (100vh):** A dark navy background with aggressive glitch effects -- the title "desca.works" rendered with RGB channel separation (3 offset text-shadows), horizontal displacement bands (thin rectangles of shifted content), and a brief "signal loss" flash on load. Behind the text, glassmorphic card fragments float at various sizes and rotations. - **Work samples grid (variable, ~300vh):** Content is presented in glassmorphic cards (backdrop-filter: blur(16px), navy-tinted glass) arranged in a loose, slightly off-grid layout. Each card contains a "work" item with title, description, and a visual element. The cards are intentionally not perfectly aligned -- some are rotated 1-2deg, others offset from the implicit grid by 4-8px, creating controlled disorder. - **Candle-atmospheric interlude (100vh):** A contrast section where the glitch effects subside. A warm, candle-like glow (amber radial-gradient, centered, large radius) illuminates the center of the viewport against the dark navy. Content here is calm, readable, centered -- the eye of the storm. A single "candle" element (a small CSS-drawn flame shape using border-radius and gradients) flickers via CSS animation. - **Cascade failure section (80vh):** The glitch effects intensify. Content appears in increasingly corrupted states -- text has larger RGB splits, glassmorphic cards have more aggressive rotations (3-5deg), and horizontal displacement bands are wider and more frequent. This escalation builds visual tension. - **Signal restored footer (40vh):** The glitching suddenly stops. Clean, crisp text on a solid navy background. "desca.works" -- a statement. Everything is resolved. **Spacing philosophy:** Intentionally inconsistent. Cards have varying gaps (16-48px) between them. Some cards overlap by 8-16px. The inconsistency is itself a design choice, reinforcing the glitch theme of broken alignment. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Space Grotesk" (Google Fonts) -- a geometric proportional sans with a modern, technical character that reads cleanly even through glitch effects. Weight 700. Size clamp(32px, 5vw, 72px). Letter-spacing: -0.02em. The clean geometry provides necessary legibility contrast against the chaotic visuals. - **Body text:** "Inter" (Google Fonts) -- optimized for screen readability, crucial when text may be partially obscured by glitch effects. Weight 400 for body, 600 for emphasis. Size clamp(15px, 1.05vw, 17px). Line-height: 1.7. - **Glitch labels:** "Fira Code" (Google Fonts) -- monospaced, used for "error messages," status codes, and technical annotations scattered through the glitch sections. Weight 400, size 12px. **Palette:** - **Deep Navy** `#0A1628` -- primary dark background - **Steel Surface** `#C8D0E0` -- primary text on dark backgrounds - **Glitch Cyan** `#00E5FF` -- RGB-split channel 1, also accent for links - **Glitch Magenta** `#FF0080` -- RGB-split channel 2 - **Candle Amber** `#FFB830` -- warm accent for the interlude section and emphasis - **Glass Tint** `#1A2840` -- glassmorphic card background tint (navy at 80% opacity with blur) ## Imagery and Motifs **Core visual motifs:** - **Glassmorphic content cards:** Every content container is a frosted glass panel (background: rgba(26,40,64,0.6), backdrop-filter: blur(16px) saturate(1.3), border: 1px solid rgba(200,208,224,0.1), border-radius: 12px). These glass panels protect content from the surrounding glitch chaos, creating readable islands. - **RGB channel separation:** The signature glitch effect on text. Headlines have three text-shadow layers (Glitch Cyan at -3px 0, Glitch Magenta at 3px 0, and a slight yellow-shift at 0 2px). On scroll-trigger or hover, the offsets increase to 6-8px before snapping back. - **Horizontal displacement bands:** Thin horizontal strips (2-4px height, full-width) that shift a portion of the rendered content horizontally by 10-30px. Achieved with a pseudo-element containing a duplicate of the section background, clipped to the band height and translated. These bands appear at random Y positions and flash briefly (200ms) on scroll events. - **Candle-atmospheric flame:** A CSS-drawn candle flame using overlapping circles with animated opacity and scale. The outer glow is a radial-gradient in Candle Amber at 8% opacity, radius 200px. The flame shape itself uses border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% with a subtle scale animation (0.95-1.05, 2s cycle). - **Bounce-enter card reveals:** Glassmorphic cards enter the viewport with a bounce animation (cubic-bezier(0.34, 1.56, 0.64, 1), translateY from 20px to 0, opacity from 0 to 1). This bounce gives each card a "popping into existence" quality that contrasts with the surrounding glitch dissolution. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like watching a digital signal being received, corrupted, momentarily restored (the candle interlude), further corrupted (cascade failure), and finally cleanly resolved. The narrative arc follows signal integrity. **Opening animation sequence:** - Frame 0-100ms: Deep Navy background. - Frame 100-300ms: A full-viewport "signal loss" flash -- the screen briefly flashes white (opacity 0 to 0.8 to 0, 200ms) simulating a signal burst. - Frame 300-800ms: "desca" appears with aggressive RGB split (offsets starting at 12px, settling to 3px over 500ms). Horizontal displacement bands flash across the text. - Frame 800-1200ms: ".works" appears below with the same RGB-split settling animation but 200ms delayed. - Frame 1200-1800ms: Glassmorphic card fragments (decorative, no content) materialize around the title with bounce-enter animations, each at a slight rotation. - Frame 1800-2400ms: The glitch effects settle to their ambient level. The status indicator dot in the top-right appears with a pulse (Glitch Cyan, 6px circle). **Scroll behavior:** Work sample cards bounce into view (IntersectionObserver at 20% threshold). The candle-atmospheric section's warm glow intensifies as the user scrolls deeper into it (radial-gradient radius expanding via scroll-linked CSS variable). The cascade failure section triggers increasingly aggressive glitch effects -- RGB split offsets double, displacement bands become more frequent, and card rotations increase. **Interaction details:** - Glassmorphic cards elevate on hover (translateY(-4px), box-shadow deepens, backdrop-blur increases to 20px). - RGB-split text intensifies on hover (offsets double temporarily). - The candle flame responds to no interaction -- it is a passive sanctuary. - The status indicator dot changes color based on section (Cyan for normal, Amber for interlude, Magenta for cascade failure). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Signal-integrity narrative arc:** The site follows the life of a digital signal -- acquired, corrupted, restored, further corrupted, resolved. This narrative framework for visual effects gives the glitch aesthetic meaning beyond decoration. 2. **Candle-atmospheric sanctuary amid glitch chaos:** The warm interlude section where glitch effects subside and a CSS candle flame provides calm is a dramatic contrast device. The juxtaposition of digital corruption and analog warmth is emotionally affecting and unique. 3. **Glassmorphic cards as protective containers:** Using frosted-glass panels not just decoratively but as narrative devices (they "protect" content from surrounding glitch effects) gives the glassmorphism a functional metaphor unique to this design. 4. **Escalating cascade failure section:** The deliberate intensification of glitch effects through the cascade section -- where each scrolled element is more corrupted than the last -- creates building tension that is resolved in the clean footer. This designed escalation is structurally unique. **Chosen seed/style:** aesthetic: glitch, layout: minimal-navigation, typography: playful-rounded, palette: navy-metallic, patterns: bounce-enter, imagery: glassmorphic-cards, motifs: candle-atmospheric, tone: energetic **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used candle-atmospheric (1%) motifs and glassmorphic-cards (2%) imagery -- both heavily underused.