Agence WagnerAgence Wagner
FRENDEELS
Back to designs
SombreSpirituelGradients
Preview

Celestialcore Design Reference

Overview

Celestialcore is a cosmic, starry design aesthetic rooted in humanity's ancient and enduring fascination with the night sky. It draws its visual language from deep-space imagery, lunar cycles, constellation maps, and the shimmering iridescence of celestial phenomena. At its core, the aesthetic transforms digital interfaces into reflections of the cosmos, where moon phases, star fields, and galactic gradients create immersive environments that feel vast, serene, and mysteriously luminous. The palette is built on foundations of deep navy and midnight purple, punctuated by silver, gold, and opalescent accents that evoke stardust, moonlight, and the aurora.

Unlike purely sci-fi or futuristic aesthetics, Celestialcore carries a spiritual and mythological dimension. Each motif holds symbolic weight: moons represent cycles, intuition, and transformation; stars embody guidance, hope, and destiny; constellations speak to storytelling, pattern-making, and navigation through the unknown. This layered symbolism elevates the aesthetic beyond decoration into something that feels ancient and timeless, even when rendered in modern CSS and responsive layouts.

In web design, Celestialcore manifests as dark, atmospheric interfaces where backgrounds shimmer with subtle star particles or nebula gradients, typography feels elegant and slightly mystical, and interactive elements carry a soft luminous glow. Cards and containers float like celestial bodies against the darkness, navigation feels like charting a course through the stars, and hero sections evoke the awe of gazing into infinite space. The style favors restraint over spectacle -- a few carefully placed iridescent accents against deep darkness create far more impact than saturated color everywhere. The result is an aesthetic that is simultaneously calming and awe-inspiring, intimate and infinite, grounded in ancient symbolism and executed with contemporary design precision.

Visual Characteristics

Core Design Traits

  • Deep cosmic backgrounds -- rich navy, midnight blue, and deep purple base surfaces that evoke the vastness of the night sky
  • Star field textures -- scattered pinpoint dots of varying opacity and size that simulate distant stars across backgrounds and sections
  • Moon phase motifs -- crescent, half, gibbous, and full moon shapes used as decorative elements, dividers, and icons
  • Constellation line work -- thin connecting lines between dots that form constellation-style patterns in backgrounds and illustrations
  • Iridescent and opalescent accents -- shifting, multi-hued highlights on buttons, borders, and focal elements that shimmer like light through a prism
  • Soft luminous glow -- gentle radial glows and halos around interactive elements, headings, and focal points, suggesting celestial light emission
  • Gold and silver metallic touches -- metallic tones for borders, typography accents, and decorative flourishes that evoke celestial opulence
  • Nebula gradient overlays -- subtle, multi-color gradients (deep blue to purple to rose) that suggest galactic clouds and cosmic dust
  • Velvet-like depth layering -- multiple shades of dark blue and purple layered to create a rich, textured sense of depth
  • Ethereal transparency -- frosted glass and translucent card surfaces that float against the cosmic backdrop
  • Circular and orbital geometry -- rounded shapes, orbital paths, and radial layouts that echo planetary motion

Design Principles

  • The night sky is the canvas; every element should feel like it belongs among the stars
  • Use darkness as a foundation, not a void -- deep blues and purples are warmer and more inviting than pure black
  • Iridescent and metallic accents are most effective when used sparingly against dark backgrounds
  • Create visual hierarchy through luminance: the brightest elements command the most attention
  • Balance mystical elegance with modern usability -- the aesthetic should enchant without confusing
  • Let negative space breathe like the vastness between stars; overcrowding destroys the cosmic atmosphere
  • Glow effects should feel like natural celestial light, soft and diffused rather than harsh or neon
  • Typography should feel timeless and slightly otherworldly, bridging the ancient and the contemporary

Color Palette

The Celestialcore palette is built on the deep, rich tones of the night sky, accented with the luminous shimmer of starlight, moonbeams, and nebulae. Base colors are dark and cool -- midnight blues, deep indigos, and cosmic purples -- while accent colors introduce warmth and magic through gold, silver, and iridescent tones.

