Aura Design System

Documentation

Getting started

Welcome to the developer documentation for Aura Design System & Next Js. Tailored for building Garima's apps. Using the Aura like a space unit. Each object has a halo of light that surrounds it, it's Aura.

Before you start - Disclaimer

This library is CSS centric with Object-Oriented CSS (OOCSS) and Atomic Desing metodology.

Instalation

Inside your React project directory, install Aura Desing System:

npm i aura-design

Terminal

Copy

Use

import "aura-design/style.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

JSX

Copy

style.css exposes css via style field in package.json, will apply to all pages and components in your application.

If you want to change any aura token of Aura design to create your own theme, you can create a public/style.css and replace the aura tokens for whatever you want.

/* ./public/style.css */

*:root {
    --aura-font-stack: "Inter",-apple-system,BlinkMacSystemFont,
    "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans",
    "Droid Sans","Helvetica Neue",sans-serif;
    --aura-font-quotes: serif;
    --aura-snow: #fafafa;
    --aura-purple: #e8ebfe;
    --aura-white: #fff;
    --aura-black: #000;
    --aura-orange: #feefe8;
    --aura-orange-rose: #fee8ef;
    --aura-pink: #fee8fc;
    --aura-pink-purple: #f3e8fe;
    --aura-blue: #e8f7fe;
    --aura-teal-green: #e8fef7;
    --aura-green: #e8feea;
    --aura-lemon-green: #f3fee8;
    --aura-yellow: #fefbe8;
    --aura-cold-grey: #e8e7ed;
    --aura-grey: #f6f7f9;
    --aura-bg: var(--aura-white);
    --aura-accents-10: #030303;
    --aura-accents-9: #191919;
    --aura-accents-8: #323232;
    --aura-accents-7: #4b4b4b;
    --aura-accents-6: #646464;
    --aura-accents-5: #7d7d7d;
    --aura-accents-4: #969696;
    --aura-accents-3: #afafaf;
    --aura-accents-2: #c8c8c8;
    --aura-accents-1: #f7f7f7;
    --aura-accents-0: #fafafa;
    --aura-module: var(--aura-accents-0);
    --aura-dark: var(--aura-white);
    --aura-accents-primary: var(--aura-black);
    --aura-accents-secondary: #0882ba;
    --aura-accents-success: #08ba82;
    --aura-accents-success-bg: var(--aura-teal-green);
    --aura-accents-info: #8b9afa;
    --aura-accents-info-bg: var(--aura-purple);
    --aura-accents-warning: #baa208;
    --aura-accents-warning-bg: var(--aura-yellow);
    --aura-accents-danger: #ba4108;
    --aura-accents-danger-bg: var(--aura-orange);
    --aura-accents-radius: var(--aura-radius);
    --aura-input-radius: var(--aura-radius);
    --aura-button-radius: var(--aura-radius);
    --aura-input-bg: var(--aura-grey);
    --aura-input-placeholder-color: rgba(0,0,0,0.2);
    --aura-radius: 13px;
    --aura-link-color: var(--aura-fg);
    --aura-opacity: .5;
    --aura-selector: #d1fdef;
    --aura-loader: #d1fdef;
    --aura-sprite: url(/sprite_glyphs.png);
}

CSS

Copy

Then you should import your custom style in _app.js

import "aura-design/style.css";
import "public/style.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

JSX

Copy

Next
Design principles