# Design Language for gabs.wiki ## Aesthetics and Tone gabs.wiki is a leather-bound encyclopedia that has been digitized by a nostalgic archivist -- a skeuomorphic reference site where every interface element mimics a physical counterpart: pages with visible thickness, tabs with embossed labels, margins with pencil annotations, and an aged-paper surface that feels warm under imaginary fingertips. The skeuomorphic aesthetic is applied with love rather than irony: this site genuinely believes that digital information is better experienced when it carries the tactile memory of physical books. Value concepts (gabs = price in Korean) are presented as encyclopedia entries, each page a specimen of careful editorial craft. The tone is minimal -- not minimalist in the design sense, but minimal in voice. The site says only what it needs to say. Entries are concise, definitions are precise, and there is no editorial commentary. The encyclopedia speaks through structure, not personality. This restraint creates authority: like a dictionary, the less it says, the more each word weighs. Visual inspiration: the leather-tooled covers of 19th-century Encyclopaedia Britannica volumes; the page-edge gilding visible when a thick reference book is closed; the card catalog drawers of a pre-digital library; the aged-paper textures of a well-loved family cookbook. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture adapted for encyclopedia reference: two-column text layout with marginalia, headers, and cross-reference sidebars, mimicking the spread of an open reference book. **Magazine-Spread as Encyclopedia:** - Desktop: 2-column main text area (each column 340px) with a 40px gutter, centered on a 960px max-width page - Left margin (120px): contains section labels, entry numbers, and small paper-aged decorative elements - Right margin (80px): contains cross-reference notes in smaller type - Each "page" section has a visible paper edge shadow on the right, creating the illusion of a book's page thickness **Section Flow:** 1. **The Cover (Hero):** A leather-texture banner at top containing "GABS.WIKI" in serif-revival type with tooled-leather embossing effect (CSS text-shadow creating a debossed look). Below: the subtitle in small caps. 2. **The Index:** A table of contents formatted as encyclopedia entry headers (A-Z or by category), each a link. Styled with the traditional encyclopedia formatting: bold entry word, phonetic guide, part of speech. 3. **The Entries:** The main content: encyclopedia-style entries in two-column layout. Each entry begins with a bold headword, followed by definition and discussion. Entries are separated by thin horizontal rules. 4. **The Appendix:** A single-column supplementary section with methodology notes and source references. 5. **The Back Cover:** Domain name centered on a leather-texture band, mirroring the hero. ## Typography and Palette **Typography:** - **Display / Headwords:** "Lora" (Google Fonts) -- a serif with calligraphic roots and balanced proportions, perfect for the serif-revival approach. Used at 2.5rem-4rem for the hero and major section headings. Weight: 700. The warmth of Lora's curves evokes the typefaces used in 19th-century reference works. - **Body / Entries:** "Lora" at 16px/1.7, weight 400 for body text, 700 for headwords in entries. The two-column layout with Lora at this size and leading creates an authentic encyclopedia reading experience. - **Accent / Marginalia:** "Lora" italic at 13px for margin annotations and cross-references. "Lora" small-caps variant at 11px, letter-spacing: 0.12em for section labels and navigation. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper Cream | Aged cream | #f8f3e8 | Main page background | | Paper Shadow | Darker cream | #e8dcc8 | Page-edge shadow, gutter tint | | Leather Brown | Tooled leather | #5a3a20 | Hero/footer leather texture base, headword color | | Leather Light | Warm tan | #8a6a48 | Leather texture highlights | | Text Primary | Dark ink | #2a2018 | All body text | | Text Secondary | Faded ink | #6a5a48 | Marginalia, cross-references, secondary text | | Pastel Rose | Book ribbon | #d4a0a0 | Section tab accents, rare color highlight | | Pastel Blue | Bookmark | #a0b8d4 | Cross-reference links, rare color highlight | | Gold Gilt | Page gilding | #c8a050 | Decorative rules between entries, page-edge gilding | The palette is pastel -- not the bright pastels of modern design, but the muted, aged pastels of antique book endpapers. The dominant impression is cream and leather brown, with the pastel rose and blue appearing only as accent colors (like the ribbon bookmark and the index tabs of a physical reference book). ## Imagery and Motifs **Paper-Aged Texture:** The primary imagery is paper-aged -- a CSS-generated aged-paper surface: - Base: #f8f3e8 with SVG noise filter (feTurbulence baseFrequency: 1.2, numOctaves: 3) at 4% opacity - Subtle foxing spots: randomly positioned radial-gradients in #e0d0b0 at 3% opacity - The texture covers the entire page area and is consistent throughout **Layered-Depth Motifs:** The layered-depth motif creates the physical illusion of a book: - Page-edge shadow on the right side of each "page" section: a 4px gradient from #e8dcc8 to transparent - The gutter between columns has a subtle shadow suggesting the spine of an open book - The leather hero/footer sections sit "above" the page content via box-shadow **Skeleton-Loading Pattern:** When the page loads, entry text appears via a skeleton-loading animation: - Text blocks begin as grey rectangles (#e0d8c8) that match the expected text dimensions - Over 400ms, the grey rectangles dissolve (opacity 1 to 0) while the actual text fades in (opacity 0 to 1) - This creates the effect of an encyclopedia page "developing" like a photograph - Fires once on initial load, not on scroll ## Prompts for Implementation **Full-Screen Narrative Experience:** The encyclopedia format creates a reference experience rather than a narrative scroll. The user scans the index, clicks to entries, and reads in the two-column format. The skeuomorphic details (leather, paper, page edges) create an immersive physical-book simulation. **Two-Column Text Implementation:** Use CSS columns: column-count: 2; column-gap: 40px; column-rule: 1px solid #e8dcc8 on the main content container. Entries use break-inside: avoid to prevent mid-entry column breaks. **Leather Texture:** Hero and footer: background: #5a3a20 overlaid with SVG noise (feTurbulence baseFrequency: 0.5, numOctaves: 4) at 10% opacity, plus a subtle embossed grain effect using inset box-shadows. The "GABS.WIKI" text uses text-shadow: 1px 1px 0 #3a2210, -1px -1px 0 #7a5a38 to create a debossed/tooled appearance. **Responsive Behavior:** On mobile (below 768px), the two-column layout collapses to single column. Margins disappear. The leather header reduces in height. Paper texture remains. Skeleton-loading still fires. **AVOID:** CTA buttons, search bars (despite being a wiki, keep it pure), user-generated content interfaces, modern flat design, neon colors, card grids, anything that looks like Wikipedia's interface. ## Uniqueness Notes **Differentiators from other designs:** 1. **Skeuomorphic aesthetic (1% frequency):** One of the rarest aesthetics, and the only design that creates a full physical-book simulation with leather covers, page edges, and paper texture. 2. **Magazine-spread as encyclopedia layout (3% frequency):** The two-column reference-book format with marginalia is unique -- it adapts magazine-spread conventions for encyclopedia content. 3. **Skeleton-loading as page-development effect (3% frequency):** The skeleton-loading pattern is recontextualized as photographic development -- text "developing" on the page. 4. **Paper-aged imagery as complete environment:** While paper-aged exists (3%), using it as the sole visual surface for the entire content area creates a unique material consistency. 5. **Layered-depth as physical book simulation:** The layered-depth motif creates page-edge shadows and spine gutters that simulate a physical open book -- unique in the collection. **Documented Seed/Style:** aesthetic: skeuomorphic, layout: magazine-spread, typography: serif-revival, palette: pastel, patterns: skeleton-loading, imagery: paper-aged, motifs: layered-depth, tone: minimal **Avoided Overused Patterns:** - corporate aesthetic (62%) -- skeuomorphic (1%) instead - asymmetric layout (94%) -- magazine-spread (3%) instead - warm palette (100%) -- pastel (5%) instead - parallax patterns (98%) -- skeleton-loading (3%) instead - mono typography (98%) -- serif-revival (9%) instead - tech motifs (96%) -- layered-depth instead - friendly tone (64%) -- minimal instead - minimal imagery (94%) -- paper-aged (3%) instead