REDESIGN REJOICE.SO USING THE REJOICE BRAND SYSTEM

Please redesign the existing Rejoice website and apply the new visual system across every public route.

IMPORTANT: preserve the current product structure, routes, copy, pricing, links, forms, and working functionality unless a change is explicitly requested below. This is primarily a visual and interaction redesign. Do not replace real functionality with static mockups.

BRAND DIRECTION

Rejoice is the home for Christian creators. The site should feel like a premium technology company and creator platform that happens to be distinctly Christian.

The desired feeling is:
- dark-first
- modern, calm, confident, hopeful, and premium
- creator-led rather than institutional
- spiritually meaningful without feeling like a church bulletin
- simple and product-focused
- suitable for musicians, podcasters, writers, speakers, pastors, apologists, lifestyle creators, athletes, churches, managers, and brands

Do not use generic Christian design clichés such as stained glass, parchment, gold church ornament, glowing crosses, doves, clouds, or stock photography of raised hands. Faith should be expressed through the Bethlehem Star, the copy, the mission, and a sense of light emerging from darkness.

VISUAL REFERENCES

Use the restraint and clarity of Anthropic, the product precision of Linear, and the energy of a modern creator platform. Do not directly copy any company. Rejoice must have its own visual identity.

CORE COLOR SYSTEM

Use these exact tokens:

- Night background: #060711
- Main background: #0B0D18
- Elevated surface: #111425
- Panel surface: #171A2E
- Border: #2A2E44
- Primary text: #F8F9FF
- Secondary text: #A9AEC4
- Blue: #2D7DFF
- Indigo: #5B5CF6
- Purple: #A23BFF
- Cyan: #18C8F5

