Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

This is a demo paragraph showcasing the main content typography. It uses a balanced text wrapping and a max-width of 70ch for optimal readability. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.sk-content | 1rem, 400 weight, 1.5 line height, 70ch max-width

Colors

Primary & Accent Colors

Primary

.bg-pri-500 | var(–pri-500)

Accent

.bg-acc-500 | var(–acc-500)

Primary Shades

Primary 50

.bg-pri-50 | var(–pri-50)

Primary 100

.bg-pri-100 | var(–pri-100)

Primary 200

.bg-pri-200 | var(–pri-200)

Primary 300

.bg-pri-300 | var(–pri-300)

Primary 400

.bg-pri-400 | var(–pri-400)

Primary 500

.bg-pri-500 | var(–pri-500)

Primary 600

.bg-pri-600 | var(–pri-600)

Primary 700

.bg-pri-700 | var(–pri-700)

Primary 800

.bg-pri-800 | var(–pri-800)

Primary 900

.bg-pri-900 | var(–pri-900)

Accent Shades

Accent 50

.bg-acc-50 | var(–acc-50)

Accent 100

.bg-acc-100 | var(–acc-100)

Accent 200

.bg-acc-200 | var(–acc-200)

Accent 300

.bg-acc-300 | var(–acc-300)

Accent 400

.bg-acc-400 | var(–acc-400)

Accent 500

.bg-acc-500 | var(–acc-500)

Accent 600

.bg-acc-600 | var(–acc-600)

Accent 700

.bg-acc-700 | var(–acc-700)

Accent 800

.bg-acc-800 | var(–acc-800)

Accent 900

.bg-acc-900 | var(–acc-900)

Grayscale Shades

Gray 50

.bg-gray-50 | var(–gray-50)

Gray 100

.bg-gray-100 | var(–gray-100)

Gray 200

.bg-gray-200 | var(–gray-200)

Gray 300

.bg-gray-300 | var(–gray-300)

Gray 400

.bg-gray-400 | var(–gray-400)

Gray 500

.bg-gray-500 | var(–gray-500)

Gray 600

.bg-gray-600 | var(–gray-600)

Gray 700

.bg-gray-700 | var(–gray-700)

Gray 800

.bg-gray-800 | var(–gray-800)

Gray 900

.bg-gray-900 | var(–gray-900)

Buttons

Primary Button

.button-pri | Primary color, white text, rounded

Accent Button

.button-acc | Accent color, white text, rounded

Border Radius

Extra Small

.rad-xs | 2px

Small

.rad-s | 4px

Medium

.rad-m | 8px

Large

.rad-l | 12px

Extra Large

.rad-xl | 24px

Full

.rad-full | 9999px

Shadows

Small

.shadow-s | Subtle shadow

Medium

.shadow-m | Moderate shadow

Large

.shadow-l | Prominent shadow

Extra Large

.shadow-xl | Dramatic shadow

Inset

.shadow-inset | Inner shadow

None

.shadow-none | No shadow