Typography
Updated: June 26, 2024
Expires: Sunday August 14th, 2033 1:11pm
Colors
| Green | PANTONE® 361 CMYK 77/0/100/2 RGB 43/175/73 HEX #2BAF49 | |
| Dark Green | CMYK 69/16/96/41 RGB 17/97/8 HEX #116108 | |
| Brown (not used) | PANTONE® 175 CMYK 18/79/78/56 RGB 111/43/29 HEX #6F2B1D | |
| Blue (not used) | PANTONE® 7455 CMYK 90/66/0/0 RGB 34/97/174 HEX #2261AE | |
| Light Blue (not used) | PANTONE® 7455 (30% tint) CMYK 24/15/0/0 RGB 189/200/230 HEX #BDC8E6 | |
| Yellow (not used) | PANTONE® 3945 CMYK 3/0/90/0 RGB 254/239/47 HEX #FEEF2F | |
| Black, Text | CMYK 80/74/70/64 RGB 29/29/29 HEX #1D1D1D | |
| Gray, Borders | CMYK 15/12/9/0 RGB 210/208/208 HEX #D2D0D0 |
Links & Buttons
Need mobile versions.
| Regular Link | External Link | Audio Link | Video Link | Archive Link |
| Home Page Use Only | Home Page Use Only | Small Button | Small Button | Download Button |
| Rectangle Button | Placeholder Gray Button | Tel: 555-555-5555 Local phone call. | Tel: 555-555-5555 ext. 555 “Long distance” phone call + extension | SMS/Text: 555-555-5555 A text message. |
| SMS/Text: 555-555-5555 With a preloaded message | ||||
Tables Best Practice
| No Borders | <table border=”0″ cellpadding=”8″ style=”margin: 1em 0em 1em 0em;”> |
| With Borders | <table border=”1″ cellpadding=”8″ style=”margin: 1em 0em 1em 0em;”> |
 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh. |
Using Dreamweaver + CSS toolset, then c/p into Text in page builder makes the best tables currently.
Typography Examples
Emergency Management Truck
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit.
Jump Link Lists
- Add class=”arrows” to the <ul> tag
- Looks like this <ul class=”arrows”>
- Lorem ipsum dolor sit amet…
- Lorem ipsum dolor sit amet…
- Add class=”arrowsl” to the <ul> tag
- Looks like this <ul class=”arrowsl”>
- Lorem ipsum dolor sit amet…
- Lorem ipsum dolor sit amet…
Nested Lists
Unordered lists automatically use proper bullets.
Ordered lists need to have explicit formatting set in code.
- Mauris fringilla dui et sagittis venenatis.
- Duis porttitor risus id lorem fringilla tempus.
- Pellentesque non aliquet erat.
- Duis porttitor risus id lorem fringilla tempus.
Ordered List, Unformatted
- Phasellus semper venenatis leo, ac egestas est feugiat eu.
- Vestibulum sed velit augue.
- Vivamus vulputate molestie nibh.
- Vestibulum sed velit augue.
Ordered List, Formatted
- Phasellus semper venenatis leo, ac egestas est feugiat eu.
- Vestibulum sed velit augue.
- Vivamus vulputate molestie nibh.
- Vestibulum sed velit augue.
Drop Down
These are a very new feature. Still needs work. Arrows only display in Safari.
Click this to read…
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Click this to read…
Vivamus vestibulum efficitur nibh sed blandit.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.
Heading 3
Lorem ipsum dolor sit amet…
Heading 4
Lorem ipsum dolor sit amet…
Heading 5
Lorem ipsum dolor sit amet…
Heading 6
Lorem ipsum dolor sit amet…
Fill: #FFDCDE Border: #FF0200
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.
Lorem ipsum dolor sit amet…
Fill: #FFCC8A Border: #FF6600
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.
Lorem ipsum dolor sit amet…
Fill: #FFFFC5 Border: #DCDC01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.
Lorem ipsum dolor sit amet…
Fill: #EEEEEE Border: #888888
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum efficitur nibh sed blandit. Sed eu erat gravida, sagittis nibh nec, viverra nisi. Integer consectetur in lorem in blandit. Mauris fringilla dui et sagittis venenatis. Duis porttitor risus id lorem fringilla tempus. Pellentesque non aliquet erat. Phasellus semper venenatis leo, ac egestas est feugiat eu. Vestibulum sed velit augue. Vivamus vulputate molestie nibh.
Office of Web Services
The Office of Web Services manages lorem ipsum dolor sit amet, consectetur adipiscing 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.
Call Web Services (123) 456-7890
moc.noitaNeegocsuM@secivreSbeW
Placeholder Gray Link