1. Typography 2. Colours 3. Icons 4. Forms 5. Buttons 6. Dialogs 7. Cards 8. Subnavigation 9. Tables

1. Typography #

Body

Sizes are defined as rem off of a 15px base.

html {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #5a5a5a; }

Typefaces used are: 

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:400,500,600,700|Libre+Baskerville:400|Overpass+Mono:400,700|Open+Sans:400,600">
Headings

Heading h1 3.4rem

Heading h2 2.8rem

Heading h3 1.9rem

Heading h4 1.27rem

Heading h5 1.137rem
Heading h6 1rem
Paragraph

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium. Curabitur tempor mi ac congue efficitur. Donec interdum justo vel turpis molestie, a finibus enim consequat. Proin pellentesque nisi vitae lectus iaculis condimentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor. Nam ultricies ex ut nunc ultricies, eget porttitor est malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nibh nunc, maximus eu sapien ac, convallis ultricies quam.

I am a link
I am a red link

I am a blockquote

These Are
Breadcrumbs
These
Are
Nested
Filters

2. Colours #

Primary
#5400BF
5400BF
RGB(84,0,191)
#6E4AFF
6E4AFF
RGB(110,74,255)
#FF615C
FF615C
RGB(255,97,92)
#FFBFC9
FFBFC9
RGB(255,191,201)
#FFD670
FFD670
RGB(255,214,112)
#FFE8BA
FFE8BA
RGB(255,232,186)
Secondary
#A32EAD
A32EAD
RGB(163,46,173)
#BF70BF
BF70BF
RGB(191,112,191)
#FFC9FF
FFC9FF
RGB(255,201,255)
#AD998F
AD998F
RGB(173,153,143)
#D9C3B9
D9C3B9
RGB(217,195,185)
#EDE1DF
EDE1DF
RGB(237,225,223)
#F1EFEE
F1EFEE
RGB(241,239,238)
#05243D
05243D
RGB(5,36,61)
#4A6173
4A6173
RGB(74,97,115)
#F5F5F5
F5F5F5
RGB(245,245,245)
UI
#7ECC9C
7ECC9C
RGB(126,204,156)
#FEC75A
FEC75A
RGB(254,199,90)
#EE5073
EE5073
RGB(238,80,115)

3. Icons #

Main Menu
Inline
Font Awesome
color: #bbb;

4. Forms #

5. Buttons #

./buttons.css
.btn
.btn .light
.btn .no-shadow
.btn .red
.btn .purple
.btn .special .red
.btn .special .purple
.btn .disabled
.btn .med
.btn .med .light
.btn .med .toggle .active
.btn .med .light .toggle
.btn .user .med
.btn .small

6. Dialogs #

Click each to open dialog modal design

Scheduling












Create Entities






7. Cards #

./cards.css
Content Card
.card .large

I take no input action. I am just used for content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor. Nam ultricies ex ut nunc ultricies, eget porttitor est malesuada.

Ut pretium elit posuere ex laoreet, in fermentum quam ornare. Aliquam in volutpat massa, eget ultrices risus. Duis cursus erat facilisis aliquet consequat. Fusce at elit egestas, lacinia enim consectetur, vehicula velit. Pellentesque mollis nisi et velit placerat egestas. Nunc in auctor orci. Mauris id rutrum nibh, vel mattis velit.

Medium Card Bar
.card .select .med

I link to another page

Tag
Knockout Card Bar
.card .select .med .ko

I am for archived components

Tag
Small Card Bar
.card .select .small

I function on the page

# Text
Tiny Card Bar
.card .select .tiny
We
Make
Lists
Large

Used on Clients' pages (attached on top of background containers, hence: no border-bottom)

Small

Used on Mursion pages (floating, hence: border-bottom)

Toggle Bar Row

Used for Scenarios on Project page. Grouping implies only 1 is selectable.

Table & Card Controls
Create Project +
4 Active, 1 Archived

Priority Order

  1. Toggle navigation
  2. Filter/refine
  3. Sort
  4. "Create Entity"
  5. Flex Spacing
  6. Totals Numbers
  7. Search (always last, on right)

9. Tables #

Time Learner Project Scenario Time Until
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
10/28/18 10:00 amLearner NameProject NameScenario Name6 days
My Profile
Change Role:
Logout