# Design Language for paragram.dev ## Aesthetics and Tone paragram.dev draws its visual identity from the liminal quiet of a Kyoto rock garden viewed through morning fog -- a place where each element is deliberately placed yet seems to have emerged from millennia of patient erosion. The aesthetic is **zen** interpreted not as the Western cliche of empty white space with a bamboo accent, but as the genuine Japanese concept of *ma* -- the charged emptiness between things that gives those things their meaning. Every pixel of negative space on this page is as intentional as every pixel of content. The domain name itself -- *paragram* -- evokes the idea of a parallel grammar, an alternative syntax, a way of reading that runs alongside the conventional. This site should feel like discovering an ancient manuscript that has been typeset by a future civilization: serene, unhurried, profoundly considered, yet vibrating with quiet intellectual energy. The tone is **dreamy-ethereal** -- not in the saccharine pastel sense, but in the way that a meditation bell's resonance makes the surrounding silence feel richer. Think of the moment between exhaling and inhaling. Think of ink dissolving in still water. The visual mood borrows from three specific sources: (1) the misty ink wash paintings (*suiboku-ga*) of Sesshu Toyo, where vast landscapes emerge from almost nothing; (2) the typographic precision of mid-20th-century Japanese book design, where every character is placed with calligraphic intention; and (3) the contemporary zen-digital work of studios like Kenya Hara's Nippon Design Center, where technology serves silence rather than noise. ## Layout Motifs and Structure The layout is built on a **split-screen** architecture -- the viewport is divided into two persistent panels that exist in dialogue with each other, like facing pages of an open book, or the two halves of a folding screen (*byobu*). This is not a simple 50/50 split; it is a living, breathing diptych where the relationship between left and right shifts as the user progresses through the experience. **The Diptych System:** - **Left Panel (The Void -- 38.2% width):** This panel is the *ma* -- the breathing space. It holds a single visual element at any given time: an icon, a kanji-inspired glyph, a gradient wash, or simply emptiness. Its background color shifts subtly between sections, transitioning through the fog palette. This panel scrolls independently from the right, creating a parallax dialogue. The left panel is anchored at `position: sticky; top: 0;` and its content transitions via opacity crossfades rather than scroll movement. - **Right Panel (The Form -- 61.8% width):** This panel carries all textual content, structured in a vertical reading flow. The 38.2/61.8 split follows the golden ratio, creating a proportion that feels mathematically inevitable yet organically balanced. Text is set with generous margins (`padding: 0 clamp(2rem, 5vw, 6rem)`) to avoid the right panel feeling dense against the left panel's emptiness. - **The Seam:** Between the two panels runs a 1px line in `#C4B5A0` (Aged Parchment) at 30% opacity. This line is not decorative -- it is the spine of the open book. On hover, it pulses to 60% opacity over 0.8 seconds. On certain sections, the line dissolves entirely, and the two panels merge into one unified field, breaking the diptych temporarily to create moments of visual unity before re-separating. **Vertical Rhythm:** Within the right panel, content is organized into chapters rather than sections. Each chapter begins with a large ordinal number set in Libre Baskerville at 20vw, positioned at 15% opacity as a watermark behind the chapter's opening paragraph. Chapters are separated by 100vh of empty space -- a full viewport of nothing -- forcing the user to scroll through silence before arriving at the next thought. This emptiness is not wasted space; it is the garden's raked gravel between the stones. **Responsive Behavior:** Below 768px, the split-screen collapses into a single column, but the left panel's content transforms into full-bleed interstitial screens that appear between chapters -- the *ma* moments become literal pauses in the scroll, holding an icon or gradient for an entire viewport before the next chapter begins. ## Typography and Palette **Typography:** - **Primary Display / Chapter Titles:** "Libre Baskerville" (Google Fonts) -- the refined, open-source interpretation of Baskerville's transitional serif. Used at weight 400 (Regular) for titles, never bold. Baskerville's high stroke contrast and sharp, refined serifs carry the precision of engraved letterforms -- each character looks as though it was cut into copper plate by a patient hand. Set at `clamp(2.5rem, 6vw, 5rem)`, letter-spacing `0.02em`, line-height `1.15`. The slight letter-spacing allows each character to breathe, honoring the zen principle that space around a form defines the form. - **Body Text:** "Cormorant Garamond" (Google Fonts) -- a display serif with an unusually high x-height and fine, sharp serifs that photograph well on screen. Weight 300 (Light) for body copy at `clamp(1.05rem, 1.8vw, 1.25rem)`, line-height `1.85`. The extreme line-height creates rivers of white space between lines, making each line of text feel like a single brushstroke laid onto paper. Cormorant Garamond's lightness complements Libre Baskerville's sturdiness -- the pairing is transitional serif meeting Old Style, formality meeting grace. - **Accent / Navigation / Metadata:** "DM Sans" (Google Fonts) -- a low-contrast geometric sans-serif with optically balanced letterforms. Weight 400 at `0.8rem`, letter-spacing `0.12em`, uppercase. Used sparingly for navigation labels, section markers, and metadata. The extreme letter-spacing transforms it into something almost runic -- short words like "VOID" or "FORM" or "III" become iconic rather than textual. Its geometric precision provides a quiet counterpoint to the two serif faces. **Palette:** The palette is a **gradient** system built on the chromatic range of fog, stone, and aged paper -- colors that exist in the space between presence and absence. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (Left Panel) | Temple Mist | `#E8E2D9` | Left panel default, transitions through fog states | | Background (Right Panel) | Rice Paper | `#F5F1EB` | Right panel, slightly warmer than left to create depth | | Primary Text | Sumi Ink | `#2C2824` | All body text, warm near-black with brown undertone | | Secondary Text | Worn Stone | `#7A7268` | Metadata, navigation, captions | | Accent | Persimmon Dusk | `#C4613A` | The single warm accent -- used for the active chapter marker, the hovered seam line, and icon highlights. Inspired by the persimmon (*kaki*) fruit that appears in autumn zen gardens | | Gradient Start | Morning Fog | `#D6CFC4` | Left panel gradient top | | Gradient End | Evening Ash | `#B8AFA3` | Left panel gradient bottom | | Seam / Divider | Aged Parchment | `#C4B5A0` | The spine line between panels | **Gradient Behavior:** The left panel background runs a vertical linear gradient from `#D6CFC4` to `#B8AFA3`, but this gradient shifts its angle as the user scrolls: starting at 180deg (top-to-bottom), rotating slowly to 135deg (diagonal) by mid-page, and reaching 90deg (left-to-right) by the final chapter. This rotation is driven by scroll position via `transform: rotate()` on a pseudo-element, creating the sensation that light is moving across a physical surface as the day progresses from morning to evening. The gradient transition is imperceptible in real-time but noticeable when comparing the beginning and end of the experience. ## Imagery and Motifs **Icon-Heavy Visual System:** paragram.dev rejects all photography and illustration in favor of a purely **icon-heavy** visual language: a suite of 12 custom SVG icons that function as the entire imagery vocabulary of the site. These icons are not utilitarian UI icons -- they are contemplative symbols, each carrying narrative weight. **Icon Design Language:** Each icon is rendered as a single continuous stroke in `#2C2824` (Sumi Ink) at 1.5px weight, with no fills. The stroke style mimics the *ippitsu-gai* (single-brush-stroke) technique of Zen calligraphy, where the brush never leaves the paper. Every icon must be drawable in one continuous path. The icons have rounded line-caps and line-joins (`stroke-linecap: round; stroke-linejoin: round`), giving them the softness of brush on rice paper rather than the precision of vector geometry. **The Icon Set:** 1. **Enso (Circle):** An incomplete circle, the classic Zen symbol of enlightenment and the void. The gap in the circle is always at the 2 o'clock position. 2. **Torii Gate:** A simplified shrine gate, two vertical lines crossed by two horizontal lines with upturned ends. 3. **Mountain & Moon:** A single peak with a crescent hovering above it -- landscape reduced to its grammatical minimum. 4. **Ripple:** Three concentric incomplete circles expanding outward, like a stone dropped in still water. 5. **Bamboo Segment:** A single node of bamboo with two leaves -- growth, resilience, emptiness (the hollow center). 6. **Karesansui Rake:** Three parallel wavy lines, the raked sand patterns of a dry garden. 7. **Ink Drop:** A circle dissolving at its bottom edge into scattered dots -- entropy, impermanence. 8. **Bound Book:** A side-view of a stitched binding with thread lines -- knowledge, the *paragram* itself. 9. **Bridge:** A simple arched bridge, the connection between two banks, two ideas, two panels. 10. **Folding Screen:** A zigzag line representing a *byobu* -- the diptych motif made literal. 11. **Breath Mark:** Two parenthetical curves facing each other with space between -- a typographic rest, a pause. 12. **Compass Rose:** A four-pointed star with one longer point (north) -- direction, orientation, the reader's path. **Icon Placement:** Icons appear exclusively in the left panel, one at a time, transitioning via 1.2-second opacity crossfades as the user scrolls through chapters in the right panel. Each chapter is paired with a specific icon. Icons are displayed at 40% of the left panel's width, vertically centered, in `#2C2824` at 25% opacity -- ghostly presences rather than bold declarations. On the mobile interstitial screens, icons render at 60vw and 15% opacity, filling the breath-pause viewport. **Cultural Motifs:** The **cultural** motif layer manifests through several deliberate references: - **Chapter numbering uses Kanji-inspired ordinals:** Each chapter number (rendered in the watermark style described above) is accompanied by a small vertical text element in DM Sans reading the romanized Japanese ordinal: "ICHI," "NI," "SAN," etc. - **The scroll direction metaphor:** The site reads top-to-bottom, echoing the traditional Japanese reading direction of top-to-bottom, right-to-left -- the right panel carrying the primary text acknowledges this by setting its first line flush-right within each chapter. - **Seasonal color shifts:** The Persimmon Dusk accent (`#C4613A`) deepens by 5% lightness with each successive chapter, moving from a bright autumn persimmon toward a deeper winter rust (`#A34E2D`), encoding the passage of seasons into the scroll journey. ## Prompts for Implementation **Full-Screen Narrative Diptych Experience:** The site must be built as a single-page split-screen narrative. No routing, no hamburger menus, no footer with social links. The only navigation is the scroll itself and the seam between panels. **Entry Sequence:** On first load, both panels render in `#E8E2D9` (Temple Mist) -- a unified, undifferentiated field. After a 0.6-second stillness (no loading spinners, no skeleton screens -- just the fog), the seam line draws itself from top to bottom over 1.8 seconds, a single vertical stroke appearing like ink on paper. As the seam completes, the right panel transitions to `#F5F1EB` (Rice Paper) over 0.6 seconds, and the first icon (Enso) fades into the left panel at 25% opacity over 1.2 seconds. Finally, the chapter title appears in Libre Baskerville, character by character, at 40ms per character -- not a typewriter effect but a calligraphic emergence, as if each letter is being brushed onto the surface in real-time. **Tilt-3D Interaction:** The left panel implements a **tilt-3d** effect: as the user moves their cursor across the viewport, the left panel's content (the icon and gradient) responds with a subtle CSS perspective transform -- tilting up to 3 degrees on X and Y axes based on cursor position. This creates the illusion that the left panel is a physical card or screen hovering in space, catching light differently as you move. The effect uses `transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))` with CSS custom properties updated via a lightweight JavaScript mousemove listener (no libraries). The tilt response is eased with a 200ms CSS transition, making it feel weighted and physical rather than jerky. On touch devices, the tilt responds to device orientation via the DeviceOrientationEvent API, creating a gyroscopic effect. **Scroll-Linked Behaviors:** - Right panel chapters trigger left panel icon transitions at scroll thresholds (IntersectionObserver with `threshold: 0.5`). - The gradient angle rotation on the left panel is driven by `scroll-timeline` CSS (with JavaScript fallback). - Chapter watermark numbers have a subtle parallax: they scroll at 60% of the chapter text speed, creating depth. - The seam line opacity pulses gently (30% to 40% to 30%) on a 6-second CSS animation cycle, like breathing. **Typography Animation:** Chapter titles do not simply appear. Each title uses a staggered opacity animation: individual characters are wrapped in `` elements and fade in sequentially with `animation-delay` increments of 40ms, creating a left-to-right calligraphic reveal. The animation uses `opacity` and a subtle `translateY(0.3em)` to `translateY(0)` movement, so each character rises slightly into place like ink wicking upward through paper. **AVOID:** CTA buttons, pricing tables, testimonial carousels, stat counters, team grids, newsletter signup forms, cookie banners styled as features. This site has no call to action because the experience itself is the destination. AVOID parallax scrolling on the right panel text (parallax is reserved for watermark numbers and left panel content only). AVOID scroll-jacking or scroll-snapping -- the user's scroll velocity must never be overridden. **Performance Note (Implementation Only):** All icons are inline SVGs. No icon font, no sprite sheet. The tilt-3d JavaScript listener uses `requestAnimationFrame` throttling. Font loading uses `font-display: swap` with the system serif stack as fallback. ## Uniqueness Notes **Differentiators from other designs:** 1. **Persistent Split-Screen Diptych (1% layout frequency):** No other design in the portfolio uses a true split-screen layout where two panels maintain independent scroll contexts and visual identities throughout the entire experience. The 38.2/61.8 golden-ratio split with the breathing seam line creates a compositional structure that is architecturally distinct from every centered, single-column, or asymmetric layout in the existing collection. 2. **Single-Stroke Zen Icon System (icon-heavy at 2% imagery frequency):** While a few designs use icon-heavy approaches, none employ the constraint of single-continuous-stroke (*ippitsu-gai*) SVG icons rendered at near-invisible opacity as contemplative symbols rather than functional UI elements. The icons carry narrative meaning rather than utilitarian function -- they are content, not interface. 3. **Gradient-as-Timepiece (gradient palette, but rotational):** Though gradient palettes appear at 90% frequency, no other design uses gradient angle rotation driven by scroll position to encode the passage of time. The left panel's gradient literally moves like sunlight across a wall, transforming a common palette technique into a site-specific temporal metaphor. 4. **Tilt-3D as Spatial Dialogue (5% pattern frequency):** The tilt-3d effect is applied specifically to the left panel, making it feel like a hovering physical artifact while the right panel remains flat and textual. This creates a spatial hierarchy where imagery exists in three dimensions and text exists in two -- a deliberate comment on the relationship between image and word, form and meaning. 5. **Cultural Motifs as Structural Grammar (7% motif frequency):** The cultural references are not decorative wallpaper -- they are embedded in the site's structural logic. The diptych is a *byobu*, the chapters are numbered in Japanese, the icons reference Zen calligraphy technique, and the seasonal color deepening encodes *mono no aware* (the pathos of things) into the scroll journey itself. **Chosen seed/style:** `aesthetic: zen, layout: split-screen, typography: baskerville-refined, palette: gradient, patterns: tilt-3d, imagery: icon-heavy, motifs: cultural, tone: dreamy-ethereal` **Avoided overused patterns:** centered layout (99%), playful aesthetic (95%), friendly tone (98%), mono typography (99%), minimal imagery (94%), warm palette (100%), vintage motifs (86%), scroll-triggered as primary pattern (97%). The design deliberately steers away from these saturated categories, choosing instead the underused territory of split-screen (1%), icon-heavy imagery (2%), baskerville-refined typography (3%), dreamy-ethereal tone (3%), and tilt-3d interaction patterns (5%).