Here is my bright ui for our kitchen monitor. The CSS is for the standard config of the MM.

The MagicMirror runs in an iFrame of an html page, the other pages are all written in html and css.

Here is the result for the standard config.
In the config, compliments must be set to center.

		{
			module: "compliments",
			position: "center"
		},

custom.css

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

html {
  cursor: hidden;
  overflow: hidden;
  background: #e7e7e7;;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #e7e7e7;
  color: #8a8a8a;
  font-weight: 400;
  font-size: 2em;
  font-family: "Lato", sans-serif;
  line-height: 1.5em;
  margin-bottom: -10px;
  -webkit-font-smoothing: antialiased;
}

header {
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  text-align: center;
  font-weight: bold;
  background: #F7F7F7;
  border-bottom: none;
  color:#8a8a8a;
}

 .module.compliments,
 .module.newsfeed,
 .module.clock,
 .module.weatherforecast,
 .module.calendar,
 .module.currentweather {
  font-family: "Lato", sans-serif;
  background-color: #f7f7f7;
  color: #8a8a8a;
  border: 1px solid #c1c1c1;
  box-shadow: 0px 10px 25px -5px rgba(50, 88, 130, 0.32);
  border-radius: 15px;
  padding: 30px;
}

.dimmed {
  color: #8a8a8a;
}

.normal {
  color: #8a8a8a;
}

.bright {
  color: #8a8a8a;
}


/**
 * module.width_height
 */

 .module.compliments {
  width:800px;
}
 
/**
 * clock.
 */ 
 
.clock .time {
 text-align: center;
 font-family: "Lato", sans-serif;
 
}
.clock .date {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: #8a8a8a;
  font-family: "Lato", sans-serif;
}


/**
 * weather.
 */

.currentweather .bright {
  font-family: "Lato", sans-serif;
}

.weathericon {
  color: #8a8a8a;
}

Bright UI