Filestash — sky-blue enterprise file management landing

---
version: alpha
name: Filestash — sky-blue enterprise file management landing
colors:
  primary: '#375160'
  surface: '#F2F3F5'
  text: '#313538'
typography:
  primaryRole:
    fontFamily: Inter, sans-serif
    fontSize: 30.6px
    fontWeight: 700
    lineHeight: 45.9px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 17px
    fontWeight: 400
    lineHeight: 25.5px
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 sky-blue enterprise landing page pairing a live file-browser preview with a rotating headline, integration diagram, testimonial cards and alternating screenshot-led feature rows.

Captured from https://www.filestash.app/ at 2026-10-15T06:08:29.039392+00:00. This is a complete page/screen reference, not an isolated element.

## Colors

primary: `#375160`; surface: `#F2F3F5`; text: `#313538`. 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 heading; supporting typography is sampled independently. Generated font-loader aliases are normalized to portable family names.

- h1 “Filestash”: 30.6px, weight 700, line height 45.9px, tracking normal.
- h2 “turns your 
            
              <a href="/online-ftp-clien”: 30.6px, weight 700, line height 35.7px, tracking normal.
- h3 “Bring your own environment:”: 25.5px, weight 700, line height normal, tracking normal.
- h2 “Enterprise File Management Software
  The Open Source Platform fo”: 35.7px, weight 700, line height 35.7px, tracking normal.
- h3 “Secure File Sharing”: 26.35px, weight 700, line height 25.5px, tracking normal.

## Layout

Use a two-column opening: compact copy and an outlined demo action on the left, a large raised file-browser window on the right. A sloped blue edge leads into an integration map. Alternate product screenshots and feature copy down a long light-gray page, then end with a dark sales band and footer.

Desktop image: 1440 × 9296px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport.

At 390px the opening becomes a vertical sequence of heading, file-browser preview and demo action, with a hamburger beside sales. The integration diagram is hidden while protocol names reflow. The desktop and mobile screenshots show different complete phrases of the typewriter, not different product promises.

## Elevation & Depth

Product windows have broad soft shadows and thin pale frames. Keep testimonial cards subtly separated from the cool background. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use a curved/sloped hero boundary, rectangular outlined calls to action and gently rounded product windows.

## Components

A sky-blue enterprise landing page pairing a live file-browser preview with a rotating headline, integration diagram, testimonial cards and alternating screenshot-led feature rows. 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.