Skip to content

Latest commit

 

History

History
351 lines (277 loc) · 8.19 KB

design-system.md

File metadata and controls

351 lines (277 loc) · 8.19 KB

SOSA Design System

This document outlines the comprehensive design system for the Society of Societal Architects, based on Network State design aesthetics and modern web design principles.

🎨 Design Philosophy

The SOSA design system embodies the concept of "Cosmic Minimalism" - combining the vastness of interconnected global networks with clean, focused interfaces that prioritize clarity and trust.

🌑 Color Palette

Primary Colors

:root {
  --bg-dark: #0A0A0A;        /* Deep space background */
  --text-primary: #FFFFFF;    /* High contrast white text */
  --text-secondary: #B3B3B3;  /* Muted gray for secondary content */
  --accent: #00D4FF;         /* Neon cyan for CTAs and highlights */
}

Extended Palette

:root {
  /* Backgrounds */
  --card-bg: rgba(255, 255, 255, 0.05);    /* Subtle glass morphism */
  --input-bg: rgba(255, 255, 255, 0.08);   /* Form field backgrounds */
  
  /* Borders */
  --border: rgba(255, 255, 255, 0.1);      /* Subtle borders */
  --border-hover: rgba(0, 212, 255, 0.5);  /* Accent borders on hover */
  
  /* States */
  --error: #FF5555;    /* Error states */
  --success: #00FF88;  /* Success confirmations */
  --warning: #FFB800;  /* Warning messages */
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
  --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, transparent 100%);
}

Design Rationale

  • Dark dominance (#0A0A0A): Creates sophisticated, tech-forward aesthetic
  • High contrast: Ensures readability and accessibility
  • Strategic accent usage: Draws attention without overwhelming
  • Cosmic themes: Represents interconnected global systems

📐 Typography

Font Family

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Type Scale

/* Headings */
--h1-size: clamp(2.5rem, 8vw, 5rem);      /* Hero headlines */
--h2-size: clamp(2rem, 5vw, 3rem);        /* Section headers */
--h3-size: clamp(1.5rem, 3vw, 2rem);      /* Subsections */

/* Body Text */
--body-large: 1.25rem;   /* Lead paragraphs */
--body-regular: 1rem;    /* Standard content */
--body-small: 0.875rem;  /* Supporting text */

/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;

Typography Guidelines

  1. Dramatic hierarchy: Use extreme size differences between heading levels
  2. Letter spacing: Tight tracking on headlines (-0.02em to -0.03em)
  3. Line height: Generous spacing for body text (1.6 - 1.8)
  4. Weight contrast: Bold headlines, regular body text

🎯 Visual Elements

Network Visualization

The signature element is an interactive globe representing the decentralized network:

// Globe Configuration
const globeConfig = {
  backgroundColor: 'transparent',
  globeColor: '#1a1a2e',
  atmosphereColor: '#00D4FF',
  atmosphereAltitude: 0.15,
  nodeColor: '#00D4FF',
  arcColor: ['#00D4FF', '#0099CC'],
  arcDashLength: 0.4,
  arcDashGap: 0.2,
  arcDashAnimateTime: 2000,
  nodeOpacity: 0.8,
  arcOpacity: 0.3
};

Glass Morphism Cards

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

.glass-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.1);
}

Abstract Patterns

  • Particle networks: Floating dots connected by subtle lines
  • Grid overlays: Faint geometric patterns suggesting structure
  • Gradient meshes: Smooth color transitions for depth
  • Data streams: Animated dashes representing information flow

📱 Responsive Design

Breakpoints

/* Mobile First Approach */
--mobile: 0px;        /* Base styles */
--tablet: 768px;      /* Tablet portrait */
--desktop: 1024px;    /* Desktop/laptop */
--wide: 1440px;       /* Wide screens */

Spacing System

/* 8-point grid system */
--space-xs: 0.5rem;   /* 8px */
--space-sm: 1rem;     /* 16px */
--space-md: 1.5rem;   /* 24px */
--space-lg: 2rem;     /* 32px */
--space-xl: 3rem;     /* 48px */
--space-2xl: 4rem;    /* 64px */
--space-3xl: 6rem;    /* 96px */

🎭 Animation Guidelines

Timing Functions

/* Smooth, natural easing */
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

/* Spring animations */
--spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

Animation Durations

--duration-fast: 150ms;     /* Micro-interactions */
--duration-normal: 300ms;   /* Standard transitions */
--duration-slow: 500ms;     /* Complex animations */
--duration-globe: 2000ms;   /* Globe rotation cycle */

Performance Considerations

  1. Use transform and opacity for animations
  2. Enable GPU acceleration with will-change
  3. Implement prefers-reduced-motion media queries
  4. Lazy-load heavy visualizations

🔲 Component Patterns

Buttons

.cta-button {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: var(--accent);
  color: var(--bg-dark);
  border-radius: 8px;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.cta-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.cta-button:active::after {
  width: 300px;
  height: 300px;
}

Form Fields

.form-input {
  width: 100%;
  padding: 0.875rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

🌐 Accessibility

Color Contrast

  • Primary text on dark background: 15.5:1 (AAA)
  • Secondary text on dark background: 9.7:1 (AAA)
  • Accent on dark background: 10.8:1 (AAA)

Focus States

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

Screen Reader Support

  • Semantic HTML structure
  • ARIA labels for interactive elements
  • Skip navigation links
  • Descriptive alt text for visualizations

📏 Layout Principles

Grid System

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Section Spacing

.section {
  padding: var(--space-3xl) 5%;
  position: relative;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 5%;
  }
}

🎨 Visual Hierarchy

  1. Z-index scale:

    --z-background: -1;
--z-default: 0;
--z-elevated: 10;
--z-sticky: 100;
--z-modal: 1000;

  2. Shadow system:

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 30px rgba(0, 212, 255, 0.2);
--shadow-xl: 0 20px 40px rgba(0, 212, 255, 0.3);

🚀 Implementation Tips

  1. Performance first: Optimize for fast loading and smooth interactions
  2. Progressive enhancement: Core functionality works without JavaScript
  3. Mobile-first: Design for small screens, enhance for larger ones
  4. Consistent spacing: Use the 8-point grid system throughout
  5. Meaningful animations: Every animation should have a purpose
  6. Accessibility always: Never sacrifice usability for aesthetics

📋 Design Checklist

  • Dark background with high contrast text
  • Accent color used sparingly for CTAs
  • Globe or network visualization present
  • Glass morphism effects on cards
  • Generous white space between sections
  • Clear typographic hierarchy
  • Smooth, purposeful animations
  • Mobile-responsive layout
  • Accessibility standards met
  • Performance optimized