polar

A cold, minimal CSS design system. Includes a minimal reset, custom properties/tokens, core layout components, and utility classes—all with zero dependencies.

Installation

Install using your preferred package manager:

# Using npm
npm install josemi-polar

# Using yarn
yarn add josemi-polar

# Using pnpm
pnpm add josemi-polar

Or import it directly via CDN:

<link rel="stylesheet" href="https://unpkg.com/josemi-polar/polar.css">

Quick Start

Import the stylesheet in your CSS and use the design tokens directly:

@import "josemi-polar/polar.css";

body {
    background-color: var(--polar-color-dark1);
    color: var(--polar-color-mist3);
    font-family: var(--polar-fontFamily-sans);
}

Or compose your pages using the built-in components and layout utility classes:

<div class="container p-lg">
    <header class="navbar">
        <a class="navbar-brand fontWeight-bold" href="#">Polar</a>
        <button class="navbar-toggle" aria-label="Toggle navigation"></button>
    </header>
    <main class="mTop-xl text-center">
        <h1 class="fontSize-2xl fgColor-glacier1">Minimal Design System</h1>
        <p class="fontSize-md fgColor-mist1 mTop-sm">A clean foundation for your web projects.</p>
    </main>
</div>

What's Included

• Minimal Reset: Standardizes box-sizing, removes default margins/paddings, and normalizes media elements, links, and buttons.
• Design Tokens: A CSS custom properties system mapping color palettes (Dark, Mist, Glacier, Accents), spacing scale, typography families, sizes, weights, and line heights.
• Layout Components: Responsive structural components including Container, Navbar (with full-screen overlay menu support), and Footer.
• Utility Classes: Atomic CSS utilities for spacing (margin/padding), typography (sizes, alignment, weight, families), display, flexbox layouts, and color mapping.

Documentation

For the complete list of tokens, component variations, and utility classes, visit the website: josemi.xyz/polar

Inspiration

The color palette structure is inspired by Nord, though every value was designed from scratch.

License

Released under the MIT License.