Support

Contact REMEDI Development Team

REMEDI Design System

  • Colors
  • Primary
  • Opacity Variations
  • Solid Secondary
  • System
  • Charts
  • Typography
  • Icons
  • Buttons
  • Dropdowns
  • Tabs
  • Containers
  • Lists
  • Tables
  • Charts
  • Other UI Components

Colors

Primary Colors

  • @lightblue-base hex: #31aeb9
    rgba(49, 174, 185, 1)
  • @greyblue-base hex: #3f4f56
    rgba(63, 79, 86, 1)
  • @darkblue-base hex: #023c61
    rgba(2, 60, 97, 1)
  • @purple-base hex: #9f44b2
    rgba(159, 68, 178, 1)
  • @green-base hex: #87f6a1
    rgba(135, 246, 161, 1)
  • @yellow-base hex: #f4b304
    rgba(244, 179, 4, 1)

Accent Colors / Opacity Variations

  • @lightblue-alpha-0.1 rgba(49, 174, 185, 0.1)
  • @greyblue-alpha-0.1 rgba(63, 79, 86, 0.1)
  • @darkblue-alpha-0.1 rgba(2, 60, 97, 0.1)
  • @purple-alpha-0.1 rgba(159, 68, 178, 0.1)
  • @green-alpha-0.1 rgba(135, 246, 161, 0.1)
  • @yellow-alpha-0.1 rgba(244, 179, 4, 0.1)
  • @lightblue-alpha-0.2 rgba(49, 174, 185, 0.2)
  • @greyblue-alpha-0.2 rgba(63, 79, 86, 0.2)
  • @darkblue-alpha-0.2 rgba(2, 60, 97, 0.2)
  • @purple-alpha-0.2 rgba(159, 68, 178, 0.2)
  • @green-alpha-0.2 rgba(135, 246, 161, 0.2)
  • @yellow-alpha-0.2 rgba(244, 179, 4, 0.2)
  • @lightblue-alpha-0.5 rgba(49, 174, 185, 0.5)
  • @greyblue-alpha-0.5 rgba(63, 79, 86, 0.5)
  • @darkblue-alpha-0.5 rgba(2, 60, 97, 0.5)
  • @purple-alpha-0.5 rgba(159, 68, 178, 0.5)
  • @green-alpha-0.5 rgba(135, 246, 161, 0.5)
  • @yellow-alpha-0.5 rgba(244, 179, 4, 0.5)
  • @lightblue-alpha-0.8 rgba(49, 174, 185, 0.8)
  • @greyblue-alpha-0.8 rgba(63, 79, 86, 0.8)
  • @darkblue-alpha-0.8 rgba(2, 60, 97, 0.8)

Solid Secondary

  • @black-base hex: #000000
  • @greyblue-darken-20 hex: #0C1C23
  • @black-555 hex: #555555
  • @black-777 hex: #777777
  • @black-999 hex: #999999
  • @black-CCC hex: #CCCCCC
  • @lightblue-grey hex: #c6d8db
  • @darkblue-light hex: #E5EBEF
  • @greyblue-light hex: #EBEDEE
  • @black-light hex: #F2F2F2
  • @greyblue-superlight hex: #F5F6F6
  • @yellow-highlight hex: #fcefd3
  • @yellow-light hex: #fbf6eb
  • @yellow-superlight hex: #FEFBF3

System Colors

  • @error-medium hex: #E08484
  • @error-light hex: #FEDCD6
  • @noresults-medium hex: #C8E6E4
  • @noresults-light hex: #F8FFFF

Chart Colors

  • #87F6A1
  • #1DBBB5
  • #7161EF
  • #FAC075
  • #227178
  • #66E7E6
  • #FFBFB9
  • #E6879A
  • #E4C8D7
  • #B392AC
  • #735D78
  • #AE9AFF
  • #CF81E3
  • #BFA6CF
  • #E8D5F3
  • #E5E6E4
  • #BDC8C6
  • #A6A2A2
  • #847577
  • #5C6B73
  • #9DB4C0
  • #E0FBFC
  • #FEEC9B
  • #FF8C61
  • #C85D7A
  • #985277
  • #5C374C
  • #00156E
  • #0A4988
  • #3E7CB1
  • #81A4CD
  • #DBE4EE
  • #333333
  • #555555
  • #777777
  • #9398AA
  • #FFB30F
  • #E19969
  • #995324

