Filestash — three customer quotation cards

---
version: alpha
name: Filestash — three customer quotation cards
colors:
  primary: '#337AB7'
  surface: '#FFFFFF'
  text: '#57595A'
typography:
  primaryRole:
    fontFamily: Inter, sans-serif
    fontSize: 15.3px
    fontWeight: 400
  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

Three standalone white quotation cards with blue linked customer names, oversized quote marks and small LinkedIn marks on a pale neutral surface.

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

## Colors

primary: `#337AB7`; surface: `#FFFFFF`; text: `#57595A`. 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 “Laurits F.”: 15.3px, weight 400, line height normal, tracking normal.
- a “David C.”: 15.3px, weight 400, line height normal, tracking normal.
- a “Chris M.”: 15.3px, weight 400, line height normal, tracking normal.

## Layout

At desktop, align three equal-width cards in a centered 1200px row with consistent top edges and internal padding. Place the customer name left and the social mark right, followed by a gray quote. Preserve the actual source attribution; do not substitute new endorsements or metrics.

Desktop image: 1200 × 334px at a 1440px viewport. Mobile evidence: 390 × 740px at a 390px viewport. The selected element measured 1200.00 × 333.00px desktop and 390.00 × 739.00px mobile. Integer crops use the measured document coordinates; page-edge subpixel rounding is limited to one pixel.

At 390px the cards stack into one column with narrow side gutters. Their heights follow quote length rather than preserving the desktop row height. The source uses justified quotation text; review word spacing carefully on narrow screens when adapting it.

## Elevation & Depth

White cards sit against a very pale cool background with quiet edges. Avoid prominent floating shadows that would overpower the quotations. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use subtly rounded card corners and a large opening quote glyph. Keep social marks small and anchored to the attribution row.

## Components

Three standalone white quotation cards with blue linked customer names, oversized quote marks and small LinkedIn marks on a pale neutral surface. 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.