Legacy Supported Living
legacysupportedliving.co.uk · set in Work Sans
Save1Unofficial A style guide made by SiteStyleGuide from texas.gov’s public web pages. Not affiliated with or endorsed by Texas.gov. The real site is texas.gov ↗
Unofficial style guide
Texas.govstyle guide
Texas.gov’s website (texas.gov) uses Work Sans for its headings and body text. Its palette is led by Slate Blue (#304FFE), Dark Slate Blue (#2F3345) and Light Midnight Blue (#192984), with #626C77 text on #FFFFFF. Captured from the live site on 26 October 2026.
- Website
- texas.gov
- Typefaces
- Work Sans
- Palette
- 4 neutrals, 12 colours
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://www.texas.gov/
Screenshot
texas.gov
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Texas.gov | The Official Website of the State of Texas
- ● 54 / 60 characters
- Meta description
- Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
- ● 133 / 160 characters
- Site name
- Texas.gov
- og:title
- The Official Website of the State of Texas
- og:description
- Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
- Language
- en
In search results
Texas.govhttps://www.texas.gov/
Texas.gov | The Official Website of the State of Texas
Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
When shared
No og:image, so no picture
texas.gov
The Official Website of the State of Texas
Explore the official website of the State of Texas. We'll help you find the government services, information,…
Logo & favicons
Found as: schema.org logo. PNG, 458 × 130.
Logo
On white
On black
On Slate Blue
Favicons
1 found-
Texas.gov | The Official Website of the State of Texas
Light browser tab
Texas.gov | The Official Website of the State of Texas
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 (#626C77) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 23.8%
- Slate Blue 22.4%
- Dark Slate Blue 8.3%
- Light Midnight Blue 7.6%
- Light Cool Dark Grey 6.4%
- Deep Cool Dark Grey 6.4%
- Cool Grey 5.8%
- Crimson 4.4%
- Midnight Blue 3.9%
- Midnight Blue 2.7%
- Gold 2.3%
- Golden Rod 1.4%
- Deep Midnight Blue 1.3%
- Maroon 1.1%
- Saddle Brown 1.1%
- Blue 1.1%
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
- 5.34:1 AA
- On white
- —
Background, text, graphic · .button--tx-btn--secondary--16en0, .banner__title
-
Light Cool Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 18 9 0 53
- On text
- —
- On white
- 5.34:1 AA
Text, graphic · .agency-card__sub-title, .county-card__sub-title
-
Deep Cool Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 24 12 0 64
- On text
- 1.49:1 Fail
- On white
- 7.98:1 AAA
Text · .button--tx-btn--tertiary--2dLA5, .tx-btn--tertiary
-
Cool Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 17 8 0 49
- On text
- 1.17:1 Fail
- On white
- 4.57:1 AA
Text, background, graphic · .mobile-nav__subheading, .SearchBoxQuickSearch-module--quickSearchResults--29EX- li button
Colours
Brand colours and accents, most used first-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 69 0 0
- On text
- 1.07:1 Fail
- On white
- 5.71:1 AA
Text, background, graphic · .button--tx-btn--3XoQt, .hero-homepage
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 32 26 0 73
- On text
- 2.34:1 Fail
- On white
- 12.50:1 AAA
Text, border · .container-404__heading, .agency-resources-card__title
-
Light Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 69 0 48
- On text
- 2.32:1 Fail
- On white
- 12.41:1 AAA
Text, background, graphic · .quick-links__title, .quick-links__subtitles
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 96 79 18
- On text
- 1.03:1 Fail
- On white
- 5.51:1 AA
Background, border · .button--tx-btn--danger--3mFVm, .tx-btn--danger
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 59 47 0 69
- On text
- 2.64:1 Fail
- On white
- 14.11:1 AAA
Background, text, border · .tx-alert--info .tx-alert__icon, .alert--tx-alert--info--3hxNt .alert--tx-alert__icon--sGTdV
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 65 0 64
- On text
- 2.90:1 Fail
- On white
- 15.47:1 AAA
Text, graphic, border · .nav-search textarea, .language-switcher__mobile .header
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 19 73 0
- On text
- 3.60:1 AA large
- On white
- 1.48:1 Fail
Background, border · .button--tx-btn--tertiary--2dLA5, .tx-btn--tertiary
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 75 0
- On text
- 3.25:1 AA large
- On white
- 1.64:1 Fail
Background · a.button-primary:hover, .alert-banner__type-2
-
Deep Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 98 88 0 76
- On text
- 3.58:1 AA large
- On white
- 19.14:1 AAA
Text · a.button-primary, .alert-banner__type-2
-
Maroon
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 86 70 60
- On text
- 2.40:1 Fail
- On white
- 12.84:1 AAA
Text · .tx-alert--error .tx-alert__content, .alert--tx-alert--error--UEgDd .alert--tx-alert__content--2MMg7
-
Saddle Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 25 74 55
- On text
- 1.26:1 Fail
- On white
- 6.72:1 AA
Text · .tx-alert--warning .tx-alert__content, .alert--tx-alert--warning--3IE6B .alert--tx-alert__content--2MMg7
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 70 0 17
- On text
- 1.42:1 Fail
- On white
- 7.59:1 AAA
Background, text · .NavQuickSearchResults-module--wrapper__child--blue--3fa6c, .SearchBoxQuickSearch-module--wrapper__child--blue--2ryE7
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.
Work Sans
Aa
400
Aa
800
Work Sans
Self-hosted · weights 400, 500, 700, 800 · headings, buttons, body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
64px / 66px
weight 800
Texas.gov
Heading 2
48px / 52px
weight 800
Texas.gov | The Official Website of the State o…
Heading 3
24px / 30px
weight 800
Texas.gov | The Official Website of the State o…
Heading 4
100% / 1.25
weight 700
Texas.gov | The Official Website of the State o…
Heading 5
20px / 28px
weight 800
Texas.gov | The Official Website of the State o…
Heading 6
100% / 1.25
weight 700
Texas.gov | The Official Website of the State o…
Body
100%
weight 500 · Work Sans
Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
Paragraph
24px / 32px
weight 400
Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
Small
100%
Explore the official website of the State of Texas. We'll help you find the government services, information, and resources you need.
Button
16px
Get started
Link
20px / 28px
weight 500
Read more about Texas.gov
Sizes in use
Most common across the site- 64pxline 66px · 7 rules
- 48pxline 52px · 9 rules
- 32pxline 38px · 5 rules
- 24pxline 30px · 20 rules
- 20pxline 28px · 28 rules
- 18pxline 28px · 1 rules
- 16pxline 24px · 75 rules
- 14pxline normal · 7 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
.pagination__links a.active · #304FFE
Link
Read our latest news today.
a · #304FFE
Corner radius
- 4px · 37×
- 40px · 6×
- 50% · 5×
- 8px · 2×
- 100% · 2×
- 20px · 1×
Shadows
- 0 8px 40px 0 rgba(0,0,0,.1)
- 0 8px 40px 0 rgba(0,0,0,0.1)
- 0 0 1px 3px #2d94f3
- 0 0 3px #304ffe
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
600
765
854
899
900
1148
1290
1485
On a scale of 0 to 1485 px.
Content widths (max-width)
1440 px
1400 px
752 px
624 px
400 px
395 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.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Texas.gov use?
- Texas.gov’s website uses one typeface: Work Sans (headings and body text), self-hosted.
- What are Texas.gov’s brand colours?
- The main colours on texas.gov are Slate Blue (#304FFE), Dark Slate Blue (#2F3345), Light Midnight Blue (#192984), Crimson (#D2082D), Midnight Blue (#20294E) and Midnight Blue (#00205B).
- What colour is Texas.gov’s text and background?
- Body text is #626C77 on a #FFFFFF background.
- Where is Texas.gov’s logo from?
- The logo shown in this guide was found on texas.gov’s homepage. For official logo files and usage rules, check Texas.gov’s own brand or press page.
- Is this Texas.gov’s official style guide?
- No. SiteStyleGuide made it from texas.gov’s public web pages on 26 October 2026, and isn’t affiliated with Texas.gov. 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
texas-gov-tokens.css
/* texas.gov design tokens, from SiteStyleGuide (https://sitestyleguide.com/texas.gov) */
:root {
/* Colours */
--text: #626C77;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-light-cool-dark-grey: #626C77;
--colour-deep-cool-dark-grey: #47525D;
--colour-cool-grey: #6C7782;
--colour-slate-blue: #304FFE;
--colour-dark-slate-blue: #2F3345;
--colour-light-midnight-blue: #192984;
--colour-crimson: #D2082D;
--colour-midnight-blue: #20294E;
--colour-midnight-blue-2: #00205B;
--colour-gold: #FFCE44;
--colour-golden-rod: #FFBF3F;
--colour-deep-midnight-blue: #01073C;
--colour-maroon: #650E1E;
--colour-saddle-brown: #74571E;
--colour-blue: #2640D4;
/* Typefaces */
--font-headings: 'Work Sans';
--font-buttons: 'Work Sans';
--font-body: 'Work Sans';
/* Type scale */
--text-h1: 64px;
--leading-h1: 66px;
--text-h2: 48px;
--leading-h2: 52px;
--text-h3: 24px;
--leading-h3: 30px;
--text-h4: 100%;
--leading-h4: 1.25;
--text-h5: 20px;
--leading-h5: 28px;
--text-h6: 100%;
--leading-h6: 1.25;
--text-body: 100%;
--text-p: 24px;
--leading-p: 32px;
--text-small: 100%;
--text-button: 16px;
--text-a: 20px;
--leading-a: 28px;
/* Shape */
--radius-1: 4px;
--radius-2: 40px;
--radius-3: 50%;
--radius-4: 8px;
--radius-5: 100%;
--radius-6: 20px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 600px;
--breakpoint-2: 765px;
--breakpoint-3: 854px;
--breakpoint-4: 899px;
--breakpoint-5: 900px;
--breakpoint-6: 1148px;
--breakpoint-7: 1290px;
--breakpoint-8: 1485px;
--max-width-1: 1440px;
--max-width-2: 1400px;
--max-width-3: 752px;
--max-width-4: 624px;
--max-width-5: 400px;
--max-width-6: 395px;
}
{
"site": "texas.gov",
"source": "https://sitestyleguide.com/texas.gov",
"text": "#626C77",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Light Cool Dark Grey",
"hex": "#626C77",
"rgb": [
98,
108,
119
]
},
{
"name": "Deep Cool Dark Grey",
"hex": "#47525D",
"rgb": [
71,
82,
93
]
},
{
"name": "Cool Grey",
"hex": "#6C7782",
"rgb": [
108,
119,
130
]
},
{
"name": "Slate Blue",
"hex": "#304FFE",
"rgb": [
48,
79,
254
]
},
{
"name": "Dark Slate Blue",
"hex": "#2F3345",
"rgb": [
47,
51,
69
]
},
{
"name": "Light Midnight Blue",
"hex": "#192984",
"rgb": [
25,
41,
132
]
},
{
"name": "Crimson",
"hex": "#D2082D",
"rgb": [
210,
8,
45
]
},
{
"name": "Midnight Blue",
"hex": "#20294E",
"rgb": [
32,
41,
78
]
},
{
"name": "Midnight Blue",
"hex": "#00205B",
"rgb": [
0,
32,
91
]
},
{
"name": "Gold",
"hex": "#FFCE44",
"rgb": [
255,
206,
68
]
},
{
"name": "Golden Rod",
"hex": "#FFBF3F",
"rgb": [
255,
191,
63
]
},
{
"name": "Deep Midnight Blue",
"hex": "#01073C",
"rgb": [
1,
7,
60
]
},
{
"name": "Maroon",
"hex": "#650E1E",
"rgb": [
101,
14,
30
]
},
{
"name": "Saddle Brown",
"hex": "#74571E",
"rgb": [
116,
87,
30
]
},
{
"name": "Blue",
"hex": "#2640D4",
"rgb": [
38,
64,
212
]
}
],
"fonts": [
{
"name": "Work Sans",
"stack": "Work Sans",
"weights": [
400,
500,
700,
800
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run texas.gov?
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/texas.gov" title="Texas.gov 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 Work Sans
Other websites using Work Sans as their main typeface
Similar colours
Websites whose lead colour is closest to Texas.gov’s
WordPress.com
wp.me · 19 hours ago
Save
WordPress.org
wordpress.org · 1 day ago
Save
Interia
interia.pl · 20 hours ago
Save
CTV News
ctvnews.ca · 5 days ago
Save
Captured from texas.gov on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Texas.gov; this guide describes the public website for reference.