Filestash — charcoal support and topic footer

---
version: alpha
name: Filestash — charcoal support and topic footer
colors:
  primary: '#F2F3F5'
  surface: '#313538'
  text: '#F2F3F5'
typography:
  primaryRole:
    fontFamily: Inter, sans-serif
    fontSize: 14.45px
    fontWeight: 400
    lineHeight: 13.6px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 17px
    fontWeight: 400
omitted:
- section: spacing
  reason: Measured geometry and responsive composition are documented below; no global
    spacing scale is inferred.
- section: rounded
  reason: Observed silhouettes and measured radii are described in Shapes rather than
    inventing a brand scale.
- section: components
  reason: This reference documents observed composition in prose, not an inferred
    component API.
---

## Overview

A compact charcoal footer organizing an affiliate badge, topic tags, site pages and support links, with a separate legal baseline.

Captured from https://www.filestash.app/ at 2026-10-15T06:08:59.864898+00:00. This image isolates `footer`.

## Colors

primary: `#F2F3F5`; surface: `#313538`; text: `#F2F3F5`. Values summarize measured surfaces and visually reviewed foregrounds; illustration and photograph colors are not a complete brand palette. Retain the observed light/dark contrast rather than applying the accent to every element.

## Typography

The primary token is a sampled link or control; supporting typography is sampled independently. Generated font-loader aliases are normalized to portable family names.

- a “Affiliate Program”: 14.45px, weight 400, line height 13.6px, tracking normal.
- a “FTP”: 12.75px, weight 400, line height normal, tracking normal.
- a “GUIDE”: 12.75px, weight 400, line height normal, tracking normal.
- a “OEM”: 12.75px, weight 400, line height normal, tracking normal.
- a “ONLINE-CLIENT”: 12.75px, weight 400, line height normal, tracking normal.

## Layout

Use a four-part desktop row: cloud mark and affiliate link, wrapping topic tags, page links and support links. Keep the whole content area inset and give the footer measured 100px top and 25px bottom padding. A fine rule separates copyright and legal links.

Desktop image: 1440 × 340px at a 1440px viewport. Mobile evidence: 390 × 715px at a 390px viewport. The selected element measured 1440.00 × 340.00px desktop and 390.00 × 714.59px mobile. Integer crops use the measured document coordinates; page-edge subpixel rounding is limited to one pixel.

At 390px each group stacks and becomes centered, including the logo and affiliate badge. Topic links wrap as a centered word list, while page and support links remain vertical. The legal line sits below its own divider.

## Elevation & Depth

Use a flat charcoal background; only the affiliate badge has a darker inset surface. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

The affiliate badge has a measured 10px radius and 5px 10px padding. Other links remain plain text, not individual pills.

## Components

A compact charcoal footer organizing an affiliate badge, topic tags, site pages and support links, with a separate legal baseline. Preserve the hierarchy and grouping described above rather than mixing this composition with unrelated page modules. This capture records one visible state; hover, focus, validation, menus and successful transactions are untested unless explicitly described. No credentials were entered and no form was submitted. Source-owned customer statements, prices and certifications remain source claims, not independently verified facts.

## Do's and Don'ts

- Do preserve the responsive grouping, reading order and measured type hierarchy.
- Do use original content and only substantiated claims when adapting this layout.
- Do keep labels readable and provide accessible focus and reduced-motion behavior in a new implementation; these are recommendations, not verified source behavior.
- Don't treat a static animation frame as proof of timings, easing or all interaction states.
- Don't reproduce source overflow or use decorative padding at the expense of readable mobile content.