# Design Language for footprint.market ## Aesthetics and Tone footprint.market is a monolith emerging from fog -- an evolved-minimal site that treats emptiness not as absence but as geological presence. Every element feels carved from a single block of Carrara marble by a sculptor who believes in the eloquence of the nearly-blank surface. The evolved-minimal aesthetic here transcends the sterile whitespace of corporate minimalism; it is a minimalism that has aged, accumulated patina, and arrived at a profound stillness. Surfaces carry the veined complexity of marble, but the composition remains radically sparse. The tone is futuristic-cutting-edge -- not through chrome and holography but through the radical proposition that the future is about having less, seeing more clearly, and feeling the weight of each remaining element. The site speaks sparingly. When it does speak, the words move -- kinetic typography that unfurls like geological time compressed into seconds. There is no decoration. There is only the mountain. Visual inspiration: the monolithic architecture of Tadao Ando's concrete meditation spaces; the marble emptiness of a Roman basilica at dawn before the tourists arrive; the kinetic typography experiments of Zuzana Licko rendered in stone rather than pixels. ## Layout Motifs and Structure The layout uses **layered-depth** -- elements exist at distinct visual depths, creating a sense of looking into a geological cross-section. Unlike parallax (which links depth to scroll), this depth is structural and static: background layers are visually behind foreground elements through opacity, blur, scale, and shadow. **Depth Layers:** - **Layer 0 (Background):** A full-viewport marble texture -- CSS-generated using layered radial gradients and SVG noise filters. Soft grey-white (#f5f2ee) base with subtle veining in warm grey (#c8c0b4). Fixed, never scrolls. - **Layer 1 (Content):** Floating panels with no visible borders, distinguished from the background only by a slight increase in brightness and a delicate box-shadow. Max-width 800px, centered. - **Layer 2 (Kinetic Type):** Animated text elements that float above content panels, casting soft shadows downward. These are the primary visual events of the site. **Section Flow:** 1. **The Monolith (Hero):** 100vh. The word "FOOTPRINT" appears letter by letter via kinetic animation, each character rising from below the viewport like stone slabs emerging from earth. Below, "MARKET" fades in as a single unit after the animation completes. Total duration: 3.5 seconds. 2. **The Strata:** Three content panels stacked vertically with 160px spacing. Each panel contains a single thought -- one paragraph, no headings. The panels are slightly different widths (720px, 760px, 680px) creating a subtle asymmetry that prevents the centered layout from feeling rigid. 3. **The Vein:** A single horizontal line that stretches across the full viewport width, rendered as a marble-vein SVG path (organic, slightly irregular) in warm grey (#c8c0b4). This is the only decorative element in the entire site. 4. **The Summit:** A final 100vh section. The mountain motif -- an SVG of a mountain range rendered in thin (#d0c8bc, 0.5px) strokes against the marble background. Below the mountain, a single sentence. Below that, the domain name small. ## Typography and Palette **Typography:** - **Display / Kinetic Type:** "Sora" (Google Fonts) -- a geometric sans-serif with a distinctive personality: sharp terminals, wide proportions, and a modern authority. Used at 5rem-10rem for the kinetic hero text and section-ending statements. Weight: 700. Letter-spacing: -0.04em. The kinetic-animated treatment means these characters don't just sit on the page -- they arrive, moving vertically or scaling from 0 to 100%, each with individual timing. Sora's clean geometry makes each letterform legible even mid-animation. - **Body / Content:** "Source Serif 4" (Google Fonts) -- a refined serif with excellent readability and a scholarly gravitas. Used at 19px/1.75 for body text. Weight: 400 for body, 600 for rare emphasis. The generous line-height and serif details create a reading experience that feels like encountering text etched into stone -- deliberate, unhurried. - **Accent / Metadata:** "Sora" at 11px, weight 400, letter-spacing: 0.15em, uppercase. Used for the minimal metadata and the domain name repetitions. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Marble Base | Warm stone white | #f5f2ee | Primary background, marble texture base | | Marble Vein | Warm grey | #c8c0b4 | Marble veining, decorative line, mountain SVG | | Shadow Depth | Soft charcoal | #3d3a36 | Box-shadows, text shadow for kinetic type | | Text Primary | Deep graphite | #1a1917 | All body text, headlines | | Text Secondary | Stone grey | #8a847a | Metadata, timestamps, muted elements | | Mountain Line | Pale taupe | #d0c8bc | Mountain range SVG, thin decorative strokes | | Accent Warm | Barely-there blush | #e8ddd4 | Content panel background tint (barely visible) | The palette is monochrome -- a study in greys and warm stones with zero chromatic saturation. The "colors" are variations of warmth and coolness within the grey spectrum. This radical restraint makes every element equally weighted, forcing the kinetic typography to become the sole source of visual dynamism. ## Imagery and Motifs **Marble Texture as World:** The primary imagery is marble-texture -- a CSS-generated surface that covers the entire viewport. Built using: - Base: radial-gradient(ellipse at 30% 40%, #f5f2ee, #ece6dc) - Veining: SVG filter (feTurbulence baseFrequency="0.015" numOctaves="5") layered at 15% opacity, colorized to #c8c0b4 - The result resembles polished Calacatta marble -- predominantly white with soft grey veining **Mountain-Landscape as Singular Motif:** The mountain-landscape motif appears exactly once: a thin-line SVG rendering of a mountain range silhouette in The Summit section. The mountains are not dramatic alpine peaks but rolling, ancient hills -- worn smooth by time. Drawn with a single continuous SVG path, 0.5px stroke, no fill. This solitary landscape element gains enormous visual weight precisely because it is the only representational imagery on the entire site. **Card-Flip Interaction for Content Panels:** Each content panel in The Strata has a subtle card-flip potential. On hover (desktop) or tap (mobile), the panel performs a gentle 3D rotation -- rotateY(2deg) -- just enough to reveal a slight depth and a hair-thin edge shadow, suggesting the panel is a physical card resting on the marble surface. The flip is not a full 180-degree turn but a micro-tilt that reinforces the layered-depth spatial model. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site is a vertical journey from void to word to thought to landscape to silence. The hero occupies 100vh and demands attention through kinetic typography -- the user cannot scroll past it quickly because the animation holds the eye. Each subsequent section is a meditation, not a sales pitch. **Kinetic Typography System:** The hero text "FOOTPRINT" uses a staggered letter-by-letter reveal: each character starts at transform: translateY(100%) opacity(0) and animates to translateY(0) opacity(1) over 600ms with cubic-bezier(0.16, 1, 0.3, 1). Stagger delay between letters: 80ms. After all letters arrive, "MARKET" fades in as a block over 800ms with a 400ms delay. The word is set in Source Serif 4 italic 300 at 2rem -- a whisper after the thunder. In The Summit section, the closing sentence uses a similar kinetic treatment but word-by-word rather than letter-by-letter, with 200ms stagger. **Card-Flip Micro-Interaction:** Content panels: on hover, transform: perspective(1000px) rotateY(2deg) over 600ms with cubic-bezier(0.25, 0.8, 0.25, 1). A subtle box-shadow shift accompanies the tilt: the shadow moves to the opposite side of the rotation, reinforcing the 3D illusion. On mobile, this triggers on tap and resets after 2 seconds. **Responsive Behavior:** On mobile (below 640px), the kinetic hero text scales to 3.5rem. Content panels go full-width with 20px padding. The mountain SVG scales but maintains its aspect ratio. The marble texture remains fixed. **AVOID:** CTA buttons, pricing grids, stat counters, testimonial carousels, gradient mesh backgrounds, neon accents, card grid layouts, icon systems, anything colorful. This site is a stone monument, not a marketplace. ## Uniqueness Notes **Differentiators from other designs:** 1. **Evolved-minimal aesthetic treated as geological metaphor:** While minimalist designs exist in the collection (7%), evolved-minimal is conceptually distinct -- this site's minimalism is not about tech cleanliness but about geological patience, marble erosion, and the eloquence of ancient surfaces. 2. **Kinetic typography as the sole dynamic element in a monochrome world:** Kinetic-animated typography appears nowhere else in the collection. Here, the movement of letterforms becomes the primary visual event precisely because everything else is static stone. 3. **Marble texture as full-viewport environment (not accent):** Marble-texture imagery is nearly absent (appears in no other design as primary environment). The CSS-generated marble covers the entire world of the site, creating a unique material identity. 4. **Card-flip as micro-interaction rather than content reveal:** Card-flip (5% frequency) is typically used for before/after or front/back content. Here it is reduced to a 2-degree tilt -- a spatial whisper rather than a full flip -- reinforcing depth without disrupting reading flow. 5. **Single representational image in the entire site:** The lone mountain-range SVG (mountain-landscape motif, 1% frequency) gains extraordinary visual power by being the only recognizable form in a field of abstract marble and kinetic text. **Documented Seed/Style:** aesthetic: evolved-minimal, layout: layered-depth, typography: kinetic-animated, palette: monochrome, patterns: card-flip, imagery: marble-texture, motifs: mountain-landscape, tone: futuristic-cutting-edge **Avoided Overused Patterns:** - corporate aesthetic (62%) -- evolved-minimal instead - asymmetric layout (94%) -- layered-depth (9%) instead - warm palette (100%) -- monochrome (9%) instead - parallax patterns (98%) -- card-flip (5%) instead - mono typography (98%) -- kinetic-animated approach instead - tech motifs (96%) -- mountain-landscape (1%) instead - friendly tone (64%) -- futuristic-cutting-edge (5%) instead - minimal imagery (94%) -- marble-texture instead