# Design Language for footprint.bar ## Aesthetics and Tone footprint.bar embodies the visual philosophy of a decommissioned server room that has been converted into a data-forensics exhibition space -- every surface stripped back to bare concrete and exposed conduit, every screen showing raw telemetry instead of polished dashboards. The aesthetic is **brutalist** in the truest architectural sense: the structural skeleton is the ornament. There is no veneer, no polish, no marketing gloss. The site looks like it was assembled by an infrastructure engineer who thinks CSS gradients are dishonest. The brutalism here is not the "trendy neubrutalism" of thick borders and bright colors. It is the brutalism of Tadao Ando's Church of the Light -- raw, austere, spiritual in its commitment to materials. Concrete-textured backgrounds with visible aggregate. Steel-gray divider lines that look load-bearing. Content blocks that feel poured rather than placed. The entire experience carries the weight and gravity of physical infrastructure: footings, foundations, load paths. A "footprint" is not a metaphor -- it is a structural specification. The tone is **raw-authentic**: no corporate pleasantries, no aspirational language, no "we believe in" manifestos. Text reads like field notes, system logs, and structural engineering reports. Sentences are short. Data speaks. The voice is that of someone who measures twice, documents everything, and considers decoration a form of technical debt. ## Layout Motifs and Structure The layout is **full-bleed** -- content extends to every edge of the viewport with no outer margins, no max-width container, no safe-zone padding. The browser window IS the structural footprint. Content presses against the viewport edges the way rebar presses against formwork. The absence of breathing room is intentional -- this is a site about measurement and occupation, and it occupies every available pixel. **Grid Architecture:** The underlying grid is a 12-column engineering grid inspired by structural drawing standards. Column lines are rendered as faint 1px lines in `#3A3A42` (Graphite Trace) at 8.333% intervals across the full viewport width. These lines are always visible -- they are not decorative, they are the site's coordinate system. Every content element snaps to these column lines with zero tolerance. **Section Structure:** Sections are not separated by whitespace or decorative dividers. Instead, each section is a discrete "slab" -- a full-width block with a hard edge where one background tone meets another, like the strata visible in a geological cross-section. The transitions are abrupt: `#18181B` (Anthracite Base) meets `#1E1E23` (Slab Dark) meets `#0F0F12` (Void Black) with zero gradient between them. Each slab has a visible section marker in the upper-left corner -- a monospaced label like `SEC.01`, `SEC.02` rendered in `#4A4A55` (Grid Label) at 10px, uppercase. **Structural Annotation Layer:** Overlaid on the content is a persistent annotation layer that mimics engineering drawings: dimension lines with serif endpoints connecting elements to show their widths in pixels, small crosshair registration marks at grid intersections, and dashed construction lines that show the alignment relationships between disparate elements. This layer sits at `opacity: 0.08` by default and intensifies to `opacity: 0.25` when the user hovers near grid intersections, revealing the underlying measurement system like an X-ray view of the page's skeleton. **Vertical Rhythm:** All vertical spacing is based on a strict 8px baseline grid. Line heights, margins, and padding are all multiples of 8. A subtle horizontal rule appears every 64px (8 baseline units) across the entire viewport at `opacity: 0.03`, creating a faint engineering-paper texture in the background. ## Typography and Palette **Typography:** - **Primary / Body / System Voice:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface designed for technical displays, with clean geometry that reads like terminal output but with enough refinement for extended body text. Used at 14px/1.75 for body copy, 12px/1.5 for annotations, and 11px/1.4 for system labels. Weight 400 only. No italics -- emphasis is achieved through `text-transform: uppercase` and `letter-spacing: 0.15em`. Every character occupies the same width, reinforcing the engineering-grid precision of the layout. Body text is set in `#A8A8B5` (Concrete Text) -- deliberately muted, like pencil marks on graph paper. - **Display / Section Headers:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a geometric skeleton and distinctive single-story 'a' and open-tail 'g' that give it a technical drawing quality. Used at 2.5rem-5rem for section headers, weight 700, `letter-spacing: -0.03em` for tight, dense headline blocks. Always set in `#D4D4DC` (Steel Bright) against the dark slabs. Headers are never centered -- they are always flush-left, snapped to a column line, like labels on a blueprint. The contrast between the proportional display face and the monospaced body creates a clear hierarchy: headlines are human communication, body text is machine output. - **Data / Metrics / Annotations:** "IBM Plex Mono" (Google Fonts) -- a more refined monospaced option reserved for numerical data, metrics, coordinates, and annotation text. Used at 11px-13px, weight 400 and 600. Tabular figures are mandatory. Rendered in `#6B8F71` (Signal Green) for live/active data, `#4A4A55` (Grid Label) for static annotations. IBM Plex Mono's wider letterforms and rounder counters distinguish data from body text even at identical sizes. **Palette:** The palette is **muted** -- desaturated, industrial, and deliberately uncomfortable in its restraint. No vibrant accents. No saturated calls-to-action. Color is used as a material property, not a signaling mechanism. | Role | Name | Hex | Description | |------|------|-----|-------------| | Background Primary | Anthracite Base | `#18181B` | Near-black with cool undertone, like fresh-poured concrete in shadow | | Background Secondary | Slab Dark | `#1E1E23` | Slightly lifted dark for alternating sections | | Background Tertiary | Void Black | `#0F0F12` | Deep void for code blocks and data panels | | Text Primary | Steel Bright | `#D4D4DC` | High-legibility warm gray for headlines | | Text Body | Concrete Text | `#A8A8B5` | Mid-gray for extended reading, pencil-on-paper feel | | Text Muted | Grid Label | `#4A4A55` | Low-contrast for annotations, section markers, construction lines | | Data Accent | Signal Green | `#6B8F71` | Desaturated sage green for active data, alive without screaming | | Structure Accent | Rebar Rust | `#8B6F5C` | Oxidized brown-orange for structural highlights, load lines, stressed elements | | Alert / Edge | Fault Line Red | `#7A3B3B` | Dark, muted red for warnings, boundaries, fault indicators | No gradients. No glows. No shadows with blur radius > 0. Shadows are rendered as hard 2px offsets in `#0F0F12` -- like the shadow cast by a physical slab under directional light. ## Imagery and Motifs **Data-Viz as Primary Imagery:** All visual content on footprint.bar is **data-viz** -- there are no photographs, no illustrations, no icons. Every image-equivalent is a data visualization rendered in SVG or Canvas: network topology maps, load distribution charts, utilization heatmaps, and structural stress diagrams. These are not decorative -- they contain real (or plausibly real) data patterns that reward close inspection. **Core Visualization Types:** 1. **Footprint Maps:** Top-down rectangular heatmaps that show "load distribution" across a grid, like thermal imaging of a building's foundation. Each cell is a small rectangle colored along a gradient from `#0F0F12` (no load) through `#6B8F71` (nominal) to `#8B6F5C` (stressed) to `#7A3B3B` (critical). These maps are the site's signature visual -- they appear as hero elements, section backgrounds (at very low opacity), and inline data displays. 2. **Trace Graphs:** Time-series line charts rendered in `#6B8F71` with a 1px stroke, no fill, no smoothing -- angular point-to-point connections like seismograph output. Multiple traces are overlaid with varying opacity (0.3, 0.5, 0.8, 1.0) to show historical depth. The most recent trace is always brightest. Grid lines in `#3A3A42` provide scale. 3. **Structural Wireframes:** Orthographic line drawings of abstract three-dimensional structures -- beams, columns, load paths -- rendered in `#4A4A55` with `#8B6F5C` highlights on stressed members. These appear as background elements, rotated slowly (0.5deg/second) to add subtle dimensional life. 4. **Binary Soil Maps:** Visualization of data as terrain -- contour lines rendered in monospaced coordinate labels, with elevation represented by text density and character weight rather than color. **Circuit Motifs:** The **circuit** motif manifests as visible trace-routes connecting related content elements. Thin lines (`1px`, `#3A3A42`) run horizontally and vertically between data points, section headers, and navigation elements, turning at 90-degree angles like PCB traces. At junction points, small filled circles (`4px` diameter, `#6B8F71`) indicate connection nodes. These circuit traces serve double duty as both decorative motifs and actual visual representations of the site's information architecture -- the trace between a section header and its data visualization literally maps the relationship. **Texture:** The site background carries a subtle concrete noise texture -- a repeating 200x200px PNG of fine-grain aggregate at `opacity: 0.04`, `mix-blend-mode: overlay`. This gives flat color fields the tactile quality of raw concrete without compromising text legibility. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport Anthracite Base (`#18181B`) background. No loading spinner, no logo. Instead, the engineering grid materializes first -- 12 vertical column lines drawing themselves downward from the top of the viewport simultaneously over 0.8 seconds, each line a thin stroke of `#3A3A42`. At the same time, horizontal baseline rules fade in at `opacity: 0.03`, creating the engineering-paper substrate. At 1.0 seconds, the **skeleton-loading** pattern begins: content blocks appear as bare rectangles -- pure geometric placeholders in `#1E1E23` with a slow left-to-right shimmer animation (a moving highlight band of `#252530` sweeping across at 2 seconds per cycle). These skeleton blocks occupy the exact positions and dimensions that real content will fill, snapped precisely to the grid. The skeletons are not abstract loading indicators -- they are architecturally accurate representations of the content's footprint, complete with the correct aspect ratios and column-snap positions. For 1.5 seconds, the user sees only the structural skeleton of the page: grid lines, baseline rules, and hollow content blocks. This is the "blueprint" phase. At 2.5 seconds, content begins to populate the skeleton blocks. Each block transitions from skeleton to content via a reveal that starts at the left edge and sweeps right -- not a fade, but a hard-edge wipe, like concrete being poured into formwork. The `#1E1E23` skeleton remains visible briefly as the content block's background, and text/data materializes over it left-to-right with a `clip-path: inset(0 [decreasing]% 0 0)` animation. Blocks populate sequentially from top-left to bottom-right, with 80ms stagger between each, following the reading order and reinforcing the "construction sequence" metaphor. **Scroll Behavior:** As the user scrolls, each new section is initially in skeleton state -- the skeleton-loading shimmer is running on off-screen sections, and content only populates when the section enters the viewport. This creates a persistent "under construction" feel throughout the experience, as though the site is being built in real-time just ahead of the user's scroll position. Parallax is deliberately absent. Full-bleed slabs scroll at 1:1 with the viewport -- no depth illusion, no floating layers. The only scroll-linked effect is the annotation layer: as the user scrolls, new dimension lines and construction marks draw themselves into the annotation layer, measuring the current scroll position and displaying it as a coordinate in the top-right corner in IBM Plex Mono at 10px: `Y: 2847px`. **Data Visualization Animation:** Footprint heatmaps animate cell-by-cell when they enter the viewport. Each cell transitions from `#0F0F12` to its final color over 100ms, with cells populating in a scan-line pattern (left-to-right, top-to-bottom) at 15ms intervals. For a 20x20 grid, this creates a 6-second fill animation that looks like thermal data being collected in real-time. Trace graphs draw themselves point-by-point, with a trailing highlight that follows the data line like an oscilloscope beam. The drawing speed is calibrated to feel like real-time data acquisition: approximately 40 data points per second. **Interaction Model:** Hover states are minimal and structural. Hovering a content block causes its grid-snap lines to brighten from `opacity: 0.08` to `opacity: 0.35` -- the block's position within the grid becomes explicitly visible, like selecting an element in a CAD application. The dimension lines in the annotation layer update to show the hovered element's width and height in pixels. No smooth transitions on hover. All state changes are instant (0ms transition) -- the brutalist commitment to honesty extends to interaction: there is no easing, no interpolation, no animation that might disguise the discrete nature of user input. **Navigation:** Navigation is a fixed vertical strip on the left edge of the viewport, 48px wide, containing section markers (`01`, `02`, `03`...) in Share Tech Mono at 11px, vertically centered within 48x48 hit areas. The active section is indicated by a 2px left border in `#6B8F71`. No hamburger menu, no overlay, no transition. On viewports below 768px, the nav strip moves to the top as a fixed horizontal bar, 36px tall. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, "hero with background image" patterns, gradient overlays, rounded corners (all corners are 0px), box-shadows with blur, any form of skeuomorphic depth. ## Uniqueness Notes **Differentiators from other designs:** 1. **Skeleton-Loading as Narrative Device (5% frequency):** While skeleton-loading is typically a UX necessity hidden during slow API calls, footprint.bar elevates it to the primary aesthetic experience. The deliberate 2.5-second "blueprint phase" on initial load -- where users see only the structural skeleton of the page before content populates -- is unique in the portfolio. No other design uses loading states as intentional, choreographed storytelling. 2. **Engineering Annotation Layer (0% frequency):** The persistent overlay of dimension lines, crosshair marks, construction lines, and pixel-coordinate readouts has no precedent in the existing designs. This layer transforms the browsing experience into something closer to inspecting a technical drawing than visiting a website. The scroll-position coordinate display in the corner is a detail no other site offers. 3. **Zero-Transition Brutalist Interaction (unique):** The absolute refusal to use CSS transitions or easing on any interactive state -- all hover and active states snap instantaneously -- is a deliberate anti-pattern that distinguishes footprint.bar from every other design in the portfolio, all of which use some form of smooth transition. This creates a tactile, mechanical feel unlike any other site. 4. **Full-Bleed Slab Stratigraphy:** While full-bleed layouts appear in 29% of designs, footprint.bar's specific approach -- hard-edged geological strata with zero-gradient transitions between discrete background tones, section markers in fixed positions, and no whitespace separation -- is architecturally distinct from typical full-bleed implementations that use generous internal padding. 5. **Data-Viz-Only Imagery (4% frequency):** The complete absence of photography, illustration, or decorative graphics -- replaced entirely by functional data visualizations (heatmaps, trace graphs, wireframes, soil maps) -- positions footprint.bar in the sparsest imagery category. Combined with the circuit-trace connection lines, every visual element on the page carries informational weight. **Chosen seed/style:** aesthetic: brutalist, layout: full-bleed, typography: tech-mono, palette: muted, patterns: skeleton-loading, imagery: data-viz, motifs: circuit, tone: raw-authentic **Avoided overused patterns:** playful aesthetic (98%), centered layout (99%), warm palette (100%), scroll-triggered patterns (98%), friendly tone (97%), minimal imagery (95%), photography imagery (67%), vintage motifs (74%), parallax patterns (79%), humanist typography (38%). The design deliberately rejects the dominant portfolio tendencies toward warmth, friendliness, and decorative polish in favor of cold precision and structural honesty.