# Design Language for footprint.markets ## Aesthetics and Tone footprint.markets is a collision in progress -- an avant-garde experiment where environmental data crashes through the orderly facade of a financial markets interface at a 15-degree diagonal. Nothing sits level. Content blocks slice across the viewport at aggressive angles, their edges sharp enough to cut, their colors divided into stark duotone pairs that vibrate against each other with the visual tension of a Rodchenko constructivist poster. The avant-garde aesthetic here is confrontational: it refuses the horizontal calm of conventional web design and insists that environmental markets are not business as usual. The tone is energetic -- a kinetic urgency that propels the user forward through slashing diagonal sections. Text is condensed, compressed, urgent. Numbers are large. Statements are declarative. The site feels like a transmission being broadcast from the front lines of an ecological trading revolution, encoded in the angular visual language of early 20th-century avant-garde graphic design. Visual inspiration: El Lissitzky's "Beat the Whites with the Red Wedge" reimagined for carbon markets; Alexander Rodchenko's photomontage compositions translated to environmental data visualization; the diagonal energy of Zaha Hadid's early architectural drawings applied to web sections. ## Layout Motifs and Structure The layout uses **diagonal-sections** -- each content section is a parallelogram rather than a rectangle, created by CSS clip-path or skewY transforms. Sections overlap at their diagonal edges, creating the visual effect of tectonic plates sliding over each other. **Diagonal System:** - Each section is skewed by 6-8 degrees (alternating positive and negative) - Content within sections is counter-rotated to remain readable - Sections overlap by 80px at their intersections, creating depth through layering - Background colors alternate between the two duotone colors **Section Flow:** 1. **The Wedge (Hero):** A sharp diagonal division splits the viewport -- left half in deep forest (#1a2e1a), right half in burnt cream (#f0e4d0). The wordmark "FOOTPRINT.MARKETS" is set in condensed type, running along the diagonal division line at the angle of the cut. 2. **Data Slabs:** Three diagonal sections, each containing a single data point and explanatory text. The sections alternate colors (forest/cream) and angles (+7deg/-7deg/+7deg), creating a zigzag visual rhythm. 3. **The Manifesto Strip:** A narrow horizontal band (breaking the diagonal pattern deliberately) with a single line of text stretching edge to edge, scrolling slowly via CSS marquee animation. 4. **Nature Collision:** A full-viewport section where nature-element SVGs (leaf silhouettes, root systems, watershed patterns) are scattered across the surface at diagonal angles matching the section geometry. 5. **Exit Wedge:** Mirrors the hero -- the same diagonal division, but now the domain name sits small and centered where the two halves meet. ## Typography and Palette **Typography:** - **Display / Headlines:** "Barlow Condensed" (Google Fonts) -- the definitive condensed sans-serif for high-impact display. Used at 4rem-8rem for section headers and data points. Weight: 800. All uppercase. Letter-spacing: -0.02em. The extreme vertical compression of Barlow Condensed creates letterforms that feel like they could slice through the diagonal sections. - **Body / Content:** "Barlow" (Google Fonts) -- the proportional companion to Barlow Condensed. Used at 16px/1.6 for body text. Weight: 400 for body, 700 for data labels. Keeping both headline and body in the Barlow family creates visual cohesion across the angular chaos. - **Accent / Data Values:** "Barlow Condensed" at weight 300, 48px for large numerical data displays. The thin weight at large size creates elegant contrast with the heavy headlines. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Forest Deep | Dark ecological green | #1a2e1a | Primary duotone color A, section backgrounds | | Burnt Cream | Warm parchment | #f0e4d0 | Primary duotone color B, alternating sections | | Text on Forest | Pale sage | #d4e0c8 | Text on dark forest backgrounds | | Text on Cream | Deep bark | #2a1e12 | Text on light cream backgrounds | | Accent Red | Signal vermillion | #e23d28 | Sparingly used -- the diagonal line itself, rare highlights | | Cultural Ochre | Earth yellow | #c8a030 | Cultural motif accents, SVG nature elements on dark sections | The palette is strictly duotone -- only two primary surface colors (forest and cream) with text colors adapted to each. The single accent red appears only along the diagonal divisions and in one or two data highlights, functioning like the red wedge in Lissitzky's poster. This duotone discipline creates maximum visual impact with minimal chromatic complexity. ## Imagery and Motifs **Nature-Elements as Angular Silhouettes:** Nature imagery is rendered as bold SVG silhouettes at diagonal orientations matching the section geometry: - Leaf forms (oak, maple) as solid fills in cultural ochre (#c8a030) or pale sage (#d4e0c8), rotated to match the prevailing diagonal angle - Root systems as branching line drawings in accent red (#e23d28), stretching across section intersections - Watershed drainage patterns as thin-line SVG networks, creating a texture that is simultaneously geographic and abstract These nature silhouettes are not centered or decoratively placed -- they crash through the layout at angles, partially clipped by section boundaries, reinforcing the collision aesthetic. **Cultural Motifs:** Cultural motifs manifest as typographic fragments from various market traditions: - Currency symbols from different nations (won, yen, rupee, euro) rendered at 200px in near-invisible opacity (5%) as background watermarks - Traditional pattern fragments (Korean geometrics, Japanese wave lines) used as section divider decorations, each 20px tall, running along the diagonal edges **Hover-Lift Interactions:** The hover-lift pattern applies to the Data Slabs -- on hover, each section lifts 8px via translateY and gains a stronger box-shadow, suggesting the diagonal plate is rising off the surface beneath it. The transition uses cubic-bezier(0.34, 1.56, 0.64, 1) for spring overshoot. ## Prompts for Implementation **Full-Screen Narrative Experience:** The diagonal sections create a physical sensation of movement even in static screenshots. On scroll, each section slides into view with a horizontal translate that emphasizes its angle -- sections skewed right enter from the left, sections skewed left enter from the right. Transition: 700ms with cubic-bezier(0.16, 1, 0.3, 1). **Diagonal Section Implementation:** Each section uses clip-path: polygon() to create parallelogram shapes. Example for a right-leaning section: clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%). Content inside uses a counter-transform (skewY with the negative angle) to keep text horizontal. Sections are positioned with negative margins (-80px) to create overlapping edges. **The Marquee Strip:** A CSS-only horizontal scroll: a single line of text duplicated and animated with translateX from 0 to -50% over 30 seconds, linear, infinite. The text is set in Barlow Condensed 800, 1.5rem, all caps, in accent red (#e23d28) on a cream background. **Responsive Behavior:** On mobile (below 768px), diagonal angles reduce from 7deg to 3deg. Section overlaps reduce to 40px. Hero text scales to 3rem. The diagonal division in the hero simplifies to a horizontal split. Nature SVGs scale down and some are hidden. **AVOID:** CTA buttons, pricing tables, rounded corners, soft gradients, card grids, cookie consent banners, testimonials, anything that reads as gentle, corporate, or reassuring. ## Uniqueness Notes **Differentiators from other designs:** 1. **Avant-garde aesthetic is nearly absent (3% frequency):** This is one of very few designs employing the avant-garde approach, and the only one that applies constructivist angular principles to environmental market content. 2. **Diagonal-sections layout is extremely rare (3%):** Most designs use horizontal section divisions. The persistent diagonal geometry here creates a fundamentally different spatial experience -- the eye is never at rest, always following angular momentum. 3. **Strict duotone palette (1% frequency):** While the collection overwhelmingly uses warm (100%) and gradient (92%) palettes, this design restricts itself to exactly two surface colors plus one accent, creating graphic impact through chromatic austerity. 4. **Nature-elements rendered as angular collisions:** Rather than decorative organic placement, nature SVGs are rotated to match the diagonal geometry, creating the unique visual effect of ecology crashing through financial structure. 5. **Hover-lift on entire diagonal sections:** The hover-lift pattern (1% frequency) is applied not to cards or buttons but to massive diagonal content sections, making the entire page feel like a stack of tectonic plates that the user can disturb. **Documented Seed/Style:** aesthetic: avant-garde, layout: diagonal-sections, typography: condensed, palette: duotone, patterns: hover-lift, imagery: nature-elements, motifs: cultural, tone: energetic **Avoided Overused Patterns:** - corporate aesthetic (62%) -- avant-garde (3%) instead - asymmetric layout (94%) -- diagonal-sections (3%) instead - warm palette (100%) -- duotone (1%) instead - parallax patterns (98%) -- hover-lift (1%) instead - mono typography (98%) -- condensed display system instead - tech motifs (96%) -- cultural motifs (5%) instead - friendly tone (64%) -- energetic (9%) instead - minimal imagery (94%) -- nature-elements (3%) instead