nimbusgo

weather, minus the clutter.

Your forecast and your next trip, on one screen of colourful tiles. For phone, tablet and desktop.

Start

live tiles

Three steps. No fuss.

Pick a place
Type a city. We do the rest.
Pin your dates
The forecast follows your trip.
Just go
Tiles update while you travel.

content, not chrome.

No fake leather. No glossy buttons. Just type, colour and space — the way a station sign or an airport board tells you where to go.

Back to start

Curator's notes · 2012–2016

Flat & Metro

Interfaces dropped the leather and gloss for solid colour, thin type and tiles. Inspired by transit signage and Swiss typography, “flat” made content the interface.

The world at the time

Screens: High-density phone and tablet screens everywhere; layouts had to look crisp at 1×, 2× and 3×
Connection: 4G and fast broadband; icon fonts and SVG replaced image sprites
Browsers & clients: Chrome, Firefox, Safari, IE10/11 with flexbox; Windows 8 tiles and iOS 7 set the visual tone

Signature traits

Hover or focus a trait to find it in the page.

Built with

Flexbox (fully supported from IE11 and the 2013–2014 browsers)
Web fonts with light weights, and system fonts like Segoe UI Light
Icon fonts and SVG icons instead of bitmap sprites
CSS transitions and transforms for tile motion

View the code

A long shadow is just 60 stacked text-shadows era.css

.fm-ls {
  --ls: color-mix(in srgb, var(--tile), #000 28%);
  position: absolute;
  top: 22%;
  left: 22%;
  font-size: 64px;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0 var(--ls), 2px 2px 0 var(--ls), 3px 3px 0 var(--ls), 4px 4px 0 var(--ls), 5px 5px 0 var(--ls), 6px 6px 0 var(--ls), 7px 7px 0 var(--ls), 8px 8px 0 var(--ls), 9px 9px 0 var(--ls), 10px 10px 0 var(--ls), 11px 11px 0 var(--ls), 12px 12px 0 var(--ls), 13px 13px 0 var(--ls), 14px 14px 0 var(--ls), 15px 15px 0 var(--ls), 16px 16px 0 var(--ls), 17px 17px 0 var(--ls), 18px 18px 0 var(--ls), 19px 19px 0 var(--ls), 20px 20px 0 var(--ls), 21px 21px 0 var(--ls), 22px 22px 0 var(--ls), 23px 23px 0 var(--ls), 24px 24px 0 var(--ls), 25px 25px 0 var(--ls), 26px 26px 0 var(--ls), 27px 27px 0 var(--ls), 28px 28px 0 var(--ls), 29px 29px 0 var(--ls), 30px 30px 0 var(--ls), 31px 31px 0 var(--ls), 32px 32px 0 var(--ls), 33px 33px 0 var(--ls), 34px 34px 0 var(--ls), 35px 35px 0 var(--ls), 36px 36px 0 var(--ls), 37px 37px 0 var(--ls), 38px 38px 0 var(--ls), 39px 39px 0 var(--ls), 40px 40px 0 var(--ls), 41px 41px 0 var(--ls), 42px 42px 0 var(--ls), 43px 43px 0 var(--ls), 44px 44px 0 var(--ls), 45px 45px 0 var(--ls), 46px 46px 0 var(--ls), 47px 47px 0 var(--ls), 48px 48px 0 var(--ls), 49px 49px 0 var(--ls), 50px 50px 0 var(--ls), 51px 51px 0 var(--ls), 52px 52px 0 var(--ls), 53px 53px 0 var(--ls), 54px 54px 0 var(--ls), 55px 55px 0 var(--ls), 56px 56px 0 var(--ls), 57px 57px 0 var(--ls), 58px 58px 0 var(--ls), 59px 59px 0 var(--ls), 60px 60px 0 var(--ls);
}

Live tiles: two faces that slide in turn era.css

.fm-face {
  position: absolute;
  inset: 14px 14px 40px;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}
.fm-face--b { transform: translateY(130%); display: flex; align-items: flex-end; }
.fm-tile.is-flipped .fm-face--a { transform: translateY(-130%); }
.fm-tile.is-flipped .fm-face--b { transform: translateY(0); }

The ghost button era.css

.fm-ghost {
  display: inline-block;
  padding: 12px 30px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: 0.04em;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0;
  transition: background-color 200ms, color 200ms;
}
.fm-ghost:hover,
.fm-ghost:focus-visible {
  background: #fff;
  color: var(--midnight);
}

Tiles are buttons in a list demo.html

<ul class="fm-tiles" data-trait="tiles">
  <li class="fm-tile fm-tile--wide c-peter" data-trait="live">
    <button type="button" class="fm-tile__btn" aria-controls="fm-panel" data-panel="today">
      <span class="fm-face fm-face--a">
        <span class="fm-big">18°</span>
        <span class="fm-tile__txt">Lisbon<br>partly sunny</span>
      </span>
      <span class="fm-face fm-face--b" aria-hidden="true">
        <span class="fm-tile__txt">Tomorrow 21° &middot; Sat 23° &middot; Sun 19°</span>
      </span>
      <span class="fm-tile__label">Today</span>
    </button>
  </li>

Then vs now

Pure flat proved hard to read (what is a button?), so Material Design brought back purposeful shadow; the colour palettes and thin type remain.

Recreated with modern tech

Flat UI palette colours are darkened here so white text on every tile meets WCAG AA; the originals (#1abc9c, #3498db…) were lighter.

weather, minus the clutter.

Start

today

Three steps. No fuss.

Pick a place

Pin your dates

Just go

content, not chrome.