# Design Language for glolos.com ## Aesthetics and Tone glolos.com exists in the visual space of a Greco-Roman sculpture garden suspended in a pastel cloudscape -- imagine the Borghese Gallery if it were floating three hundred feet above a field of lavender, its marble statuary slowly rotating in mid-air, casting no shadows because the light comes from everywhere at once. The aesthetic is **isometric** rendered through a **dreamy-ethereal** lens: precise geometric construction married to the soft, diffused unreality of a half-remembered dream. Every element on the page feels like it occupies three-dimensional space, projected onto the screen through a gentle axonometric grid, but the surfaces are cream and blush and powder blue rather than the cold steel of technical illustration. This is not the clinical isometric of architectural blueprints -- it is the isometric of a Roman bathhouse reimagined by a confectioner. The tone is hushed and reverential, like entering a gallery where the air itself feels thick with significance. Text appears as if inscribed into soft marble rather than printed. Interactions feel weightless -- the cursor trails a phantom, elements tilt gently toward the viewer's gaze as if magnetically attracted to attention. There is an overwhelming sense of suspension, of being held in a moment between waking and sleep where classical beauty and contemporary geometry coexist without contradiction. The domain name "glolos" itself suggests something rounded, vowel-heavy, almost onomatopoeic -- the design leans into this softness while maintaining the intellectual rigor of isometric projection. ## Layout Motifs and Structure The layout follows a **magazine-spread** architecture: content is organized into deliberate two-page-style compositions that fill the viewport, each spread functioning as a self-contained visual tableau. Unlike traditional web layouts that stack sections vertically with uniform widths, each spread here has its own internal composition -- one might feature a large isometric illustration on the left with columnar text on the right; the next might reverse this with a full-bleed 3D marble fragment surrounded by floating caption blocks. **Grid System:** The underlying grid is a 12-column isometric grid with a 30-degree angle of projection. Columns are not vertical -- they follow the isometric x-axis, creating a persistent sense of depth even in the typography alignment. Content blocks snap to this grid, giving every element a subtle three-dimensional placement even though the page is flat. The grid lines themselves are never visible but their influence is felt in how text blocks, images, and decorative elements align along invisible diagonal rails. **Spread Composition Rules:** - **Spread 1 (Hero):** A single isometric cube or plinth rendered in creamy marble occupies 60% of the viewport. The domain name "glolos.com" is embossed on its front face in geometric sans type. The remaining 40% is negative space in warm cream (#F5F0E8). No navigation. No subtitle. Just the object and the name. - **Spread 2-4 (Content Spreads):** Each uses a different asymmetric division -- 70/30, 40/60, 50/50 with offset. Text columns are narrow (18-24em max) and positioned with magazine precision: generous leading, deliberate orphan control, pull quotes set at 2x the body size in a contrasting weight. - **Spread 5 (Closing):** Returns to the single-object format of Spread 1 but the marble plinth has rotated 180 degrees (achieved through CSS transform or pre-rendered variant), revealing an inscription on its back face. **Transitions Between Spreads:** Each spread snaps into view using CSS scroll-snap with a `proximity` behavior rather than `mandatory`, allowing fluid browsing while encouraging full-spread viewing. Between spreads, a brief interval of pure cream (#F5F0E8) acts as a visual palate cleanser -- the equivalent of the gutter in a physical magazine. ## Typography and Palette **Typography:** - **Display / Headlines:** "Josefin Sans" (Google Fonts) at weights 300 and 600. This typeface's geometric construction -- perfectly circular bowls, uniform stroke widths, tall x-height -- embodies the isometric aesthetic's precision while its Art Deco heritage adds classical elegance. Used at 3rem to 7rem for spread headings. Letter-spacing: +0.04em at display sizes for an airy, spaced quality. Line-height: 1.05. Always in title case. - **Body / Reading Text:** "Nunito Sans" (Google Fonts) at weights 300 (light) and 400 (regular). A geometric sans that shares Josefin Sans's DNA but is optimized for readability at smaller sizes. Its rounded terminals soften the reading experience, complementing the dreamy tone. Used at 1rem to 1.125rem. Line-height: 1.72 for generous vertical rhythm. Letter-spacing: +0.01em. - **Accent / Captions & Labels:** "Cormorant Garamond" (Google Fonts) at weight 300 italic. A deliberate contrast: this refined serif introduces classical texture against the geometric sans headings, reinforcing the Greco-Roman marble motif. Used for pull quotes, image captions, and navigational labels at 0.875rem to 1.5rem. Letter-spacing: +0.06em in uppercase for labels. **Palette:** The palette is a **creamy-pastel** system built on five core tones plus three accents: | Role | Color | Hex | |------|-------|-----| | Base Cream | Warm parchment white | #F5F0E8 | | Marble White | Cool sculptural white | #EDE8E0 | | Blush Rose | Soft terracotta pink | #E8C4B8 | | Powder Periwinkle | Muted classical blue | #B8C4D8 | | Sage Whisper | Dusty botanical green | #C4CDB8 | | Deep Plinth | Dark warm charcoal | #3A3530 | | Gold Leaf Accent | Warm metallic gold | #C8A86E | | Lilac Shadow | Pale violet for depth | #C8B8D4 | The palette avoids pure whites and pure blacks entirely. The darkest value (#3A3530) is a warm charcoal that reads as shadow rather than text-on-white. Backgrounds alternate between Base Cream and Marble White across spreads, creating subtle tonal shifts that prevent monotony without introducing harsh contrast. The Blush Rose and Powder Periwinkle appear as accent surfaces on isometric elements -- a cube's top face might be Blush Rose while its side faces are Marble White, creating gentle chromatic depth. ## Imagery and Motifs **3D-Render Marble Objects as Primary Imagery:** The dominant visual language is **3D-rendered classical marble forms** presented in isometric projection. These are not photographs of marble -- they are CSS/SVG constructions or pre-rendered illustrations that depict idealized geometric solids (cubes, cylinders, plinths, arches, columns) with marble-like surface treatment: subtle cream-and-gray veining rendered as SVG noise patterns overlaid on the pastel base colors. Specific elements: 1. **Isometric Plinths:** Rectangular solids rendered with three visible faces, each face a slightly different tone from the palette (top face lightest, left face mid, right face darkest of the three). The faces carry faint vein patterns created with SVG `` filters at low frequency (baseFrequency="0.015") and high octaves (numOctaves="4") to simulate marble grain. 2. **Floating Column Fragments:** Broken classical column sections that appear to hover in the creamy void. These are rendered as CSS 3D transforms with isometric perspective: `transform: rotateX(30deg) rotateY(45deg)`. Column fluting is achieved with repeating linear gradients (alternating #EDE8E0 and #E0DAD0) to create the shadow-in-groove effect. 3. **Arch Frames:** Content sections are occasionally framed within isometric arch shapes -- semicircular tops with rectangular bases -- that serve as visual containers. The arch itself is drawn in SVG with a 2px stroke in Gold Leaf (#C8A86E), filled with a semi-transparent version of Base Cream. **Marble-Classical Motif Details:** - **Acanthus Leaf Corners:** Stylized, geometric versions of acanthus leaves (the motif found on Corinthian capitals) appear at the corners of content blocks. These are simplified to work within the isometric grid: each leaf is constructed from overlapping isometric diamond shapes in Sage Whisper (#C4CDB8) with Gold Leaf (#C8A86E) outlines. - **Meander Border Pattern:** A simplified Greek key (meander) pattern runs along the horizontal gutters between spreads. Rendered in SVG as a repeating pattern tile, it uses the Deep Plinth color (#3A3530) at 15% opacity so it reads as a subtle architectural detail rather than a bold graphic element. - **Entablature Dividers:** Where other sites use `
` tags or simple lines, glolos.com uses a miniature isometric entablature -- a three-part classical molding (architrave, frieze, cornice) rendered as a slender CSS construction 8px tall and spanning the text column width. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be built as an immersive scroll-through gallery of magazine spreads, each one a carefully composed visual poem. There is no traditional website structure -- no hero section with CTA, no feature grid, no pricing table. The entire experience is a contemplative journey through isometric marble forms and ethereal typography. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hamburger menus, sticky headers, footer link columns. None of these belong in this dreamy space. **Cursor-Follow Interaction (Primary Animation Pattern):** The defining interactive behavior is **cursor-follow**: elements on the page respond to the cursor's position with subtle, continuous movement. This is not a click or hover interaction -- it is ambient, always-on, creating the sensation that the viewer's gaze has physical presence in the scene. Implementation specifics: - **Parallax Depth Layers:** Each spread contains 3 depth layers. Foreground elements (text, small decorative motifs) shift 3-5px in the cursor's direction. Midground elements (isometric objects) shift 1-2px. Background elements (large marble surfaces, gradient washes) shift 0.5-1px in the OPPOSITE direction. This opposing movement creates convincing depth. - **Isometric Object Tilt:** The primary 3D marble objects tilt subtly toward the cursor using CSS `perspective` and `rotateX/rotateY` transforms. Maximum tilt: 3 degrees on each axis. The tilt must use `requestAnimationFrame` with aggressive lerping (factor 0.06) to create smooth, heavy, marble-like movement -- these are dense objects, they should not snap to the cursor. - **Gold Particle Trail:** The cursor leaves behind a faint trail of tiny gold (#C8A86E) particles (2-4px circles) that fade to transparent over 800ms. Maximum 20 particles alive at once. Particles should drift downward at 0.3px/frame to simulate settling dust, reinforcing the marble-dust atmosphere. - **Shadow Response:** Isometric objects cast soft CSS `box-shadow` or `drop-shadow` filters. The shadow offset shifts based on cursor position, as if the cursor IS the light source. Shadow color: #3A3530 at 10% opacity. Maximum shadow offset: 8px. **Scroll Behavior:** - CSS `scroll-snap-type: y proximity` on the main container - Each spread is `min-height: 100vh` with internal flexbox or grid for content placement - Between spreads, a 15vh cream spacer with the meander border pattern - Elements within each spread fade from 0 to 1 opacity as the spread enters the viewport, using `IntersectionObserver` with a `threshold` array of [0, 0.15, 0.3, 0.5] for stepped reveal - NO parallax scrolling (overused at 80%) -- use cursor-follow as the spatial interaction instead **Typography Animation:** - Headlines in each spread use a staggered character reveal: each character fades in from 0 opacity and translates 12px upward to its final position, with 30ms stagger between characters. Easing: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for a gentle deceleration. - Body text appears as complete blocks with a single 400ms fade, starting 200ms after the headline animation completes. - Cormorant Garamond captions draw in from the left with a 600ms slide, accompanied by an expanding underline in Gold Leaf (#C8A86E) that grows from 0% to 100% width. **Color Transitions:** - Each spread's background alternates between Base Cream (#F5F0E8) and Marble White (#EDE8E0) - The transition between spreads is a 300ms CSS `background-color` transition on the ``, creating a subtle breathing rhythm of warm-cool-warm-cool as the user scrolls **Technical Notes:** - All isometric objects should be built with pure CSS transforms where possible (using `transform: rotateX(30deg) rotateY(45deg) scaleY(0.866)` for isometric projection) with SVG fallbacks for complex forms - Marble veining texture: use SVG `` with `` piped through `` to map noise to the palette's cream-gray range - Google Fonts load: Josefin Sans:300,600 | Nunito Sans:300,400 | Cormorant Garamond:300i ## Uniqueness Notes **Differentiators from other designs:** 1. **Isometric-Projected Magazine Layout:** No other design in the portfolio combines isometric projection with magazine-spread composition. Isometric appears at only 4% frequency and is exclusively paired with technical/documentation aesthetics elsewhere. Here, isometric projection serves an ethereal, art-gallery purpose -- geometric precision in service of beauty rather than information architecture. The magazine-spread layout (7%) is similarly rare and has never been combined with isometric elements. 2. **Cursor-Follow as Primary Spatial Interaction:** While 80% of designs rely on parallax scrolling for spatial depth, glolos.com uses cursor-follow (6%) as its defining interaction pattern. The cursor becomes a light source, a gravitational center, and a presence that the marble objects acknowledge. This creates an intimate, responsive relationship between viewer and content that parallax cannot achieve because parallax is tied to scroll position (a linear, predetermined path) while cursor-follow is tied to attention (a free, exploratory path). 3. **Creamy-Pastel Palette with Classical Marble Motifs:** The creamy-pastel palette (1% frequency) is the rarest palette category in the portfolio. Combined with marble-classical motifs (4%), this creates a visual identity that exists nowhere else in the design system: soft, warm, confectionery colors applied to the hard, cold geometry of Greco-Roman architectural elements. The cognitive dissonance between the delicate palette and the monumental subject matter produces a unique emotional register -- something like tenderness toward permanence. 4. **Geometric Sans + Classical Serif Pairing for Dreamy Effect:** The Josefin Sans / Cormorant Garamond pairing is unprecedented in the portfolio. Geometric-sans typography (8%) is always used for tech/modern contexts elsewhere; here it is deployed for its Art Deco elegance. Pairing it with Cormorant Garamond italic creates a dialogue between geometric precision and classical refinement that reinforces the core aesthetic tension of the entire design. 5. **No Parallax, No Scroll-Triggered Animation, No Warm-Friendly Defaults:** This design deliberately avoids the three most overused patterns in the portfolio: parallax (80%), scroll-triggered animation (96%), and the warm/friendly tone combination (100%/97%). Instead, it achieves spatial depth through cursor-follow, content revelation through IntersectionObserver opacity transitions (a passive observation rather than active trigger), and emotional resonance through dreamy-ethereal tone (1%) rather than friendly approachability. **Documented seed/style:** aesthetic: isometric, layout: magazine-spread, typography: geometric-sans, palette: creamy-pastel, patterns: cursor-follow, imagery: 3d-render, motifs: marble-classical, tone: dreamy-ethereal **Avoided patterns from frequency analysis:** - playful aesthetic (97%) -- replaced with dreamy-ethereal - centered layout (99%) -- replaced with magazine-spread asymmetric compositions - warm palette (100%) -- replaced with creamy-pastel (cool-warm hybrid) - scroll-triggered patterns (96%) -- replaced with cursor-follow and IntersectionObserver - friendly tone (97%) -- replaced with dreamy-ethereal - mono typography (99%) -- replaced with geometric-sans - minimal imagery (95%) -- replaced with 3d-render marble constructions - vintage motifs (78%) -- replaced with marble-classical - photography imagery (70%) -- replaced with 3d-render - parallax patterns (80%) -- replaced with cursor-follow depth layers - gradient palette (91%) -- replaced with flat pastel tones with tonal alternation - muted palette (71%) -- replaced with creamy-pastel (distinct from muted)