v 0.2 ๐Ÿš€ Changelog ๐ŸŽฏ Roadmap ๐Ÿ™‹โ€โ™‚๏ธ Volunteer ๐Ÿ’ Donate ๐Ÿ“ฌ Newsletter

Components

Subatomics

Branding

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%)

Modes

Atoms

Containers

Text

Icons

Lists

Buttons

Hierarchy

regular-button
secondary-button
cta-button
<button>Download Now</button>
<button class="secondary-button">Download Now</button>
<button class="cta-button>Download Now</button>
button, .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    max-width: 100%;
    margin: 1rem auto;
    padding: 1rem 1.4rem;
    border: none;
    border-radius: 900px;
    background-color: $accent-color;
    color: hsl(0, 0%, 100%);
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: 0s;
}
.secondary-button {
    border: 3px solid $accent-color;
    background-color: $accent-color-900;
    background-image: none !important;
}

.cta-button {
    box-shadow: 0 0 4px $accent-color,
                inset 0 0 0 4px hsla(234, 61%, 6%, 0.6);
    animation: gradient 7s infinite;
    background-image: linear-gradient(
                      45deg,
                      $accent-color-gradient-start,
                      $accent-color-gradient-end);
    background-size: 200% 200%;
}

Size

small-button
regular-button
large-button
<button class="button small-button">Download Now</button>
<button class="button">Download Now</button>
<button class="button large-button">Download Now</button>
.small-button {
    height: 35px;
    width: 180px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* .regular-button has the default styles of button elements */

large-button {
    width: 260px;
    padding: 1.25rem 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

Icons

left-icon
right-icon
right-left-icon
<button data-button-icon="phone">Download Now</button>
<button data-button-arrow>Download Now</button>
<button data-button-arrow-up>Download Now</button>
[data-button-icon]::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
}

[data-button-icon="phone"]::before {
    background-image: url(../../imgs/icons/phone-call.svg);
    filter:none;
    margin-block: -8px;
}

[data-button-arrow]::after {
    content: '';
    background-image: url(/imgs/icons/arrow-right-fill.svg);
    background-repeat: no-repeat;
    display: inline-block;
    opacity: .8;
    height: 10px;
    width: 18px;
    margin-left: 6px;
}

@keyframes moveArrow {
    0% {
        transform: translateX(0);
    }
    70% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(10px);
    }
}

[data-button-arrow-up]::before,
[data-button-arrow-up]::after {
    content: url(/imgs/icons/arrow-up-fill.svg);
    display: inline-block;
    opacity: .8;
    animation: moveArrow-up 1s ease-out infinite;
    height: 16px;
    width: 9px;
}

[data-button-arrow-up]::before {
    margin-right: 10px;
}

[data-button-arrow-up]::after {
    margin-left: 10px;
}

@keyframes moveArrow-up {
    0% {
        transform: translatey(0px);
    }
    70% {
        transform: translatey(-5px);
    }
    100% {
        transform: translatey(-5px);
    }
}


Separators

CodeBlocks

Molecules

Nav

Organisms

Header