Let's add a UI Framework of components to help speed up development and give the app a consistent look-and-feel.

Vuetify is my favorite choice for Vue. It follows Google's Material Design specification (which means you can continue this spec with your own custom components). It's fast, clean, and I like the way the project creator thinks (I've had the pleasure of working with him on a menu feature in an older version).

$ npm install vuetify --save-dev

Vuetify has a nice way to setup theme colors. Just add to your main.js:

main.js

// ...

// Vuetify
Vue.use(Vuetify, {
  theme: {
    primary: '#21CE99',
    secondary: '#D81B60',
    accent: '#805441'
  }
})

You can then match these colors with your own Stylus variables for other uses:

src/styles/stylus/1-settings/variables.styl

$app-primary = #21CE99
$app-secondary = #D81B60
$app-accent = #805441
$app-success = #61B865
$app-light-grey = #E1E2E1
$app-error = #FF6666

Before we bring in Vuetify's styles, let's override one of its default settings to reduce app load size:

src/styles/stylus/1-settings/vendor.styl

$color-pack = false // Let's save 30k

Now let's load Vuetify styles:

src/styles/stylus/6-components/vendor.styl

@import '~vuetify/src/stylus/main'

.application.theme--light
  background: #FFFFFF

All the styles then are loaded eventually in main.js. See the Styles section of the wiki for more information.