Documentation

🎨 Design System

Our design system is built on classical architectural principles, incorporating sacred geometry and the golden ratio to create visually harmonious interfaces.

Color Palette

Typography

Golden Ratio System

All spacing, sizing, and layout divisions follow the golden ratio φ = 1.618033988749895:

Base unit: 8px
Scale: 8, 13, 21, 34, 55, 89, 144, 233px (Fibonacci sequence)

Container max-width: 1200px
Section padding: 89px vertical
Card gap: 34px
Border radius: 13px (small), 21px (medium), 34px (large)

⚙️ Physics Engine

Our custom physics engine simulates real-world forces including gravity, momentum, friction, and elastic collisions to create natural-feeling animations.

Core Parameters

Usage Example

// Initialize the physics engine
const canvas = document.getElementById('physics-canvas');
const physics = new PhysicsEngine(canvas);

// Add custom shape
physics.shapes.push({
    x: 400,
    y: 100,
    vx: 2,
    vy: 0,
    size: 50,
    type: 'hexagon',
    color: '#722f37',
    rotation: 0,
    rotationSpeed: 0.05,
    mass: 1.5
});

// Add pendulum
physics.pendulums.push({
    x: 300,
    y: 0,
    length: 150,
    angle: Math.PI / 4,
    angularVelocity: 0,
    damping: 0.998,
    bobSize: 20
});

✦ Sacred Geometry Reference

Sacred geometry has been used in architectural design for millennia. Our implementation draws from these timeless patterns.

Available Patterns

• Flower of Life — 7 overlapping circles creating a hexagonal pattern
• Seed of Life — 6 overlapping circles, foundation of Flower of Life
• Vesica Piscis — Two-circle intersection creating a lens
• Metatron's Cube — 13 circles with connecting lines
• Sacred Spiral — Fibonacci spiral based on golden ratio

Implementation

// Draw a golden spiral
function drawGoldenSpiral(ctx, cx, cy, size) {
    ctx.save();
    ctx.strokeStyle = '#c9a962';
    ctx.lineWidth = 2;
    ctx.globalAlpha = 0.3;
    
    const phi = 1.618033988749895;
    ctx.beginPath();
    
    for (let i = 0; i < 360; i += 5) {
        const angle = (i * Math.PI) / 180;
        const r = Math.pow(phi, angle / (Math.PI / 2)) * 2;
        const x = cx + Math.cos(angle) * r;
        const y = cy + Math.sin(angle) * r;
        
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
    }
    
    ctx.stroke();
    ctx.restore();
}

📦 Component Library

Reusable UI components built with accessibility and customization in mind.

Card Component

<div class="card">
    <div class="card-icon">◆</div>
    <h3>Card Title</h3>
    <p>Card description text...</p>
    <ul class="feature-list">
        <li>Feature one</li>
        <li>Feature two</li>
    </ul>
</div>

Button Variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-gold">Gold</button>

Form Elements

<div class="form-group">
    <label for="field">Label Text</label>
    <input type="text" id="field" name="field" placeholder="Placeholder">
</div>

🎬 Animation Utilities

Helper classes and functions for creating smooth, physics-inspired animations.

Fade-in Animations

<!-- Add to any element for fade-in effect -->
<div class="fade-in">Content</div>

<!-- Staggered delays for lists -->
<div class="fade-in stagger-1">First</div>
<div class="fade-in stagger-2">Second</div>
<div class="fade-in stagger-3">Third</div>

Keyframe Animations

/* Floating effect */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Pendulum motion */
@keyframes pendulum {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(30deg); }
}

/* Chain fall */
@keyframes chain-fall {
    0% { transform: translateY(-100px); opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateY(300px); opacity: 0; }
}

🌐 Browser Support

ACN Agency designs support all modern browsers:

• Chrome — 90+
• Firefox — 88+
• Safari — 14+
• Edge — 90+

Canvas-based physics requires hardware acceleration. On older devices, animations gracefully degrade.

📝 Changelog

Version 2.4.0 — March 2024

• Added chain physics simulation
• Improved pendulum realism with proper damping
• New "Sacred Geometry" pattern library
• Performance optimizations for mobile

Version 2.3.0 — January 2024

• Complete design system overhaul
• Added burgundy/gold/cream palette
• Playfair Display + Source Sans Pro typography