Style Guide
A showcase of the new Mac-inspired glassmorphic design system, typography, and component patterns.
Typography
Heading 1
Font: Lexend Deca Semibold, text-5xl → text-6xl (responsive)
Heading 2
Font: Lexend Deca Semibold, text-4xl → text-5xl (responsive)
Heading 3
Font: Lexend Deca Semibold, text-3xl → text-4xl (responsive)
Body Large — This is paragraph text at a larger size for emphasis or introductory content in predominantly white sections.
Font: Space Grotesk Regular, text-lg → text-xl
Body Regular — This is standard paragraph text used throughout the site for comfortable, long-form reading.
Font: Space Grotesk Regular, text-[15px] → text-base
Color Palette
Primary
#14143D
var(--color-primary)
Secondary
#5B5EA6
var(--color-secondary)
Accent
#FFD700
var(--color-accent)
Accent 2
#80FBD2
var(--color-accent2)
Content Surface
#FFFFFF
Used for body cards
Glassmorphic Fill
rgba(255, 255, 255, 0.6)
Used for styling panels
Buttons & Inputs
box-shadow: 0 0 12px rgba(255,215,0,0.25) Content Surfaces
White Content Card
This reflects the user's request for predominantly white content body sections to ensure maximum readability against the dark glassmorphic backgrounds. The text is tight and the corners are softly rounded (`rounded-[24px]`).
Glass Status Card
Nested UI elements use darker, translucent backgrounds to create a sense of depth and hierarchy within the dashboard or community hubs.
Total Hubs
142
Active
99%