Part of UT Health San Antonio
Part of UT Health San Antonio

Style Guides

This section will give you tips on how to use color, typography and imagery throughout the website to accurately reflect the UTHSCSA brand.

Topics in this section:

Change theme to:

Theme 1

Theme 2

Theme 3

Theme 4

Back to Top

Global Color Palette

The UT Health San Antonio color palette on the main website is primarily orange and white. The supporting colors are further extended by color themes.

Global Colors

  • Global Main Color
  • Hex: #C0511B
  • Panel Color
  • Hex: #F7F4F0
  • Text Color
  • Hex: #171717

Secondary Colors

  • Global Accent Color
  • Hex: #517F70
  • Global Secondary Accent Color
  • Hex: #F26722
  • Global Highlight Color
  • Hex: #FEC46F
  • Link Color
  • Hex: #C0511B
Back to Top

Themes

Main

Theme 1 - #865F7B

Dark

#4A3544

Accent

#C0511B

Highlight

#A76393

Theme 2 - #15748C

#0D4857

#C54417

#4BC0C4

Theme 3 - #427E6B

#26483E

#7E4A48

#87d680

Theme 4 - #855F5D

#493433

#40826C

#B7868F

Back to Top

Typography

Open Sans

Lato is a sans serif, Google Web Font that is simple and reads clearly on various devices.

Open Sans Regular

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Open Sans Light

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Open Sans Bold

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Open Sans Italic

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Cardo

Cardo is used for headers.

Cardo Regular

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Cardo Bold

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Cardo Italic

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • a
  • b
  • c
  • d
  • e
  • f
  • g
  • h
  • i
  • j
  • k
  • l
  • m
  • n
  • o
  • p
  • q
  • r
  • s
  • t
  • u
  • v
  • w
  • x
  • y
  • z
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
Back to Top

Editorial Hierarchy

Once-per-page H1 Header

Nulla pulvinar eleifend sem. Curabitur bibendum justo non orci. Praesent in mauris eu tortor porttitor accumsan. Ut tempus purus at lorem. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim.

Secondary Header

Curabitur vitae diam non enim vestibulum interdum. Phasellus rhoncus. Quisque porta.

Tertiary Header

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam commodo dui eget wisi. Nullam sit amet magna in magna gravida vehicula.

Pattern Library Home