Brand assets¶
Adding SweatStack to your app's integrations list or sign-in screen? Download the official mark below. No sign-up, no email, no waiting.
Download¶
| Asset | Format | Best for |
|---|---|---|
| sweatstack-mark.svg | SVG (vector) | Everything. Scales to any size without loss. Use this by default. |
| sweatstack-mark-on-white.png | 2200×2200 PNG, white tile | Raster-only contexts, or a solid tile over dark or busy backgrounds. |
The mark's corners are transparent in the SVG, so it sits cleanly on any background. Use the white-tile PNG only when you can't use SVG, or when you need a solid card over a photo or dark surface.
Need a specific lockup for print? Email [email protected].
The name¶
SweatStack is one word with two capital letters: SweatStack. Not "Sweatstack", "Sweat Stack", or "SWEATSTACK", and never translated.
In UI copy: "Sign in with SweatStack" is the canonical sign-in button ("Continue with SweatStack" is an accepted variant). Use "Connect with SweatStack" only when SweatStack is a data source inside an app that already has its own login. "Works with SweatStack" is fine for a general integration badge.
Because most end users don't know the SweatStack name yet, pair the button with a subtitle that names the accounts they do recognize: "Sign in with SweatStack" above, "Use your Garmin, Wahoo or Intervals.icu account" below. See button copy.
An app that offers one wearable names the provider first and SweatStack second: "Connect Garmin Connect through SweatStack", "Connect Intervals.icu through SweatStack". Keep the provider's own product name as they write it, and keep "through SweatStack" on the button rather than in a footnote, since it is the account the user is creating.
Using the mark¶
Do
- Prefer the SVG so the mark stays crisp at any size.
- Keep clear space of at least 25% of the mark's height on every side.
- Keep it at 24×24 px or larger so it stays legible.
- Pair it with the name on sign-in buttons. See button copy.
Don't
- Recolor it, add effects, rotate it, or distort it.
- Crop it, or place it on a busy background that hurts contrast. Use the white-tile PNG instead.
- Imply partnership or endorsement. "Works with SweatStack" is fine; "Endorsed by SweatStack" is not.
Colors¶
The mark uses three colors. Don't recolor it, but if you're matching surrounding UI, these are the exact values:
| Element | Hex |
|---|---|
| Red | #EF2B2D |
| Blue | #002868 |
| White | #FFFFFF |
Anything not covered here? Email [email protected].