Design + Styleguide For CT.gov State Portal

Colors

Below are the colors.

Primary color section is used for the main elements: Header, Footer, Links, etc.

#0071bb
#3a95d2
#88BFE3
#054266
#053955

Secondary colors use these codes to give more context to UI elements and actions.

Success

#43ac6a
#3A945B

Warning

#f5a054
#EF780E

Alert

#DB6B71
#D1424A

Secondary

#DDDDDD
#999999

Text

#0a0a0a
#333333

Typography

This design uses Open Sans for content headings and paragraph text.

On main navigation pages, the website uses Museo Sans for Menu Links and Museo for page and section titles.



Open Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Museo Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Museo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Heading level 1

Heading level 2

Heading level 3



Paragraphs

A paragraph size can be increased by adding a class of .lead to any p element.

Professionally enhance exceptional sources via stand-alone "outside the box" thinking. Energistically underwhelm extensive innovation without clicks-and-mortar functionalities. Quickly underwhelm open-source alignments vis-a-vis interactive supply chains. Distinctively implement robust leadership after maintainable bandwidth. Globally re-engineer highly efficient architectures via go forward results.

Assertively recaptiualize goal-oriented growth strategies with future-proof testing procedures. Continually restore error-free technology rather than just in time networks. Dynamically reintermediate future-proof applications for client-focused partnerships. Seamlessly supply front-end relationships with prospective products. Completely enable web-enabled e-markets before excellent process improvements.



List Items

Unordered

  • Apparently forward
  • Little white fawn
  • 230% amazingly
  • Cold with a chance of rain
  • Happenstance Alignment

Ordered

  1. Bowlegged roof
  2. Townhouse shifting
  3. Yellow brick road
  4. Bewildered at the moment
  5. A ferral kind


Subheaders

Lighten up your headers by adding a class of .subheader to any header element.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

Buttons

Buttons are tied to an action of some kind, and are more than just big links.

Primary Buttons

These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the .tiny, .small, and .large classes.

Large button

Secondary Buttons

These buttons are used for less important, secondary actions on a page.

Custom Buttons

These buttons are used for loading more content, returning to older search results and submiting forms, and other actions that require little more inforamtion than a primary button.


Callouts

Callouts are simple generic container components that can seperate out content and contain html headers, content, and links..


Basics

A callout is just an element with a .callout class applied. You can put any kind of content inside.

This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.


Colors

A callout is colored with foundation color classes.

This is a primary callout

It has an easy to override visual style, and is appropriately subdued. This uses the .primary class.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued. This uses the .secondary class.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued. This uses the .success class.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued. This uses the .warning class.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued. This uses the .alert class.

It's dangerous to go alone, take this.


Alerts

Alerts are like super callouts and are used for site wide or sections wide weather alerts, emergencies, and information callouts for special programs.

Alert: Hurricane notice is in efect in Hartford, Middlesex, New Haven counties until 2am EST

Warning: This agency office will be closed through March 1, 2017

Attention: We are currently taking new resources online.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Blockquote

Use blockquotes to create emphaisis and focus for specific content.

Use the html element blockquote which will apply the desired styles. For example, a blockquote can be used instead of a p HTML element.

This text has important meaning and emphaisis so it is wrapped in a blockquote HTML element.