Kerosene is a set of SCSS shortcuts and tools for simpler design decisions without sacrificing control.

Usage no npm install needed!

<script type="module">
  import voyagerStudioKerosene from 'https://cdn.skypack.dev/@voyager-studio/kerosene';



A Voyager design system

The goal of Apollo is to create a solid front-end framework that allows for creating rapid prototypes while establishing a solid baseline for production ready code. This way you can prototype screens and interactions quickly, then build on that same work to reach a finished product.

How to Use Kerosene

To get started, just add the kerosene folder next to your master scss file. Then add @import 'kerosene-foundation/kerosene' and you're done. For any quick overrides to Kerosene such as color, fontstacks, fontsize, etc just override the variables in your scss document. See Apollo for documentation on what variables are capable of augmentation/modification.


For anyone using NPM, you can install kerosene by running npm i @voyager-studio/kerosene.