Swatch Hex Role / Usage
Cosmic Void #0B0D1A Deepest background, page base
Midnight Navy #111836 Primary surface, card backgrounds
Deep Indigo #1A1F4E Elevated surfaces, modals, secondary panels
Astral Purple #2A1B3D Alternate dark surface, hero overlays
Nebula Plum #3D1C5C Gradient accent, decorative backgrounds
Constellation Blue #3A5BA0 Secondary interactive elements, links
Twilight Lavender #8E7CB8 Tertiary accent, tags, subtle highlights
Stardust Silver #C5C6D0 Primary text on dark backgrounds
Moonbeam #E8E4F0 Headings, bright text, emphasis
Celestial Gold #D4A843 Primary metallic accent, stars, CTAs
Starlight #F0E6C0 Warm highlight, star particles, hover glow
Aurora Teal #4EC6C1 Success states, cool iridescent accent
Nebula Rose #C77DBA Warm accent, gradient endpoints, notifications
Iridescent Lilac #B8A9E8 Iridescent shimmer, focus states, badges
Meteor Ember #D4764E Warning states, warm celestial accents

CSS Custom Properties

:root {
  /* Dark surfaces (deepest to lightest) */
  --celestial-void: #0b0d1a;
  --celestial-midnight: #111836;
  --celestial-indigo: #1a1f4e;
  --celestial-purple: #2a1b3d;
  --celestial-plum: #3d1c5c;

  /* Text */
  --celestial-text-primary: #e8e4f0;
  --celestial-text-secondary: #c5c6d0;
  --celestial-text-muted: #8e7cb8;

  /* Accent colors */
  --celestial-blue: #3a5ba0;
  --celestial-gold: #d4a843;
  --celestial-starlight: #f0e6c0;
  --celestial-teal: #4ec6c1;
  --celestial-rose: #c77dba;
  --celestial-lilac: #b8a9e8;
  --celestial-ember: #d4764e;

  /* Glow effects */
  --glow-gold: 0 0 20px rgba(212, 168, 67, 0.3), 0 0 40px rgba(212, 168, 67, 0.1);
  --glow-lilac: 0 0 20px rgba(184, 169, 232, 0.3), 0 0 40px rgba(184, 169, 232, 0.1);
  --glow-teal: 0 0 20px rgba(78, 198, 193, 0.3), 0 0 40px rgba(78, 198, 193, 0.1);
  --glow-starlight: 0 0 15px rgba(240, 230, 192, 0.25), 0 0 30px rgba(240, 230, 192, 0.08);

  /* Iridescent gradient */
  --gradient-nebula: linear-gradient(135deg, #1a1f4e, #3d1c5c, #2a1b3d);
  --gradient-iridescent: linear-gradient(135deg, #b8a9e8, #c77dba, #4ec6c1, #d4a843);
  --gradient-aurora: linear-gradient(180deg, #0b0d1a 0%, #1a1f4e 40%, #2a1b3d 70%, #0b0d1a 100%);
}

Typography

Typeface Characteristics

Celestialcore typography balances timeless elegance with ethereal mysticism. Serif and semi-serif typefaces dominate headlines, evoking the grandeur of astronomical charts and celestial manuscripts. Body text uses refined, legible sans-serif fonts that feel modern yet carry a quiet sophistication. Display type may incorporate decorative or astrological influences sparingly, reserved for hero headlines and special accent moments.

  • Elegant serif or transitional serif for headings -- evoking star atlases, astronomical journals, and celestial manuscripts
  • Clean, refined sans-serif for body -- legible and modern with subtle warmth, avoiding cold technical sterility
  • Generous letter-spacing in uppercase labels -- creating an airy, spacious quality that mirrors the cosmos
  • Light to regular weight for body text -- delicate strokes complement the ethereal atmosphere
  • Decorative or display fonts used sparingly -- reserved for hero titles or special celestial accent moments
Font Style Best For
Cormorant Garamond Elegant serif, high contrast Hero headlines, display text, celestial elegance
Playfair Display Modern serif, stylish Section headings, feature titles
EB Garamond Classic Garamond revival Subheadings, pull quotes, refined body
Raleway Elegant thin sans-serif Body text, navigation, UI labels
Quattrocento Sans Warm humanist sans Body text, descriptions, readable content
Cinzel Roman capitals, engraved feel Hero display, all-caps labels, celestial inscriptions
Josefin Sans Geometric, elegant thin Navigation, labels, light-weight accents
DM Sans Modern geometric sans Body text, interface elements, balanced readability
Spectral Refined screen serif Long-form body, articles, elegant paragraphs
Philosopher Humanist with character Subheadings, quotes, mystical-yet-readable text

Font Pairing Suggestions

Heading Font Body Font Character
Cormorant Garamond (600) Raleway (400) Classical celestial elegance, refined and readable
Playfair Display (700) DM Sans (400) High-contrast drama, modern clean body
Cinzel (600) Quattrocento Sans (400) Monumental, inscriptional headlines with warm body
Philosopher (700) Josefin Sans (300) Mystical character headings, airy lightweight body
EB Garamond (600) Spectral (400) Full serif pairing for long-form celestial editorial

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&family=Cinzel:wght@400;600;700&display=swap');

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 600;
  color: var(--celestial-text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.celestial-display {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--celestial-gold);
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.3);
}

body {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--celestial-text-secondary);
}

.celestial-label {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--celestial-text-muted);
}

