goo.gle
goo.gle · set in Roboto
Save1Unofficial A style guide made by SiteStyleGuide from patch.com’s public web pages. Not affiliated with or endorsed by Patch. The real site is patch.com ↗
Unofficial style guide
Patchstyle guide
Patch’s website (patch.com) uses Roboto for its headings and body text. Its palette is led by Deep Royal Blue (#005D8F), Steel Blue (#0083CC) and Red (#E02020), with #111111 text on #FCFCFC. Captured from the live site on 25 October 2026.
- Website
- patch.com
- Typefaces
- Roboto, San Francisco, Patch
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 25 Oct 2026 · added by @sitestyleguide
https://patch.com/
Screenshot
patch.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
- Patch - Everything Local: Breaking News, Events, Discussions
- ● 60 / 60 characters
- Meta description
- The best breaking news, stories, and events from the Patch network of local news sites
- ● 86 / 160 characters
- Site name
- Patch
- og:title
- Patch - Everything Local: Breaking News, Events, Discussions
- og:description
- The best breaking news, stories, and events from the Patch network of local news sites
- Language
- en
- Theme colour
- #ffffff
In search results
Patchhttps://patch.com/
Patch - Everything Local: Breaking News, Events, Discussions
The best breaking news, stories, and events from the Patch network of local news sites
When shared
patch.com
Patch - Everything Local: Breaking News, Events, Discussions
The best breaking news, stories, and events from the Patch network of local news sites
Logo & favicons
Found as: image in the header. SVG, 70 × 22.
Logo
On white
On black
On Deep Royal Blue
Favicons
5 found-
512 px · PNG
manifest
-
360 px · PNG
apple-touch-icon
-
192 px · PNG
manifest
-
48 px · ICO icon
-
32 px · SVG
icon
Patch - Everything Local: Breaking News, Events, Discussions
Light browser tab
Patch - Everything Local: Breaking News, Events, Discussions
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 (#111111) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 28.8%
- Near Black 21.7%
- Deep Royal Blue 14.7%
- Off White 6.9%
- Dark Grey 6.7%
- Steel Blue 4.9%
- Red 3%
- Medium Sea Green 2.2%
- Forest Green 1.8%
- Lime Green 1.8%
- Sky Blue 1.6%
- Golden Rod 1.6%
- Dark Green 1.6%
- Fire Brick 1%
- Misty Rose 0.9%
- Light Royal Blue 0.8%
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
- 18.88:1 AAA
- On white
- —
Background, text, border · inline style on <a>, html
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 93
- On text
- —
- On white
- 18.88:1 AAA
Text, background, border · .hero, .btn--dark
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 9
- On text
- 15.55:1 AAA
- On white
- 1.21:1 Fail
Background, border, text · .styles-module-scss-module__2M1V0G__categories__title--condensed:after, .styles-module-scss-module__9SA7Uq__ContactForm .btn--submit:disabled
-
Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 65
- On text
- 2.70:1 Fail
- On white
- 7.00:1 AAA
Text, background, border · .styles-module-scss-module__qPKbUG__Header__title, .modal-dialog--featured .modal-header .modal-title
Colours
Brand colours and accents, most used first-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 35 0 44
- On text
- 2.66:1 Fail
- On white
- 7.09:1 AAA
Text, background, border · .btn--cta, .btn--subscribe
-
Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 36 0 20
- On text
- 4.60:1 AA
- On white
- 4.10:1 AA large
Text, background, border · .btn--primary-dark, .btn--outline-primary-dark
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 86 86 12
- On text
- 3.95:1 AA large
- On white
- 4.78:1 AA
Text, border, background · .btn--error, .btn--outline-error
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 97 0 47 38
- On text
- 5.48:1 AA
- On white
- 3.45:1 AA large
Background, text, graphic · inline style on <a>, inline style on <h3>
-
Forest Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 88 38
- On text
- 5.31:1 AA
- On white
- 3.56:1 AA large
Text, background, border · .btn--secondary, .btn--outline-secondary
-
Lime Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 97 0 79 23
- On text
- 8.04:1 AAA
- On white
- 2.35:1 Fail
Text, background, border · .btn--success, .btn--outline-success
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 63 13 0 0
- On text
- 12.12:1 AAA
- On white
- 1.56:1 Fail
Text, background, border · .btn--info, .btn--outline-info
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 23 91 3
- On text
- 11.09:1 AAA
- On white
- 1.70:1 Fail
Text, background, border · .btn--warning, .btn--outline-warning
-
Dark Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 93 70
- On text
- 1.83:1 Fail
- On white
- 10.31:1 AAA
Text, background, border · .btn--secondary-dark, .btn--outline-secondary-dark
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 90 16
- On text
- 3.51:1 AA large
- On white
- 5.38:1 AA
Text, graphic · --rx-bg-negative-static, --rx-border-negative-static
-
Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 13 13 0
- On text
- 15.17:1 AAA
- On white
- 1.24:1 Fail
Background · .Input-module-scss-module__oSzroq__fieldInput.Input-module-scss-module__oSzroq__, .ErrorMessage-module-scss-module__S_ooKG__errorMessage
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 61 0 0
- On text
- 3.80:1 AA large
- On white
- 4.97:1 AA
Background, text · --rx-bg-primary-static, --rx-border-primary-static
Gradients
-
linear-gradient(45deg,#ffffff40 25%,transparent 25%,transparent 50%,#ffffff40 50%,#ffffff40 75%,transparent 75%,transparent)
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.
Roboto
Aa
400
Aa
500
Roboto
Google Fonts · weights 400, 500 · buttons, body, headings
Aa
400
Aa
500
San Francisco
System font, or not loaded on this page · weights 400, 500 · buttons · shown in a stand-in if you don’t have it
Aa
400
Patch
Served from cdn.patchcdn.com · weights 400 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
36px / 1.25
weight 800
Patch
Heading 2
24px / 1.25
weight 700
Patch - Everything Local: Breaking News, Events…
Heading 3
20px / 1.25
weight 600
Patch - Everything Local: Breaking News, Events…
Heading 4
1rem · 16 px / 1.25
weight 500
Patch - Everything Local: Breaking News, Events…
Heading 5
16px / 1.25
weight 600
Patch - Everything Local: Breaking News, Events…
Heading 6
16px / 1.25
weight 600
Patch - Everything Local: Breaking News, Events…
Paragraph
.875rem · 14 px / 1.5
The best breaking news, stories, and events from the Patch network of local news sites
Small
85%
The best breaking news, stories, and events from the Patch network of local news sites
Button
.9375rem · 15 px
Roboto
Get started
Link
1.125rem · 18 px / 20px
Read more about Patch
Sizes in use
Most common across the site- 24pxline 1.2 · 13 rules
- 20pxline 24px · 25 rules
- 18pxline 18px · 50 rules
- 16pxline 20px · 75 rules
- 15pxline 1.2 · 22 rules
- 14pxline 1.5 · 127 rules
- 13pxline 1 · 9 rules
- 12pxline 16px · 42 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
.styles-module-scss-module__9SA7Uq__ContactForm .btn--submit · #005D8F · radius 12px
Link
Read our latest news today.
a · #005D8F
Corner radius
- 4px · 59×
- 6px · 27×
- 30px · 23×
- 50% · 18×
- 3px · 10×
- 8px · 9×
Shadows
- 0 .3rem .75rem #00000026
- 0 .5rem 1rem #00000026
- 0 .5rem 1.5rem #0000002d
- 0 1px 4px #0003
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
360
576
768
788
900
991
992
1140
On a scale of 0 to 1440 px.
Content widths (max-width)
1280 px
1090 px
950 px
730 px
600 px
350 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 Patch use?
- Patch’s website uses two typefaces: Roboto (headings and body text), google Fonts; Patch, served from cdn.patchcdn.com.
- What are Patch’s brand colours?
- The main colours on patch.com are Deep Royal Blue (#005D8F), Steel Blue (#0083CC), Red (#E02020), Medium Sea Green (#049F55), Forest Green (#009E13) and Lime Green (#06C42A).
- What colour is Patch’s text and background?
- Body text is #111111 on a #FCFCFC background.
- Where is Patch’s logo from?
- The logo shown in this guide was found on patch.com’s homepage. For official logo files and usage rules, check Patch’s own brand or press page.
- Is this Patch’s official style guide?
- No. SiteStyleGuide made it from patch.com’s public web pages on 25 October 2026, and isn’t affiliated with Patch. 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
patch-com-tokens.css
/* patch.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/patch.com) */
:root {
/* Colours */
--text: #111111;
--background: #FCFCFC;
--colour-white: #FFFFFF;
--colour-near-black: #111111;
--colour-off-white: #E9E9E9;
--colour-dark-grey: #595959;
--colour-deep-royal-blue: #005D8F;
--colour-steel-blue: #0083CC;
--colour-red: #E02020;
--colour-medium-sea-green: #049F55;
--colour-forest-green: #009E13;
--colour-lime-green: #06C42A;
--colour-sky-blue: #5EDFFF;
--colour-golden-rod: #F7BE16;
--colour-dark-green: #004C05;
--colour-fire-brick: #D70015;
--colour-misty-rose: #FFDFDF;
--colour-light-royal-blue: #0063FF;
--gradient-2: linear-gradient(45deg,#ffffff40 25%,transparent 25%,transparent 50%,#ffffff40 50%,#ffffff40 75%,transparent 75%,transparent);
/* Typefaces */
--font-buttons: 'Roboto', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-body: 'Roboto', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-headings: 'Roboto', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-other: 'Patch';
/* Type scale */
--text-h1: 36px;
--leading-h1: 1.25;
--text-h2: 24px;
--leading-h2: 1.25;
--text-h3: 20px;
--leading-h3: 1.25;
--text-h4: 1rem;
--leading-h4: 1.25;
--text-h5: 16px;
--leading-h5: 1.25;
--text-h6: 16px;
--leading-h6: 1.25;
--text-p: .875rem;
--leading-p: 1.5;
--text-small: 85%;
--text-button: .9375rem;
--text-a: 1.125rem;
--leading-a: 20px;
/* Shape */
--radius-1: 4px;
--radius-2: 6px;
--radius-3: 30px;
--radius-4: 50%;
--radius-5: 3px;
--radius-6: 8px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 360px;
--breakpoint-2: 576px;
--breakpoint-3: 768px;
--breakpoint-4: 788px;
--breakpoint-5: 900px;
--breakpoint-6: 991px;
--breakpoint-7: 992px;
--breakpoint-8: 1140px;
--max-width-1: 1280px;
--max-width-2: 1090px;
--max-width-3: 950px;
--max-width-4: 730px;
--max-width-5: 600px;
--max-width-6: 350px;
}
{
"site": "patch.com",
"source": "https://sitestyleguide.com/patch.com",
"text": "#111111",
"background": "#FCFCFC",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#111111",
"rgb": [
17,
17,
17
]
},
{
"name": "Off White",
"hex": "#E9E9E9",
"rgb": [
233,
233,
233
]
},
{
"name": "Dark Grey",
"hex": "#595959",
"rgb": [
89,
89,
89
]
},
{
"name": "Deep Royal Blue",
"hex": "#005D8F",
"rgb": [
0,
93,
143
]
},
{
"name": "Steel Blue",
"hex": "#0083CC",
"rgb": [
0,
131,
204
]
},
{
"name": "Red",
"hex": "#E02020",
"rgb": [
224,
32,
32
]
},
{
"name": "Medium Sea Green",
"hex": "#049F55",
"rgb": [
4,
159,
85
]
},
{
"name": "Forest Green",
"hex": "#009E13",
"rgb": [
0,
158,
19
]
},
{
"name": "Lime Green",
"hex": "#06C42A",
"rgb": [
6,
196,
42
]
},
{
"name": "Sky Blue",
"hex": "#5EDFFF",
"rgb": [
94,
223,
255
]
},
{
"name": "Golden Rod",
"hex": "#F7BE16",
"rgb": [
247,
190,
22
]
},
{
"name": "Dark Green",
"hex": "#004C05",
"rgb": [
0,
76,
5
]
},
{
"name": "Fire Brick",
"hex": "#D70015",
"rgb": [
215,
0,
21
]
},
{
"name": "Misty Rose",
"hex": "#FFDFDF",
"rgb": [
255,
223,
223
]
},
{
"name": "Light Royal Blue",
"hex": "#0063FF",
"rgb": [
0,
99,
255
]
}
],
"fonts": [
{
"name": "Roboto",
"stack": "Roboto, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif",
"weights": [
400,
500
],
"source": "Google Fonts"
},
{
"name": "San Francisco",
"stack": "-apple-system, BlinkMacSystemFont, \"San Francisco\", \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif",
"weights": [
400,
500
],
"source": "System font, or not loaded on this page"
},
{
"name": "Patch",
"stack": "Patch",
"weights": [
400
],
"source": "Served from cdn.patchcdn.com"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run patch.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/patch.com" title="Patch 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 Roboto
Other websites using Roboto as their main typeface
Similar colours
Websites whose lead colour is closest to Patch’s
VMware by Broadcom
vmware.com · 2 days ago
Save
ProBlogger
problogger.net · 3 days ago
Save
US EPA
epa.gov · 8 hours ago
Save
DOL
dol.gov · 5 days ago
Save
Captured from patch.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Patch; this guide describes the public website for reference.