Skip to content

Latest commit

 

History

History
75 lines (52 loc) · 2.63 KB

design-kit.md

File metadata and controls

75 lines (52 loc) · 2.63 KB
title description navigation
Design Kit
Find all the design resources about UnJS.
false

About UnJS

UnJS, pronounced /ʌn-dʒeɪɛs/ or un-jay-ess, is a collection, an ecosystem, of JavaScript libraries, tools and utilities to elevate the coding journey of developers.

UnJS is a short form of Unified JavaScript, which refers to the idea that every package can work both together and individually, with external packages, in any environment and agnostic of any framework or library, to reunify the JavaScript ecosystem around a common vision.

Please write UnJS and not unJS or Unjs or unjs.

However, all packages are lowercase, like unbuild, ofetch, nitro, etc.

Logo

The UnJS logo is a combination of these two elements:

  • Two letters, u and n, the Un part of UnJS, but lowercase on the logo
  • The logo of JavaScript with the iconic yellow color, the JS part of UnJS

Note that the logo, like repos, is lowercase.

The logo can be used on a white background or a black background.

::design-kit-logo{.not-prose .mt-8}

logo:

  • name: Black src: svg: /assets/images/design-kit/unjs-logo-black.svg png: /assets/images/design-kit/unjs-logo-black.png
  • name: White # Usable on both white and black backgrounds src: svg: /assets/images/design-kit/unjs-logo-black.svg png: /assets/images/design-kit/unjs-logo-black.png

::

Colors

UnJS colors are based on the JavaScript logo colors with a yellow color as the main color and a deep black as the secondary color to create contrast inside the logo.

::design-kit-colors{.not-prose .mt-8}

colors:

  • name: yellow hex: '#ECDC5A'
  • name: deep black hex: '#111827'
  • name: white hex: '#FFFFFF'

::

Typography

UnJS uses the Nunito font for its rounded and friendly look. This reminds us of the ambition of unifying the JavaScript ecosystem around a common vision and the agnostic nature of UnJS.

:design-kit-typography{.not-prose .mt-8}

Package Logos

Each package has its own logo. For most of them, the logo is an emoji from the Noto collection that try to represent the package purpose.

:design-kit-package-logos{.not-prose .mt-8}

Package Puzzle Parts

Each package has its own puzzle part. The puzzle part is an important element of UnJS because it represents the idea that all packages can be used together to form a bigger picture, the UnJS ecosystem. In the meantime, each package can be used individually to solve a specific problem.

:design-kit-package-puzzle-parts{.not-prose .mt-8}