.celestial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--celestial-lilac);
}

Layout Principles

  • Dark atmospheric foundations -- use deep navy and purple surfaces as the base; the entire interface should feel like looking into the night sky
  • Centered, spacious containers -- max-width 1100-1200px with generous padding; content should float in cosmic space, not feel cramped
  • Card-based layouts with subtle luminous borders -- cards defined by soft glowing borders or frosted translucent backgrounds that float against the dark canvas
  • Radial and circular focal points -- use radial gradients, circular decorative elements, and orbital arrangements to echo celestial geometry
  • Generous vertical rhythm -- ample spacing between sections creates the expansive feel of gazing across the cosmos
  • Layered depth through dark shading -- 3-4 shades of navy/purple for background, surface, elevated surface, and border to create spatial depth
  • Star field and particle backgrounds -- subtle animated or static star particles on hero sections and page backgrounds
  • Constellation-style navigation -- navigation elements connected by thin lines or arranged in a star-map layout
  • Moon phase dividers -- horizontal rule replacements using moon phase icons or crescent shapes between sections
  • Asymmetric celestial compositions -- off-center hero images, orbital text wrapping, and diagonal nebula gradients prevent static, grid-locked rigidity
  • Responsive approach -- on mobile, maintain the dark atmospheric depth; simplify star fields and reduce glow intensity to preserve performance

CSS / Design Techniques

Celestial Card Component

.celestial-card {
  background: rgba(17, 24, 54, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(184, 169, 232, 0.15);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.celestial-card:hover {
  border-color: rgba(212, 168, 67, 0.4);
  box-shadow: var(--glow-gold);
  transform: translateY(-4px);
}

.celestial-card--frosted {
  background: rgba(26, 31, 78, 0.5);
  border: 1px solid rgba(197, 198, 208, 0.1);
}

.celestial-card--highlighted {
  border-color: rgba(184, 169, 232, 0.3);
  box-shadow: var(--glow-lilac);
}

Celestial Button

.celestial-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--celestial-gold);
  border: 1px solid var(--celestial-gold);
  border-radius: 28px;
  padding: 12px 36px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.celestial-btn:hover {
  background: rgba(212, 168, 67, 0.1);
  box-shadow: var(--glow-gold);
  text-shadow: 0 0 12px rgba(212, 168, 67, 0.4);
}

.celestial-btn--filled {
  background: linear-gradient(135deg, var(--celestial-gold), #e8c06a);
  color: var(--celestial-void);
  border-color: transparent;
}

.celestial-btn--filled:hover {
  box-shadow: var(--glow-gold);
  filter: brightness(1.1);
}

.celestial-btn--iridescent {
  border-image: var(--gradient-iridescent) 1;
  color: var(--celestial-lilac);
}

.celestial-btn--iridescent:hover {
  background: rgba(184, 169, 232, 0.08);
  box-shadow: var(--glow-lilac);
}

.celestial-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 40px;
  border-bottom: 1px solid rgba(184, 169, 232, 0.1);
}

.celestial-nav__logo {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--celestial-gold);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(212, 168, 67, 0.25);
}