Typography

Primary Fonts

Aa
Open Sans Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Aa
Open Sans Semibold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

h1-h5 | .strong

Secondary Fonts

Aa
Monaco

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

svg text.mono Use: Monospaced font used in some D3 charts, e.g. day of week heatmaps
Aa
Share Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

span.appicon Use: Administrative module, text icons for REMEDI apps
Aa
Ubuntu Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

.section-feature h4.subheader | div.key-stats Use: Public dashboard statistics display

Icons

Applications Theme Color

  • Uploader span.icon-upl #9FA7AA
  • Drug Limit Libraries span.icon-dll #31AEB9
  • Pump Compliance span.icon-dlc #9F44B2
  • Pump Alerts span.icon-dla #87F6A1
  • Pump Alarms span.icon-alm #61E7C5
  • Limit Locator span.icon-limitlocator #f4b304
  • Monitors span.icon-mon #023c61
  • Ventilators span.icon-ven #356381

Charts

  • Open Multiselector span.icon-expand
  • Share Options span.icon-export
  • Download span.control-download
  • History span.icon-history
  • Chart View span.icon-linechart
  • Table View span.icon-table

Organization Types

  • Hospital span.medicon-hospital
  • Vendor span.medicon-vendor
  • Research Institution span.medicon-research

Navigation/System

  • Member Dashboard span.icon-dashboard
  • Administration span.icon-config
  • Community span.icon-group
  • Development span.icon-dev

Buttons

  • Default Action Default/Cancel Button .btn
  • Primary Action Primary Button .btn.btn-primary
  • Apply Action Apply/Save Button .btn.btn-success
  • Edit Selections Edit Selections Button .btn.icon-edit
  • Apply Selections Apply Selections Button .btn.btn-success.icon-check

Dropdowns are used throughout REMEDI apps for various filter menus. Choose on-click dropdowns over on-hover dropdowns for mobile support and consistency.

Dropdown opening on-click .dropdown.onclick

Dropdown opening on-hover .dropdown

Dropdown with no border .dropdown.noborder

HTML Snippet (On-Click Dropdown)
<div class="dropdown onclick">
	<span class="picked-value strong">On-Click Dropdown</span>
	<div class="dropdown-content">
		<p><span class="closemenu close-dropdown"></span></p>
		<div class="dropdown-content-inner">
			<ul class="vertical-list options-group">
				<li class="header">
					<span class="strong">Make a selection:</span>
				</li>
				<li class="checked">
					<label>
						<input type="radio" name="choice" value="a" checked="checked" />
							<span> Choice A</span>
					</label>
				</li>
				<li>
					<label>
						<input type="radio" name="choice" value="b" />
						<span> Choice B</span>
					</label>
				</li>
			</ul>
			<div class="submit-group">
				<input type="button" class="btn btn-success" value="Apply" />
				<span class="btn close-dropdown">Cancel</span>
			</div>
		</div>
	</div>
</div						

Tabs

  • Title
  • Tab A
  • Tab B
  • Tab C
HTML Snippet (On-Click Dropdown)
<ul class="filter-tabs">
	<li class="title">Title</li>
	<li class="active">Tab A</li>
	<li>Tab B</li>
	<li>Tab C</li>
</ul>						

Containers

Chart container div.inner-shadow-wrap

No data available

Standalone no results message p.noresults

No data available for current selections.

Chart container when no data are available

HTML Snippet
<div id="noresults" class="inner-shadow-wrap">
	<p class="noresults">No data available for current selections.</p>
</div>						

Multiselector

Apply Selections
Hospital: My Hospital Facilities: All Profiles: All Compare with: All Hospitals

