# Design Language for glolos.com ## Aesthetics and Tone glolos.com is **a terracotta lecture hall at first light, stripped of furniture, with a single carved word on the long wall** — a muji-grade exhibition space where the only artifact is *language itself*, and the only weather is the warm Anatolian dust that drifts through the high windows when nobody is speaking yet. The portmanteau `glo + los` reads as **"global logos"** — *logos* the Greek principle, the reasoned word, the structural utterance — and the entire site is built as a **single quiet auditorium for the carrying of weighty utterances across cultures**. Where the corpus's authoritative sites tend to reach for navy gradients, marble columns, and gold-on-black opulence, glolos refuses every one of those moves. Authority here is **the authority of the empty room before a respected voice begins** — not opulence, but *room*. The mood is **post-storm clay** — the moment after a kiln has been opened, before the ceramics are touched. Warm dust. Long shadow. No urgency. A faint resin smell that the page implies but cannot deliver. The reader does not feel sold to; the reader feels *received* — as one is received in a small academy whose walls are unpainted, whose floor is swept, and whose only ornament is an inscription cut into the lintel above the door. The tonal contract is **authoritative without raising its voice**. Authoritative is at 7% in the corpus tone-frequency analysis; it is almost universally interpreted as *navy + serif + columns*. glolos reframes it as **terracotta + condensed display + ma** — earthen, condensed, and surrounded by silence. The voice on the page is the voice of a curator who has already decided what matters and now simply *places* each utterance, one at a time, on a long warm shelf. There are no exclamations, no superlatives, no urgency markers. There are nine carefully chosen sentences across the entire scroll. Inspirations, named and held: - The lecture-hall photographs of **Hiroshi Sugimoto's *Theaters*** — empty, glowing, patient. - **Muji**'s 1980 Tanaka Ikko campaign — the original "no brand, quality goods" spreads where a single object floats in cream paper and carries the entire message. - The **terracotta army** of Xi'an — not the warriors but the *trenches between them*, the negative furrows of warm clay where empty space outweighs object. - **Tadao Ando**'s Church of the Light — a single cruciform incision in a vast empty wall. - The **logos-inscriptions of Hagia Sophia** — Greek capitals carved into apse-warm stone, surrounded by acres of plaster. ## Layout Motifs and Structure The composition is built on **ma — Japanese negative space** as the *primary structural element*, treated not as gap-between-content but as *content-itself*. The page is composed of **nine inscriptions floating on a 16-column terracotta-cream grid** where, by deliberate constraint, **no inscription occupies more than 4 columns and no two inscriptions share a horizontal band**. ma-negative-space sits at 7% in the corpus layout frequency analysis — and the small 7% that does exist tends to use cool, monochrome, gallery-white ma. glolos claims a **warm-toned ma** (terracotta-cream rather than gallery-white) — a chromatic and textural recontextualization that is, as far as the corpus shows, novel to this site. **The 16-column grid, defined and obeyed:** - Page width: max 1440px, centered, with **240px outer margins on desktop** (28% of viewport edge-to-edge is *blank terracotta*). - 16 columns at 56px each, 24px gutters. - Vertical rhythm: a single 96px baseline unit (`--ma`). Every margin, padding, and offset is a multiple of `--ma`. The implicit subtext: *ma is the unit of measurement here, not pixels*. **The nine inscription-zones, each occupying 1–4 columns, no horizontal collisions:** 1. **Lintel inscription** (cols 7–10, top edge) — the wordmark "glolos." The dot is intentional: a carved period at the end of the spoken word. Below it, a single sub-label: "logos, carried." 96 × `--ma` of vertical breathing room follows. 2. **First utterance** (cols 2–5, dropped 8 × `--ma`) — a Greek logos-fragment in original capitals (ΛΟΓΟΣ) followed by its English carriage. 3. **Glassmorphic-card cluster A** (cols 12–15) — three stacked translucent cards, each translated from a different language tradition (Sanskrit *vāc*, Arabic *kalima*, Latin *verbum*). Cards are warm-tinted glass on terracotta, not the corpus-default cool-blue glass. 4. **Second utterance** (cols 5–8, dropped 16 × `--ma`). 5. **The Empty Band** — a full 24 × `--ma` of *deliberate* empty terracotta-cream. Nothing in it. This band is the structural argument. (See "The Empty Band Rule" below.) 6. **Third utterance** (cols 9–12). 7. **Glassmorphic-card cluster B** (cols 2–5, dropped 8 × `--ma`) — three more translation cards (Hebrew *davar*, Chinese 道, Japanese 言葉). Together with cluster A, the six cards form **the cultural compass** — six writing systems, six warm glass slabs, six different carriages of the same logos. 8. **Lintel echo** (cols 7–10, bottom-right) — a smaller second wordmark, rotated 90° clockwise, tucked into the lower-right margin like a curator's signature on the wall plaque. 9. **The carved date stone** (cols 14–16, bottom-right) — Roman numerals MMXXVI in Bebas, no other footer chrome. No copyright sigil, no nav, no contact strip. **The Empty Band Rule.** Between zone 5's middle and zone 6's beginning, *24 × `--ma` of nothing*. This is the page's load-bearing silence — the structural moment at which the visitor is asked to stop scrolling and let the room breathe. Most sites would put a CTA here. glolos puts the *absence* of a CTA here, and that absence is the design. **No conventional sections.** No hero, no features-grid, no testimonial-row, no pricing-block, no contact-form, no newsletter-bar, no footer-columns. There are inscriptions and there is ma between inscriptions. The whole vocabulary is exhausted. ## Typography and Palette **Fonts (Google Fonts only — two faces, one for inscription and one for carriage):** - **Display / Wordmark / Inscriptions — `Bebas Neue` (400)**, the only display face. Set at clamp(3rem, 9vw, 7.5rem) for the lintel wordmark, clamp(2rem, 5vw, 4rem) for utterance openings, and 1.6rem for the rotated lintel-echo. Tracking is `0.04em` for the wordmark (loose enough to feel carved-stone, tight enough to remain authoritative), `0.08em` for utterance openings, `0.12em` for the date stone (so each Roman numeral stands isolated like its own warm clay tablet). Bebas Neue is the **bebas-bold** anchor of the site — at 5% in the corpus typography frequency analysis, sufficiently underused to feel like a deliberate signature rather than a default. Color **#2E1A12** (charred-bough), not pure black, on terracotta-cream. - **Body / Carriage / Translation cards — `Cormorant Infant` (300, italic 300)**, used at 1.0625rem with 1.7 line-height for English carriage of each utterance, and 0.9375rem italic for the cultural-compass cards. Cormorant Infant is chosen for two reasons: its **infantile (immature) terminals**, which feel hand-shaped rather than industrial, complement the warm-clay vocabulary; and its **light italic**, which carries a quiet scholarly weight without ever raising its voice. Color **#3F2418** (deep terracotta loam) for body, **#5C3A28** (kiln-fired brown) for italic cards. There is **no third font, no monospace, no body sans**. The contrast between Bebas Neue's industrial condensed shoulders and Cormorant Infant's soft hand is itself the typographic story. Mono — at 94% in the corpus — is *deliberately refused*. There is nothing on this page that needs to look like code. **Palette (terracotta-warm, eight tones, all warm of neutral):** - **#F4E8D8** — Cream Paper (page background, 78% surface area). A warm off-white, the color of unbleached linen napkin laid over kiln-warm clay. - **#E8D5BE** — Bisque Wash (sub-background for the Empty Band, used at 0.6× opacity over Cream Paper to create a faint horizontal warmth-gradient). - **#D9A066** — Terracotta Gold (primary inscription accent, used for the colon-separator between Greek and English in each utterance, used for the rim-light edge of glass cards). - **#C8623E** — Kiln Fired (secondary accent, used for the period after "glolos.", used for the date-stone numerals). - **#A04A2E** — Burnt Sienna (the only color used for hover states — never a brightness change, always a hue-shift toward warmer red). - **#5C3A28** — Kiln Brown (italic translation text on cards). - **#3F2418** — Loam (body text). - **#2E1A12** — Charred Bough (display headings, wordmark). **Palette logic:** Eight values, each a step warmer or darker on a single hue arc — no blue, no green, no neutral gray. The corpus's terracotta-warm sites (3% of palette frequency) tend to mix terracotta with sage or with cream-cool whites; glolos refuses every cool intrusion. The page is **monochromatic in hue, octatonic in value** — a single warm chord played across eight registers. **Glassmorphic-card chromatic recontextualization.** Glassmorphic-cards sit at 9% in the corpus imagery frequency analysis, almost universally rendered as cool-blue translucent panels on dark backgrounds. glolos's six compass-cards are **warm glass on cream**: `background: linear-gradient(135deg, rgba(244,232,216,0.62) 0%, rgba(232,213,190,0.42) 100%); backdrop-filter: blur(18px) saturate(1.15); border: 1px solid rgba(217,160,102,0.34); box-shadow: 0 24px 60px -32px rgba(46,26,18,0.18)`. The blur lets the warm Cream Paper bleed up through the panel; the gold rim catches morning-window light. This is **the warmest glassmorphism in the corpus** — and arguably the only glassmorphism that does not derive its mood from blue. ## Imagery and Motifs No photography. No 3D renders. No stock illustration. No icons-as-decoration. No emoji. The page contains **no raster images at all**; every visual element is either typographic, an SVG inscription, or a CSS-painted terracotta texture. **The cultural motif vocabulary.** Cultural sits at 5% in the corpus motif frequency analysis, and the existing 5% tends toward festival-color, ornament-density, or specific national iconography. glolos reframes "cultural" as **the carriage of a single concept — *logos* — across six writing systems**, with no national imagery, no festival color, no ornament. The cultural motif is *typographic restraint applied to six scripts at once*. **The six compass-glyphs (one per glassmorphic card):** 1. **ΛΟΓΟΣ** — Greek capitals, Bebas Neue rendered with `font-feature-settings: "case" on`, gold (#D9A066). The seed-word. 2. **वाच्** — Sanskrit *vāc* in Devanagari, set in `Noto Serif Devanagari` 500 (Google Fonts), terracotta-gold horizontal-bar prominent. 3. **كَلِمَة** — Arabic *kalima*, set in `Amiri` 400 (Google Fonts), kiln-fired (#C8623E), full diacritics. 4. **VERBUM** — Latin capitals, Bebas Neue, charred-bough (#2E1A12). 5. **דָּבָר** — Hebrew *davar* with niqqud, set in `Frank Ruhl Libre` 500 (Google Fonts), loam (#3F2418). 6. **道** — Chinese *dao* / Japanese *michi*, set in `Noto Serif TC` 600 (Google Fonts), at 4× the body-size, kiln-brown (#5C3A28). The single largest glyph on the entire page. Each card stacks the script-glyph on top, the romanization in italic Cormorant Infant in the middle, and a single English-word translation at the bottom. No description, no etymology, no source. Three text-objects per card, no chrome. *The card is the inscription.* **The terracotta paper texture.** The body background is not flat. A tiled SVG noise (`feTurbulence baseFrequency="0.78" numOctaves="2"` filtered to warm tones, alpha 4%) is layered above the Cream Paper, repeated 1024×1024px. Above that, a single radial gradient warms the upper-third of the viewport — `radial-gradient(ellipse at 50% 0%, rgba(217,160,102,0.14) 0%, transparent 64%)` — simulating the high warm window light of the Anatolian lecture hall. **The carved-stone hairlines.** Four 1px hairlines exist on the page, each the color of Burnt Sienna at 38% opacity: - A horizontal hairline 96px below the lintel wordmark (the inscription's lower bound). - A vertical hairline at column 8 of the grid, descending the full page height (the ma-axis of the room). - A horizontal hairline marking the top of the Empty Band. - A horizontal hairline marking the bottom of the Empty Band. These four hairlines are the *only line work on the page*. There are no boxes, no borders, no decorative dividers, no gradients-as-shapes, no SVG flourishes. The four hairlines are the architecture of the room. **No corner radii anywhere except the glass cards.** All inscriptions are aligned to grid edges; nothing is rounded. The six glass cards have a `border-radius: 2px` only — barely-perceptible softening, the corner of a polished clay tablet rather than a beveled UI element. ## Prompts for Implementation Build glolos.com as **a single, very long, very quiet vertical scroll through one warm room**, in one HTML file, one CSS file, one JS module — no framework, no build step, no dependencies beyond Google Fonts. Treat the page as *one slow walk past nine inscriptions in a kiln-warm hall*. The walk takes 90 to 120 seconds at the visitor's pace; the page does not hurry them. **Storytelling structure (nine inscriptions, vertical scroll, stagger transitions):** 1. **The Lintel.** On load, the page is empty Cream Paper. After 240ms, the wordmark "glolos." fades up at 0.6 → 1.0 opacity over 1100ms with no movement. After 1400ms, the sub-label "logos, carried." appears in italic Cormorant Infant. Then nothing happens for two full seconds. The room is letting itself be looked at. 2–4. **The First Three Utterances.** Each utterance is a two-line composition: a script-fragment in Bebas Neue at display size, followed by a single italic Cormorant carriage-line. Visitor scrolls; each utterance enters via **stagger-pattern reveal** — the script-letters fade up *one-at-a-time, left-to-right, 70ms apart*, then the carriage-line dissolves up beneath. Stagger sits at 79% in the corpus pattern frequency analysis; this site uses it not for hero-letters or feature-cards but for the *inscription itself*, character by character, as if a hand were chiseling each letter into clay in real time. 5. **The Empty Band.** As the visitor scrolls into the band, scroll-velocity is *not* hijacked — there is no scroll-jacking, no parallax fight, no sticky element. The band is genuinely empty: 24 × `--ma` of warm Cream Paper. The only event during the band is a faint, very slow `radial-gradient` pulse — the upper-window light brightens by 6% over 4 seconds and dims back. If the visitor stops here, they are rewarded by *the room continuing to breathe*. If they keep scrolling, they pass through it like an antechamber. 6–7. **Fourth Utterance & Compass Cards.** The fourth utterance arrives, then the six glassmorphic-cards stagger-cascade into their two clusters (cluster A right, cluster B left, dropped 8 × `--ma`). Each card enters with a 240ms blur-clear transition: `backdrop-filter` animates from `blur(0px)` to `blur(18px)` while opacity rises from 0 to 1. Stagger is 110ms between cards. After all six are present, the visitor sees the **cultural compass** — six warm glass slabs, six scripts, one logos. 8. **The Lintel Echo.** Tucked into the lower-right margin, the rotated wordmark fades in only when the scroll-progress passes 88%. Rotation 90° clockwise. Tracking 0.12em. 9. **The Carved Date Stone.** MMXXVI in Bebas Neue, kiln-fired #C8623E. Appears last. No footer follows. The page simply ends in warm Cream Paper that extends 200px past the date stone, then the `` ends. No copyright sigil, no nav, no social icons, no contact strip. **The cursor is a chisel-mark.** Hide the default cursor over the body. Replace it with a small SVG dot — 6px, Burnt Sienna #A04A2E, 0.78 opacity. On hover over a glassmorphic-card, the dot expands to 14px and the card's gold rim brightens by 12%. On hover over an inscription, the dot becomes a 1px × 14px vertical hairline (a chisel edge). No magnetic attraction — magnetic is at 78% in the corpus; this site refuses it. The cursor is *witness*, not *participant*. **Stagger timing constants (the page's metronome).** - Letter-stagger: 70ms between adjacent characters. - Card-stagger: 110ms between adjacent cards. - Section-stagger: 380ms between adjacent inscription-zones. - All easing: `cubic-bezier(0.22, 0.61, 0.36, 1)` — a slow start, a confident finish, no overshoot. There is no spring on this page. There is no bounce. The page does not perform; it *places*. **Scroll behavior.** Native scroll only. No scroll-snap. No locomotive-scroll. No smooth-scroll override. The reason is philosophical: scroll-jacking imposes the designer's pace on the reader, and this design's tonal contract is *the reader is received, not led*. IntersectionObserver triggers the stagger reveals at `threshold: 0.18, rootMargin: "-12% 0% -28% 0%"` — well within the upper-third of the viewport, so reveals happen *as the visitor arrives*, not before. **Reduced motion.** If `prefers-reduced-motion: reduce`, all stagger reveals collapse to a single 200ms opacity fade per zone. The page remains usable, the silence remains intact, the room is still breathing. **Responsive collapse.** Below 920px, the 16-column grid becomes 8-column with 16px outer margins. Inscriptions span 6 of 8 cols. Glass cards stack vertically into a single column at 100% inscription width. The Empty Band shrinks to 16 × `--ma` (it is still load-bearing). Below 480px, Bebas Neue's wordmark drops to 3rem; everything else retains hierarchy. The page never sprouts a hamburger menu, because there is **no nav**. **What the page must never do** (negative implementation contract): - Never render a primary-CTA button. Never render *any* button. - Never render a stat-grid (no "3,000+ utterances"). The site asserts no quantities. - Never render pricing. The site sells nothing visible. - Never render testimonials. The voice on the page is the only voice. - Never render a logo-cloud, partner-strip, or "as seen in" row. - Never render a newsletter signup or email-capture. - Never render a contact-form, social-icon strip, or share-buttons. - Never animate Bebas Neue's tracking on hover (the inscription is fixed; that is the point). - Never auto-play anything, anywhere. The page is silent until the visitor scrolls. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Muji as terracotta-warm, not cream-cool.** Muji sits at 1% in the aesthetic frequency analysis — almost vacant. The 1% that exists pairs muji with cool cream-and-paper-white palettes, since that is muji's canonical Tokyo-loft register. glolos is **the first muji site in the corpus rendered in warm Anatolian terracotta** — a chromatic and cultural recontextualization of the muji-grade restraint, applied to a Mediterranean rather than Japanese palette. This single move claims aesthetic territory that no other design in the 210-file corpus occupies. 2. **Authoritative as ma, not opulence.** Authoritative-tone sites in the corpus (7%) overwhelmingly reach for navy gradients, marble columns, gold-on-black luxury, or scholarly-leather skeuomorph. glolos refuses *all* of these and asserts authority instead through **negative space + warm restraint + carved-stone typography**. This is, as far as the corpus shows, the only authoritative site that derives its authority from the *absence* of opulence rather than its presence. 3. **Warm glassmorphism on warm background.** Glassmorphic-cards (9%) and glassmorphism-aesthetic (67%) both lean overwhelmingly toward cool-blue translucent panels on dark backgrounds. glolos's six compass-cards are **the corpus's first warm-tinted glass on warm-tinted cream** — gold-rimmed, terracotta-bled, no blue anywhere. This recolors the entire glass-aesthetic vocabulary toward Mediterranean rather than aerospace. 4. **Cultural motif as multi-script typography, not festival-imagery.** Cultural-motif sites (5%) typically reach for festival-color, national iconography, textile patterns, or location-specific ornamentation. glolos reframes *cultural* as **the carriage of one concept across six writing systems** — Greek, Sanskrit, Arabic, Latin, Hebrew, Chinese/Japanese — using only typography, no decorative ornament. The cultural motif is *the act of inscription itself, replicated across traditions*. 5. **Bebas-bold as carved-stone, not advertising-display.** Bebas-bold (5%) is overwhelmingly used in the corpus for marketing-display headlines, sports-style impact, and y2k-condensed callouts. glolos uses Bebas Neue **as if it were chiseled into terracotta** — loose tracking, warm color, ma-surrounded, with no advertising affect whatsoever. This recasts a face usually associated with energetic display into a *meditative inscriptional* register. 6. **Ma-negative-space as warm room, not gallery white.** Ma-negative-space (7%) is currently rendered, where it appears, with cool gallery-white surfaces and monochrome typographic accents. glolos is the **first warm-toned ma in the corpus** — the negative space is terracotta-cream, the empty band is heated by an upper-window radial gradient, and the silence reads as Mediterranean afternoon rather than Tokyo gallery. 7. **No CTAs, no buttons, no forms, no quantities, no chrome.** Per the implementation negative contract above, glolos contains zero conversion surfaces, zero quantitative claims, zero interactive forms, zero footer chrome. Most authoritative sites in the corpus carry at least a contact-strip, a "request a demo" button, or a credentials-row. glolos carries *nothing of the kind*. The radical absence is itself the design argument and the brand position. 8. **Stagger applied to inscription rather than UI.** Stagger (79%) is overwhelmingly applied to feature-cards, hero-headlines, and grid items in the corpus. glolos applies stagger **letter-by-letter to inscription glyphs at the speed of carving** (70ms per character). The pattern that the rest of the corpus uses for marketing-energy is here used for *meditative-pacing of language* — same animation primitive, opposite tonal register. **Documented chosen seed:** `aesthetic: muji, layout: ma-negative-space, typography: bebas-bold, palette: terracotta-warm, patterns: stagger, imagery: glassmorphic-cards, motifs: cultural, tone: authoritative` — exact planned seed from the orchestrator assignment, no substitutions. **Avoided patterns from frequency analysis:** photography (99%), full-bleed (93%), card-grid (85%), centered (83%, refused for asymmetric ma-zones), parallax (95%), cursor-follow (85%, refused — the cursor witnesses, does not chase), spring (84%, refused — no bounce), magnetic (78%, refused — no attraction), warm-palette-as-gradient (97%, refused — palette is octatonic-flat, not gradient), mono typography (94%, refused — no code on this page), hand-drawn aesthetic (96%, refused — every glyph is industrial-condensed or scholarly-serif, none hand-drawn), pastoral-romantic tone (34%, refused — the mood is reception-hall, not pasture), warm-inviting tone (27%, refused — warm but not inviting; the room receives, it does not invite), photography (99%, refused entirely — zero raster images on the page).