bills.com.au
bills.com.au · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from satisfyrunning.com’s public web pages. Not affiliated with or endorsed by SATISFY. The real site is satisfyrunning.com ↗
Unofficial style guide
SATISFYstyle guide
SATISFY’s website (satisfyrunning.com) uses Assistant for its headings and body text. Its palette is led by Corn Silk (#F7F2D9), Grey (#96899A) and Steel Blue (#1990C6), with #000000 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- satisfyrunning.com
- Typefaces
- Assistant, ABC Walter Neue, ABC Simon Mono
- Palette
- 4 neutrals, 3 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://satisfyrunning.com/
Screenshot
satisfyrunning.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- SATISFY | Running apparel developed to unlock the High.
- ● 55 / 60 characters
- Meta description
- Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
- ● 124 / 160 characters
- Site name
- SATISFY
- og:title
- SATISFY | Running apparel developed to unlock the High.
- og:description
- Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
- Language
- en
In search results
SATISFYhttps://satisfyrunning.com/
SATISFY | Running apparel developed to unlock the High.
Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
When shared
satisfyrunning.com
SATISFY | Running apparel developed to unlock the High.
Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and…
Logo & favicons
No logo could be found on the homepage.
Logo
Favicons
1 found-
32 px · PNG
icon
SATISFY | Running apparel developed to unlock the High.
Light browser tab
SATISFY | Running apparel developed to unlock the High.
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Black 49.3%
- White 42.4%
- Light Grey 3.8%
- Off White 3.4%
- Corn Silk 0.4%
- Grey 0.4%
- Steel Blue 0.3%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- —
- On white
- 21.00:1 AAA
Text, background, border · --payment-terms-background-color, .button
-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 21.00:1 AAA
- On white
- —
Background, text, graphic · --gradient-background, --payment-terms-background-color
-
Light Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 2 2 27
- On text
- 10.43:1 AAA
- On white
- 2.01:1 Fail
Text, background, border · .collection--empty .title-wrapper>h2, .product-form__input--pill input[type=radio]:disabled+label
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 0 0 12
- On text
- 15.64:1 AAA
- On white
- 1.34:1 Fail
Background, border · .product-hero-slideshow__nav, .bg-gray-light
Colours
Brand colours and accents, most used first-
Corn Silk
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 2 12 3
- On text
- 18.66:1 AAA
- On white
- 1.13:1 Fail
Background · inline style on <div>
-
Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 11 0 40
- On text
- 6.34:1 AA
- On white
- 3.31:1 AA large
Background · inline style on <div>
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 27 0 22
- On text
- 5.85:1 AA
- On white
- 3.59:1 AA large
Background · .shopify-payment-button__button--unbranded
Gradients
-
linear-gradient(90deg, ,rgba(0,0,0,.15) )
-
linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04))
-
linear-gradient(#F3F4F4,#F3F4F4)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Assistant
Aa
400
Aa
900
Assistant
Self-hosted · weights 400, 500, 700, 900 · headings, buttons, body · shown in a stand-in if you don’t have it
Aa
400
Aa
900
ABC Walter Neue
Self-hosted · weights 400, 900 · buttons, headings · shown in a stand-in if you don’t have it
Aa
400
Aa
500
ABC Simon Mono
Self-hosted · weights 400, 500 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
calc(1.0 * 1.125rem) / calc(1 + .3/max(1,1.0))
weight 400 · Assistant
SATISFY
Heading 2
calc(1.0 * 1.125rem) / calc(1 + .3/max(1,1.0))
weight 400 · Assistant
SATISFY | Running apparel developed to unlock t…
Heading 3
calc(1.0 * 1.125rem) / calc(1 + .3/max(1,1.0))
weight 400 · Assistant
SATISFY | Running apparel developed to unlock t…
Heading 4
calc(1.0 * .875rem) / calc(1 + .3/max(1,1.0))
weight 400 · Assistant
SATISFY | Running apparel developed to unlock t…
Heading 5
calc(1.0 * .875rem) / calc(1 + .3/max(1,1.0))
weight 400 · Assistant
SATISFY | Running apparel developed to unlock t…
Heading 6
calc(1.0 * 1.125rem)
SATISFY | Running apparel developed to unlock t…
Body
0.875rem · 14 px / calc(1 + 0.8 / 1.0)
weight 400 · Assistant
Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
Paragraph
— / 1.25rem
uppercase · ABC Walter Neue
Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
Small
80%
Running apparel developed to unlock the High. Sign up to our newsletter for early access to our exclusive and limited drops.
Button
calc(1.0 * .875rem) / 0
uppercase · Assistant
Get started
Link
.75rem · 12 px / normal
weight 400
Read more about SATISFY
Sizes in use
Most common across the site- 26pxline calc(1 + .4 / 1.0) · 12 rules
- 22pxline calc(1 + .5 / 1.0) · 23 rules
- 19pxline 1 · 12 rules
- 18pxline calc(1 + .2 / 1.0) · 8 rules
- 16pxline 1 · 14 rules
- 14pxline normal · 22 rules
- 12pxline 1 · 24 rules
- 10pxline calc(1 + .1 / 1.0) · 6 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.button · #000000 · radius 6px
Corner radius
- 5px · 14×
- 50% · 11×
- 9999px · 8×
- 1rem · 8×
- 6px · 8×
- 6.25rem · 7×
Shadows
- 0px 4px 5px rgba(18,18,18,0.0)
- 0px 0px 0px rgba(18,18,18,0.0)
- 0 0 0 .3rem rgb(255,255,255),0 0 .5rem .4rem rgba(0,0,0,.3)
- inherit
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
749
750
768
838
989
990
1280
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1024 px
704 px
576 px
480 px
460 px
320 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 55 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does SATISFY use?
- SATISFY’s website uses three typefaces: Assistant (headings and body text), self-hosted; ABC Walter Neue, self-hosted; ABC Simon Mono, self-hosted.
- What are SATISFY’s brand colours?
- The main colours on satisfyrunning.com are Corn Silk (#F7F2D9), Grey (#96899A), Steel Blue (#1990C6), Black (#000000), White (#FFFFFF) and Light Grey (#B9B6B6).
- What colour is SATISFY’s text and background?
- Body text is #000000 on a #FFFFFF background.
- Is this SATISFY’s official style guide?
- No. SiteStyleGuide made it from satisfyrunning.com’s public web pages on 27 October 2026, and isn’t affiliated with SATISFY. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
satisfyrunning-com-tokens.css
/* satisfyrunning.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/satisfyrunning.com) */
:root {
/* Colours */
--text: #000000;
--background: #FFFFFF;
--colour-black: #000000;
--colour-white: #FFFFFF;
--colour-light-grey: #B9B6B6;
--colour-off-white: #DBDFE0;
--colour-corn-silk: #F7F2D9;
--colour-grey: #96899A;
--colour-steel-blue: #1990C6;
--gradient-1: linear-gradient(90deg, ,rgba(0,0,0,.15) );
--gradient-2: linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04));
--gradient-3: linear-gradient(#F3F4F4,#F3F4F4);
/* Typefaces */
--font-headings: 'Assistant', sans-serif;
--font-buttons: 'Assistant', sans-serif;
--font-body: 'Assistant', sans-serif;
--font-other: 'ABC Simon Mono';
/* Type scale */
--text-body: 0.875rem;
--leading-body: calc(1 + 0.8 / 1.0);
--text-small: 80%;
--text-a: .75rem;
--leading-a: normal;
/* Shape */
--radius-1: 5px;
--radius-2: 50%;
--radius-3: 9999px;
--radius-4: 1rem;
--radius-5: 6px;
--radius-6: 6.25rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 749px;
--breakpoint-2: 750px;
--breakpoint-3: 768px;
--breakpoint-4: 838px;
--breakpoint-5: 989px;
--breakpoint-6: 990px;
--breakpoint-7: 1280px;
--breakpoint-8: 1400px;
--max-width-1: 1024px;
--max-width-2: 704px;
--max-width-3: 576px;
--max-width-4: 480px;
--max-width-5: 460px;
--max-width-6: 320px;
}
{
"site": "satisfyrunning.com",
"source": "https://sitestyleguide.com/satisfyrunning.com",
"text": "#000000",
"background": "#FFFFFF",
"colours": [
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Light Grey",
"hex": "#B9B6B6",
"rgb": [
185,
182,
182
]
},
{
"name": "Off White",
"hex": "#DBDFE0",
"rgb": [
219,
223,
224
]
},
{
"name": "Corn Silk",
"hex": "#F7F2D9",
"rgb": [
247,
242,
217
]
},
{
"name": "Grey",
"hex": "#96899A",
"rgb": [
150,
137,
154
]
},
{
"name": "Steel Blue",
"hex": "#1990C6",
"rgb": [
25,
144,
198
]
}
],
"fonts": [
{
"name": "Assistant",
"stack": "Assistant, sans-serif",
"weights": [
400,
500,
700,
900
],
"source": "Self-hosted"
},
{
"name": "ABC Walter Neue",
"stack": "\"ABC Walter Neue\", \"Helvetica Neue\", Helvetica",
"weights": [
400,
900
],
"source": "Self-hosted"
},
{
"name": "ABC Simon Mono",
"stack": "\"ABC Simon Mono\"",
"weights": [
400,
500
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run satisfyrunning.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/satisfyrunning.com" title="SATISFY style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to SATISFY’s
The Design Office of David McGillivray
dmcg.co · 5 days ago
Save
Grapa Studio
studiograpa.com · 2 days ago
Save
example.com
example.com · 5 days ago
Save
Captured from satisfyrunning.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by SATISFY; this guide describes the public website for reference.