Section Background Variations

Section Default

Subtle gradient with teal accents. Perfect for main content areas.

Section Primary

Colorful gradient from purple to blue to teal to green. Eye-catching for hero sections.

Section Secondary

Dark solid background. Great for contrast and secondary content.

Section Muted

Dark blue-gray background. Subtle and professional for supporting content.

Card Background Variations

Card Default

Semi-transparent white overlay. Subtle and clean for content cards.

Card Primary

Same colorful gradient as section-primary. Bold and attention-grabbing.

Card Secondary

Dark solid background. Consistent with section-secondary styling.

Card Hover

Hover this card to see the effect! Lighter overlay on interaction.

Color Palette

#1a1a1a
Main body background

#2a2a2a
Header & content display

#333
Level tabs & dropdowns

#444
Button backgrounds

#141414
Secondary sections

#1A2736
Muted sections

Typography & Font System

Current Typography Hierarchy - Titillium Web

Active Font: Titillium Web with a complete weight hierarchy from Black (900) to Extra Light (200).

Body Font Size: 0.8rem (base size for inheritance)

H1 - 2.0rem, Black (900)

H2 - 1.7rem, Bold (700)

H3 - 1.4rem, Semi Bold (600)

H4 - 1.2rem, Regular (400)

H5 - 1.0rem, Light (300)

H6 - 0.9rem, Extra Light (200)

• h1: 2.0rem, font-weight: 900 (Black)
• h2: 1.7rem, font-weight: 700 (Bold)
• h3: 1.4rem, font-weight: 600 (Semi Bold)
• h4: 1.2rem, font-weight: 400 (Regular)
• h5: 1.0rem, font-weight: 300 (Light)
• h6: 0.9rem, font-weight: 200 (Extra Light)
• body: 0.8rem, font-weight: 400 (Regular)

Current System Font

Titillium Web (Google Fonts)

Titillium Web is a modern sans-serif typeface designed for optimal readability on screens. It offers a complete range of weights from Extra Light (200) to Black (900), providing excellent typographic hierarchy.

Font: 'Titillium Web', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif

Google Fonts Examples

Here are some popular Google Fonts that work well for web applications. To use any of these, add the Google Fonts link to your HTML and update the CSS font-family.

Titillium Web - Currently Active ✨

Titillium Web is now your active font! This modern sans-serif offers excellent readability and a complete weight range from Extra Light (200) to Black (900). Perfect for creating clear typographic hierarchy.

Font: 'Titillium Web', sans-serif | Great for: Modern apps, clean UI, excellent weight variety

Inter - Modern & Clean

Inter is a typeface carefully crafted & designed for computer screens. It's highly readable and works great for UI text.

Font: 'Inter', sans-serif | Great for: UI, body text, modern apps

Source Sans 3 - Professional

Source Sans is Adobe's first open source typeface family. It's clean, professional, and highly legible.

Font: 'Source Sans 3', sans-serif | Great for: Professional apps, documentation

Playfair Display - Elegant

Playfair Display is a transitional design with high contrast and distinctive details. Perfect for headings and elegant applications.

Font: 'Playfair Display', serif | Great for: Headings, elegant designs, editorial

JetBrains Mono - Code

          function updateFontSize() {
            document.body.style.fontSize = '1rem';
            console.log('All fonts now 1rem for learning!');
          }
        

Font: 'JetBrains Mono', monospace | Great for: Code, technical content

How to Change Fonts

1. Add Google Fonts to HTML:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

2. Update CSS font-family:

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

3. Or use CSS variables:

:root {
  --font-primary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--font-primary); }

Font Size Scale (rem units)

Here's a typical font size scale using rem units:

75rem (12px) - Small text, captions
875rem (14px) - Secondary text
1rem (16px) - Body text (base size)
125rem (18px) - Large body text
25rem (20px) - Small headings
5rem (24px) - Medium headings
2rem (32px) - Large headings
5rem (40px) - Hero text

Modern Component System

Header Component (.wn-header):

Fixed positioning with backdrop-filter blur
Grid layout: scenario-selector | logo | auth-area
Z-index: 1000, positioned below main menu
Responsive padding: 45px on desktop, adjusts for mobile

Main Menu Component (.wn-main-menu):

Collapsible drawer from top of screen
Animated hamburger icon with smooth transitions
Z-index: 1100, positioned above header
Backdrop-filter blur for premium appearance

Dashboard System (.dashboard-*):

.dashboard-container - Full viewport container
.dashboard-grid - Auto-fit grid (350px min columns)
.dashboard-card - Glassmorphism cards with hover effects
.dashboard-modal - Full-screen modal overlay system

Navigation Tab System (.wn-nav-tab):

Color-coded content types (red, orange, yellow, blue, etc.)
28px × 28px fixed size with responsive behavior
Active states with matching border colors
Hover effects with smooth transitions

Feedback System (.feedback-, .center-feedback-):

Center button integration for compass feedback
Animated perspective wheels and visual indicators
Glassmorphism cards with gradient backgrounds
Responsive stats display with pulse animations

