Style guide for websites and online applications

Typeface

Available via Google Fonts

Raleway Bold

Available via Google Fonts

Open Sans Regular Bold

Color Palette

Check contrast for accessibility when using colors with text.

#124c95
RGBA (18, 76, 149) Insurance

#5b73ac
RGBA (91, 115, 172)

#c3d2e5
RGBA (195, 210, 229)

#63ac45
RGBA (99, 172, 69)

#4e833c (use for text)
RGBA (78, 131, 60)

#91191c
RGBA (145, 25, 28) State Fire Marshal

#f2672a
RGBA (242, 103, 42)

#ce470d (use for text)
RGBA (206, 71, 13)

#faa229
RGBA (250, 162, 41) Workers' Comp

#232323
RGBA (35, 35, 35)

#5f6a72
RGBA (95, 106, 114)

#6B7780 (min. gray text)
RGBA (107, 119, 128)

#a3a4aa
RGBA (163, 164, 170)

#eef0f1
RGBA (238, 240, 241)

#ffffff
RGBA (255, 255, 255)

Typography

Desktop Headings

Heading 1 – Raleway Bold, 1.75rem, #124c95, Line-height: 1.25, Margin-bottom: 6px

Heading 2 – Raleway Bold, 1.35rem, #4e833c, Line-height: 1.2, Margin-bottom: 12px

Heading 3 – Raleway Bold, 1.15rem, #124c95, Line-height: 1.35, Margin-bottom: 10px

Heading 4 – Open Sans Bold, 1rem, #4e833c, Line-height: 1.5, Margin-bottom: 6px

Desktop Paragraph

Open Sans, 0.875rem, #232323, line-height: 1.5, margin-bottom: 12px

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mobile Headings

Heading 1 – Raleway Bold, 1.5rem, #124c95, Line-height: 1.25, Margin-bottom: 6px

Heading 2 – Raleway Bold, 1.15rem, #4e833c, Line-height: 1.25, Margin-bottom: 6px

Heading 3 – Raleway Bold, 1.05rem, #124c95, Line-height: 1.35, Margin-bottom: 6px

Heading 4 – Open Sans Bold, 1rem, #4e833c, Line-height: 1.5, Margin-bottom: 6px

Mobile Paragraph

Open Sans, 0.875rem, #232323, line-height: 1.5, margin-bottom: 12px

Favicon

Header

Desktop

Mobile

On desktop, the menu spans the full width of the screen with three-tab navigation sections. When a tab is selected the sub navigation for that section shows below in a full width bar. On mobile, the tab navigation will drop to accordions with expandable sub menus.

Grids

Media Queries:

1280px, 960px, 720px, 520px, plus print

Max width of content is 1280px

Interior Page Elements

Left Navigation

On mobile, the left navigation collapses to an accordion menu above the H1 Page title tag.

Desktop

Source: /consumer/storms/recoverytips

Container: 272.986px width
Colored Bar: #f2672a, 15px wide
Headline: Open Sans Bold, 13.3px, #124c95; #d7d9ec 2px border bottom
Links: Open Sans Regular, 13.3px, #124c95; 5px top and bottom padding, 4px left and right padding

Mobile

Source: /consumer/storms/recoverytips

Menu Button: Open Sans Bold, 14px, #ffffff; #63ac45 background; 10px top and bottom padding, 20px left and right padding; border-radius 5px

Container: 145.88px width, 15px top and bottom padding, 10 px left and right padding, 1px #d7d9ec border all 4 sides Colored Bar: #f2672a, 10px wide Headline: Open Sans Bold, 13.3px, #124c95; #d7d9ec 2px border bottom Links: Open Sans Regular, 13.3px, #124c95; 5px top and bottom padding, 4px left and right padding Active: #eef0f1 background

Breadcrumbs

The breadcrumbs are visible on standard desktop pages of the website. Open Sans Regular, 11.2px, #232323, line-height: 1

Home
Consumers
Storms
After the storm

Background Options

Source: /consumer/index

Users can add an optional background color to content rows within certain templates. The standard background color used on the site is #f7f7f7.

Consumer protection services

Our Consumer Protection staff are ready to answer your insurance questions. Want to know how to resolve a medical bill? Need to compare insurance rates? Can’t find that lost life insurance policy? We can help.

We’ve helped answer calls from people just like you and have helped them recover millions in claims and premium payments.

Call us from 8 a.m. to 5 p.m. Central time, Monday to Friday: 800-252-3439

Learn more about how we can help you

Column Layout

3 Column (Named Col4)

Source: /agent/index

