User Tools

Site Tools


development:style_guide

Web Development Style Guide

Typography

Fonts

The following font stack should be used for OHDSI based web applications:

OHDSI Font Stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Font Sizes

Headings on pages are to use the following style:

.heading {
	font-size: 14px;
	color: #000;
	margin: 7px 0px 3px 0px;
	padding: 0px 5px 0px 5px;
	border-bottom: solid 1px #ccc;
}

General text content will have font-size: 12px.

Font Styles

font-weight : bold - will not be used for text emphasis.

Buttons

Buttons will be created using the Bootstrap button style classes btn and btn-sm.

Colors

Dark Background: #003142

Alternate Dark Background : #333333

Light Background / Disabled : #cccccc

Active / Highlight : #f19119

Alternate Active / Highlight : #337ab7

Alternate Active / Highlight : #b7cbdc

Standard Concepts : #0070dd

Non-Standard Concepts: #a71a19

Classification Concepts: #a335ee

Icons

Icons should be leveraged from FontAwesome.io

development/style_guide.txt · Last modified: 2017/09/19 20:10 by frank_defalco