DNA Segment Display System

Core System (.dna-segment-display):

Unified archetype display system across all locations
Avatar overlay with dynamic DNA bars background
CSS custom properties for location-specific sizing
Consistent shadow and hover effects

Location-Specific Classes:

.dna-segment-display.compass - Main navigation (300x225px)
.dna-segment-display.feedbackEditor - Horizontal layout (400x225px)
.dna-segment-display.summaryModal - Large display (400x300px)
.dna-segment-display.dashboardTab1 - Compact (200x150px)
.dna-segment-display.dashboardTab2 - Medium (250x190px)
.dna-segment-display.archetypeDisplay - Gallery (350x260px)

CSS Variables for DNA Segments:

--dna-container-width: Responsive container width
--dna-container-height: Responsive container height
--dna-avatar-width: Avatar image sizing
--dna-bars-height: Background DNA bars height
--dna-avatar-shadow-default: Multi-layered drop shadows
--dna-avatar-shadow-hover: Enhanced hover shadows

Usage Examples:

<div class="dna-segment-display compass">...</div>

<div class="dna-segment-display feedbackEditor">...</div>

<div class="dna-segment-display summaryModal">...</div>

Animation & Interaction System

Progress Animations:

@keyframes rotateDots - Rotating progress indicators
@keyframes progressGlow - Glowing progress effects
@keyframes completedPulse - Completed state pulsing
@keyframes currentBounce - Current item bounce animation

Feedback Animations:

@keyframes fadeInCenter - Center button content fade-in
@keyframes bounce - Icon bounce effects
@keyframes shimmer - Feedback card shimmer effect
@keyframes rotate - Perspective wheel rotation

Layout Animations:

@keyframes fadeIn - General fade-in animation
@keyframes slideInUp - Modal slide-in from bottom
@keyframes levelIndicatorFade - Level indicator pulsing
@keyframes pulse - General pulse animation

Transition Standards:

Standard transition: all 0.3s ease
Fast transition: all 0.2s ease
Slow transition: all 0.4s ease
Cubic-bezier transitions for complex animations

Hover Effects:

transform: translateY(-2px) - Subtle lift effect
transform: scale(1.05) - Gentle scale increase
backdrop-filter: blur(10px) - Glassmorphism enhancement
box-shadow transitions for depth changes

Responsive Design Patterns

Breakpoint System:

Mobile: max-width: 768px
Tablet: min-width: 769px and max-width: 1024px
Desktop: min-width: 1025px
Large Desktop: min-width: 1200px

Mobile-Specific Overrides:

Header padding adjustments for mobile viewports
Navigation tab system with mobile-first approach
Summary overlay responsive positioning
DNA segment display scaling for smaller screens

iPad-Specific Fixes:

@supports (-webkit-touch-callout: none) detection
Landscape orientation padding adjustments
min-width: 769px and max-width: 1024px targeting
Reduced header padding: 90px for iPad landscape

Grid System Patterns:

repeat(auto-fit, minmax(300px, 1fr)) - Dashboard cards
repeat(auto-fit, minmax(350px, 1fr)) - Content grid
1fr auto 1fr - Header three-column layout
Flexbox with flex-wrap for adaptive layouts

Mobile Performance Optimizations:

Backdrop-filter optimization for mobile devices
Transform3d for hardware acceleration
Will-change property for smooth animations
Reduced motion preferences support

Content Type Navigation Tabs

Tab Color System:

Red - Primary Content (.wn-nav-tab[data-type="content"])

Orange - Text Content (.wn-nav-tab[data-type="text"])

Yellow - HTML/Code (.wn-nav-tab[data-type="html"])

Light Blue - Video Content (.wn-nav-tab[data-type="video"])

Cyan - Audio Content (.wn-nav-tab[data-type="audio"])

Purple - 3D Content (.wn-nav-tab[data-type="3d"])

Pink - Media Content (.wn-nav-tab[data-type="media"])

Tab Specifications:

Fixed size: 28px × 28px on all devices
Background: #343a40 (inactive state)
Border: 1px solid #23272b (inactive state)
Active state: border-color matches content type
Hover state: 50% opacity of active color

Details Card Integration:

.details-card[data-content-type="content"] - Red top border
.details-card[data-content-type="text"] - Orange top border
.details-card[data-content-type="html"] - Yellow top border
Border colors match corresponding tab colors

Usage Pattern:

<div class="wn-nav-tab" data-type="content"></div>
<div class="details-card" data-content-type="content"></div>

Feedback & Interaction System

Center Button Feedback (.center-feedback-*):

.center-feedback-content - Full-height flex container
.center-feedback-icon - 3rem icon with bounce animation
.center-feedback-title - 1.2rem title with text shadow
.center-feedback-message - Scrollable message area

Feedback Card System (.feedback-*):

.feedback-showcase - Fixed overlay modal system
.feedback-card - Glassmorphism card with gradient border
.feedback-visual - Perspective wheel container
.feedback-stats - Horizontal stats display

