Style Guide
Cosmic Ocean design system components and utilities
Color Palette
Backgrounds
Void
#0a0a14
Deep
#181828
Abyss
#201048
Surface
#302038
Primary
Nebula
#582870
Orchid
#9048a0
Wisteria
#9058b8
Accents
Coral
#a86878
Rose
#d068a8
Blush
#c88890
Glow
Bloom
#d078c8
Aurora
#b070d0
Stardust
#f8b0d8
Warmglow
#f0c8c0
Pearl
#e8b8b8
Particles
Ember
#d4a574
Spark
#f0d090
Flare
#fff4e0
Typography
.text-display — 48px / 300
Display Heading
.text-h1 — 36px / 400
Heading One
.text-h2 — 28px / 400
Heading Two
.text-h3 — 20px / 500
Heading Three
.text-body — 16px / 400
Body text for paragraphs and general content. The nebulae exhale slowly here, their breath becoming dust on abandoned telescopes.
.text-small — 14px / 400
Small text for captions and secondary information.
.text-micro — 12px / 400
Micro text for labels and metadata.
Glow Effects
.glow (default)
Luminescent
.glow-subtle
Subtle Glow
.glow-warm
Warm Coral
.glow-soft
Soft Bloom
Buttons
Cards
Static Card
Card Title
Vespertine hollows drift through the waning gargoyles, where chimeric whispers collect.
Interactive Card
Hover Me
This card lifts and glows on hover, perfect for clickable items.
Links
Default Link
Here is some text with a default link inside it.
Subtle Link
A subtle link blends more with surrounding text.
External Link
Visit GitHub for the source code.
Form Inputs
Badges
Utility Classes
| Class | Description |
|---|---|
| .btn .btn-{variant} | Button styles: primary, secondary, ghost |
| .btn-{size} | Button sizes: sm, lg |
| .card .card-interactive | Card container with optional hover effect |
| .link .link-subtle | Styled anchor elements |
| .glow .glow-{variant} | Text glow: subtle, warm, soft |
| .input .input-error | Form input styles |
| .badge .badge-{variant} | Badge styles: outline, warm |
| .text-{scale} | Typography: display, h1, h2, h3, body, small, micro |