SiteGround
siteground.com · set in Poppins
SaveUnofficial A style guide made by SiteStyleGuide from gyazo.com’s public web pages. Not affiliated with or endorsed by Gyazo. The real site is gyazo.com ↗
Unofficial style guide
Gyazostyle guide
Gyazo’s website (gyazo.com) sets its headings in Poppins and its body text in Roboto. Its palette is led by Midnight Blue (#0A2540), Dodger Blue (#4884E7) and Royal Blue (#1D66DF), with #0A2540 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- gyazo.com
- Typefaces
- Poppins, Roboto, Noto Sans JP
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://gyazo.com/
Screenshot
gyazo.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
- Gyazo · Screen Recorder: Share Screenshots and Videos Easily
- ● 60 / 60 characters
- Meta description
- Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.
- ● 154 / 160 characters
- Site name
- Gyazo
- og:title
- Gyazo · Screen Recorder: Share Screenshots and Videos Easily
- og:description
- Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.
- Language
- en
In search results
Gyazohttps://gyazo.com/
Gyazo · Screen Recorder: Share Screenshots and Videos Easily
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.
When shared
gyazo.com
Gyazo · Screen Recorder: Share Screenshots and Videos Easily
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual …
Logo & favicons
Found as: CSS background on .logo. PNG, 503 × 156.
Logo
On white
On black
On Midnight Blue
Favicons
2 found-
152 px · PNG
apple-touch-icon
-
Gyazo · Screen Recorder: Share Screenshots and Videos Easily
Light browser tab
Gyazo · Screen Recorder: Share Screenshots and Videos Easily
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 (#0A2540) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 38.3%
- Midnight Blue 18%
- Dodger Blue 11.4%
- Off White 6.6%
- Charcoal 4.2%
- Royal Blue 3.5%
- Black 3.1%
- Indian Red 2%
- Fire Brick 1.9%
- Medium Sea Green 1.7%
- Orange 1.7%
- Lemon Chiffon 1.7%
- Dark Turquoise 1.7%
- Honey Dew 1.5%
- Misty Rose 1.5%
- Forest Green 1.2%
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
- 15.54:1 AAA
- On white
- —
Text, background, graphic · body, .btn-default
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 13
- On text
- 11.44:1 AAA
- On white
- 1.36:1 Fail
Border, background · .btn-default.focus, .nav .nav-divider
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.23:1 Fail
- On white
- 12.63:1 AAA
Text, background, border · .panel-default>.panel-heading .badge, body .sticker-gdpr-btn>button
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.35:1 Fail
- On white
- 21.00:1 AAA
Background, text, border · .teams-pricing .box-container .box.enterprise-plan .title, .navbar-inverse .navbar-nav .open .dropdown-menu .divider
Colours
Brand colours and accents, most used first-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 84 42 0 75
- On text
- —
- On white
- 15.54:1 AAA
Text, background, border · .btn-default .badge, body.teams .hero-header
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 69 43 0 9
- On text
- 4.24:1 AA large
- On white
- 3.66:1 AA large
Background, text, border · .btn-primary, .panel-primary>.panel-heading
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 54 0 13
- On text
- 2.97:1 Fail
- On white
- 5.23:1 AA
Background, border, text · .btn-primary:hover, .btn-primary.active
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 62 64 15
- On text
- 3.92:1 AA large
- On white
- 3.96:1 AA large
Background, text · .btn-danger, .btn-danger .badge
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 76 78 21
- On text
- 2.92:1 Fail
- On white
- 5.33:1 AA
Background, border · .btn-danger.focus, .btn-danger:hover
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 50 0 50 28
- On text
- 6.26:1 AA
- On white
- 2.48:1 Fail
Background, text · .btn-success, .btn-success .badge
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 28 68 6
- On text
- 7.99:1 AAA
- On white
- 1.95:1 Fail
Background, text · .btn-warning, .btn-warning .badge
-
Lemon Chiffon
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 2 19 0
- On text
- 14.58:1 AAA
- On white
- 1.07:1 Fail
Background, text · .panel-warning>.panel-heading, .panel-warning>.panel-heading .badge
-
Dark Turquoise
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 86 11 0 13
- On text
- 7.47:1 AAA
- On white
- 2.08:1 Fail
Background, text · .btn-info, .btn-info .badge
-
Honey Dew
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 10 0 11 2
- On text
- 14.01:1 AAA
- On white
- 1.11:1 Fail
Background, text · .panel-success>.panel-heading, .panel-success>.panel-heading .badge
-
Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 13 14 1
- On text
- 12.08:1 AAA
- On white
- 1.29:1 Fail
Background, text · .panel-danger>.panel-heading, .panel-danger>.panel-heading .badge
-
Forest Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 57 0 57 38
- On text
- 4.55:1 AA
- On white
- 3.41:1 AA large
Background · .btn-success.focus, .btn-success:hover
Gradients
-
linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)
-
linear-gradient(90deg,#72a1f0,#4985e7)
-
linear-gradient(.41deg,#072c67 -1.76%,#4884e7 107.24%)
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.
Poppins
Aa
300
Aa
700
Poppins
Google Fonts · weights 300, 400, 500, 600, 700 · headings, buttons
Aa
300
Aa
700
Roboto
Google Fonts · weights 300, 400, 500, 700 · body
Aa
300
Aa
700
Noto Sans JP
Google Fonts · weights 300, 400, 500, 600, 700
Aa
400
Aa
700
Open Sans
Google Fonts · weights 400, 500, 600, 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
56px / 66px
weight 600 · Poppins
Gyazo
Heading 2
44px / 48px
weight 600 · Poppins
Gyazo · Screen Recorder: Share Screenshots and …
Heading 3
34px / 42px
weight 600 · Poppins
Gyazo · Screen Recorder: Share Screenshots and …
Heading 4
28px / 32px
weight 600 · Poppins
Gyazo · Screen Recorder: Share Screenshots and …
Heading 5
22px / 28px
weight 600 · Poppins
Gyazo · Screen Recorder: Share Screenshots and …
Heading 6
16px / 19px
weight 600 · Poppins
Gyazo · Screen Recorder: Share Screenshots and …
Body
16px / 1.5
Roboto
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortles…
Paragraph
14px / 24px
weight 400 · Poppins
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortles…
Small
87%
Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortles…
Link
30px / 54px
weight 500
Read more about Gyazo
Sizes in use
Most common across the site- 48pxline 1.2 · 9 rules
- 24pxline inherit · 11 rules
- 20pxline 1.5 · 20 rules
- 18pxline 28px · 28 rules
- 16pxline 1.5 · 33 rules
- 15pxline 1.5 · 5 rules
- 14pxline 1.5 · 42 rules
- 12pxline 16px · 10 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
.btn-primary · #4884E7
Link
Read our latest news today.
a · #4884E7
Corner radius
- 4px · 28×
- 3px · 15×
- 6px · 13×
- 24px · 7×
- 100px · 5×
- 50% · 4×
Shadows
- 0 2px 0 rgba(0,0,0,.1)
- 0 0 12px 0 rgba(0,0,0,.05)
- 0 6px 12px rgba(0,0,0,.175)
- 0 1px 1px rgba(0,0,0,.05)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
767
768
991
992
1199
1200
1400
On a scale of 0 to 1440 px.
Content widths (max-width)
1128 px
900 px
592 px
500 px
470 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 60 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 Gyazo use?
- Gyazo’s website uses four typefaces: Poppins (headings), google Fonts; Roboto (body text), google Fonts; Noto Sans JP, google Fonts; Open Sans, google Fonts.
- What are Gyazo’s brand colours?
- The main colours on gyazo.com are Midnight Blue (#0A2540), Dodger Blue (#4884E7), Royal Blue (#1D66DF), Indian Red (#D9534F), Fire Brick (#C9302C) and Medium Sea Green (#5CB85C).
- What colour is Gyazo’s text and background?
- Body text is #0A2540 on a #FFFFFF background.
- Where is Gyazo’s logo from?
- The logo shown in this guide was found on gyazo.com’s homepage. For official logo files and usage rules, check Gyazo’s own brand or press page.
- Is this Gyazo’s official style guide?
- No. SiteStyleGuide made it from gyazo.com’s public web pages on 27 October 2026, and isn’t affiliated with Gyazo. 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
gyazo-com-tokens.css
/* gyazo.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/gyazo.com) */
:root {
/* Colours */
--text: #0A2540;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-off-white: #DDDDDD;
--colour-charcoal: #333333;
--colour-black: #000000;
--colour-midnight-blue: #0A2540;
--colour-dodger-blue: #4884E7;
--colour-royal-blue: #1D66DF;
--colour-indian-red: #D9534F;
--colour-fire-brick: #C9302C;
--colour-medium-sea-green: #5CB85C;
--colour-orange: #F0AD4E;
--colour-lemon-chiffon: #FFF9CF;
--colour-dark-turquoise: #1EC5DE;
--colour-honey-dew: #E1FADE;
--colour-misty-rose: #FDDBDA;
--colour-forest-green: #449D44;
--gradient-1: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
--gradient-2: linear-gradient(90deg,#72a1f0,#4985e7);
--gradient-3: linear-gradient(.41deg,#072c67 -1.76%,#4884e7 107.24%);
/* Typefaces */
--font-headings: 'Poppins', sans-serif;
--font-buttons: 'Poppins', sans-serif;
--font-body: 'Roboto', sans-serif;
--font-other: 'Noto Sans JP', sans-serif;
/* Type scale */
--text-h1: 56px;
--leading-h1: 66px;
--text-h2: 44px;
--leading-h2: 48px;
--text-h3: 34px;
--leading-h3: 42px;
--text-h4: 28px;
--leading-h4: 32px;
--text-h5: 22px;
--leading-h5: 28px;
--text-h6: 16px;
--leading-h6: 19px;
--text-body: 16px;
--leading-body: 1.5;
--text-p: 14px;
--leading-p: 24px;
--text-small: 87%;
--text-a: 30px;
--leading-a: 54px;
/* Shape */
--radius-1: 4px;
--radius-2: 3px;
--radius-3: 6px;
--radius-4: 24px;
--radius-5: 100px;
--radius-6: 50%;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 767px;
--breakpoint-2: 768px;
--breakpoint-3: 991px;
--breakpoint-4: 992px;
--breakpoint-5: 1199px;
--breakpoint-6: 1200px;
--breakpoint-7: 1400px;
--max-width-1: 1128px;
--max-width-2: 900px;
--max-width-3: 592px;
--max-width-4: 500px;
--max-width-5: 470px;
--max-width-6: 300px;
}
{
"site": "gyazo.com",
"source": "https://sitestyleguide.com/gyazo.com",
"text": "#0A2540",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#DDDDDD",
"rgb": [
221,
221,
221
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Midnight Blue",
"hex": "#0A2540",
"rgb": [
10,
37,
64
]
},
{
"name": "Dodger Blue",
"hex": "#4884E7",
"rgb": [
72,
132,
231
]
},
{
"name": "Royal Blue",
"hex": "#1D66DF",
"rgb": [
29,
102,
223
]
},
{
"name": "Indian Red",
"hex": "#D9534F",
"rgb": [
217,
83,
79
]
},
{
"name": "Fire Brick",
"hex": "#C9302C",
"rgb": [
201,
48,
44
]
},
{
"name": "Medium Sea Green",
"hex": "#5CB85C",
"rgb": [
92,
184,
92
]
},
{
"name": "Orange",
"hex": "#F0AD4E",
"rgb": [
240,
173,
78
]
},
{
"name": "Lemon Chiffon",
"hex": "#FFF9CF",
"rgb": [
255,
249,
207
]
},
{
"name": "Dark Turquoise",
"hex": "#1EC5DE",
"rgb": [
30,
197,
222
]
},
{
"name": "Honey Dew",
"hex": "#E1FADE",
"rgb": [
225,
250,
222
]
},
{
"name": "Misty Rose",
"hex": "#FDDBDA",
"rgb": [
253,
219,
218
]
},
{
"name": "Forest Green",
"hex": "#449D44",
"rgb": [
68,
157,
68
]
}
],
"fonts": [
{
"name": "Poppins",
"stack": "Poppins, sans-serif",
"weights": [
300,
400,
500,
600,
700
],
"source": "Google Fonts"
},
{
"name": "Roboto",
"stack": "Roboto, sans-serif",
"weights": [
300,
400,
500,
700
],
"source": "Google Fonts"
},
{
"name": "Noto Sans JP",
"stack": "\"Noto Sans JP\", sans-serif",
"weights": [
300,
400,
500,
600,
700
],
"source": "Google Fonts"
},
{
"name": "Open Sans",
"stack": "'Open Sans'",
"weights": [
400,
500,
600,
700
],
"source": "Google Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run gyazo.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/gyazo.com" title="Gyazo style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Poppins
Other websites using Poppins as their main typeface
Similar colours
Websites whose lead colour is closest to Gyazo’s
trello.com
trello.com · 1 day ago
Save
definicion.de
definicion.de · 3 days ago
Save
gameforge.com
gameforge.com · 16 hours ago
Save
Salesforce
salesforce.com · 5 days ago
Save
Captured from gyazo.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Gyazo; this guide describes the public website for reference.