phoenix-design-system | superpowers

Stats

Actions

Tags

phoenix-design-system | superpowers

Phoenix Design System

Build premium AI SaaS landing pages with the Phoenix design aesthetic - a dark, futuristic look with vibrant gradients and glassmorphism.

When to use this skill

User wants a dark-themed AI/tech landing page
User needs a premium SaaS website design
User mentions Phoenix-style, glassmorphism, or gradient aesthetics
User wants to create an AI product showcase

Design DNA

Core Aesthetic

Dark Mode: Pure black (#000000) or near-black backgrounds
Accent Colors: Vibrant purple/blue/pink gradients (glowing effect)
Typography: Clean sans-serif (Inter family recommended)
Visual Motif: Flowing ribbon/aurora gradients as connecting element

Color Palette

:root {
  /* Backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: rgba(15, 15, 15, 0.8);
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  
  /* Accents */
  --accent-purple: #a855f7;
  --accent-pink: #ec4899;
  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  
  /* Gradients */
  --gradient-aurora: linear-gradient(135deg, #a855f7, #ec4899, #3b82f6);
  --gradient-glow: radial-gradient(circle, rgba(168,85,247,0.3), transparent);
}

Page Structure

1. Navigation (Sticky)

[Logo] [Home] [About] [Features] [Pricing] [Use Cases] [Blog] [Contact]  [Login] [Get Started]

Transparent background, becomes solid on scroll
CTA button with white fill, black text
Login as text link

2. Hero Section

Headline: Large, bold, benefit-driven
Subheadline: Supporting value proposition (1-2 lines)
Dual CTAs: Primary (filled) + Secondary (outline)
Visual: 3D product mockup or animated gradient
Product Preview: Dashboard/app screenshot with subtle glow

Example:

Supercharge Your Productivity with AI

Over 200+ Next-Gen AI Assistants and Coaches to boost
your creativity and productivity – work smarter, not harder.

[Get started] [View pricing]

3. Trust Badges / Logos

Major brand logos (NVIDIA, Microsoft, Google, OpenAI)
Media mentions (Forbes, Bloomberg, Entrepreneur)
White/gray logos on dark background
Animated marquee effect (optional)

4. How It Works Section

Learn how [Product] works
Ready to reclaim your time? Here's the rundown.

Step cards with icons
Video embed or animated demo
Clear numbered steps

5. Benefits/Features Section

Aspirational Headlines: "Skyrocket Your Career", "Lead Your Market"
Icon-rich cards: Tool name + brief description
Categorized grids: Group by use case (Career, Business, Content)
Persona-based messaging: Speak to specific user needs

6. Product Cards / Chat UI

Glassmorphism effect: backdrop-filter: blur(10px)
Chat interface mockups showing AI in action
Highlighted keywords with accent colors
Sentiment/reaction tags at bottom

7. Testimonials

Quote from authority sources (Forbes, Entrepreneur)
Company logos as attribution
High-contrast white text on dark

8. Pricing Section

Choose your plan

3-tier layout (Free, Monthly, Annual)
Highlight recommended plan
Feature comparison list
Clear CTAs per tier

9. Footer

Multi-column layout
Newsletter signup
Social icons (LinkedIn, Twitter, YouTube)
Legal links

Visual Effects

Glassmorphism Cards

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

Glowing Accent

.glow {
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
}

Aurora/Ribbon Background

3D-rendered flowing ribbon in purple/pink/blue
Use as hero visual or section separator
Can be static image or animated video

Button Styles

.btn-primary {
  background: #ffffff;
  color: #000000;
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
}

.btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

Typography Scale

Element	Size	Weight
H1 (Hero)	48-64px	600-700
H2 (Section)	36-42px	600
H3 (Card)	20-24px	600
Body	16-18px	400
Small	14px	400

Responsive Breakpoints

/* Mobile first */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

Copy Principles

Headlines

Aspirational: "Skyrocket Your Career"
Benefit-focused: "Boost Your Productivity"
Challenge status quo: "The old ways don't work anymore"

Body Copy

Empathize with pain points first
Position product as the solution
Use "you" and "your" frequently
Keep paragraphs short (2-3 sentences)

Implementation Checklist

Resources