Design System Docs & Usage Reference

Official Reference

Nebula Design System & Elementor Guide

Complete reference for Google Business Clean + Light Quibi Aesthetic tokens, custom Elementor widgets, CSS classes, typography rules, and button alignment controls. (You can delete this page later whenever needed).

🎨 Color Tokens

Primary brand colors used across dark headers, canvas backgrounds, and gradient buttons.

Dark Obsidian Header & Hero #090D16

Light Cool Grey Canvas #F8F9FA

Charcoal Black Headings #111827

Quibi Indigo Start #6366F1

Vibrant Purple Mid #A855F7

Electric Pink End #EC4899

⚡ CSS Classes for Elementor

Enter these into Elementor → Advanced → CSS Classes.

nebula-ambient-bg

Applies the animated 12s moving radial mesh logo gradient background.

nebula-card

Converts container into Google-style white card (20px radius + soft shadow).

nebula-frosted-card

High-contrast frosted glass card with blur(24px) & top shimmer beam.

nebula-btn-pill

Primary gradient pill button fill (9999px radius + hover halo).

nebula-btn-outline

Secondary glass outline pill button (9999px radius + pink hover glow).

🧩 Custom Elementor Plugin Widgets

Located under category “Nebula Design System” in Elementor sidebar.

1. Nebula Google Card

Displays 60px emoji, sub-badge, 22px Outfit title, description, and left-aligned gradient pill button with arrow icon (→).

2. Nebula Frosted Glass Card

Displays glassmorphism card with customizable backdrop blur, fill opacity, padding, and shimmer beam.

3. Nebula Gradient Pill Button

Standalone gradient pill button widget with alignment controls (Left / Center / Right) and button icon support.

📐 Typography Standards

Universal font sizes and weights across all pages and service cards.

Hero Headline (Dark Sec 1) 34px – 38px (Outfit 800)
Section Main Headings (H2) 26px – 28px (Outfit 800)
Service Card Titles 22px (Outfit 700 #111827)
Card Description Copy 15px (Inter 400 #4B5563)
Sub-badges & Labels 11px – 13px (Outfit 800, 2px Spacing)