Skip to end of metadata
Go to start of metadata
On this page

Text

Type

Style

Default

text style: Helvetica
text size: 12px
text colour: #333333

Page header

text style: Helvetica Bold, 4em
text colour: #666666

Header 0 ("super header" only for secondary tabs)

text style: Helvetica Bold, 2em
text colour: #333333
bg colour: #FFFFFF
hover bg colour: #F3F3F3

Header 1 (left side)

text style: Helvetica Bold, 1em
text colour: #FFFFFF
bg colour: #4D4D4D
hover bg colour: #3333333
horizontal padding: 5px

Header 2 (left side)

text style: Helvetica Bold, 1em
text colour: #FFFFFF
bg colour: #999999
hover bg colour: #666666
horizontal padding: 5px

Header (right side)

text style: Helvetica Bold, 1em
text colour: #FFFFFF
bg colour: #6F9ECD
hover bg colour: #438CC9
horizontal padding: 5px

Items on the right

hover colour: #C3D9ED

Field name

text style: Helvetica Bold, 0.8em

Required field name

text style: Helvetica Bold, 0.8em
followed by a red (#CC0000) asterisk *

Errored required field (empty-required)

text style: Helvetica Bold, 0.8em
text colour: #CC0000 (red)
followed by a red (#CC0000) asterisk *

Top Nav

Top navigation options

Style

Text

text colour: #4D4D4D
hover text colour: #4D4D4D

Page Header

Page

Style

Administration

bg colour: #EEF4D7
text colour: #73AA4F
tab bg colour: #73AA4F
tab bg on hover: # 48722D (dark green)

Authority

bg colour: #F3EDF6
text colour: #78449A (purple)
tab bg colour: #78449A (purple)
tab bg on hover: #58267F (dark purple)

Procedural (including Cataloging) records

(no changes)

Buttons

Button Type

Style
all: rounded corner with r=3pt

Primary button (primary action on the page, typically Save)

text style: Helvetica Bold, 1em
text colour: # FFFFFF
bg colour: # 73AA4F (green)
hover bg colour: # 48722D (dark green)

Secondary button (all other buttons, including Select number pattern)

text style: Helvetica Bold, 1em
text colour: # 48722D (dark green)
bg colour: # FFFFFF  (white)
hover bg colour: #DAEDD1 (light mint green)
hover text style: underlined

Tertiary button (small buttons found on the right side, inside the gray headers)

text style: Helvetica Bold, .8em
text colour: #73AA4F (dark green)
bg colour: #FFFFFF
hover colour: #FFFBCC (light yellow)

Link Type

Style

Other links (excluting footer)

text style: Helvetica, 1em
text colour: #33669A (dark blue)
hover bg colour: #F0F5FB (faint blue)

Logout

text style: Helvetica Bold, 1em
text colour: #333333 (dark gray)
bg colour:#F3F3F3 (faint gray)
hover text colour: #FFFFFF
hover bg colour: #333333 (dark gray)

Tabs

Tab Type

Style

Primary tab - selected

text style: Helvetica Bold, 1.2em
text colour: #6E9FCE
bg colour: #FFFFFF
border colour: #6E9FCE
border thickness: 2px
round corner radius: 5pt

Primary tab - not selected

text style: Helvetical Bold, 1.2em
text colour: #FFFFFF
bg gradient: #6E9FCE (top) #3878AD (bottom)
[http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/]
hover colour: #3878AD
round corner radius: 5pt

Secondary tab - selected

text style: Helvetica Bold, 1em
text colour: #6E9FCE
bg colour: #FFFFFF
border colour: #6E9FCE
border thickness: 2px
round corner radius: 5pt

Secondary tab - not selected

text style: Helvetica, 1em
text colour: #FFFFFF
bg gradient: #6E9FCE (top) #3878AD (bottom)
hover colour: #3878AD
round corner radius: 5pt

List or Table

Item type

Style

Header row

text style: Helvetica, bold, 0.6em
text color: #333333 (dark gray)
bg color: #EFEFEF (faint gray)

New item

bg color: #FFFBCC (light yellow)

Rows in a list/table

text style: Helvetica, 1em
text colour: #33669A (dark blue) for links black for non-link
hover bg colour: #C3D9ED (faint blue)
selection bg colour: #6E9FCE

Number pattern chooser

Item type

Style

Header row

text style: Helvetica, bold, 0.6em
text color: #33669A
bg color: #F0F5FB (faint blue)

Rows in a list/table

text style: Helvetica, 1em
text colour: #33669A (dark blue) for links black for non-link
hover bg colour: #F0F5FB (faint blue)
selection bg colour: #6E9FCE

To be added:

  • Number pattern picker
  • Remove button for repeatable fields
  • Colors for inactive fields or inactive field block background
  • Layout specs (gutter widths, corner angle, margins)
  • Expand/collapse boxes
  • Tables for dimensions, etc
  • Lists (search results, object tabs, right side)
  • icons
  • unsaved state
  • No labels

1 Comment

  1. What about capitalization of individual words in the various areas of a page, for example, field labels. I can find cases where only the first letter of the first word is upper case and others where the beginning of every word is capitalized.  Even both ways within a single record type page.  Shouldn't we get with some style? - Rick (Jaffe)