v 0.1 🚀 Changelog 🎯 Roadmap 🙋‍♂️ Volunteer 💝 Donate 📬 Newsletter

Components

Subatomics

Grid

All the dimensions of visual components —as well as the space between them— are defined around the $grid-unit-size.

The base value of $grid-unit-size is 8px.

The preferred measurement unit for font-sizes, margins, and paddings is REM.

The base value of $rem-font-size —defined as $grid-unit-size * 2— is 16px.

Typography

Font scale: SHEET_PLKT_Font-Scale

Font Styles

.title-1
Polykit Design System
.heading-1
An Open-source Design System for Web Development
.heading-2
Seamless UX-Code Integration
.heading-3
Beautiful Typography
.heading-4
Easy to Customize
<p>

Made with a focus on beautiful typography and seamless integration between ux design and code.

<small> Built by The Polyfen Group

Colors

For maximum control and precision of the color schemes all colors are defined with the HSL color system in the code.

Color scheme breakdown: SHEET_PLKT_Color-Scheme

Blue

$blue-100
#E6F0FF
hsl(214, 100%, 95%)
$blue-200
#
hsl(#, #%, #%)
$blue-300
#
hsl(#, #%, #%)
$blue-400
#
hsl(#, #%, #%)
$blue-500
#
hsl(#, #%, #%)
$blue-600
#
hsl(#, #%, #%)
$blue-700
#
hsl(#, #%, #%)
$blue-800
#
hsl(#, #%, #%)
$blue-900
#
hsl(#, #%, #%)
$blue-90pct
#E6F0FF5A
hsl(214, 100%, 95%, 0.9)
$blue-80pct
#E6F0FFCC
hsl(214, 100%, 95%, 0.8)
$blue-70pct
#E6F0FFB3
hsl(214, 100%, 95%, 0.7)
$blue-60pct
#E6F0FF99
hsl(214, 100%, 95%, 0.6)
$blue-50pct
#E6F0FF80
hsl(214, 100%, 95%, 0.5)
$blue-40pct
#E6F0FF66
hsl(214, 100%, 95%, 0.4)
$blue-30pct
#E6F0FF4D
hsl(214, 100%, 95%, 0.3)
$blue-20pct
#E6F0FF33
hsl(214, 100%, 95%, 0.2)
$blue-10pct
#E6F0FF1A
hsl(214, 100%, 95%, 0.1)
$blue-gradient
#E6F0FF
hsl(214, 100%, 95%)
$blue-gradient-start
#E6F0FF
hsl(214, 100%, 95%)
$blue-gradient-end
#E6F0FF
hsl(214, 100%, 95%)

Indigo

$indigo-100
#E6F0FF
hsl(214, 100%, 95%)
$indigo-200
#
hsl(#, #%, #%)
$indigo-300
#
hsl(#, #%, #%)
$indigo-400
#
hsl(#, #%, #%)
$indigo-500
#
hsl(#, #%, #%)
$indigo-600
#
hsl(#, #%, #%)
$indigo-700
#
hsl(#, #%, #%)
$indigo-800
#
hsl(#, #%, #%)
$indigo-900
#
hsl(#, #%, #%)
$indigo-90pct
#E6F0FF5A
hsl(214, 100%, 95%, 0.9)
$indigo-80pct
#E6F0FFCC
hsl(214, 100%, 95%, 0.8)
$indigo-70pct
#E6F0FFB3
hsl(214, 100%, 95%, 0.7)
$indigo-60pct
#E6F0FF99
hsl(214, 100%, 95%, 0.6)
$indigo-50pct
#E6F0FF80
hsl(214, 100%, 95%, 0.5)
$indigo-40pct
#E6F0FF66
hsl(214, 100%, 95%, 0.4)
$indigo-30pct
#E6F0FF4D
hsl(214, 100%, 95%, 0.3)
$indigo-20pct
#E6F0FF33
hsl(214, 100%, 95%, 0.2)
$indigo-10pct
#E6F0FF1A
hsl(214, 100%, 95%, 0.1)
$indigo-gradient
#E6F0FF
hsl(214, 100%, 95%)
$indigo-gradient-start
#E6F0FF
hsl(214, 100%, 95%)
$indigo-gradient
#E6F0FF
hsl(214, 100%, 95%)

Butterscotch

$butterscotch-100
#E6F0FF
hsl(214, 100%, 95%)
$butterscotch-200
#
hsl(#, #%, #%)
$butterscotch-300
#
hsl(#, #%, #%)
$butterscotch-400
#
hsl(#, #%, #%)
$butterscotch-500
#
hsl(#, #%, #%)
$butterscotch-600
#
hsl(#, #%, #%)
$butterscotch-700
#
hsl(#, #%, #%)
$butterscotch-800
#
hsl(#, #%, #%)
$butterscotch-900
#
hsl(#, #%, #%)
$butterscotch-90pct
#E6F0FF5A
hsl(214, 100%, 95%, 0.9)
$butterscotch-80pct
#E6F0FFCC
hsl(214, 100%, 95%, 0.8)
$butterscotch-70pct
#E6F0FFB3
hsl(214, 100%, 95%, 0.7)
$butterscotch-60pct
#E6F0FF99
hsl(214, 100%, 95%, 0.6)
$butterscotch-50pct
#E6F0FF80
hsl(214, 100%, 95%, 0.5)
$butterscotch-40pct
#E6F0FF66
hsl(214, 100%, 95%, 0.4)
$butterscotch-30pct
#E6F0FF4D
hsl(214, 100%, 95%, 0.3)
$butterscotch-20pct
#E6F0FF33
hsl(214, 100%, 95%, 0.2)
$butterscotch-10pct
#E6F0FF1A
hsl(214, 100%, 95%, 0.1)
$butterscotch-gradient
#E6F0FF
hsl(214, 100%, 95%)
$butterscotch-gradient-start
#E6F0FF
hsl(214, 100%, 95%)
$butterscotch-gradient-end
#E6F0FF
hsl(214, 100%, 95%)

Atoms

Buttons

button, a.button {
    background: $accent-color;
    color: $white;
    padding: 0.75rem 1.5rem;
    border-radius: 10rem;
    text-decoration: none;
    letter-spacing: 0.5px;
    font-weight: 600;
    box-shadow: 0 0 2px $accent-color;
    display: flex;
    width: 240px;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
    cursor: pointer;
}