Currently accepting new clients for August

Style Guide

Theme configuration and design system reference

Colors

Primary Colors

50

nebula-violet-10

100

nebula-violet-20

200

nebula-violet-30

300

nebula-violet-40

400

nebula-violet-50

500

nebula-violet

600

nebula-violet

700

nebula-purple

800

nebula-purple-dark

900

nebula-black

DEFAULT

nebula-violet

hover

nebula-purple

light

nebula-violet-20

dark

nebula-purple-dark

Secondary Colors

50

nebula-cyan-10

100

nebula-cyan-20

200

nebula-cyan-30

300

nebula-cyan-40

400

nebula-cyan-50

500

nebula-cyan

600

nebula-cyan

700

stellar-blue

800

stellar-blue

900

stellar-blue

DEFAULT

nebula-cyan

hover

stellar-blue

light

nebula-cyan-20

dark

stellar-blue

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Styles

Small paragraph text

Base paragraph text

Large paragraph text

Extra large paragraph text

Buttons

Button Variants

Button Sizes

Button States

Spacing

Section Padding

xsmall:
py-4
small:
py-12
medium:
py-16
large:
py-20
xlarge:
py-24 lg:py-32

Cards & Shadows

Small Shadow

Card with small shadow

Medium Shadow

Card with medium shadow

Large Shadow + Hover

Card with large shadow and hover effect

Gradients

hero

bg-gradient-to-br from-nebula-black to-nebula-purple-dark

primary

bg-gradient-to-r from-nebula-cyan to-nebula-violet

secondary

bg-gradient-to-r from-nebula-violet to-nebula-purple

dark

bg-gradient-to-br from-nebula-black to-nebula-purple-dark

light

bg-gradient-to-br from-nebula-violet/10 to-nebula-cyan/10

nebula

bg-gradient-nebula

radial

bg-gradient-radial-nebula

adaptive

bg-gradient-to-br from-gray-50 to-gray-100 dark:from-nebula-black dark:to-gray-900