Brand System v2.0

FrankX Design System

Colors, typography, glassmorphism, spacing, gradients, and component patterns. Build what matters.

Color Palette

Dark-first foundation with six accent colors mapped to product domains.

Foundation

Void

#0a0a0b

Page background

Space

#111113

Section background

Navy

#0F172A

Brand primary dark

Elevated

#1a1a1f

Card backgrounds

Subtle

#252530

Hover states

Muted

#3a3a4a

Disabled states

Accents

Purple

#AB47C7

Intelligence, ACOS

Blue

#43BFE3

Technology, Vibe OS

Magenta

#E040FB

GenCreator OS, Multi-modal

Emerald

#10B981

Success, Labs, CTAs

Obsidian

#1E0A3C

Arcanea, Cosmos

Arcanea Glow

#7C3AED

Arcanea accent

Rose

#F43F5E

Errors, destructive

Brand Gradient

linear-gradient(135deg, #AB47C7, #43BFE3)

Text Hierarchy

Four opacity levels with WCAG contrast ratios on void background.

The quick brown foxPrimaryopacity: 0.95AAA ~18.5:1

The quick brown foxSecondaryopacity: 0.72AAA ~11.2:1

The quick brown foxTertiaryopacity: 0.48AAA ~7.5:1

The quick brown foxMutedopacity: 0.32AA ~5.0:1

Typography

Poppins for display, Inter for body, JetBrains Mono for code, Playfair Display for editorial quotes.

Build what matters.

Poppins72pxw800lh 1.05

Build what matters.

Poppins48pxw700lh 1.15

Build what matters.

Poppins36pxw700lh 1.2

Build what matters.

Poppins28pxw600lh 1.25

Build what matters.

Inter20pxw400lh 1.65

Build what matters.

Inter17pxw400lh 1.7

Build what matters.

Inter13pxw500lh 1.5

<code>Build what matters.</code>

JetBrains Mono14pxw400lh 1.7

Glassmorphism

Four opacity levels. Standard = 0.03. Never exceed 0.08. Blur: 18px.

Ghost

Hover backgrounds

opacity: 0.02

Standard

Default cards

opacity: 0.03

Elevated

Active/focused

opacity: 0.05

Strong

Tooltips, popovers

opacity: 0.08

Spacing Scale

4px base grid. All spacing is a multiple of 4.

tight

4px

compact

8px

default

12px

standard

16px

medium

24px

large

32px

48px

2xl

64px

3xl

80px

Aurora Gradient System

Layered radial gradients with subtle noise texture. Six variants for different content contexts.

Default

Sample Heading

This is how content appears on the default gradient variant.

Default

The signature FrankX aurora gradient. Emerald, cyan, and amber create a balanced, professional look.

Use Case

Hero sections, feature cards, general brand applications

Colors

Emerald-500Cyan-400Amber-500

<AuroraGradient variant="default">

Emerald

Sample Heading

This is how content appears on the emerald gradient variant.

Emerald

Focused green tones for growth, nature, and success themes.

Use Case

Success states, growth metrics, environmental content

Colors

Emerald-500Emerald-400Emerald-400

<AuroraGradient variant="emerald">

Purple

Sample Heading

This is how content appears on the purple gradient variant.

Purple

Creative and spiritual energy with purple and pink tones.

Use Case

Soulbook content, creative sections, spiritual themes

Colors

Purple-600Purple-400Pink-500

<AuroraGradient variant="purple">

Sunset

Sample Heading

This is how content appears on the sunset gradient variant.

Sunset

Warm, energetic gradient for calls-to-action and urgency.

Use Case

CTAs, promotional banners, high-energy sections

Colors

Orange-400Amber-500Red-500

<AuroraGradient variant="sunset">

Ocean

Sample Heading

This is how content appears on the ocean gradient variant.

Ocean

Cool, professional blues for enterprise and calm content.

Use Case

Enterprise pages, professional content, calm interfaces

Colors

Cyan-500Blue-500Indigo-500

<AuroraGradient variant="ocean">

Minimal

Sample Heading

This is how content appears on the minimal gradient variant.

Minimal

Subtle single-color glow for understated elegance.

Use Case

Backgrounds, subtle accents, minimal interfaces

Colors

Emerald-500

<AuroraGradient variant="minimal">

Intensity Levels

Control the gradient opacity with three intensity levels. Use subtle for backgrounds, normal for most UI, and vibrant for emphasis.

Intensity

subtle

Opacity: 50%

intensity="subtle"

Intensity

normal

Opacity: 70%

intensity="normal"

Intensity

vibrant

Opacity: 100%

intensity="vibrant"

Noise Texture

The subtle noise texture adds organic depth. Disable it for a cleaner look.

With Noise

Default behavior - adds organic texture

showNoise={true}

Without Noise

Cleaner, smoother appearance

showNoise={false}

Quick Usage

import AuroraGradient from '@/components/ui/AuroraGradient'

// Basic usage
<AuroraGradient className="rounded-3xl p-8">
  <h2>Your content</h2>
</AuroraGradient>

// With options
<AuroraGradient
  variant="purple"      // default | emerald | purple | sunset | ocean | minimal
  intensity="vibrant"   // subtle | normal | vibrant
  showNoise={true}      // true | false
  as="section"          // div | section | header | article
  className="rounded-xl border border-white/10"
>
  <YourContent />
</AuroraGradient>