# Filestack Design System

> High-contrast developer utility anchored by deep plum surfaces, vibrant orange actions, and a rigorous Montserrat type hierarchy.

**Source:** https://filestack.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Filestack employs a "Dark Mode First" aesthetic for its primary value propositions, utilizing a deep plum-black (`#191426`) as a primary surface color to anchor its developer-centric identity. The brand voltage is concentrated in a high-saturation orange (`#ef4a25`) used exclusively for primary conversion points and critical UI accents. Typography is strictly Montserrat, ranging from heavy 800-weight display headers to 400-weight functional body text. Layouts are structured around generous vertical section padding (54px) and a mix of sharp edges and soft 5px to 8px radii for interactive elements.

## Signature DNA
1. **The Plum Anchor** (The use of `#191426` as a full-width section background and code-block surface creates a "pro-tool" atmosphere, observed on the Homepage and Pricing pages).
2. **High-Voltage Orange CTAs** (Primary actions use `#ef4a25` with white text, providing a 4.8:1 contrast ratio that cuts through the dark plum or white canvases).
3. **Geometric Montserrat Stack** (The reliance on Montserrat for all roles—display, heading, and body—creates a unified, modern geometric feel, specifically the 44px/800-weight display style).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary page background, card surfaces, button text | 105 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Deep shadows, absolute text | 23 | 1.0 | Computed Style |
| `{color.plum.deep}` | `#191426` | Hero backgrounds, footer, code blocks | 98 | 0.8 | Computed Style |
| `{color.gray.text}` | `#666666` | Default running body text | 170 | 0.8 | Computed Style |
| `{color.gray.muted}` | `#ebe8ea` | Secondary card backgrounds, disabled states | 33 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#ef4a25` | Primary CTA background, active borders | 32 | 0.8 | Computed Style |
| `{color.primary.soft}` | `#f05c3a` | Secondary text accents | 15 | 0.8 | Computed Style |
| `{color.accent.purple}` | `#8b7886` | Subdued text, secondary button labels | 203 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#2ea3f2` | Inline links, feature highlights | 30 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#cbe29f` | Positive indicators (decorative_only) |
| `{color.info}` | `#9fd1e2` | Informational highlights |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 400, 500, 600, 700, 800 | Display, Heading, Body, UI | Montserrat (Google Fonts) | SIL OFL |
| Courier New | 400 | Code snippets, technical data | Courier Prime | System |
| FontAwesome | 400 | Iconography | Font Awesome Free | CC BY 4.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 44px | 44px | normal | 800 | Hero display | `div.et_pb_text_inner` |
| `{type.h1}` | 36px | 43.2px | normal | 500 | Main page titles | `h1` |
| `{type.h2}` | 26px | 31.2px | normal | 700 | Section headers | `h2` |
| `{type.h3}` | 22px | 37.4px | normal | 600 | Tab labels, sub-headers | `li.et_pb_tab_active` |
| `{type.button}` | 18px | 30.6px | normal | 700 | Primary CTA text | `a.et_pb_button` |
| `{type.body.lg}` | 17px | 23.8px | normal | 400 | Intro paragraphs | `p` |
| `{type.body}` | 16px | 23.8px | normal | 400 | Standard body text | `p` |
| `{type.code}` | 14px | 23.8px | normal | 400 | API snippets | `code` |
| `{type.caption}` | 12px | 23.8px | normal | 400 | Small annotations | `div.et_pb_text_inner` |

### Principles
1. **Heavy Display Weight:** Use 800 weight for primary value propositions to create maximum impact against dark backgrounds.
2. **Code as Content:** Use Courier New for technical strings, always contained within dark plum (`#191426`) blocks.
3. **Button Consistency:** All primary buttons must use 18px Montserrat at 700 weight, regardless of background color.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 12 |
| `{space.md}` | 16px | 37 |
| `{space.lg}` | 20px | 38 |
| `{space.xl}` | 32px | 3 |
| `{space.section}` | 54px | 17 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp cards | 597 occurrences |
| `{radius.sm}` | 4px | Pricing cards, input fields | Pricing page |
| `{radius.md}` | 5px | Primary and Secondary buttons | Homepage CTAs |
| `{radius.lg}` | 8px | Feature cards, tab containers | Homepage features |
| `{radius.full}` | 50px | Pill-style badges, chat icons | Pricing page |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgb(211, 211, 211) 0px 12px 18px -6px` | Floating feature cards | Homepage |
| `{shadow.subtle}`| `rgba(0, 0, 0, 0.08) 0px 2px 12px 0px` | Pricing tier emphasis | Pricing page |

## Components

### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main conversion action (Sign Up, Plans)
**Pages observed:** All
**Spec:** Background: `#ef4a25` | Text: `#ffffff` | Radius: `5px` | Padding: `5.4px 18px` | Type: `18px/700`
**States observed:** Default | Hover: Captured (darker orange shift)

#### Rounded Button (Outline)
**Role:** Secondary action (Documentation, Plans & Pricing)
**Pages observed:** All
**Spec:** Background: `transparent` | Text: `#2f2a3a` | Border: `1px solid #2f2a3a` | Radius: `5px` | Padding: `5.4px 18px`

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #b9b8bd` | Radius: `8px` | Padding: `20px` | Shadow: `none`

#### Code Block
**Role:** Displaying technical implementation
**Pages observed:** Homepage
**Spec:** Background: `#191426` | Text: `#ffffff` | Type: `Courier New 14px` | Radius: `0px` | Padding: `16px`

### Tier 3: Surface-specific
#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #e5e5e5` | Radius: `4px` | Shadow: `0px 2px 12px rgba(0,0,0,0.08)`

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ebe8ea` | Text: `#666666` | Border: `1px solid #b9b8bd` | Radius: `0px`

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 54px (Vertical) |
| Grid | 3-column (Features), 4-column (Pricing) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked columns, center-aligned headers, 100% width buttons |
| Desktop | 1440px | Multi-column grids, left-aligned hero content |

## Imagery & decoration
- **Geometric Overlays:** Uses light gray triangle/diamond patterns as background textures in hero sections.
- **Grayscale Logos:** Partner/Trusted-by logos are rendered in uniform gray (`#666666`) to maintain focus on primary brand colors.

## Do's
- Use `#ef4a25` for the primary "Sign Up" button only.
- Set all code snippets in Courier New on a `#191426` background.
- Maintain a 54px vertical gap between major content sections.
- Use Montserrat 800 for hero headlines to establish authority.
- Ensure secondary buttons use the `#2f2a3a` border and text color.

## Don'ts
- **Wrong:** Using `#2ea3f2` (Accent Blue) for a primary CTA button. **Right:** Use `#ef4a25`. **Reason:** Blue is reserved for informational links, not conversion.
- **Wrong:** Applying a border radius to the main hero section background. **Right:** Keep section backgrounds at `0px` radius.
- **Wrong:** Using Montserrat 400 for headers. **Right:** Headers must be 500 weight or higher for hierarchy.

## Similar brands
- Cloudinary
- Imgix
- Algolia
- Twilio

## Quick start
```css
:root {
  --fs-color-primary: #ef4a25;
  --fs-color-plum: #191426;
  --fs-color-text: #666666;
  --fs-font-main: 'Montserrat', sans-serif;
  --fs-radius-btn: 5px;
  --fs-radius-card: 8px;
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://filestack.com | 1440px | 2026-06-06 |
| Pricing | https://filestack.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://filestack.com | 390px | 2026-06-06 |