Perspective Wheel (.perspective-wheel):

80px × 80px rotating circular indicator
.wheel-segment.support - Green gradient (0deg)
.wheel-segment.concern - Yellow gradient (90deg)
.wheel-segment.balanced - Blue gradient (180deg)
.wheel-segment.thoughtful - Purple gradient (270deg)

Insights Bar (.feedback-insights-bar):

Fixed bottom position with slide-up animation
Backdrop-filter blur with gradient background
Blue border-top with box-shadow
Cubic-bezier transitions for smooth reveal

Feedback Color Palette:

Support - Green (#4CAF50)

Concern - Yellow (#F7B801)

Balanced - Blue (#4361EE)

Thoughtful - Purple (#9C27B0)

Usage Examples:

<div class="center-feedback-content">...</div>
<div class="feedback-insights-bar show">...</div>
<div class="perspective-wheel">...</div>

Layout Helper Classes

Available Layout Classes:

.container - Max-width container with responsive padding
.text-center - Center-aligned text
.flex-center - Flexbox center alignment (both axes)
.flex-middle - Flexbox space-between with center alignment
.margin - Standard margin (15px)
.margin-medium-bottom - Medium bottom margin (30px)
.margin-large-top - Large top margin (50px)

CSS Custom Properties

Core Theme Variables:

--wn-background: #020F1F
--wn-card-bg: #151F30
--wn-primary: #4361EE
--wn-success: #4CAF50
--wn-warning: #F7B801
--wn-danger: #F72585
--wn-text: #ffffff
--wn-text-muted: rgba(255, 255, 255, 0.7)

Gradient Variables:

--wn-primary-gradient: linear-gradient(40deg, #4730ce 0%, #1B65BD 45%, #11ACD4 70%, #35e9c5 100%)
--section-primary-gradient: linear-gradient(40deg, #4730ce 0%, #1B65BD 40%, #11ACD4 70%, #35e9c5 100%)
--card-primary-gradient: linear-gradient(30deg, #4730ce 0%, #1B65BD 40%, #11ACD4 70%, #35e9c5 100%)
--section-default-gradient: radial-gradient(ellipse closest-corner at 30% 40%, rgba(20, 254, 190, 0.03), transparent 80%)

Character-Specific Colors:

--character-sun-primary: #FFC107
--character-sun-secondary: #FF9800
--character-sun-glow: rgba(255, 193, 7, 0.4)
--character-flower-primary: #E91E63
--character-flower-secondary: #9C27B0
--character-lilremy-primary: #2196F3
--character-burningbush-primary: #FF5722

Component Variables:

--section-muted-bg: #1A2736
--section-secondary-bg: #141414
--card-default-bg: rgba(255, 255, 255, 0.04)
--card-hover-bg: rgba(255, 255, 255, 0.04)
--teaser-height: 300px
--speech-bubble-bg: rgba(26, 26, 26, 0.95)
--celebration-bg: rgba(255, 215, 0, 0.2)

Section Background Variations

Section Default

Section Primary

Section Secondary

Section Muted

Card Background Variations

Card Default

Card Primary

Card Secondary

Card Hover

Color Palette

Typography & Font System

Current Typography Hierarchy - Titillium Web

H1 - 2.0rem, Black (900)

H2 - 1.7rem, Bold (700)

H3 - 1.4rem, Semi Bold (600)

H4 - 1.2rem, Regular (400)

H5 - 1.0rem, Light (300)

H6 - 0.9rem, Extra Light (200)

Current System Font

Google Fonts Examples

How to Change Fonts

1. Add Google Fonts to HTML:

2. Update CSS font-family:

3. Or use CSS variables:

Font Size Scale (rem units)

Modern Component System

Header Component (.wn-header):

Main Menu Component (.wn-main-menu):

Dashboard System (.dashboard-*):

Navigation Tab System (.wn-nav-tab):

Feedback System (.feedback-*, .center-feedback-*):

DNA Segment Display System

Core System (.dna-segment-display):

Location-Specific Classes:

CSS Variables for DNA Segments:

Usage Examples:

Animation & Interaction System

Progress Animations:

Feedback Animations:

Layout Animations:

Transition Standards:

Hover Effects:

Responsive Design Patterns

Breakpoint System:

Mobile-Specific Overrides:

iPad-Specific Fixes:

Grid System Patterns:

Mobile Performance Optimizations:

Content Type Navigation Tabs

Tab Color System:

Tab Specifications:

Details Card Integration:

Usage Pattern:

Feedback & Interaction System

Center Button Feedback (.center-feedback-*):

Feedback Card System (.feedback-*):

Perspective Wheel (.perspective-wheel):

Insights Bar (.feedback-insights-bar):

Feedback Color Palette:

Usage Examples:

Layout Helper Classes

Available Layout Classes:

CSS Custom Properties

Core Theme Variables:

Gradient Variables:

Character-Specific Colors:

Component Variables:

Feedback System (.feedback-, .center-feedback-):