VPN UI Core - Design System

The UI Core is a design system dedicated to crafting reusable UI components. Our focus is on aligning with established design principles agreed upon by the design team. This serves as a comprehensive guide for both designers and engineers, ensuring the creation of consistently styled interfaces.

Key Features

• Reusability: The design system prioritizes the development of UI components that are easily reusable across various parts of the application.
• Alignment with Design Standards: Our work is anchored in adherence to predefined design standards, fostering consistency and coherence in the visual elements.
• Guide for Designers and Engineers: The UI Core acts as a guiding resource for designers and engineers alike, streamlining the process of creating visually cohesive and user-friendly interfaces.
• Collaborative Approach: By providing a shared framework, the design system encourages collaboration between design and engineering teams, resulting in a unified and polished user experience.

Run Locally

Clone the project

  git clone [email protected]:Dian-Alfabet/vpn-ui-core.git

Go to the project directory

  cd vpn-ui-core

Install dependencies

  npm install

Start the server

  npm run storybook

Demo

Insert gif or link to demo

Color Reference

| Color | Hex | | ----------------- | ------------------------------------------------------------------ | | Example Color | #0a192f | | Example Color | #f8f8f8 | | Example Color | #00b48a | | Example Color | #00d1a0 |

Running Tests

To run tests, run the following command

  npm run test

Deployment

To deploy this project run

  npm run deploy

Usage/Examples

import Component from 'my-project'

function App() {
  return <Component />
}

Optimizations

What optimizations did you make in your code? E.g. refactors, performance improvements, accessibility

Used By

This project is used by the following companies:

• Portal Sekolah Features
• Portal Kerja Features