Seattle.Gov Style Guide

Fonts

Seattle Textfrom Schema

Mg

Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text Seattle Text And a Seattle Text.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xy Yx Zz 1234567890 “‘({[?!&$£€@]}).’”


Open Sans from Google

Mg

Open Sansssssssssssssssssssssssssssssssssss. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open. Open.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xy Yx Zz 1234567890 “‘({[?!&$£€@]}).’”

Color Palette

  •   #0047ba #0047ba
  •   95, 179, 231 #69b3e7
  •   #000 #000
  •   51, 63, 72 #333f48
  •   91, 103, 112 #5b6770
  •   #666 #666666
  •   162, 170, 173 #a2aaad
  •   218, 217, 214 #dad9d6
  •   #007749 #007749
  •   142, 221, 101 #8ddd65
  •   183, 221, 120 #b7dd78
  •   115, 123, 76 #737b4c
  •   163, 170, 131 #a3aa83
  •   171, 35, 40 #ab2328
  •   228, 0, 43 #e4002b
  •   219, 78, 0 #db4e00
  •   255, 213, 82 #ffd552
  •   255, 243, 42 #fff32a
  •   96, 61, 32 #603d20
  •   206, 180, 141 #ccba85
  •   240, 229, 199 #f0e5c7

Grids & Breakpoints

Large Devices
( > 1280 )

310px
310px
310px
310px

Medium Devices (1280px - 99px)

310px
310px
310px

Small Devices (991px - 768px)

50% minus gutter
50% minus gutter

Extra Small Devices (< 768px)

100%

Tables

Basic Table.table

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Table.table
.table-striped

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered Table.table
.table-bordered

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Buttons

Standard.btn + .primary or .default

Large+ .btn-lg

Small+ .btn-sm

Block+ .btn-block

Secondary Colors + .btn-success
+ .btn-info
+ .btn-warning
+ .btn-danger

Headings

h1 - h6

All Headings

h1, h2, h3, h4, h5, h6 {
font-family: "Seattle Text"; font-weight: bold; font-style: normal;
}

h1

h1 As a Department Name

h1 {
font-size: 36px; line-height: 39.6px;
}

h1

h1 As a Page Title

h1 {
font-size: 36px; line-height: 39.6px; background: #000; color: #fff; padding: 10px 20px 0px 20px;
}

h2

h2 headings

h2 {
font-size: 30px; line-height: 33px;
}

h3

h3 headings

h3 {
font-size: 24px; line-height: 26px;
}

h4

h4 headings

h4 {
font-size: 18px; line-height: 19.8px;
}

h5

h5 headings
h5 {
font-size: 14px; line-height: 15.4px;
}

Paragraphs

p

The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

p {
font-family: "Open Sans"; font-size: 16px; line-height: 22px; font-style: normal; max-width: 580px; text-align: left;
}

Lists

ol

  1. Tier 1
  2. Tier 1
  3. Tier 1
    1. Tier 2
      1. Tier 3
        1. Tier 4

ol {
counter-reset:li; margin:0px; padding:0px;
}
li {
margin:0px 0px 40px 0px; position:relative; padding:20px 0px 0px 70px; list-style:none; border-top:2px solid #555;
}
li:before {
content:counter(li); counter-increment:li; position:absolute; top:-2px; left:0px; box-sizing:border-box; width:50px; margin-right:8px; padding:10px 0px; border-top:2px solid #555; color:#fff; background:#555; font-weight:bold; font-size:20px; text-align:center;
}

ul

  • Line 1
  • Line 2
  • Line 3
ul {
margin:0px 0px 0px 40px; padding:0px 0px 20px 0px;
}
li {
margin-bottom: 20px;
}

dl

Term 1
Description 1
Term 2
Description 2
Term 3
Description 3
dt {
font-size:18px; font-weight:700; padding-bottom:4px; margin-bottom:4px; border-bottom:1px solid #ccc;
}
dd {
margin-bottom: 40px; padding: 10px 20px;
}

Links

a

This a link .
a {
color: #0047ba;
}

Panels

Default + .panel
+ .panel-primary

.panel-heading
.panel-body

Green + .panel
+ .panel-success

.panel-heading
.panel-body

Light Blue + .panel
+ .panel-info

.panel-heading
.panel-body

Yellow + .panel
+ .panel-warning

.panel-heading
.panel-body

Red + .panel
+ .panel-danger

.panel-heading
.panel-body