reacts.ru
reacts.ru · 6 days ago
SaveUnofficial A style guide made by SiteStyleGuide from thrivesparrow.com’s public web pages. Not affiliated with or endorsed by ThriveSparrow. The real site is thrivesparrow.com ↗
Unofficial style guide
ThriveSparrowstyle guide
ThriveSparrow’s website (thrivesparrow.com) sets its headings in Tenon and its body text in DM Sans. Its palette is led by Sky Blue (#62D2F1), Light Steel Blue (#C4AEFF) and Black (#261B07), with #4E596C text on #FFFFFF. Captured from the live site on 24 October 2026.
- Website
- thrivesparrow.com
- Typefaces
- Tenon, DM Sans, Space Grotesk
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 24 Oct 2026 · added by @banshi88666
https://thrivesparrow.com/
Screenshot
thrivesparrow.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
- AI-Native Employee Experience Platform | ThriveSparrow
- ● 54 / 60 characters
- Meta description
- ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial today.
- ● 146 / 160 characters
- Site name
- ThriveSparrow
- og:title
- AI-Native Employee Experience Platform | ThriveSparrow
- og:description
- ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial today.
- Language
- en
In search results
ThriveSparrowhttps://thrivesparrow.com/
AI-Native Employee Experience Platform | ThriveSparrow
ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial today.
When shared
thrivesparrow.com
AI-Native Employee Experience Platform | ThriveSparrow
ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performin…
Logo & favicons
Found as: schema.org logo. SVG, 182 × 30.
Logo
On white
On black
On Sky Blue
Favicons
2 found-
256 px · PNG
apple-touch-icon
-
32 px · PNG
shortcut icon
AI-Native Employee Experience Platform | ThriveSparrow
Light browser tab
AI-Native Employee Experience Platform | ThriveSparrow
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 (#4E596C) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 34.2%
- Black 17%
- Sky Blue 8.4%
- Light Steel Blue 8.4%
- Charcoal 8.2%
- Black 4.8%
- Cool Near Black 4.3%
- Tomato 3.8%
- Dark Cyan 2.8%
- Deep Midnight Blue 1.8%
- Teal 1.3%
- Light Midnight Blue 1.1%
- Dark Slate Grey 1%
- Crimson 1%
- Dim Grey 1%
- Light Cyan 0.9%
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-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 7.07:1 AAA
- On white
- —
Background, text, border · .menu-dropdown-navigation.w--open, body
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 2.97:1 Fail
- On white
- 21.00:1 AAA
Background, text, border · .div-block-162.input-container.hero-form-container.hero-input-btn.modal-button.b, .submit-btn-section-engagement.lp-cta-top.invalid.engage-top-btn.dec-15-template
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 83
- On text
- 2.00:1 Fail
- On white
- 14.16:1 AAA
Text, background · .new-lp-second-left-content-heading.nov-19, .lp-list.features-list.new-lp-features-list.new-lp-second-list-features
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 67 29 0 91
- On text
- 2.69:1 Fail
- On white
- 19.03:1 AAA
Text · .hero-section-heading, .expore-heading
Colours
Brand colours and accents, most used first-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 59 13 0 5
- On text
- 4.04:1 AA large
- On white
- 1.75:1 Fail
Background · .div-block-98.input-container.hero-form-container, .div-block-162.input-container.hero-form-container
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 23 32 0 0
- On text
- 3.65:1 AA large
- On white
- 1.94:1 Fail
Background · .div-block-98.input-container.hero-form-container, .div-block-162.input-container.hero-form-container
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 29 82 85
- On text
- 2.39:1 Fail
- On white
- 16.90:1 AAA
Background, text, graphic · .button.is-secondary-solid-light, .button.is-secondary-solid-dark
-
Tomato
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 67 76 5
- On text
- 2.00:1 Fail
- On white
- 3.53:1 AA large
Text, border, background · inline style on <div>, .white-card-btn.pricing-card-btn.lp-first-card-btn.modal-button.nov-19.nov-19-pr
-
Dark Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 0 40
- On text
- 2.03:1 Fail
- On white
- 3.49:1 AA large
Background, text, border · .button.is-primary-solid-light, .button.is-primary-outline-light
-
Deep Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 46 79 0 62
- On text
- 2.09:1 Fail
- On white
- 14.80:1 AAA
Text · .wb-title, .desktop-banner
-
Teal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 0 52
- On text
- 1.37:1 Fail
- On white
- 5.17:1 AA
Background, text, graphic · .wb-register-link, .button.is-primary-solid-light:hover
-
Light Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 80 33 0 67
- On text
- 1.73:1 Fail
- On white
- 12.23:1 AAA
Text · .menu-button.w--open, .icon-6
-
Dark Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 0 76
- On text
- 1.71:1 Fail
- On white
- 12.10:1 AAA
Background · .button.is-primary-outline-dark, .background-color-teal-800
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 91 82 9
- On text
- 1.55:1 Fail
- On white
- 4.57:1 AA
Background, border · .button.is-red, .nov-19-demo-btn.is-1
-
Dim Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 28 18 0 58
- On text
- —
- On white
- 7.07:1 AAA
Text · body
-
Light Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 2 0
- On text
- 6.68:1 AA
- On white
- 1.06:1 Fail
Background · .engagement-tile, .eye-brow-text-enagement
Gradients
-
linear-gradient(104deg,#62d2f1 29%,#c4aeff 93%)
-
linear-gradient(to bottom, rgba(255,255,255,0.2) 1px, transparent 1px)
-
radial-gradient(circle at 50% -340%,#55b8ff4d,#55b8ff00 100%,#fff)
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.
Tenon
Aa
100
Aa
900
Tenon
Served from cdn.prod.website-files.com · weights 100, 400, 500, 700, 800, 900 · headings, buttons · shown in a stand-in if you don’t have it
Aa
100
Aa
1000
DM Sans
Served from cdn.prod.website-files.com · weights 100, 400, 500, 700, 1000 · buttons, headings, body · shown in a stand-in if you don’t have it
Aa
300
Aa
700
Space Grotesk
Served from cdn.prod.website-files.com · weights 300, 500, 700 · headings, buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
38px / 44px
weight 700
ThriveSparrow
Heading 2
32px / 36px
weight 700
AI-Native Employee Experience Platform | Thrive…
Heading 3
42px / 110%
weight 700
AI-Native Employee Experience Platform | Thrive…
Heading 4
22px / 140%
weight 700 · DM Sans
AI-Native Employee Experience Platform | Thrive…
Heading 5
14px / 20px
weight 700
AI-Native Employee Experience Platform | Thrive…
Heading 6
20px / 110%
weight 700
AI-Native Employee Experience Platform | Thrive…
Body
16px / 140%
weight 400 · Arial
ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial…
Paragraph
20px / 165%
DM Sans
ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial…
Small
80%
ThriveSparrow is an AI-native employee experience platform that helps companies build engaged, high-performing teams. Start your free trial…
Sizes in use
Most common across the site- 40pxline 3.25rem · 2 rules
- 38pxline 44px · 2 rules
- 32pxline 36px · 4 rules
- 24pxline 30px · 4 rules
- 18pxline 22px · 10 rules
- 16pxline 1.5 · 8 rules
- 14pxline 20px · 11 rules
- 12pxline 14px · 3 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.is-primary-outline-dark · #003D3D
Corner radius
- 10px · 11×
- 12px · 8×
- 20px · 8×
- 24px · 7×
- 8px · 7×
- 100px · 7×
Shadows
- unset
- 0 0 0 1px #0000001a,0 1px 3px #0000001a
- 0 0 3px #3336
- 0 0 0 2px #fff
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
479
767
768
769
991
1280
1440
1920
On a scale of 0 to 1920 px.
Content widths (max-width)
1500 px
600 px
500 px
450 px
400 px
332 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 54 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 ThriveSparrow use?
- ThriveSparrow’s website uses three typefaces: Tenon (headings), served from cdn.prod.website-files.com; DM Sans (body text), served from cdn.prod.website-files.com; Space Grotesk, served from cdn.prod.website-files.com.
- What are ThriveSparrow’s brand colours?
- The main colours on thrivesparrow.com are Sky Blue (#62D2F1), Light Steel Blue (#C4AEFF), Black (#261B07), Tomato (#F1503A), Dark Cyan (#009999) and Deep Midnight Blue (#341461).
- What colour is ThriveSparrow’s text and background?
- Body text is #4E596C on a #FFFFFF background.
- Where is ThriveSparrow’s logo from?
- The logo shown in this guide was found on thrivesparrow.com’s homepage. For official logo files and usage rules, check ThriveSparrow’s own brand or press page.
- Is this ThriveSparrow’s official style guide?
- No. SiteStyleGuide made it from thrivesparrow.com’s public web pages on 24 October 2026, and isn’t affiliated with ThriveSparrow. 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
thrivesparrow-com-tokens.css
/* thrivesparrow.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/thrivesparrow.com) */
:root {
/* Colours */
--text: #4E596C;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-charcoal: #2B2B2B;
--colour-cool-near-black: #081118;
--colour-sky-blue: #62D2F1;
--colour-light-steel-blue: #C4AEFF;
--colour-black-2: #261B07;
--colour-tomato: #F1503A;
--colour-dark-cyan: #009999;
--colour-deep-midnight-blue: #341461;
--colour-teal: #007A7A;
--colour-light-midnight-blue: #113854;
--colour-dark-slate-grey: #003D3D;
--colour-crimson: #E9142B;
--colour-dim-grey: #4E596C;
--colour-light-cyan: #E0FFF9;
--gradient-1: linear-gradient(104deg,#62d2f1 29%,#c4aeff 93%);
--gradient-2: linear-gradient(to bottom, rgba(255,255,255,0.2) 1px, transparent 1px);
--gradient-3: radial-gradient(circle at 50% -340%,#55b8ff4d,#55b8ff00 100%,#fff);
/* Typefaces */
--font-headings: 'Tenon', 'Arial', sans-serif;
--font-buttons: 'Tenon', 'Arial', sans-serif;
--font-body: 'DM Sans', 'Arial', sans-serif;
/* Type scale */
--text-h1: 38px;
--leading-h1: 44px;
--text-h2: 32px;
--leading-h2: 36px;
--text-h3: 42px;
--leading-h3: 110%;
--text-h4: 22px;
--leading-h4: 140%;
--text-h5: 14px;
--leading-h5: 20px;
--text-h6: 20px;
--leading-h6: 110%;
--text-body: 16px;
--leading-body: 140%;
--text-p: 20px;
--leading-p: 165%;
--text-small: 80%;
/* Shape */
--radius-1: 10px;
--radius-2: 12px;
--radius-3: 20px;
--radius-4: 24px;
--radius-5: 8px;
--radius-6: 100px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 479px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 769px;
--breakpoint-5: 991px;
--breakpoint-6: 1280px;
--breakpoint-7: 1440px;
--breakpoint-8: 1920px;
--max-width-1: 1500px;
--max-width-2: 600px;
--max-width-3: 500px;
--max-width-4: 450px;
--max-width-5: 400px;
--max-width-6: 332px;
}
{
"site": "thrivesparrow.com",
"source": "https://sitestyleguide.com/thrivesparrow.com",
"text": "#4E596C",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Charcoal",
"hex": "#2B2B2B",
"rgb": [
43,
43,
43
]
},
{
"name": "Cool Near Black",
"hex": "#081118",
"rgb": [
8,
17,
24
]
},
{
"name": "Sky Blue",
"hex": "#62D2F1",
"rgb": [
98,
210,
241
]
},
{
"name": "Light Steel Blue",
"hex": "#C4AEFF",
"rgb": [
196,
174,
255
]
},
{
"name": "Black",
"hex": "#261B07",
"rgb": [
38,
27,
7
]
},
{
"name": "Tomato",
"hex": "#F1503A",
"rgb": [
241,
80,
58
]
},
{
"name": "Dark Cyan",
"hex": "#009999",
"rgb": [
0,
153,
153
]
},
{
"name": "Deep Midnight Blue",
"hex": "#341461",
"rgb": [
52,
20,
97
]
},
{
"name": "Teal",
"hex": "#007A7A",
"rgb": [
0,
122,
122
]
},
{
"name": "Light Midnight Blue",
"hex": "#113854",
"rgb": [
17,
56,
84
]
},
{
"name": "Dark Slate Grey",
"hex": "#003D3D",
"rgb": [
0,
61,
61
]
},
{
"name": "Crimson",
"hex": "#E9142B",
"rgb": [
233,
20,
43
]
},
{
"name": "Dim Grey",
"hex": "#4E596C",
"rgb": [
78,
89,
108
]
},
{
"name": "Light Cyan",
"hex": "#E0FFF9",
"rgb": [
224,
255,
249
]
}
],
"fonts": [
{
"name": "Tenon",
"stack": "Tenon, Arial, sans-serif",
"weights": [
100,
400,
500,
700,
800,
900
],
"source": "Served from cdn.prod.website-files.com"
},
{
"name": "DM Sans",
"stack": "DM Sans, Arial, sans-serif",
"weights": [
100,
400,
500,
700,
1000
],
"source": "Served from cdn.prod.website-files.com"
},
{
"name": "Space Grotesk",
"stack": "Space Grotesk, Arial, sans-serif",
"weights": [
300,
500,
700
],
"source": "Served from cdn.prod.website-files.com"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run thrivesparrow.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/thrivesparrow.com" title="ThriveSparrow 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 ThriveSparrow’s
Captured from thrivesparrow.com on 24 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by ThriveSparrow; this guide describes the public website for reference.