# Design Language for xity.dev ## Aesthetics and Tone xity.dev channels the quiet, weathered beauty of a forgotten Japanese mountain village captured on expired Kodachrome film sometime in the late 1970s. The aesthetic is **wabi-sabi** in its truest sense: celebrating the cracked, the faded, the worn-through, the patinated. Imagine a developer's personal site designed as if it were a series of foxed postcards pinned to a rough-hewn cedar board in a rural post office -- each card bearing a different project, each one slightly yellowed, slightly curled at the edges, touched by time and use. The tone is **pastoral-romantic** -- not saccharine or nostalgic for nostalgia's sake, but genuinely reverential toward the slow, the imperfect, the handmade. This is a site that breathes the same air as a moss-covered stone wall, a hand-thrown ceramic cup with an uneven rim, or a field of wild barley bending under its own weight at dusk. The underlying message is that good code, like good craft, is patient work -- shaped by imperfection and made richer by the passage of time. There is no urgency here. No blinking cursors demanding attention. The site whispers rather than shouts, and its beauty comes from what has been worn away rather than what has been added. ## Layout Motifs and Structure The layout follows a **dashboard** paradigm reimagined through the lens of an old naturalist's specimen board or a darkroom contact sheet. The viewport is divided into an asymmetric grid of rectangular panels, each one slightly different in proportion, arranged with deliberate imprecision -- as if hand-placed on a cork board. No two panels share exactly the same width or height, and the gutters between them vary subtly (between 6px and 14px) to avoid mechanical regularity. **Structural Principles:** - **The Contact Sheet Grid:** The primary content area uses a CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` but with individual items spanning different column/row counts. Some panels are tall and narrow (1x2), others are wide and squat (2x1), and the occasional panel fills a full row (3x1 or 4x1). The effect is a contact sheet where each frame has been hand-cropped to different proportions. - **The Cedar Rail:** A thin vertical navigation strip (48px wide) sits fixed on the left edge of the viewport. It is styled as a weathered wooden post -- a single vertical stripe of warm cedar texture (`#8B7355` to `#6B5340` gradient with grain noise). Navigation items are small, faded glyphs (geometric shapes: circle, triangle, square, diamond) that brighten on hover. No text labels until hover reveals a tooltip. - **The Horizon Line:** A persistent horizontal rule at exactly 61.8% of viewport height (golden ratio) subtly divides the dashboard into "sky" (lighter panels above) and "earth" (darker panels below). This line is rendered as a 1px stroke in `#A69580` with 40% opacity -- barely perceptible but structurally grounding. - **Breathing Margins:** The outer margins of the grid are generous (clamp(24px, 5vw, 80px)) and slightly unequal: the left margin (after the cedar rail) is 1.1x the right margin. The top margin is 1.2x the bottom margin. This asymmetry prevents the layout from feeling boxy or digital. - **Panel Interiors:** Each panel has rounded corners (3px -- barely perceptible, like the worn edges of old photographs) and a subtle inset shadow (`box-shadow: inset 0 1px 3px rgba(0,0,0,0.08)`) that gives the impression of being pressed into a surface rather than floating above it. ## Typography and Palette **Typography:** - **Headlines / Panel Titles:** "Space Grotesk" (Google Fonts) -- a geometric sans-serif with a distinctly modern skeleton but enough quirk in its letterforms (the asymmetric 'a', the squared 'G') to feel handmade at larger sizes. Used at 1.8rem-3.5rem for dashboard panel headers and section titles. Weight: 500 (Medium) for primary headings, 300 (Light) for secondary. Letter-spacing: 0.04em to give an airy, spaced-out quality that evokes hand-stamped lettering on vintage photographic prints. - **Body / Descriptions:** "DM Sans" (Google Fonts) -- a clean, humanist grotesk with open apertures and a warm, approachable rhythm. Used at 0.95rem-1.1rem for body text within panels, project descriptions, and metadata. Weight: 400 (Regular) for body, 500 (Medium) for emphasis. Line-height: 1.65 for generous, unhurried reading. - **Metadata / Labels:** "Space Grotesk" at 0.75rem, weight 400, with `letter-spacing: 0.08em` and `text-transform: uppercase`. Used for dates, tags, categories, and navigational labels. Rendered in `#A69580` (Weathered Stone) for a faded, archival quality. - **Monospace Accents (sparingly):** "IBM Plex Mono" (Google Fonts) at 0.85rem for code snippets or technical labels only. Weight: 400. Not used for general content -- reserved for moments where the "developer" identity needs to surface through the pastoral veil. **Palette:** The palette is **high-contrast** but achieved through value extremes of natural tones rather than chromatic saturation. Think of a black-and-white photograph hand-tinted with watercolors. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (primary) | Rice Paper | `#F5F0E8` | Main page background, sky-zone panels | | Background (deep) | Charcoal Earth | `#1A1714` | Earth-zone panels, footer, nav rail bg | | Text (primary on light) | Soot | `#1C1917` | Headlines and body on light panels | | Text (primary on dark) | Bone | `#EDE8DF` | Headlines and body on dark panels | | Accent (warm) | Persimmon | `#C2501A` | Active states, key links, geometric motif fills | | Accent (cool) | Moss | `#4A6741` | Secondary accents, tags, code highlights | | Neutral (mid) | Weathered Stone | `#A69580` | Borders, metadata text, dividers, timestamps | | Highlight | Aged Gold | `#B8943F` | Hover states, focus rings, selected panel borders | The contrast ratio between Soot (`#1C1917`) and Rice Paper (`#F5F0E8`) is approximately 14.8:1 -- well beyond accessibility minimums and producing a stark, photographic quality. The contrast between Bone (`#EDE8DF`) and Charcoal Earth (`#1A1714`) is approximately 12.5:1. ## Imagery and Motifs **Vintage Photography Treatment:** All imagery follows a **vintage-photography** treatment inspired by expired film stocks and antique darkroom processes. In CSS, this is achieved through a layered filter chain applied to all `` elements: 1. `filter: sepia(0.15) contrast(1.15) saturate(0.7) brightness(0.95)` -- subtle desaturation with lifted contrast, mimicking Tri-X film pushed one stop 2. A `::after` pseudo-element overlay with `background: radial-gradient(ellipse at center, transparent 50%, rgba(26,23,20,0.3) 100%)` to produce natural vignetting (darkened corners characteristic of vintage lenses) 3. A second `::before` pseudo-element with a noise texture (tiny CSS repeating gradient pattern) at 3% opacity to simulate film grain Photographs, when used, depict: weathered surfaces (cracked plaster, lichen-covered stone, rusted metal), natural landscapes (misty valleys, overgrown paths, bare winter trees), and artisan processes (hands shaping clay, a loom in motion, brush on paper). No people's faces. No screens. No modern technology visible. **Geometric Shape Motifs:** The primary decorative system uses **geometric shapes** -- specifically circles, triangles, and squares -- as a recurring visual language. These shapes appear in three modes: 1. **Panel Markers:** Each dashboard panel has a tiny geometric glyph (12px) in its top-left corner, rendered in `#A69580` at 50% opacity. The shape categorizes content: circles for writing, triangles for code projects, squares for resources/tools. These markers are purely decorative classification icons. 2. **Background Pattern:** A subtle, repeating pattern of geometric shapes (circles of varying sizes from 4px to 20px diameter, interspersed with small triangles and squares) is tiled across the page background at 2-3% opacity in `#A69580`. The pattern uses CSS `background-image` with multiple `radial-gradient` layers to create a hand-scattered effect -- shapes are not perfectly aligned to a grid but placed with calculated pseudo-randomness using offset percentages. 3. **Transitional Ornaments:** Between major content sections, a horizontal row of three geometric shapes (triangle, circle, square) serves as a section divider, each shape 8px, spaced 16px apart, centered, rendered in `#B8943F` (Aged Gold) at 60% opacity. This replaces the standard horizontal rule. **Texture Layers:** The Rice Paper background is not flat white. It carries: - A subtle paper-fiber noise texture (CSS repeating-conic-gradient trick) at 1.5% opacity - A very faint warm-to-cool gradient from top-left (`#F5F0E8`) to bottom-right (`#F0EBE0`), creating a sense of light falling across a physical surface ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport panel of Rice Paper (`#F5F0E8`). After a 300ms pause, a single geometric circle (40px diameter, 1px stroke in Weathered Stone `#A69580`, no fill) fades in at the center of the viewport over 600ms. This circle then slowly contracts (over 800ms, ease-out) while a triangle and square materialize on either side, each 24px, fading in with a 200ms stagger. Once all three shapes are visible, they drift upward together (400ms, ease-in-out) to settle at 20% viewport height, and the dashboard grid begins to populate below them. **Bounce-Enter Panel Animation:** Dashboard panels enter the viewport with a **bounce-enter** animation as they scroll into view. Each panel translates from `translateY(30px)` and `opacity: 0` to its final position with a CSS animation using `cubic-bezier(0.34, 1.56, 0.64, 1)` timing -- this produces a slight overshoot (the panel rises 4-6px past its final position, then settles back). Duration: 500ms per panel, with a 60ms stagger between adjacent panels in the same row. The stagger creates a ripple-like wave across the grid as the user scrolls. **Hover Interactions on Panels:** When a panel is hovered, it undergoes a slow, gentle transformation (transition: 400ms ease): - `box-shadow` deepens from the default inset to `inset 0 2px 6px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)` -- the panel lifts slightly while also deepening its inset - The panel's border gains a 1px stroke of `#B8943F` (Aged Gold) at 40% opacity - The geometric marker glyph in the top-left brightens from 50% to 100% opacity and shifts color to Persimmon (`#C2501A`) - All transitions use `ease` timing to feel organic, not mechanical **The Cedar Rail Navigation:** Navigation items on the left rail are small geometric icons (16px). On hover, the icon scales to 1.2x and a tooltip slides out rightward (120ms, ease-out) showing the section name in Space Grotesk 0.75rem uppercase. The tooltip background is Charcoal Earth (`#1A1714`) with Bone (`#EDE8DF`) text. Active state: the icon fills with Persimmon (`#C2501A`). **Scroll Behavior:** Smooth scroll with `scroll-behavior: smooth`. No snap points -- the dashboard should feel like a continuous landscape being explored, not a slideshow. As the user scrolls past the 61.8% horizon line, the background subtly shifts (over 200vh of scroll distance) from Rice Paper to a slightly cooler tone (`#F0EBE3`), then to Charcoal Earth (`#1A1714`) as they enter the "earth zone" of the lower dashboard. This transition uses `IntersectionObserver` on sentinel elements placed at transition boundaries. **Image Reveal:** Images within panels begin as completely desaturated (grayscale) and slightly blurred (`filter: grayscale(1) blur(2px)`). When the panel enters the viewport (IntersectionObserver, threshold 0.3), the image transitions over 1200ms to its full vintage-photography treatment. This slow reveal mimics a photograph developing in darkroom chemistry. **AVOID:** CTA buttons, pricing tables, stat-grids, testimonial carousels, newsletter signup forms. No floating action buttons. No hamburger menus. No parallax scrolling (use simple vertical scroll only). No scroll-triggered text animations (text should be immediately readable, not animated in letter-by-letter). ## Uniqueness Notes **Differentiators from other designs:** 1. **Wabi-Sabi Dashboard Hybrid:** No other design in the portfolio combines the wabi-sabi aesthetic of deliberate imperfection with a dashboard layout structure. Dashboards are typically associated with clean, data-driven, corporate interfaces. Here, the dashboard grid is recontextualized as a naturalist's specimen board or a darkroom contact sheet -- each panel a weathered artifact rather than a data widget. The intentional asymmetry in gutter widths (6-14px variance) and panel proportions actively subverts dashboard conventions. 2. **Vintage Photography as Primary Visual Language:** While 72% of existing designs use photography and 95% use minimal imagery, only 1% use vintage-photography as the core imagery approach. The specific expired-film treatment chain (sepia + contrast + desaturation + vignette + grain) applied uniformly across all images creates a cohesive darkroom aesthetic found nowhere else in the collection. The image-reveal effect (grayscale-to-vintage developing transition) further differentiates. 3. **Geometric Shape Classification System:** The use of circles, triangles, and squares as both decorative motifs and a functional content-classification system (writing/code/tools) is unique. Other designs with geometric-shapes motifs (4%) use them purely decoratively. Here, the shapes carry semantic meaning while also functioning as the primary ornamental vocabulary -- replacing conventional icons, bullets, and dividers throughout the interface. 4. **Golden Ratio Horizon Line:** The persistent horizontal division at 61.8% viewport height, creating distinct "sky" and "earth" zones with different background treatments, is an architectural concept not present in other designs. This transforms vertical scrolling into a journey through strata -- from light to dark, from aerial to grounded -- rather than a uniform descent through identical sections. 5. **Cedar Rail Navigation:** The fixed vertical navigation strip styled as a weathered wooden post with geometric glyph icons is a departure from both conventional sidebars and hamburger menus. The 48px width is deliberately narrow -- more of a margin annotation than a navigation panel -- and the texture treatment (wood grain gradient) reinforces the physical-object metaphor. **Seed:** aesthetic: wabi-sabi, layout: dashboard, typography: sans-grotesk, palette: high-contrast, patterns: bounce-enter, imagery: vintage-photography, motifs: geometric-shapes, tone: pastoral-romantic **Avoided overused patterns:** playful aesthetic (95%), minimal imagery (95%), centered layout (99%), scroll-triggered patterns (97%), friendly tone (99%), mono typography (99%), vintage motifs (89%), warm palette (100%), parallax patterns (72%), stagger patterns (60%)