Container for "multiselector" - selector of primary variables like hospital, facilities, profiles and comparison.

HTML Snippet
<div class="pop-multiselector shown" id="multiselector">
	<div class="rightfloat-container">
		<span class="btn btn-success icon-check" id="apply-selection">Apply Selections</span>
	</div>
	<div class="title-tabs-section">
		<div class="section-title">
			<span class="input-label s-input selected">
				<span>Hospital:
					<span class="picked-value">My Hospital</span>
				</span>
			</span>
			<span class="input-label s-input">Facilities: <span class="picked-value">All</span></span>
			<span class="input-label s-input">Profiles: <span class="picked-value">All</span></span>
			<span class="input-label s-input s-compare">Compare with: <span class="picked-value">All Hospitals</span></span>
		</div>
	</div>
	<div class="open-section upper-section"></div>
</div>						

Lists

  • Make a Selection:

Vertical list of items ul.vertical-list.options-group

HTML Snippet
<ul class="vertical-list options-group">
	<li class="header">
		<span class="strong">Make a Selection:</span>
	</li>
	<li class="checked"><label><input type="radio" name="sel" value="A" checked="checked" />
		<span> Option A</span></label>
	</li>
	<li><label><input type="radio" name="sel" value="B" />
		<span> Option B</span></label>
	</li>
	<li><label><input type="radio" name="sel" value="C" />
		<span> Option C</span></label>
	</li>
</ul>						

OR choose from:

Multi-column list (auto columns) ul.options-group.multicol

Two-column list ul.options-group.two-columns

Three-column list ul.options-group.three-columns

Four-column list ul.options-group.four-columns

HTML Snippet
<p class="select-all">
	<label>
		<span class="prominent">Facilities:</span>
		<input type="checkbox" name="facility" checked="checked">
		<span class="picked-filter"> All</span>
	</label>
	<span class="sidenote rightfloat">OR choose from:</span>
</p>
<div class="limited-wrap">
	<ul class="options-group multicol">
	<li>(...)</li>
	(...)
	</ul>
</div>						

Make a Selection Select: all | none

Two-column list sorted horizontally ul.options-group.two-columns-rows

Three-column list sorted horizontally ul.options-group.three-columns-rows

Four-column list sorted horizontally ul.options-group.four-columns-rows

HTML Snippet
<p class="header">
		<span class="strong">Make a Selection</span>
		<span class="filter-options">
			<span>Select:</span>
			<span class="clickable">all</span>
			<span>|</span>
			<span class="clickable">none</span>
		</span>
</p>
<div class="limited-wrap">
	<ul class="options-group two-columns-rows">
	<li>(...)</li>
	(...)
	</ul>
</div>						

Tables

Column A
Tab 1 Tab 2
Column B
Content
Tab 1 Content Tab 2 Content
123
Content
Tab 1 Content Tab 2 Content
123
Content
Tab 1 Content Tab 2 Content
123

Standard CSS table div.table.app-table.enclosed Add .striped to add contrast backgroundf to every second row.

HTML Snippet
<div class="table.app-table.enclosed.striped">
	<div class="tbody">
		<div class="tr labels">
			<div class="th">
				<span class="reorder selected-order tooltips" title="Sort by Column A">Column A<span class="icon-order"></span></span>
			</div>
			<div class="th">
				<span class="reorder tooltips" title="Sort by Tab 1">Tab 1<span class="icon-order"></span></span>
				<span class="tabbed"></span>
				<span class="reorder tooltips" title="Sort by Tab 2">Tab 2<span class="icon-order"></span></span>
			</div>
			<div class="th">
				<span class="reorder tooltips" title="Sort by Column B">Column B<span class="icon-order"></span></span>
			</div>
		</div>

		<div class="tr">
			<div class="td"><span>Content</span></div>
			<div class="td">
				<span>Tab 1 Content</span>
				<span class="block mini faded">Tab 2 Content</span>
			</div>

			<div class="td datawrap"><span>123</span></div>
		</div>
	</div>			
