# Design Language for paraligm.com ## Aesthetics and Tone **paraligm.com** is read as a deliberate misspelling — *paradigm* with the 'd' quietly dropped, as if the word itself has been worn smooth by travel, like a stone carried in a pocket through twenty countries. The visual direction is **street-style filtered through a naturalist's eye**: the raw, unhurried confidence of someone who dresses from market stalls in Oaxaca and Marrakech, who wears indigo-dyed cloth next to handwoven rushes, who photographs lichen on concrete walls. This is not "streetwear" in the branded sense — it is the unmediated visual culture of people moving through landscapes. The aesthetic is **calm street-style**: high contrast silhouettes against earthy, muted grounds, with moments of unexpected organic texture. Think: a linen-covered notebook left on a sun-baked terrace. A hand-stamped block print on cloth the color of raw clay. A photograph of ferns growing through cracked stone. The mood is unhurried and anchored — nothing bounces, nothing pulses, nothing screams. The site breathes slowly and trusts the eye. **Tone:** calm-serene, grounded-earthy. Not academic, not commercial. The voice of someone who has been many places and brought back very little except a changed way of seeing. **Inspiration references:** Kinfolk magazine crossed with Lucie Rie ceramics crossed with a Japanese textile archive — the quietude is absolute, but the surfaces are never bare. ## Layout Motifs and Structure The page uses a **sidebar layout** that does not behave like a conventional sidebar. The left column (22vw, min 240px) is a **fixed landscape column** — it never scrolls. It holds the wordmark, a vertical navigation system made of single natural-language phrases (not icons, not abbreviations), and a slowly morphing SVG motif in the lower half that traces the outline of a leaf or stone form at about 40% opacity. The right column (78vw) is the scrollable content field. **Macro structure:** 1. **Fixed Left Column.** Background: `#2C2416` (deep bark-brown). The wordmark `paraligm` is set in display-bold at 3.2rem, tracking +0.08em, in `#E8D5B0` (raw linen). Below the wordmark, five navigation entries at 0.85rem, each a short phrase: *the shape of change*, *materials*, *field notes*, *objects*, *reach*. At the base of the column, a single 180×180px SVG morphing shape — a continuous closed path that slowly transitions between a river-stone silhouette, a leaf cross-section, and a wind-eroded pebble. Color: `#7D6B4F` at 35% opacity. No transition faster than 8 seconds. 2. **Right Content Field.** Background: `#F0E8D8` (warm bleached linen). Full-height scroll. Content is laid out as a series of **editorial panels**, each 100svh tall. Panels alternate between full-bleed images (treated with a subtle grain texture and slight desaturation) and text panels with a single large pull-quote at oversized display scale (clamp(4rem, 8vw, 9rem)). No panel has more than 80 words of body text. 3. **Micro-grid within right column.** Each panel uses a 12-column internal grid but content only occupies columns 2–9 (leaving breathing room on both edges). On mobile, the sidebar collapses into a horizontal top bar at 56px height; the right column becomes full-width single column. 4. **No hero section, no CTA, no stat blocks.** The first panel is a full-bleed image of a weathered stone surface with a single line of text centered at the 60% vertical mark: *every system leaves a trace*. 5. **Spatial relationships.** Margins are generous — minimum 3rem between any two content elements in the right column. Section transitions are handled by a 1px `#B5A48A` horizontal rule that fades in on scroll, not by background color changes. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark / Pull-quotes:** [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, weight 400, used at large scale only (wordmark 3.2rem in sidebar, pull-quotes clamp(4rem, 8vw, 9rem) in right column). The compressed geometric letterforms read as street signage from a distance and carved stone up close. - **Navigation / Section Labels / Captions:** [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed) — weight 300, tracking +0.12em, all-caps. Used at 0.75rem for captions and 0.85rem for navigation. This condensed humanist sans bridges the display boldness of Bebas with the body text. - **Body / Field Notes / Long Text:** [`Fraunces`](https://fonts.google.com/specimen/Fraunces) — weight 300, italic for pull-quote attribution and field note headings; weight 400 upright for body text. Fraunces is a "wonky" optical-size serif with subtle ink traps and soft contrast — it reads like type set in the field, not in a design studio. Body text at 1.05rem, line-height 1.75. **Palette — earth-tones, low-saturation, high-presence:** | Name | Hex | Use | |------|-----|-----| | Bark | `#2C2416` | Sidebar background, primary text on light | | Raw Linen | `#F0E8D8` | Main content background | | Pale Linen | `#E8D5B0` | Sidebar wordmark, light text on dark | | Sandstone | `#B5A48A` | Rules, borders, muted UI elements | | Umber Clay | `#7D6B4F` | Secondary text, sidebar nav, SVG motif | | Sage Dusk | `#5E6B52` | Accent — used sparingly on active nav state and SVG leaf motif | | Charred Stone | `#1A1610` | Drop-shadow tone, absolute darkest shade | No pure black (`#000000`). No pure white (`#FFFFFF`). No gradients. No transparency layers except the sidebar SVG motif at 35% opacity. Color relationships are all analogous earth-tone — warm ochre-brown-green. The palette reads as undyed, sunlit, aged. ## Imagery and Motifs **Imagery is nature-elements** — but not the clichéd "forest stock photo" variety. All images are treated with a **dual-process visual treatment**: grain overlay at 18% opacity (via a CSS `noise` SVG filter) and a slight desaturation (-15%) bringing any color photograph toward the earth-tone palette range. Subject matter: - Close-up macro textures: lichen on granite, dried seed pods against white paper, cross-section of river stone, woven rushes laid flat - Landscape silhouettes at dusk: a single tree against a pale sky, a hillside of dry grass, a coastal bluff with mist - Human-made natural objects: unglazed ceramic vessel on a wood shelf, rolled linen, indigo-dyed cloth in folds - Never: people's faces, cityscapes, technology, or abstract digital graphics **Cultural motifs** are embedded as micro-details, not as decoration: - **Block-print pattern strip:** A 32px-tall repeating SVG strip that runs along the bottom edge of the fixed sidebar, using a simplified West African kente warp pattern abstracted to two colors (`#7D6B4F` and `#5E6B52`). Drawn as a single inline SVG, no external asset. - **Stone-morph shape:** The lower-sidebar SVG traces between three closed organic shapes derived from actual stone-tool silhouettes (hand axe, river stone, obsidian flake). Morphing is CSS keyframe animation using `d` attribute interpolation on an SVG ``. - **Textile weave texture:** A 120×120px SVG pattern (used as CSS `background-image`) applied at 4% opacity to the right content column background — a simple over-under warp/weft grid pattern in `#B5A48A`. **Icon approach:** No icon fonts, no emoji, no decorative flourishes. The only "icons" are the three SVG morph shapes and the textile pattern strip. Everything else is typographic. ## Prompts for Implementation **The story to tell.** A visitor arrives at paraligm.com as if opening a slow travel journal left on a table at a pottery studio. There is no product to buy, no service to hire. There is a way of seeing that has been assembled slowly — from woven cloth and carved stone and the pattern language of cultures that built things to last. The visitor scrolls through five panels, each one a different material: stone, fiber, clay, water, wood. Each panel is a full-screen image with a single line in Bebas Neue at large scale, and below the fold a short paragraph in Fraunces that reads like a field note. **Implementation priorities:** 1. **SVG morph animation in the sidebar.** Use a `` element with three `d` attribute keyframe states (stone1, stone2, stone3). Transition duration: 24 seconds per cycle, `animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95)`, `animation-iteration-count: infinite`. The shape never snaps — only drifts. Opacity: 0.35 on `#7D6B4F`. 2. **Grain texture filter.** Define a single `` SVG filter (`baseFrequency: 0.65`, `numOctaves: 3`, `type: fractalNoise`) applied via CSS `filter: url(#grain)` to all right-column images. This replaces any CSS `backdrop-filter` or canvas noise — it is a single inline SVG `` element. 3. **Sidebar fixed, content scrolls.** Use CSS Grid at the page level: `grid-template-columns: 22vw 1fr`. Left column: `position: sticky; top: 0; height: 100svh; overflow: hidden`. Right column: `overflow-y: scroll`. No JavaScript required for this layout. 4. **Panel transitions.** Each full-bleed panel is `height: 100svh`. As the visitor scrolls, the previous panel slides under the incoming panel using `position: sticky` on each panel with `top: 0`. This creates a "stacking panels" effect without JavaScript parallax. The `#B5A48A` 1px rule appears via `scroll-timeline` and `@keyframes` fade on the separator element. 5. **Block-print strip.** The 32px kente-inspired strip at the bottom of the sidebar is a `` with `` definition and a `` that fills the sidebar width. Pattern repeat is 16px wide. Two rectangles per cell — one diagonal, one horizontal — using only the two umber colors. 6. **Typography scale.** Sidebar wordmark: 3.2rem Bebas Neue, `letter-spacing: 0.08em`. Pull-quotes (right column): `font-size: clamp(3.5rem, 7vw, 8.5rem)`, Bebas Neue, line-height 0.92. Body text: 1.05rem Fraunces 400. Captions: 0.75rem Barlow Condensed 300, all-caps, `letter-spacing: 0.14em`. 7. **Color application.** The sidebar never changes color — always `#2C2416` background. The right column background is always `#F0E8D8`. Text on dark: `#E8D5B0`. Text on light: `#2C2416`. Active nav state: `#5E6B52` left border (3px) on the nav phrase, no background change. 8. **No JavaScript animations other than SVG morph.** All hover states are CSS-only (`:hover` transitions at 0.3s ease). No GSAP, no Framer Motion, no scroll-jacking. The morph is CSS keyframes. The only dynamic behavior is scroll-driven (CSS `@scroll-timeline`). **AVOID:** Hero sections with large background video. Rotating carousels. CTA buttons with drop shadows. Pricing grids. Testimonial carousels. Parallax background attachments (`background-attachment: fixed` — use sticky instead). Any animation faster than 0.3s (except the grain, which is static). ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Street-style aesthetic at calm-serene tone — a combination with 0% prior usage at this intersection.** The frequency report shows street-style at 2% overall and calm-serene at 4%, but no design has paired them. Most street-style designs in the corpus are high-energy, high-contrast, typographic loudness. paraligm.com uses the structural confidence of street dressing (the sidebar as a fixed statement, the oversized display type, the uncompromising earth palette) without any energy or urgency. The result reads as a street-style aesthetic that has been left in sunlight for twenty years until its saturation faded to linen. 2. **SVG stone-morph animation as the only decorative element.** The corpus uses morph at 8% — but always as hover effects on buttons or blob background shapes. Here, the morph is the *only* decorative element on the entire page, running continuously in the sidebar at 35% opacity, cycling through stone-tool silhouettes. No other registry design uses morph as a slow geological metaphor rather than a UI affordance. 3. **Sidebar as cultural-material column, not navigation utility.** The frequency report shows sidebar at 28%, always as navigation infrastructure. paraligm.com uses the sidebar as a *material statement* — the dark bark-brown column with the block-print strip at the base and the morphing stone in the lower half is a designed artifact in itself. It carries the domain's cultural motif work (kente geometry, stone-tool forms) rather than leaving motifs to the content area. 4. **Zero gradients, zero glassmorphism, zero backdrop blur.** The palette is entirely flat. The corpus uses gradient at 77%. This design is one of the minority that refuses gradients entirely, using the contrast between `#2C2416` and `#F0E8D8` as the only drama — a 94% lightness step between the two zones. 5. **Fraunces as the body serif over dominant corpus choices.** The corpus over-indexes on Cormorant Garamond and EB Garamond for editorial serifs. Fraunces, a "wonky" variable optical-size serif designed in 2020 with intentional optical axis variation, has not appeared in reviewed designs. Its slightly irregular stroke contrast — readable as handpress printing — fits the natural-materials visual language without the aristocratic connotations of Garamond. **Planned seed:** `aesthetic: street-style, layout: sidebar, typography: display-bold, palette: earth-tones, patterns: morph, imagery: nature-elements, motifs: cultural, tone: calm-serene` **Avoided patterns (from frequency analysis):** parallax (77% — not used), stagger (53% — not used), scroll-triggered JS (35% — replaced with CSS scroll-timeline), spring animation (32% — not used). Avoided overused aesthetics: hand-drawn (58%), editorial (51%), botanical (27%). Avoided overused layouts: centered (85% — sidebar is used instead, with off-center right column), full-bleed background color sections (67% — using sticky-stack instead). Avoided overused palettes: gradient (77%), pastel (9%), duotone (11%).