Filestash — public storage connection sign-in

---
version: alpha
name: Filestash — public storage connection sign-in
colors:
  primary: '#466372'
  surface: '#9AD1ED'
  text: '#666666'
  panel: '#FFFFFF'
typography:
  primaryRole:
    fontFamily: Arial
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
  supporting:
    fontFamily: Arial
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
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 logged-out file-storage connection screen with protocol tabs, credential fields and a full-width Connect action on a pale-blue canvas. This is storage authentication, not account registration.

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

## Colors

primary: `#466372`; surface: `#9AD1ED`; text: `#666666`; panel: `#FFFFFF`. 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.

- button “WebDav”: 16px, weight 400, line height 16px, tracking normal.
- button “FTP”: 16px, weight 400, line height 16px, tracking normal.
- button “SFTP”: 16px, weight 400, line height 16px, tracking normal.
- button “GIT”: 16px, weight 400, line height 16px, tracking normal.
- button “S3”: 16px, weight 400, line height 16px, tracking normal.

## Layout

Center a compact white tab strip above a separate white credential panel near the upper third of an otherwise empty blue canvas. The observed state displays KeyID and applicationKey fields, a reveal icon and a full-width slate Connect action. Keep the form sparse and avoid adding marketing content.

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

At 390px the panel expands to nearly full width with about 10px side margins; only the first three protocol tabs are visible in the opening tab strip. Credential controls remain vertically stacked. Tab scrolling, password reveal and connection success were not exercised.

## Elevation & Depth

The two white panels use restrained shadows against the blue background. Field boundaries are lighter than the action. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use slightly rounded rectangular panels and a low-height rectangular submit control; avoid a pill-based marketing style.

## Components

A logged-out file-storage connection screen with protocol tabs, credential fields and a full-width Connect action on a pale-blue canvas. This is storage authentication, not account registration. 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.