.celestial-nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.celestial-nav__links a {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--celestial-text-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
}

.celestial-nav__links a:hover {
  color: var(--celestial-starlight);
  text-shadow: 0 0 10px rgba(240, 230, 192, 0.3);
}

.celestial-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--celestial-gold);
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease;
}

.celestial-nav__links a:hover::after {
  transform: translateX(-50%) scale(1);
}

Hero Section

.celestial-hero {
  text-align: center;
  padding: 140px 40px 120px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(61, 28, 92, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(26, 31, 78, 0.6) 0%, transparent 50%),
    var(--celestial-void);
}

.celestial-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(240, 230, 192, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(240, 230, 192, 0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(212, 168, 67, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, rgba(184, 169, 232, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(240, 230, 192, 0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(240, 230, 192, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(197, 198, 208, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 90%, rgba(212, 168, 67, 0.4) 0%, transparent 100%);
  pointer-events: none;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.celestial-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  color: var(--celestial-text-primary);
  position: relative;
  z-index: 1;
}

.celestial-hero h1 .glow {
  color: var(--celestial-gold);
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.4);
}

.celestial-hero p {
  font-size: 1.15rem;
  color: var(--celestial-text-secondary);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

Star Field Background

.celestial-starfield {
  position: relative;
  overflow: hidden;
}

.celestial-starfield::before,
.celestial-starfield::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.celestial-starfield::before {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(240, 230, 192, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 45%, rgba(197, 198, 208, 0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 25%, rgba(212, 168, 67, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 65%, rgba(184, 169, 232, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, rgba(240, 230, 192, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 85%, rgba(197, 198, 208, 0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 15%, rgba(212, 168, 67, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(240, 230, 192, 0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(184, 169, 232, 0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 85%, rgba(240, 230, 192, 0.5) 0%, transparent 100%);
  animation: drift 60s linear infinite;
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

Nebula Gradient Section

.celestial-nebula-section {
  padding: 100px 40px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(61, 28, 92, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(26, 31, 78, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(199, 125, 186, 0.1) 0%, transparent 50%),
    var(--celestial-void);
}

.celestial-nebula-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 48px;
  color: var(--celestial-text-primary);
}

Moon Phase Divider

.celestial-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 0;
  color: var(--celestial-text-muted);
  font-size: 1.25rem;
  letter-spacing: 0.5em;
  opacity: 0.6;
}

/* Usage: <div class="celestial-divider">&#127761; &#127762; &#127763; &#127764; &#127765; &#127766; &#127767; &#127768;</div> */

.celestial-hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 169, 232, 0.3) 20%,
    rgba(212, 168, 67, 0.4) 50%,
    rgba(184, 169, 232, 0.3) 80%,
    transparent 100%
  );
  margin: 60px auto;
  max-width: 600px;
}

Iridescent Shimmer Effect

.celestial-shimmer {
  position: relative;
  overflow: hidden;
}

.celestial-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(184, 169, 232, 0.06) 40%,
    rgba(199, 125, 186, 0.06) 45%,
    rgba(78, 198, 193, 0.06) 50%,
    rgba(212, 168, 67, 0.06) 55%,
    transparent 70%
  );
  animation: shimmer 6s linear infinite;
  pointer-events: none;
}

@keyframes shimmer {
  from { transform: translateX(-30%) translateY(-30%) rotate(0deg); }
  to { transform: translateX(30%) translateY(30%) rotate(360deg); }
}

Design Do's and Don'ts

Do

  • Use deep navy and purple as your primary backgrounds -- they are warmer and more atmospheric than pure black
  • Apply iridescent and metallic accents sparingly; a few gold or opal touches against darkness create maximum celestial impact
  • Create star-field effects with CSS radial-gradient dots for lightweight, performant background textures
  • Use elegant serif fonts for headings to evoke the grandeur of astronomical charts and celestial manuscripts
  • Layer multiple dark tones (3-4 shades) to create spatial depth and prevent flat, lifeless backgrounds
  • Incorporate moon phase and constellation motifs as decorative elements, dividers, and visual storytelling devices
  • Ensure text readability with sufficient contrast -- light silver and cream tones on deep navy meet WCAG AA standards
  • Let generous negative space between elements evoke the vastness and tranquility of outer space

Don't

  • Use pure black (#000000) as the base background -- it flattens the design and loses the atmospheric warmth of deep navy/purple
  • Overuse glow effects on every element -- celestial glow should feel like distant starlight, not a Las Vegas marquee
  • Combine too many metallic or iridescent accents -- competing shimmers cancel each other out and create visual noise
  • Use bright, saturated colors for large surfaces -- they break the nocturnal atmosphere and overpower the subtle luminance
  • Rely solely on star emojis and generic space clip art -- the aesthetic requires refined, purposeful cosmic motifs
  • Pair celestialcore's elegant serifs with overly casual or rounded sans-serif fonts -- maintain the refined, timeless character
  • Forget mobile performance when using particle animations or complex gradient overlays -- simplify for smaller devices
  • Make the interface so dark and low-contrast that it becomes inaccessible -- mystical atmosphere must not sacrifice usability
Aesthetic Relationship to Celestialcore
Dark Academia Shares deep, moody palettes and reverence for classical knowledge; Celestialcore trades bookshelves for star charts
Dreamcore Shares ethereal, otherworldly atmosphere but Dreamcore pursues unease while Celestialcore evokes wonder and serenity
Glassmorphism Compatible technique; frosted glass cards on cosmic backgrounds complement the celestial depth effect
Aurora Gradient Shares luminous gradient language; Aurora focuses on northern-lights color shifts, Celestialcore on starlight and moonlight
Goblincore Nature-focused sibling; both romanticize the natural world, but Celestialcore looks up to the sky rather than down to the earth
Cottagecore Shares the romanticized, nostalgic mood; Cottagecore is pastoral daytime warmth, Celestialcore is nocturnal cosmic wonder
Cyberpunk Shares dark backgrounds with luminous accents, but Cyberpunk is urban and aggressive where Celestialcore is serene and mystical
Dark Mode Neon Shares dark-canvas-with-glow approach, but swaps neon intensity for soft celestial luminance and metallic warmth
Art Nouveau Shares organic curves and decorative elegance; Art Nouveau draws from botanical forms, Celestialcore from cosmic ones
Frosted Touch Compatible technique with translucent surfaces; pairs well with Celestialcore's atmospheric depth
Vaporwave Both feature purple-heavy palettes and nostalgic mood; Vaporwave is retro-digital, Celestialcore is timeless-cosmic
Mystic / Witchcore Closest sibling; shares moon, star, and esoteric symbolism but Celestialcore is more refined and less occult-focused

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celestialcore Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --celestial-void: #0b0d1a;
      --celestial-midnight: #111836;
      --celestial-indigo: #1a1f4e;
      --celestial-purple: #2a1b3d;
      --celestial-plum: #3d1c5c;
      --celestial-blue: #3a5ba0;
      --celestial-text-primary: #e8e4f0;
      --celestial-text-secondary: #c5c6d0;
      --celestial-text-muted: #8e7cb8;
      --celestial-gold: #d4a843;
      --celestial-starlight: #f0e6c0;
      --celestial-teal: #4ec6c1;
      --celestial-rose: #c77dba;
      --celestial-lilac: #b8a9e8;
      --celestial-ember: #d4764e;
      --glow-gold: 0 0 20px rgba(212, 168, 67, 0.3), 0 0 40px rgba(212, 168, 67, 0.1);
      --glow-lilac: 0 0 20px rgba(184, 169, 232, 0.3), 0 0 40px rgba(184, 169, 232, 0.1);
      --glow-teal: 0 0 20px rgba(78, 198, 193, 0.3), 0 0 40px rgba(78, 198, 193, 0.1);
      --glow-starlight: 0 0 15px rgba(240, 230, 192, 0.25), 0 0 30px rgba(240, 230, 192, 0.08);
      --gradient-iridescent: linear-gradient(135deg, #b8a9e8, #c77dba, #4ec6c1, #d4a843);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--celestial-void);
      color: var(--celestial-text-secondary);
      font-family: 'Raleway', 'Helvetica Neue', sans-serif;
      font-weight: 400;
      line-height: 1.75;
    }

    h1, h2, h3 {
      font-family: 'Cormorant Garamond', 'Georgia', serif;
      font-weight: 600;
      color: var(--celestial-text-primary);
      line-height: 1.2;
    }

    /* ===== Navigation ===== */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 40px;
      border-bottom: 1px solid rgba(184, 169, 232, 0.1);
    }

    nav a.logo {
      font-family: 'Cinzel', serif;
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--celestial-gold);
      text-decoration: none;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-shadow: 0 0 20px rgba(212, 168, 67, 0.25);
    }

    nav ul {
      display: flex;
      gap: 36px;
      list-style: none;
    }

    nav ul a {
      color: var(--celestial-text-muted);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      transition: color 0.3s, text-shadow 0.3s;
      position: relative;
    }

    nav ul a:hover {
      color: var(--celestial-starlight);
      text-shadow: 0 0 10px rgba(240, 230, 192, 0.3);
    }

    nav ul a::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      width: 4px;
      height: 4px;
      background: var(--celestial-gold);
      border-radius: 50%;
      transform: translateX(-50%) scale(0);
      transition: transform 0.3s;
    }

    nav ul a:hover::after {
      transform: translateX(-50%) scale(1);
    }

    /* ===== Hero Section ===== */
    .hero {
      text-align: center;
      padding: 140px 40px 120px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(61, 28, 92, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(26, 31, 78, 0.6) 0%, transparent 50%),
        var(--celestial-void);
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 12% 28%, rgba(240, 230, 192, 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 38% 72%, rgba(240, 230, 192, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 18%, rgba(212, 168, 67, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 52%, rgba(184, 169, 232, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 8% 82%, rgba(240, 230, 192, 0.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 12%, rgba(240, 230, 192, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 48% 48%, rgba(197, 198, 208, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 92%, rgba(212, 168, 67, 0.4) 0%, transparent 100%),
        radial-gradient(2px 2px at 68% 38%, rgba(240, 230, 192, 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 5% 55%, rgba(184, 169, 232, 0.35) 0%, transparent 100%);
      pointer-events: none;
      animation: twinkle 4s ease-in-out infinite alternate;
    }

    @keyframes twinkle {
      0% { opacity: 0.5; }
      100% { opacity: 1; }
    }

    .hero h1 {
      font-family: 'Cinzel', serif;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }

    .hero h1 .glow {
      color: var(--celestial-gold);
      text-shadow: 0 0 30px rgba(212, 168, 67, 0.4);
    }

    .hero p {
      font-size: 1.15rem;
      margin-bottom: 2.5rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 1;
    }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--celestial-gold);
      border: 1px solid var(--celestial-gold);
      border-radius: 28px;
      padding: 14px 40px;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.4s;
      position: relative;
      z-index: 1;
    }

    .btn:hover {
      background: rgba(212, 168, 67, 0.1);
      box-shadow: var(--glow-gold);
      text-shadow: 0 0 12px rgba(212, 168, 67, 0.4);
    }

    .btn--filled {
      background: linear-gradient(135deg, var(--celestial-gold), #e8c06a);
      color: var(--celestial-void);
      border-color: transparent;
    }

    .btn--filled:hover {
      box-shadow: var(--glow-gold);
      filter: brightness(1.1);
    }

    /* ===== Moon Phase Divider ===== */
    .moon-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 48px 0;
      font-size: 1.1rem;
      opacity: 0.5;
      letter-spacing: 0.3em;
    }

    /* ===== Features Section ===== */
    .features {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .features h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 12px;
    }

    .features .subtitle {
      text-align: center;
      color: var(--celestial-text-muted);
      margin-bottom: 48px;
      font-style: italic;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 28px;
    }

    .feature-card {
      background: rgba(17, 24, 54, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(184, 169, 232, 0.12);
      border-radius: 16px;
      padding: 36px;
      transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    }

    .feature-card:hover {
      transform: translateY(-4px);
    }

    .feature-card:nth-child(1):hover {
      border-color: rgba(212, 168, 67, 0.4);
      box-shadow: var(--glow-gold);
    }

    .feature-card:nth-child(2):hover {
      border-color: rgba(184, 169, 232, 0.4);
      box-shadow: var(--glow-lilac);
    }

    .feature-card:nth-child(3):hover {
      border-color: rgba(78, 198, 193, 0.4);
      box-shadow: var(--glow-teal);
    }

    .feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 1px solid rgba(184, 169, 232, 0.15);
      font-size: 1.5rem;
    }

    .feature-card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }

    .feature-card p {
      font-size: 0.95rem;
      line-height: 1.7;
    }

    /* ===== Quote / Constellation Section ===== */
    .constellation-section {
      padding: 100px 40px;
      text-align: center;
      position: relative;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(26, 31, 78, 0.5) 0%, transparent 60%),
        var(--celestial-void);
    }

    .constellation-section blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 400;
      font-style: italic;
      color: var(--celestial-lilac);
      max-width: 700px;
      margin: 0 auto 1.5rem;
      line-height: 1.5;
    }

    .constellation-section cite {
      font-family: 'Raleway', sans-serif;
      font-size: 0.85rem;
      font-style: normal;
      color: var(--celestial-text-muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ===== Stats / Metrics Section ===== */
    .metrics {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      text-align: center;
    }

    .metric-card {
      background: rgba(17, 24, 54, 0.5);
      border: 1px solid rgba(184, 169, 232, 0.1);
      border-radius: 16px;
      padding: 36px 24px;
      transition: border-color 0.4s, box-shadow 0.4s;
    }

    .metric-card:hover {
      border-color: rgba(212, 168, 67, 0.3);
      box-shadow: var(--glow-gold);
    }

    .metric-number {
      font-family: 'Cinzel', serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--celestial-gold);
      line-height: 1;
      margin-bottom: 8px;
      text-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
    }

    .metric-label {
      font-family: 'Raleway', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--celestial-text-muted);
    }

    /* ===== CTA Section ===== */
    .cta {
      text-align: center;
      padding: 80px 40px;
    }

    .cta-inner {
      background: rgba(17, 24, 54, 0.6);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(212, 168, 67, 0.2);
      border-radius: 20px;
      padding: 64px 48px;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }

    .cta-inner::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(184, 169, 232, 0.04) 40%,
        rgba(199, 125, 186, 0.04) 45%,
        rgba(78, 198, 193, 0.04) 50%,
        rgba(212, 168, 67, 0.04) 55%,
        transparent 70%
      );
      animation: shimmer 8s linear infinite;
      pointer-events: none;
    }

    @keyframes shimmer {
      from { transform: translateX(-30%) translateY(-30%) rotate(0deg); }
      to { transform: translateX(30%) translateY(30%) rotate(360deg); }
    }

    .cta h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      position: relative;
      z-index: 1;
    }

    .cta p {
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    }

    /* ===== Celestial Divider Line ===== */
    .celestial-hr {
      border: none;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(184, 169, 232, 0.3) 20%,
        rgba(212, 168, 67, 0.4) 50%,
        rgba(184, 169, 232, 0.3) 80%,
        transparent 100%
      );
      margin: 0 auto;
      max-width: 600px;
    }

    /* ===== Footer ===== */
    footer {
      border-top: 1px solid rgba(184, 169, 232, 0.1);
      text-align: center;
      padding: 48px 40px;
      font-size: 0.85rem;
      color: var(--celestial-text-muted);
    }

    footer a {
      color: var(--celestial-gold);
      text-decoration: none;
      transition: text-shadow 0.3s;
    }

    footer a:hover {
      text-shadow: 0 0 10px rgba(212, 168, 67, 0.3);
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .hero { padding: 100px 24px 80px; }
      nav { padding: 20px 24px; }
      nav ul { gap: 20px; }
      .features { padding: 60px 24px; }
      .cta-inner { padding: 48px 28px; }
      .constellation-section { padding: 60px 24px; }
      .metrics { padding: 60px 24px; }
      .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      nav ul { gap: 14px; }
      nav ul a { font-size: 0.75rem; }
      .metrics-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">Stellara</a>
    <ul>
      <li><a href="#">Explore</a></li>
      <li><a href="#">Constellations</a></li>
      <li><a href="#">Almanac</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <h1>Navigate by the <span class="glow">Stars</span></h1>
    <p>Chart your course through the cosmos. A celestial guide to the wonders above, where every constellation tells a story written in starlight.</p>
    <a href="#" class="btn btn--filled">Begin Your Journey</a>
  </section>

  <!-- Moon Phase Divider -->
  <div class="moon-divider">&#x1F311; &#x1F312; &#x1F313; &#x1F314; &#x1F315; &#x1F316; &#x1F317; &#x1F318;</div>

  <!-- Features Section -->
  <section class="features">
    <h2>Celestial Pathways</h2>
    <p class="subtitle">Discover the rhythms of the cosmos through three guiding lights</p>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">&#x1F319;</div>
        <h3>Lunar Cycles</h3>
        <p>Track the moon through its phases -- from the dark stillness of the new moon to the luminous fullness that lights the night. Each phase carries meaning, rhythm, and intention.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x2B50;</div>
        <h3>Star Maps</h3>
        <p>Explore constellation charts that have guided travelers for millennia. Each pattern of stars holds ancient stories of heroes, creatures, and cosmic forces etched across the sky.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon">&#x1F30C;</div>
        <h3>Nebula Gallery</h3>
        <p>Witness the breathtaking beauty of stellar nurseries and cosmic clouds. Nebulae paint the universe in iridescent hues of purple, gold, and teal that defy imagination.</p>
      </div>
    </div>
  </section>

  <!-- Gradient Divider -->
  <hr class="celestial-hr">

  <!-- Quote Section -->
  <section class="constellation-section">
    <blockquote>"We are all in the gutter, but some of us are looking at the stars."</blockquote>
    <cite>Oscar Wilde</cite>
  </section>

  <!-- Gradient Divider -->
  <hr class="celestial-hr">

  <!-- Metrics Section -->
  <section class="metrics">
    <div class="metrics-grid">
      <div class="metric-card">
        <div class="metric-number">88</div>
        <div class="metric-label">Constellations</div>
      </div>
      <div class="metric-card">
        <div class="metric-number">8</div>
        <div class="metric-label">Moon Phases</div>
      </div>
      <div class="metric-card">
        <div class="metric-number">200B+</div>
        <div class="metric-label">Stars Estimated</div>
      </div>
      <div class="metric-card">
        <div class="metric-number">5000</div>
        <div class="metric-label">Years of Stargazing</div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta">
    <div class="cta-inner">
      <h2>Ready to explore the cosmos?</h2>
      <p>Join stargazers and cosmic dreamers charting new constellations in the digital sky.</p>
      <a href="#" class="btn">Chart Your Stars</a>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <p>Built with Celestialcore aesthetics. Deep skies, starlight accents, cosmic wonder.</p>
  </footer>
</body>
</html>

Implementation Tips

  • Star fields with pure CSS -- use multiple tiny radial-gradient dots (1-2px) on pseudo-elements to create performant star backgrounds without JavaScript or image files
  • Iridescent effects via gradient animation -- animate a multi-color linear gradient across a pseudo-element to simulate the shifting, prismatic shimmer of iridescence
  • Test dark backgrounds across devices -- deep navy and purple render differently on OLED vs LCD screens; ensure the atmospheric depth reads well on both
  • Use backdrop-filter: blur() for frosted cards -- translucent cards with blur create a floating, ethereal quality; remember to include the -webkit- prefix for Safari
  • Preload Google Fonts with display=swap -- elegant serif fonts like Cormorant Garamond are essential to the aesthetic; prevent layout shift by ensuring they load efficiently
  • Optimize glow effects for performance -- box-shadow with large blur radii can impact rendering; limit glowing elements to interactive states and key focal points
  • Provide fallback colors for gradient borders -- border-image with gradients does not work with border-radius; use a pseudo-element technique for rounded iridescent borders
  • Respect prefers-reduced-motion -- wrap star twinkle, shimmer, and drift animations in a @media (prefers-reduced-motion: no-preference) query for accessibility
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.