SendThisFile Style Guide

Logos, colors, typography, buttons, and page patterns for a clear, consistent SendThisFile website.

Foundations

A clear, consistent SendThisFile experience.

SendThisFile pages use Montserrat typography, white navigation, #468eea blue surfaces, compact rounded calls to action, visible proof points, and accessible content that works with or without JavaScript.

Color tokens

Typography

File Transfer Made Easy.

Work With Confidence

Montserrat is the primary SendThisFile typeface. Use weight 700 for normal CTA labels, 500 for navigation and body emphasis, and 200 only for large display treatments where the lighter rhythm is intentional.

Brand assets

Logo usage

Use the full horizontal signature in headers and most website placements. Reserve the vertical signature for centered brand moments and the icon-only mark for constrained contexts where the SendThisFile name is already present.

Horizontal signature

Vertical signature

Icon-only mark

Buttons

Real links, consistent CTA weight.

Marketing CTAs are real links in the HTML. Use classes for visual roles, keep labels concise, and use Montserrat 700 with normal letter spacing.

Try for free Explore Product Contact sales

Do

Use <a> for navigation CTAs and <button> only for in-page state changes.

Do not

Do not hide important links inside JavaScript-only custom elements.

Weight

Use 700 for default marketing buttons. Avoid extra-heavy labels that reduce readability.

Page sections

Reusable patterns for SendThisFile pages.

Each page pattern has a clear visual role and a defined behavior model. The style guide keeps those patterns consistent across public SendThisFile pages.

App bar and menu

Stable 70px white header, 149px horizontal logo, Montserrat 500 nav, text-only Sign in, compact CTA, overlay menu on tablet/mobile.

App bar

Hero

Centered two-line headline over a product UI screenshot with #3986e9 overlay, compact bordered magenta CTA, and country proof line.

Hero

Trusted by

Left-anchored rounded gradient panel with local customer logo assets and descriptive image text.

Trusted by

Feature narrative

Problem-first icon list paired with a rounded human photo. Keep the list semantic and readable without JavaScript.

Feature narrative

Proof and capabilities

Case-study band, six capability cards, and blue testimonial carousel with static quote content.

Proof and capabilities

Conversion and footer

Three-step product explanation, final CTA panel, guide CTA, and simple blue footer navigation.

Conversion and footer

Interactions

Use interactive behavior only where it helps.

Interactive components enhance static HTML rather than replace it. Menus and sliders use explicit state models; simple CTAs remain plain anchors with shared classes.

App menu

States: closed, opening, open, closing. Dismiss on item select, outside pointer, outside scroll, focus exit, Escape, and desktop breakpoint.

Testimonials

States: idle and sliding. Slides are all present in source HTML, then Lit manages active slide, controls, dots, and autoplay.

Plain CTAs

Use shared button classes on real links or buttons so actions remain readable and crawlable.

Publishing standards

Quality standards

SendThisFile pages should be simple, consistent, accessible, crawlable, fast, and secure before they are published.

Scope and intent
DFMA simplification and modularity
Style-guide and visual consistency
Semantic HTML, accessibility, and no-JS fallback
Desktop, tablet, and mobile rendering
SEO crawlability
AI bot friendliness
Page-load performance
Security and pen-test survivability
Privacy, observability, deployment, rollback, and cache behavior