Individual Containers: 392.75px width, 2px border (color options: None, #124c95 (blue), #4e833c (green), #f2672a (orange), #5f6a72 (gray)

Headline: Raleway Bold, 21px (1.5em), #ffffff; 2px border bottom; 9px top and bottom padding, 20px left and right padding, 12px margin-bottom

Links: Open Sans Regular, 14px, #124c95; 5px top and bottom padding, 20px left and right padding, 30px margin-left, 6px margin-bottom

Adjuster

Specialty

Other

2 Column (Named Col6)

Source: /carrier/index

Individual Containers: 610.39px width, 2px border (color options: None, #124c95 (blue), #4e833c (green), #f2672a (orange), #5f6a72 (gray)

Headline: Raleway Bold, 21px (1.5em), #ffffff; 2px border bottom; 9px top and bottom padding, 20px left and right padding, 12px margin-bottom

Links: Open Sans Regular, 14px, #124c95; 5px top and bottom padding, 20px left and right padding, 30px margin-left, 6px margin-bottom

Hover: #4e883c

Other Resources

News

1 Column (Named Col12)

Source: /wc/carrier/index

Individual Containers: 1276.007px width, 2px border (color options: None, #124c95 (blue), #4e833c (green), #f2672a (orange), #5f6a72 (gray)

Headline: Raleway Bold, 21px (1.5em), #ffffff; 2px border bottom; 9px top and bottom padding, 20px left and right padding, 12px margin-bottom

Links: Open Sans Regular, 14px, #124c95; 5px top and bottom padding, 20px left and right padding, 30px margin-left, 6px margin-bottom

Hover: #4e883c

Agent

Alert Banner

Source:/fire/fmli

Container: 1276.007px width, 2px #f2672a border
Headline: Raleway Bold, 21px (1.5em), #ffffff;
20px padding, #f2672a background
Text: Open Sans Regular, 14px, #232323;
10px top and right padding, 16px left and bottom padding

Notice

Update your email to avoid renewal delays

We will begin sending renewal notices by email only. If we don’t have your current email, you will not get our notices and there could be a delay in renewing your license.

Fill out our online form to make sure we have your latest information.

Additional Text Styles & Modules

Lists

Open Sans, 13px, #232323, line-height: 1.5, list item margin-bottom: 6px

Bulleted (In-Paragraph)

Source: /general/index

You do not need to get a fingerprint background check if:
- You live in Texas and have: (1) an active license or registration with us, and (2) already submitted fingerprints
- You don't live in Texas, but you send one of the following with your application:
  - Your criminal history record from your state's law enforcement agency.
  - Your current Certificate of Good Standing from your state.

Open Sans, 15.75px, #232323, line-height: 1.5, list item margin-bottom: 14px

Hover: underline

2 Column Featured Bulleted Links

Source: tdi.texas.gov/

I want to...

Tables

Header Text: Open Sans Bold, 14px, #232323
Background: #e6e6e6

Table: Open Sans, 14px, #232323, line-height: 1.5, padding: 8px

Header

Source: /general/contactus

Addresses
Office Address	Mailing Address
333 Guadalupe Austin, TX 78701	PO Box 149104 Austin, TX 78714-9104

No Header

Source: /general/contactus

Insurance Contacts
Insurance	Telephone Number
Help Line	800-252-3439
Texas Department of Insurance Main	800-578-4677
Report Fraud	800-252-3439
Agent & Adjuster Licensing Office	512-676-6500
Windstorm Inspections	800-248-6032
Media relations	512-676-6595
Executive staff contacts
Children's Health Insurance Program (CHIP)	800-647-6558

Sortable table

Source: /commissioner/disciplinary-orders/index

Accordion

Closed Accordion: Heading: Open Sans Bold, 16px, #124c95, underlined, 6px top and bottom margin Text: Open Sans Regular, 16px, #333333

Open Accordion: Text: Open Sans Regular, 14px, #232323, 6px bottom-margin

Source: /general/executive-staff

Commissioner of Insurance

Commissioner | 512-676-6022

Chief Deputy Commissioner

Doug Slape | 512-676-6023

Fraud | 800-252-3439 | FraudUnit@tdi.texas.gov

Chief of Staff

Nancy Clark | 512-676-6022

Budget and financial services | 512-676-6165
Human resources | 800-578-4677 (option 9)
Information technology | 512-676-6920
Purchasing | 512-676-6140

News & updates

H2 heading
2px #63ac45 border-bottom
2-column

Source: tdi.texas.gov

News and updates

TDI working on SB 1264 rules

After hearing comments during a stakeholder meeting on July 29, TDI continues working on rules for Senate Bill 1264. This new legislation will protect consumers from surprise medical bills in certain situations.

Before you zip off on that scooter …

Electric scooter rentals are all the rage in Texas’ big cities and college campuses. Tempted to try one? Here’s what you need to know about your insurance coverage if you get into an accident.

More news and tips

State files lawsuit against Aliera Healthcare

The State of Texas has filed a lawsuit seeking to stop Aliera Healthcare from selling health insurance in Texas and engaging in the business of insurance without a state license.

New state law cracks down on roof scams

A new state law makes it clear that it’s illegal for a contractor or roofer to waive an insurance deductible. “This new law will help further protect consumers,” said Texas Insurance Commissioner.