The Unknot Spot

Style Guide — Color Palette & Component Reference

Color Palette

Main #fbfbfb

Default text & headings

Bubblegum Baby Girl #b661fd

Purple — Logo color

Deep Sky Blue #0171fe

Blue — Logo color

Lime Zest #dcf803

Yellow-green — Logo color

Neon Yellow #d4ff08

Greenish yellow — Accent

Hot Magenta #ff10cf

Pink — Accent

Out of the Blue #0391e8

Sky blue — Accent

Base Headings & Text — #fbfbfb

Page Title

Section Heading

Sub Heading

Card Title

Label Heading

Small Heading

Body paragraph text — readable and clean on dark backgrounds.

a Anchor link text

Per-Color Components

Bubblegum Baby Girl

#b661fd · .purple / .text-purple

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-purple

Button

Badge New

Divider

Background

.bg-purple

Deep Sky Blue

#0171fe · .blue / .text-blue

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-blue

Button

Badge Sale

Divider

Background

.bg-blue

Lime Zest

#dcf803 · .lime / .text-lime

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-lime

Button

Badge Hot

Divider

Background

.bg-lime

Neon Yellow

#d4ff08 · .neon-yellow / .text-neon-yellow

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-neon-yellow

Button

Badge Live

Divider

Background

.bg-neon-yellow

Hot Magenta

#ff10cf · .magenta / .text-magenta

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-magenta

Button

Badge New

Divider

Background

.bg-magenta

Out of the Blue

#0391e8 · .sky / .text-sky

h1 – h3

Heading 1 Heading 2 Heading 3

Text

Body text sample

Link .link-sky

Button

Badge Info

Divider

Background

.bg-sky

Utility Classes

Text Align .text-center .text-left .text-right

Text Style .text-bold .text-italic .text-uppercase

Text Size .text-sm .text-lg .text-xl

Margin Top .mt-1 — 0.5rem .mt-2 — 1rem .mt-3 — 1.5rem

Margin Bottom .mb-1 — 0.5rem .mb-2 — 1rem .mb-3 — 1.5rem

Padding .p-1 — 0.5rem .p-2 — 1rem .p-3 — 1.5rem

Utility Class Demos

.text-sm

.text-sm — smaller body text (0.875rem)

.text-lg

.text-lg — larger body text (1.25rem)

.text-xl

.text-xl — extra large text (1.5rem)

.text-bold

.text-bold — bold weight

.text-italic

.text-italic — italic style

.text-uppercase

.text-uppercase — all caps transform

.text-center

.text-center — centered text

.text-right

.text-right — right aligned text