</div>						

Charts

Sparkline drawSparkline(elementId, data, measure, width, height);

HTML/JS Snippet
<div class="spark-chart" id="spark-1"></div>
<script>
	var data = [
		{ "Count": 40, "Date": "2015/01/01" },
		{ "Count": 30, "Date": "2015/02/01" },
		(...)
		];
	drawSparkline("#spark-1", data, "Count");
</script>						

Boxplot drawBoxplot(elementId, data);

HTML/JS Snippet
<div class="boxplot-wrap"><div class="boxplot-chart" id="boxplot-1"></div></div>
<script>
	var data = [100,110,120,130,145];
	drawBoxplot("#boxplot-1", data);
</script>						

Percentage bar drawPercentageBar(elementId, data);

HTML/JS Snippet
<div class="barchart-wrap"><div class="barchart" id="barchart"></div></div>
<script>
	var data = [
		 { "category": "A", "count": 40}, { "category": "B", "count": 30},
		 { "category": "C", "count": 25}, { "category": "D", "count": 15}
	];
	drawPercentageBar("#barchart", data);
</script>						

Pie chart clickablePieChart();

HTML/JS Snippet
<div id="chart-apps-pie" class="pie-chart-wrap"></div>
	<script>
		var chartData = [{"category":"A","count":"33"},
						 {"category":"B","count":"13"},
						 {"category":"C","count":"19"}];
		var pie = clickablePieChart()
			.set("elementId", "#chart-apps-pie")
			.set("chartData", chartData)
			.set("responsive", false);
		pie();
</script>						

Horizontal bar chart drawHorizonalBarChart(elementId, data, measure, plot);

HTML Snippet
<div id="h-barchart"></div>
<script>
	var data = [
		{"name": "Category A", "count": 30},
		{"name": "Category B", "count": 20},
		{"name": "Category C", "count": 10}];
	drawHorizonalBarChart("#h-barchart", data, "count", "name");
</script>

Other UI Components

Application loader animation
Note: wrapper element must be in relative position.

HTML Snippet
<div class="app-loader-wrap">
	<div id="app-loader"></div>
</div>						

Inline spinner animation
Note: wrapper element must be in relative position.

HTML Snippet
<div class="app-loader-wrap">
	<div class="spinner"></div>
</div>						
Paging: start page active
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • ...91
HTML Snippet
<ul class="pagination">
    <li class="previous disabled"><span>PREVIOUS</span></li>
    <li class="active"><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
    <li><span>8</span></li>
    <li><span>9</span></li>
    <li><span>10</span></li>
    <li><span>...91</span></li>
    <li class="next"><span>NEXT</span></li>
</ul>						
Paging: last page active
  • 1...
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
HTML Snippet
<ul class="pagination">
    <li class="previous"><span>PREVIOUS</span></li>
    <li><span>1...</span></li>
    <li><span>82</span></li>
    <li><span>83</span></li>
    <li><span>84</span></li>
    <li><span>85</span></li>
    <li><span>86</span></li>
    <li><span>87</span></li>
    <li><span>88</span></li>
    <li><span>89</span></li>
    <li><span>90</span></li>
    <li class="active"><span>91</span></li>
    <li class="next disabled"><span>NEXT</span></li>
</ul>						

Monthly Timepicker timePicker().set("type", "month");

HTML Snippet
<div class="timepicker-wrap">
	<div id="month-picker" class="timepicker"></div>
</div>
<script>
	var monthSlider = timePicker()
		.set("elementId", "#month-picker")
		.set("type", "month")
		.set("showRangeLabel", true);
	monthSlider();
</script>

Time of Day Timepicker timePicker().set("type", "hour");

HTML Snippet
<div class="timepicker-wrap">
	<div id="hour-picker" class="timepicker"></div>
</div>
<script>
	var monthSlider = timePicker()
		.set("elementId", "#hour-picker")
		.set("type", "hour");
	monthSlider();
</script>