Primary brand gradient:
linear-gradient(135deg, #A23BFF 0%, #5B5CF6 48%, #18C8F5 100%)

Use the gradient with discipline:
- Bethlehem Star
- primary CTA
- small emphasis words
- subtle halos and focus states
- selected states

Do not cover entire sections with loud gradients. Most of the interface should remain dark, restrained, and highly legible.

TYPOGRAPHY

- Headings: Manrope, weight 500-700, tight tracking
- Body and UI: Inter, weight 400-600
- Large heading tracking: approximately -0.04em
- Body line height: 1.55-1.7
- Avoid all-caps except for small eyebrows and labels
- Avoid overly small grey text

BETHLEHEM STAR: CRITICAL IMPLEMENTATION RULES

The Bethlehem Star is the primary Rejoice symbol. It must never be stretched, cropped, blurred, placed on a checkerboard background, or rendered from the supplied JPG-like source artwork.

Use the supplied file:
`rejoice-star-gradient.svg`

Build the logo lockup as two separate elements:
1. the inline SVG star
2. the text wordmark “Rejoice”

Do not use one flattened bitmap for the complete logo.

Implementation requirements:
- use an SVG with viewBox="0 0 719 927"
- use preserveAspectRatio="xMidYMid meet"
- set width OR height and let the other dimension remain auto
- use `display: block`
- use `flex-shrink: 0`
- use `overflow: visible`
- never use `object-fit: cover`
- never use a CSS mask for the main logo
- never add a forced square aspect ratio to the star
- never use the old checkerboard image
- for icons smaller than 20px, use the monochrome star rather than compressing the gradient version
- use the favicon asset for browser and app icons

Recommended React usage:

```tsx
<img
  src="/rejoice-star-gradient.svg"
  alt=""
  aria-hidden="true"
  className="h-10 w-auto shrink-0 object-contain"
/>
<span className="font-[Manrope] text-2xl font-semibold tracking-[-0.04em]">
  Rejoice
</span>
```

For a reusable component:

```tsx
export function RejoiceStar({ className = "h-10 w-auto" }) {
  return (
    <img
      src="/rejoice-star-gradient.svg"
      alt=""
      aria-hidden="true"
      className={`${className} block shrink-0 object-contain`}
    />
  );
}
```

GLOBAL LAYOUT

- max content width: 1200-1280px
- page gutters: 24px desktop, 18px tablet, 16px mobile
- use generous vertical spacing
- primary section spacing: 112-144px desktop, 72-96px mobile
- card radius: 20-24px
- button height: 46-50px
- use a clear 8px spacing system
- use hairline borders instead of excessive drop shadows
- use subtle blue-purple ambient glows behind selected hero and product areas
- avoid excessive glassmorphism
- avoid floating decorative blobs with no purpose

NAVIGATION

Create a dark, lightly translucent sticky navigation bar:
- Rejoice star and wordmark on the left
- Product, Creators, Managers, Brands, Pricing in the center
- Sign in as a quiet link
- Start free as the gradient primary button
- use a thin bottom border
- on mobile use a clean slide-out menu
- keep the logo compact and correctly proportioned


GLOBAL LIGHT AND DARK THEMES

Rejoice is dark-first, but the entire public website must also support a polished light theme.

Theme behavior:
- default first-time visitors to dark mode
- include a sun/moon theme toggle in the global navigation on every public route
- place the toggle immediately before Sign in on desktop
- include the same control near the top of the mobile menu
- persist the visitor's selection in localStorage
- apply the saved theme before the first paint to prevent flashing
- use `data-theme="dark"` or `data-theme="light"` on the root `<html>` element
- update `color-scheme` so browser controls match the active theme
- all components must use semantic design tokens rather than hard-coded background or text colors
- preserve the visitor's choice while navigating between routes
- use an accessible button with an explicit label such as “Switch to light theme”
- include visible keyboard focus and a minimum 44px hit area
- use a brief 150-200ms color transition, but disable it when `prefers-reduced-motion` is enabled
- the Rejoice gradient remains identical in both themes
- the star must remain crisp and correctly proportioned in both themes

Light theme tokens:
- Page canvas: #F7F8FC
- Main background: #FFFFFF
- Elevated surface: #F1F3F9
- Panel surface: #FFFFFF
- Border: #DDE1EC
- Primary text: #101322
- Secondary text: #5F667C
- Soft brand tint: #EEF1FF
- Strong shadow: 0 20px 60px rgba(32, 40, 75, 0.12)

Light theme visual rules:
- retain white and very pale blue-grey surfaces
- use dark navy text rather than pure black
- use thin neutral borders and restrained shadows
- do not make the light theme feel clinical or generic
- preserve subtle blue-purple ambient light at very low opacity
- use the dark wordmark color with the gradient star
- pricing, product previews, forms, modals, menus, and footer must all have deliberate light variants
- never invert screenshots automatically; create proper theme-aware product mockups where necessary

Recommended anti-flash script in the document head:

```html
<script>
  (() => {
    try {
      const saved = localStorage.getItem("rejoice-theme");
      const theme = saved === "light" ? "light" : "dark";
      document.documentElement.dataset.theme = theme;
      document.documentElement.style.colorScheme = theme;
    } catch {
      document.documentElement.dataset.theme = "dark";
      document.documentElement.style.colorScheme = "dark";
    }
  })();
</script>
```

BRAND KIT PAGE AND DOWNLOAD LINK

Add a public brand resources route at:

`/brand`

Do not place Brand in the main center navigation. Add “Brand” under a Resources or Company group in the global footer so it is easy to find without distracting from conversion.

The `/brand` page should include:
- Rejoice star and wordmark
- a short brand statement
- primary and monochrome logo downloads
- dark and light lockups
- favicon and app icon downloads
- primary color palette with hex values
- typography guidance
- minimum clear-space and minimum-size rules
- simple correct and incorrect usage examples
- a direct “Download complete brand kit” button
- contact line: support@rejoice.global for press or brand questions

Host the supplied ZIP at a stable public path such as:

`/downloads/Rejoice_Brand_Kit.zip`

Also make individual SVG assets downloadable from `/brand`.

Brand page copy:

Eyebrow:
“Rejoice brand”

Heading:
“Share Rejoice clearly.”

Introduction:
“Use these approved assets when writing about, partnering with, or representing Rejoice. Keep the Bethlehem Star sharp, correctly proportioned, and surrounded by enough space to shine.”

Download CTA:
“Download complete brand kit”

Usage note:
“The Bethlehem Star is Rejoice’s primary symbol. Never stretch it, crop it, recolor the gradient, or place it over a visually busy background.”

The brand page must work fully in dark and light themes and should use the same global theme toggle.

HOMEPAGE

1. HERO
- Keep the eyebrow “For Christian creators”
- Keep the core positioning “The home for Christian creators.”
- Set “Christian creators” in a restrained blue-purple-cyan gradient
- Keep the supporting copy about creating a page, owning an audience, and earning directly
- Primary CTA: Start free
- Secondary CTA: View an example
- Place a refined product composition on the right: creator page, audience, earnings, and assistant cards
- Put a very large low-opacity Bethlehem Star behind the product composition as an ambient symbol
- The star must not compete with the product UI
- Use subtle motion only: slow glow drift or a gentle 2-4px float
- respect prefers-reduced-motion

2. PRODUCT VALUE
Create four clear product pillars:
- Your page
- Own your audience
- Earn directly
- Grow with Rejoice Assistant

Each pillar should have:
- one simple product visual
- one short heading
- one concise explanation
- no generic icon library where a product screenshot or simple line icon would work better

3. CREATOR DEMO
Turn the Grace Bennett example into a premium dark creator page mockup.
Use:
- profile image placeholder
- latest release
- weekly podcast
- events
- shop
- membership or support
- subtle gradient accent around the active card

4. AUDIENCE AND EARNINGS
Use two alternating feature sections:
- audience ownership and CSV export
- memberships, support, products, and payouts

Use realistic dashboard compositions. Make it immediately obvious that Rejoice is software, not only a marketing site.

5. MADE FOR CHRISTIAN CREATORS
Present creator categories as a tasteful horizontal marquee or flexible tag grid.
Do not make it look playful or childish.
Include musicians, podcasters, writers, speakers, pastors, apologists, lifestyle creators, athletes, churches, and ministries.

6. CREATORS, MANAGERS, AND BRANDS
Use three premium cards with distinct product previews:
- Creators: page, audience, earnings
- Managers: roster and deal pipeline
- Brands: discovery, campaign briefs, approvals, results

Use a shared visual system so it feels like one platform under one Rejoice brand.

7. PRICING
Keep the existing pricing and fees exactly accurate.
Use four dark pricing cards.
Make Pro the recommended plan using a fine gradient border, not a loud full-gradient card.
Clearly retain the payment-processing disclaimer.

8. MISSION
Create a quiet, emotionally strong dark section with the Bethlehem Star.
Keep the statement that a portion of Rejoice’s success supports work advancing the Gospel.
Do not overstate charitable claims.
Use calm language and a direct link to the Mission page.

9. ROADMAP
Keep “Where Rejoice is going next” but reduce its visual priority.
Present future capabilities as compact pills or a simple roadmap line.

10. FINAL CTA
Use “Build something that lasts.”
Use the star, a soft gradient halo, Start free, and one concise sentence.

INNER PAGES

Apply the same visual system to:
- /creators
- /managers
- /brands
- /pricing
- /mission
- legal and contact pages

Each page should:
- have a distinctive hero
- include one strong product UI composition
- retain the same dark surfaces and gradient accents
- use consistent navigation and footer
- avoid looking like a separate microsite

FOOTER

Use a spacious dark footer with:
- Rejoice star and wordmark
- “The home for Christian creators.”
- grouped product and company links
- support@rejoice.global
- mission link
- legal links
- copyright
- a subtle star watermark

COMPONENT SYSTEM

Create reusable components for:
- RejoiceLogo
- RejoiceStar
- GradientButton
- SecondaryButton
- SectionEyebrow
- ProductPanel
- FeatureCard
- PricingCard
- CreatorPreview
- DashboardPreview
- MissionBand

ACCESSIBILITY AND QUALITY

- meet WCAG AA for normal text
- visible keyboard focus
- correct semantic heading order
- descriptive button labels
- no important information conveyed only by color
- gradient text must have a solid-color fallback
- test at 320px, 375px, 768px, 1024px, and 1440px
- prevent horizontal overflow
- prevent the tall star from changing navigation height
- ensure all logo assets remain crisp on retina screens
- use SVG for the star everywhere possible
- use lazy loading for below-the-fold imagery
- avoid layout shift

FINAL QUALITY BAR

The finished site should look like a serious global technology company for the Christian creator economy. It should be unmistakably Rejoice because of the Bethlehem Star and blue-purple-cyan light, while remaining simple, calm, credible, and product-led.
