# Design Language for xity.one ## Aesthetics and Tone xity.one exists in the space between a corrupted sunset broadcast and a meditation app that has started dreaming. The aesthetic is **glitch** -- but not the aggressive, anxiety-inducing digital destruction of cyberpunk; this is glitch as erosion, as the gentle dissolution of signal into warmth. Imagine a VHS tape of a Hawaiian sunset left on pause for thirty years, the magnetic oxide slowly degrading, horizontal scan lines drifting through molten oranges and deep magentas, the image wavering but never quite disappearing. The tone is **calm-serene** -- the paradox of finding peace inside digital entropy. Where most glitch design screams disruption, xity.one whispers dissolution. Every visual artifact feels like a natural weathering process, the way rust blooms on iron or lichen spreads across stone, except here the substrate is light and pixel data. The mood draws from the contemplative stillness of watching a sunset through a rain-streaked window while a cathode-ray monitor flickers in peripheral vision. There is warmth everywhere -- amber, coral, deep saffron -- but it arrives through layers of soft static and chromatic displacement. The experience should feel like sinking into a warm bath of corrupted signal, where every glitch artifact is a kind of visual ASMR. ## Layout Motifs and Structure The layout follows an **f-pattern** reading architecture, acknowledging the natural eye-scanning behavior of Western readers but subverting it through glitch-disrupted visual weight. Content loads along the F-shape -- a strong horizontal bar across the top third, a secondary horizontal sweep at the mid-section, and a vertical scan down the left edge -- but each horizontal sweep is punctuated by glitch-displacement zones where content fragments shift 8-24px off their expected grid position. **Structural Grid:** - **Primary container:** 1200px max-width, but the container itself has a subtle CSS `transform: skewX(-0.3deg)` that creates an almost imperceptible tilt, as if the entire page is a broadcast signal slightly off-frequency. - **Top horizontal band (F-bar 1):** Occupies the first 40vh. Contains the domain identity and primary narrative text. This band uses a three-column micro-grid (2fr 5fr 3fr) where the center column holds the main content and the flanking columns contain decorative glitch artifacts -- thin vertical strips of displaced color that shift position on scroll. - **Mid-section horizontal band (F-bar 2):** At approximately 60vh from top, a second strong horizontal element spans 80% of the viewport width. This contains secondary narrative content arranged in two unequal columns (3fr 2fr). The division between columns is not a clean line but a ragged, glitch-torn edge rendered as an SVG mask with randomized vertical displacement. - **Left-edge vertical scan:** A persistent 60px-wide strip along the left viewport edge contains a scrolling stream of decorative metadata -- timestamps, hex color values, coordinate pairs -- rendered in monospace at 9px, 20% opacity, scrolling upward at 0.5px/second via CSS animation. This creates the feeling of a data stream running beneath the surface of the page. - **Section separators:** Instead of horizontal rules or whitespace gaps, sections are divided by full-width glitch-bands: 4-8px tall strips where the background color shifts through rapid CSS animation (3 keyframes over 0.15s), creating a brief visual stutter that functions as punctuation. **Scrolling Behavior:** The page scrolls vertically in a single continuous flow, but every 100vh of scroll triggers a subtle full-page chromatic aberration pulse -- the entire viewport shifts 2px red-channel-left, 2px cyan-channel-right for 200ms, then settles back. This is achieved via layered pseudo-elements with `mix-blend-mode: screen` and offset positions animated on scroll events. ## Typography and Palette **Typography:** - **Display / Headlines:** "Anybody" (Google Fonts) -- a variable-width grotesque that ranges from ultra-condensed to ultra-expanded. Used at weight 800, width 125% (slightly expanded), at 3.2rem-5.5rem for primary headings. The expanded width gives headlines a broadcast-title quality, like text crawling across a news ticker. Letter-spacing: -0.02em (tight, compressed energy). Line-height: 0.95 (headlines should feel dense and blocky). Applied with a CSS `text-shadow` that offsets a coral-tinted duplicate 2px right and 1px down at 40% opacity, creating a persistent chromatic-aberration echo on all display text. - **Body / Narrative:** "Libre Baskerville" (Google Fonts) -- a traditional serif that provides stark contrast against the grotesque headlines, creating the eclectic-hybrid tension. Used at 400 weight, 1.05rem, line-height 1.75 for generous readability. The serif's classical elegance deliberately clashes with the glitch aesthetic, as if a literary journal is being transmitted through a malfunctioning satellite uplink. Color: #3D1C00 (deep burnt umber) against warm backgrounds, or #F5E6D3 (warm parchment) against dark sections. - **Monospace / Data Layer:** "Inconsolata" (Google Fonts) -- used exclusively for the decorative left-edge data stream and any technical annotations. Weight 300, 0.7rem-0.85rem. Color: current section's accent color at 30% opacity. Letter-spacing: +0.05em. - **Accent / Labels:** "Anybody" again but at weight 400, width 75% (condensed), 0.8rem, uppercase, letter-spacing +0.12em. Used for section labels, navigation elements, and metadata tags. This condensed variant of the same family as the headlines creates visual kinship without repetition. **Palette -- Sunset Warm:** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Background | Deep Saffron Dusk | #1A0A04 | Near-black with a warm reddish-brown undertone, like the sky five minutes after the sun drops below the horizon | | Secondary Background | Ember Glow | #2D1108 | Dark burgundy-brown, the color of cooling volcanic rock at twilight | | Primary Accent | Living Coral | #E8725A | Vibrant warm coral, the most intense color in the palette, used for interactive elements and glitch highlight artifacts | | Secondary Accent | Molten Amber | #D4943A | Rich golden amber, the color of late-afternoon sunlight filtered through whiskey | | Tertiary Accent | Dusk Magenta | #B34D72 | A muted magenta-rose, the pink that appears in clouds during the last moments of sunset | | Text Primary | Warm Parchment | #F5E6D3 | Off-white with a warm yellow undertone, never pure white (pure white would be too cold, too digital) | | Text Secondary | Faded Terracotta | #A67B5B | Muted terracotta for secondary text, captions, metadata | | Glitch Channel | Cyan Displacement | #5AD4E8 | The single cool color in the palette -- used only for chromatic aberration offsets and glitch artifacts, never for content. Its coolness against the warm palette creates the visual tension that makes glitch effects register as disruption rather than decoration | **Color Application Rules:** - Backgrounds transition between Deep Saffron Dusk and Ember Glow via soft gradients (never hard edges between background colors). - The Cyan Displacement color appears only in glitch artifacts -- chromatic aberration shadows, scan-line overlays, displacement channel offsets. It should never be used for text, buttons, or intentional UI elements. Its presence should always feel accidental, like signal bleed from an adjacent frequency. - Living Coral is the action color -- links, hover states, the active glitch-band separators. - The overall impression should be overwhelming warmth punctuated by unexpected flashes of cool cyan, like seeing a blue spark inside a fire. ## Imagery and Motifs **Bokeh Background System:** The primary imagery mode is **bokeh-background** -- soft, out-of-focus circles of light that drift across the background layer like the defocused lights of a distant city seen through a rain-covered lens. These bokeh elements are constructed entirely in CSS and SVG: 1. **Bokeh Orbs:** 15-25 circular `
` elements with `border-radius: 50%`, sizes ranging from 40px to 200px, positioned absolutely across the viewport. Each orb has a radial gradient from one palette accent color (Living Coral, Molten Amber, or Dusk Magenta) at center to transparent at edges. Opacity ranges from 0.08 to 0.25. They drift slowly via CSS `@keyframes` animation -- each orb follows a unique elliptical path (using combined `translateX` and `translateY` with different durations: X-axis 25-40s, Y-axis 30-50s), creating a gentle, non-repeating field of warm floating lights. 2. **Scan Line Overlay:** A repeating CSS background-image of 1px transparent / 1px rgba(0,0,0,0.03) horizontal lines covers the entire viewport, creating a subtle CRT-monitor texture. This layer sits above the bokeh but below the content, at `pointer-events: none`. On hover over any content section, the scan-line opacity increases to 0.06 over 300ms, as if the display is responding to interaction. 3. **Glitch Displacement Artifacts:** At pseudo-random vertical positions (every 300-500px, offset by a CSS custom property seeded from the section index), thin horizontal strips (2-6px tall, 30-70% viewport width) appear with a `background-color` of Cyan Displacement at 15% opacity. These strips are offset 4-12px to the right of center, as if a horizontal slice of the page has been displaced by transmission error. They are static (not animated) -- their stillness contrasts with the drifting bokeh, suggesting a frozen moment of corruption. **Abstract-Tech Motifs:** 4. **Data Grid Watermark:** Behind the primary content layer, a faint grid of thin lines (0.5px, Warm Parchment at 4% opacity) creates a subtle graph-paper texture. At certain intersections (every 5th node), small plus-sign markers (+) appear at 8% opacity, suggesting coordinate reference points on a technical drawing. This grid is fixed-position and does not scroll with content, creating a parallax-like depth separation. 5. **Signal Waveform Decorations:** Between major sections, subtle SVG waveforms -- sine waves with increasing noise amplitude -- stretch horizontally across 60-80% of the viewport. These waveforms are rendered as thin strokes (1px) in Molten Amber at 20% opacity. The waveform begins clean on the left and progressively degrades toward the right, accumulating noise and distortion, visualizing the concept of signal entropy that is the site's conceptual core. Each section's waveform has a different base frequency and degradation rate, so no two are identical. 6. **Corner Registration Marks:** In each viewport-corner, faint L-shaped registration marks (the kind used in print production for alignment) appear at 10% opacity in Faded Terracotta. These are fixed-position and persist through scroll, framing the entire experience as a broadcast or print artifact -- something captured and transmitted rather than natively digital. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport screen of Deep Saffron Dusk (#1A0A04). The bokeh orbs are already drifting in their slow elliptical paths, casting warm out-of-focus light across the darkness. After a 0.8-second pause, the domain name "xity.one" appears in Anybody at weight 800, width 125%, 5rem, centered in the upper third of the viewport. But it does not simply fade in -- it assembles through a glitch-resolve animation: the text initially appears as three offset copies (one in Living Coral shifted 6px right, one in Cyan Displacement shifted 6px left, one in Warm Parchment at the correct position but 0% opacity). Over 1.2 seconds, the colored copies converge toward center while the white copy fades to 100% opacity, simulating a CRT convergence alignment. The final state shows the domain name in Warm Parchment with a faint 2px coral shadow and 2px cyan shadow persisting at 15% opacity. Below the domain name, body text in Libre Baskerville fades in over 0.6 seconds (delayed 1.5s from page load): a single evocative sentence that establishes the site's identity. No navigation, no menu, no call-to-action. Just the name, the sentence, and the warm darkness. **Scroll-Driven Glitch Intensity:** As the user scrolls, the glitch effects intensify gradually. In the first viewport (0-100vh), glitch artifacts are minimal -- just the faint scan lines and the static displacement strips. By the second viewport (100-200vh), the chromatic aberration pulse begins triggering on scroll. By the third viewport (200-300vh), the glitch-band section separators appear with their rapid-flicker animation. By the fourth viewport and beyond, occasional full-width glitch-tears (50-100ms bursts where a 20-40px horizontal strip of the page shifts 15px left and displays at 80% opacity with a cyan-tinted overlay) punctuate the scroll experience. This progressive intensification creates a narrative arc: the signal degrades as you go deeper, the sunset dissolving further into entropy. **Hover and Interaction States:** - Links: Libre Baskerville text in Living Coral. On hover, the text gains a 2px Cyan Displacement underline that flickers (opacity oscillates between 0.4 and 0.8 via a 0.1s CSS animation) for 0.3 seconds before stabilizing at 0.6 opacity. The flicker simulates a connection being established through noise. - Section headings: On scroll into view, Anybody headlines perform a micro-glitch -- shifting 3px right then back over 150ms, with a brief cyan shadow flash. This is a scroll-triggered animation firing once per element via Intersection Observer. - Bokeh orbs: On pointer movement, the nearest 3 bokeh orbs shift 5-15px away from the cursor over 0.8s (CSS transition on transform), as if the cursor is a gravity well gently displacing the light field. This interaction should be throttled to 60fps and feel weightless, not reactive. **Content Sections as Signal Blocks:** Each content section is wrapped in a container with a left border of 2px Living Coral that flickers to Cyan Displacement every 8-12 seconds (randomized per section via CSS animation-delay). The sections have padding-left of 2rem from this border, creating an indentation that reinforces the f-pattern left-edge scan. Section labels appear above each block in Anybody condensed, uppercase, letterspaced, in Faded Terracotta -- formatted like broadcast metadata ("SIGNAL.01 // ORIGIN", "SIGNAL.02 // TRANSMISSION"). **Technical Animation Notes:** - All animations use `will-change: transform, opacity` for GPU compositing. - Glitch effects that involve color-channel separation use layered pseudo-elements (`::before`, `::after`) with `mix-blend-mode: screen` for additive color mixing rather than actual pixel manipulation. - The chromatic aberration on scroll is achieved by wrapping content sections in a container with `::before` (coral-tinted, shifted right) and `::after` (cyan-tinted, shifted left) pseudo-elements that are normally at opacity 0 and briefly animate to opacity 0.15 on scroll triggers. - Bokeh orbs should use `backdrop-filter: blur(0px)` (no actual blur) but `filter: blur(20-40px)` on the orbs themselves, creating the out-of-focus effect without impacting content readability. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hero images with stock photography, hamburger menus with slide-out panels. This is a narrative experience, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Calm Glitch Paradox:** The combination of glitch aesthetic with calm-serene tone is a deliberate contradiction that no other design in the portfolio attempts. Glitch at 12% frequency is always paired with aggressive, high-energy tones elsewhere. By inverting the emotional register -- making digital corruption feel meditative rather than anarchic -- xity.one occupies a unique emotional space: the tranquility of entropy, the beauty of signal decay. 2. **Sunset-Warm Palette with Cyan-Only Cool Accent (1% frequency palette):** The sunset-warm palette appears in only 1% of existing designs. More distinctively, the single cool color (Cyan Displacement #5AD4E8) is used exclusively for glitch artifacts and never for intentional UI elements, creating a strict color-discipline where warmth = signal and cool = noise. This chromatic storytelling -- where color temperature itself encodes the narrative of degradation -- is unique in the portfolio. 3. **F-Pattern Layout with Glitch Displacement (2% frequency layout):** F-pattern layouts appear in only 2% of designs and are typically associated with conventional content sites. Here, the f-pattern's natural reading flow is disrupted by glitch displacement zones that shift content fragments off-grid, creating tension between the brain's expected scan path and the visual reality. The left-edge data stream (scrolling monospace metadata) reinforces the vertical stroke of the F while functioning as a decorative ambient element rather than navigation. 4. **Progressive Glitch Intensity as Scroll Narrative:** Rather than applying glitch effects uniformly, the site treats scroll depth as a narrative dimension -- glitch artifacts intensify progressively as the user scrolls deeper, telling the story of a signal degrading over time. This scroll-driven storytelling approach transforms a visual style into a temporal experience. 5. **Bokeh-Background as Warm Light Field (3% frequency imagery):** Bokeh backgrounds at 3% frequency are typically cold and tech-oriented. Here, the bokeh orbs are rendered exclusively in sunset-warm palette colors (coral, amber, magenta), creating a field of warm floating light that feels organic and atmospheric rather than technological. The cursor-displacement interaction (orbs drifting away from the pointer) adds a sense of living, responsive space. **Assigned Seed:** aesthetic: glitch, layout: f-pattern, typography: eclectic-hybrid, palette: sunset-warm, patterns: glitch, imagery: bokeh-background, motifs: abstract-tech, tone: calm-serene **Avoided Overused Patterns:** centered layout (99%), mono typography (99%), warm palette as generic (100%), scroll-triggered as sole animation pattern (97%), minimal imagery (95%), vintage motifs (89%), friendly tone (99%), playful aesthetic (95%). Every seed category in this design uses patterns below 12% frequency, ensuring maximum distinctiveness.