Filestash — deployment pricing and capability matrix

---
version: alpha
name: Filestash — deployment pricing and capability matrix
colors:
  primary: '#375160'
  surface: '#F2F3F5'
  text: '#313538'
  accent: '#9AD1ED'
typography:
  primaryRole:
    fontFamily: Inter, sans-serif
    fontSize: 45.9px
    fontWeight: 700
    lineHeight: 45.9px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 12.75px
    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 complete enterprise pricing page with a pale-blue chevron header, individual and company plan groups, cloud/self-hosted controls, FAQ rows and an extensive feature matrix.

Captured from https://www.filestash.app/pricing/?origin=menu at 2026-10-15T06:05:17.586661+00:00. This is a complete page/screen reference, not an isolated element.

## Colors

primary: `#375160`; surface: `#F2F3F5`; text: `#313538`; accent: `#9AD1ED`. 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 “Enterprise File Management Solution”: 45.9px, weight 700, line height 45.9px, tracking normal.
- h3 “Individual”: 30.6px, weight 700, line height 30px, tracking normal.
- h3 “For Your Company”: 30.6px, weight 700, line height 30px, tracking normal.
- h3 “Our customers:”: 18.7px, weight 700, line height normal, tracking normal.
- h2 “Need Help?
  
  
  Get expert advice from the engineers who built”: 42.5px, weight 700, line height 35.7px, tracking 1.19px.

## Layout

Place the individual offer beside a raised white company-plan panel. Keep plan titles on dark slate rectangles and align outlined actions beneath their feature lists. Follow customer logos with a dark assistance band, closed FAQ rows and a long category-grouped comparison matrix.

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

At 390px the large heading wraps into three lines and the plan groups stack. The captured source reported horizontal overflow outside the opening viewport; do not claim the entire dense comparison matrix was mobile-validated. Reimplement a wide matrix with an explicit accessible scroll region rather than clipping cells.

## Elevation & Depth

The company offer floats with a soft wide shadow. Subtle dotted decorations sit outside the panel; matrix rows remain flat. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

A layered downward chevron shapes the hero. Plan headers are rectangular, outline actions are low-radius and included features use round blue check marks.

## Components

A complete enterprise pricing page with a pale-blue chevron header, individual and company plan groups, cloud/self-hosted controls, FAQ rows and an extensive feature matrix. 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.