Ethereal Aesthetic & Styling
Relevant source files
The following files were used as context for generating this wiki page:
The SoulSeer platform utilizes a curated "Ethereal" design system characterized by celestial, mystical, and professional visual elements. This aesthetic is achieved through a dark-mode default interface, specific color palettes (Pinks, Golds, and Deep Blacks), and a typography mix that balances decorative headers with readable serif body text. The styling is designed to create a "soul tribe" atmosphere that feels heart-centered and spiritual while maintaining technical robustness.
Sources: README.md:104-108, client/src/pages/AboutPage.tsx:21-25
Design Tokens and Color Palette
The styling architecture is built upon CSS Custom Properties (Design Tokens) defined in the :root scope. These tokens govern colors, spacing, typography, and shadows to ensure consistency across the monorepo's frontend.
Primary Color Palette
The brand colors are strictly defined to maintain the "Celestial" theme:
| Category | Token Name | Hex/Value | Usage |
|---|---|---|---|
| Brand | --primary-pink | #FF69B4 | Main brand identity, headings |
| Accent | --accent-gold | #D4AF37 | Pricing, borders, special highlights |
| Background | --bg-deep-black | #0A0A0F | Main application background |
| Surface | --surface-card | rgba(19, 17, 26, 0.55) | Translucent glassmorphism cards |
Sources: client/src/styles/global.css:10-24, README.md:107
Visual Effects (Glows & Glassmorphism)
The project relies heavily on backdrop-filter and box-shadow "glows" to simulate a mystical environment.
The glass card implementation uses a high-blur backdrop to maintain readability over the complex background image.
Sources: client/src/styles/pages.css:26-33, client/src/styles/global.css:57-61
Typography
SoulSeer uses a distinct font pairing to balance its mystical theme with professional readability.
- Headings:
Alex Brush(cursive) is used for H1-H4 elements, creating a handwritten, spiritual feel. - Body Text:
Playfair Display(serif) is used for content, providing a classic and trustworthy appearance. - Pricing/Stats: Often utilizes the serif font with bold weights (
700) and the gold color token to denote value.
Sources: client/src/styles/global.css:1-5, client/src/styles/global.css:69-72, README.md:108
Atmospheric Components
The "Ethereal" aesthetic is reinforced by several specialized components and CSS animations that simulate a cosmic environment.
Cosmic Background & Decorations
The application uses a fixed, high-definition background image of a vivid ethereal scene. This is overlaid with:
- Dark Overlay: A semi-transparent overlay (
rgba(5, 5, 10, 0.18)) to ensure text contrast. - Cosmic Dots: Decorative '✦' symbols that float and pulse via CSS keyframe animations.
- Twinkling Effects: Absolute-positioned dots that fade in and out using the
twinkleanimation.
Sources: client/src/styles/global.css:118-124, client/src/styles/global.css:135-144, client/src/styles/global.css:764-771
Key Animations
Animations are used to provide tactile feedback while maintaining a "dreamy" flow:
| Animation | Logic | Purpose |
|---|---|---|
cosmicPulse | Radial gradient scale (1 to 1.3) | Used for background "orbs" on login screens |
float | Y-axis translation (-8px) | Used for decorative cosmic symbols |
shimmer | Background position shift (200%) | Used for skeleton loading states |
pageEnter | Opacity (0 to 1) + Y-translate (8px) | Soft entrance for all main page views |
Sources: client/src/styles/pages.css:208-212, client/src/styles/global.css:844-854, client/src/styles/global.css:873-875
Feature-Specific Styling
Reading Session UI
The Reading Session utilizes high-contrast styling to ensure functionality during live interactions.
- Session Bar: A sticky header with a translucent background that tracks elapsed time and real-time cost.
- Chat Bubbles: Sent messages use a pink subtle background (
rgba(255, 105, 180, 0.2)), while received messages use a gold-tinted background. - Call Controls: Circular buttons with translucent backdrops that transition to specific danger colors (red) for ending sessions.
Sources: client/src/pages/reading/ReadingSessionPage.tsx:84-114, client/src/styles/pages.css:429-445, client/src/styles/pages.css:495-515
Interactive State Flow
Interactive cards (such as Reader Cards and Community Links) use a standardized transition from subtle transparency to pronounced glow and slight elevation upon user hover.
Sources: client/src/styles/global.css:327-340, client/src/styles/pages.css:26-33
Technical Implementation Summary
The styling logic is separated into two primary files:
global.css: Contains the Design System, resets, and core utility classes.pages.css: Contains component-specific layouts (e.g.,.reader-card,.forum-post,.session-bar).
This separation allows the project to maintain a highly specific visual identity while keeping the core CSS architecture modular and reusable.
Sources: client/src/styles/pages.css:1-5, client/src/styles/global.css:1-10