Skip to content

DESIGN_SYSTEM.md

Latest commit

 

History

History
788 lines (660 loc) · 18.9 KB

DESIGN_SYSTEM.md

File metadata and controls

788 lines (660 loc) · 18.9 KB
Raw

Frontier Forge Design System

A sophisticated design system for the Frontier Forge idea collaboration platform that embodies Collaborative Innovation Elegance - where sophisticated design meets creative community collaboration.

Design Philosophy

Collaborative Innovation Elegance - Our elevated design perspective that combines:

  • Constructive Clarity - Every design element encourages productive discourse and clear communication
  • Community-Focused Hierarchy - Visual systems that surface collective wisdom and democratic participation
  • Iterative Transparency - Design that shows how ideas evolve, improve, and advance through community input
  • Aspirational Accessibility - Professional enough for serious discourse, welcoming enough for contributors of all skill levels
  • Process-Aware Design - Visual language that reflects the journey from idea → discussion → assembly → project

Enhanced Color System

Brand Foundation - Frontier Purple Palette

/* Primary Forge Purple - Core brand identity */
--forge-primary: #6B46C1;        /* Primary actions, branding */
--forge-primary-hover: #5a3aa8;   /* Hover states */
--forge-primary-light: #a78bfa;   /* Subtle accents */

/* Light Mode Application */
--primary: #6B46C1;
--primary-hover: #5a3aa8;  
--primary-foreground: #ffffff;

/* Dark Mode Enhancement */  
--primary: #b19ce8;               /* Enhanced visibility */
--primary-hover: #c4b0f0;
--primary-foreground: #0a0a0d;

Forge-Specific Semantic Colors

Idea Lifecycle States

/* Open Ideas - Blue spectrum for active exploration */
--idea-open: #2563eb;             /* Bright blue for active ideas */
--idea-open-bg: #eff6ff;          /* Light blue backgrounds */
--idea-open-border: #bfdbfe;      /* Borders and dividers */

/* Assembly Review - Amber spectrum for decision states */  
--assembly-amber: #d97706;        /* Assembly deliberation */
--assembly-bg: #fff7ed;           /* Assembly backgrounds */
--assembly-border: #fed7aa;       /* Assembly borders */

/* Projects - Green spectrum for realized ideas */
--project-green: #16a34a;         /* Active projects */
--project-bg: #f0fdf4;            /* Project backgrounds */  
--project-border: #bbf7d0;        /* Project borders */

/* Archived - Gray spectrum for completed/closed */
--archived-gray: #6b7280;         /* Archived state */
--archived-bg: #f9fafb;           /* Archive backgrounds */
--archived-border: #e5e7eb;       /* Archive borders */

Comment Type System

/* Challenge Comments - Red spectrum for questioning/critique */
--comment-challenge: #dc2626;     /* Challenge badge color */
--comment-challenge-bg: #fef2f2;  /* Challenge backgrounds */

/* Refine Comments - Orange spectrum for improvement suggestions */
--comment-refine: #ea580c;        /* Refine badge color */  
--comment-refine-bg: #fff7ed;     /* Refine backgrounds */

/* Resource Comments - Teal spectrum for offers of help */
--comment-resource: #0d9488;      /* Resource badge color */
--comment-resource-bg: #f0fdfa;   /* Resource backgrounds */

/* General Comments - Gray spectrum for standard discussion */
--comment-general: #6b7280;       /* General badge color */
--comment-general-bg: #f9fafb;    /* General backgrounds */

Engagement & Activity States

/* Rising Ideas - Flame gradient for trending content */
--rising-gradient: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
--rising-glow: rgba(245, 158, 11, 0.25);

/* Forged Ideas - Metallic gradient for proven concepts */
--forged-gradient: linear-gradient(135deg, #6b7280 0%, #374151 100%);
--forged-glow: rgba(107, 114, 128, 0.25);

/* Real-time Updates - Success green for live activity */
--live-indicator: #22c55e;
--live-pulse: rgba(34, 197, 94, 0.4);

4-Level Surface Hierarchy - "Elevation of Ideas"

Our sophisticated elevation system creates natural visual depth optimized for idea collaboration:

Light Mode Foundation

--surface-0: #fafaf9;             /* The foundry floor - background level */
--surface-1: #ffffff;             /* Idea cards - elevated for attention */  
--surface-2: #f8fafc;             /* Active discussions - higher engagement */
--surface-3: #e4e4e7;             /* Assembly decisions - highest importance */
--elevated: #ffffff;              /* Modal overlays - maximum elevation */

Dark Mode Enhancement

--surface-0: #12121a;             /* Dark foundry - subtle base */
--surface-1: #1a1a26;             /* Dark cards - clear elevation */
--surface-2: #232334;             /* Active states - visible contrast */  
--surface-3: #2d2d42;             /* Decision states - prominent */
--elevated: #35354d;              /* Dark modals - highest contrast */

Semantic Surface Applications

  • Surface 0: App background, empty states, helper sections
  • Surface 1: Idea cards, form containers, navigation
  • Surface 2: Hover states, active filters, engaged content
  • Surface 3: Selected items, assembly candidates, priority elements
  • Elevated: Modals, dropdowns, tooltips, overlays

Typography Scale - "Hierarchy of Thought"

Font Stack

--forge-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
--forge-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', Consolas, monospace;

Type Scale with Forge-Specific Usage

/* Display Text - 36px */
--forge-text-4xl: 2.25rem;        /* Forge branding, major headers */

/* Page Headers - 30px */  
--forge-text-3xl: 1.875rem;       /* "Frontier Forge", page titles */

/* Section Headers - 24px */
--forge-text-2xl: 1.5rem;         /* "Submit an Idea", "Assembly" */

/* Idea Titles - 20px */
--forge-text-xl: 1.25rem;         /* Individual idea titles */

/* Prominent Text - 18px */
--forge-text-lg: 1.125rem;        /* Idea pitches, important content */

/* Body Text - 16px */
--forge-text-base: 1rem;          /* Standard content, descriptions */

/* Secondary Text - 14px */  
--forge-text-sm: 0.875rem;        /* Meta info, labels, buttons */

/* Meta Text - 12px */
--forge-text-xs: 0.75rem;         /* Timestamps, vote counts, captions */

Typography Hierarchy for Content

/* Idea Cards */
.idea-title: text-xl font-semibold text-foreground
.idea-pitch: text-base text-muted-foreground leading-relaxed
.idea-meta: text-sm text-muted-foreground

/* Navigation */
.nav-brand: text-xl font-bold text-frontier-600
.nav-link: text-sm font-medium text-foreground

/* Forms */
.form-label: text-sm font-medium text-foreground
.form-input: text-sm text-foreground
.form-helper: text-xs text-muted-foreground

Component Specifications

Enhanced Button System

Primary Actions - Forge Purple

.btn-primary {
  background: var(--forge-primary);
  color: var(--primary-foreground);
  padding: 8px 16px;               /* btn-md */
  border-radius: 8px;              /* rounded-lg */
  font-weight: 500;                /* font-medium */
  transition: all 200ms;
  
  &:hover {
    background: var(--forge-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }
  
  &:focus {
    outline: 2px solid var(--forge-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--forge-primary-light);
  }
}

Secondary Actions - Neutral

.btn-secondary {
  background: var(--surface-1);
  color: var(--foreground);
  border: 1px solid var(--border);
  /* Same padding and focus states as primary */
}

Size Variants

.btn-sm { padding: 6px 12px; font-size: 0.875rem; }  /* Small buttons */
.btn-md { padding: 8px 16px; font-size: 0.875rem; }  /* Standard buttons */ 
.btn-lg { padding: 12px 24px; font-size: 1rem; }     /* Large buttons */

Forge-Specific Card System

Standard Idea Card

.idea-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;             /* rounded-xl */
  padding: 24px;                   /* p-6 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transition: all 200ms;
  
  &:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }
}

Featured Assembly Card

.idea-card-featured {
  background: linear-gradient(135deg, var(--surface-1) 0%, var(--assembly-bg) 100%);
  border: 2px solid var(--assembly-amber);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  position: relative;
  
  &::before {
    content: "Assembly Candidate";
    position: absolute;
    top: -8px;
    left: 16px;
    background: var(--assembly-amber);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
  }
}

Project Card

.project-card {
  background: linear-gradient(135deg, var(--surface-1) 0%, var(--project-bg) 100%);
  border-left: 4px solid var(--project-green);
  
  .project-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--project-green);
    font-weight: 600;
  }
}

Interactive Elements

Vote Button - Forge Hammer Metaphor

.vote-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  min-width: 60px;
  transition: all 200ms;
  cursor: pointer;
  
  /* Default State */
  background: var(--surface-2);
  color: var(--muted-foreground);
  border: 2px solid transparent;
  
  /* Voted State */
  &.voted {
    background: var(--forge-primary-light);
    color: var(--forge-primary);
    border-color: var(--forge-primary);
    transform: scale(1.05);
  }
  
  /* Hover States */
  &:hover {
    background: var(--surface-3);
    color: var(--forge-primary);
    transform: translateY(-1px);
  }
  
  &.voted:hover {
    background: var(--forge-primary);
    color: white;
  }
  
  /* Focus State */
  &:focus {
    outline: 2px solid var(--forge-primary);
    outline-offset: 2px;
  }
}

.vote-icon {
  width: 20px;
  height: 20px;
  transition: transform 200ms;
}

.vote-count {
  font-weight: 700;
  font-size: 0.875rem;
  margin-top: 4px;
}

Comment Type Badges

.comment-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comment-badge-challenge {
  background: var(--comment-challenge-bg);
  color: var(--comment-challenge);
}

.comment-badge-refine {
  background: var(--comment-refine-bg);  
  color: var(--comment-refine);
}

.comment-badge-resource {
  background: var(--comment-resource-bg);
  color: var(--comment-resource);
}

.comment-badge-general {
  background: var(--comment-general-bg);
  color: var(--comment-general);
}

Status Indicators

Idea Lifecycle Indicators

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-open {
  background: var(--idea-open-bg);
  color: var(--idea-open);
}

.status-assembly {
  background: var(--assembly-bg);
  color: var(--assembly-amber);
}

.status-project {
  background: var(--project-bg);
  color: var(--project-green);
}

.status-archived {
  background: var(--archived-bg);
  color: var(--archived-gray);
}

Real-time Activity Indicator

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--live-indicator);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Form Elements

Enhanced Input System

.form-input {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--foreground);
  font-size: 0.875rem;
  transition: all 200ms;
  
  &::placeholder {
    color: var(--muted-foreground);
  }
  
  &:focus {
    border-color: var(--forge-primary);
    outline: none;
    box-shadow: 
      0 0 0 2px var(--forge-primary-light),
      0 1px 3px 0 rgb(0 0 0 / 0.1);
  }
  
  &.error {
    border-color: var(--comment-challenge);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
  }
}

.form-textarea {
  @extend .form-input;
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  
  &.required::after {
    content: " *";
    color: var(--comment-challenge);
  }
}

.form-helper {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.form-error {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--comment-challenge);
}

Spacing System - Forge Grid

Base 4px Grid with Forge Semantics

/* Tight spacing for compact elements */
--forge-space-1: 0.25rem;         /* 4px - Icon gaps, tight padding */
--forge-space-2: 0.5rem;          /* 8px - Button padding, small gaps */
--forge-space-3: 0.75rem;         /* 12px - Form element spacing */
--forge-space-4: 1rem;            /* 16px - Standard element spacing */

/* Moderate spacing for content organization */  
--forge-space-6: 1.5rem;          /* 24px - Card padding, section spacing */
--forge-space-8: 2rem;            /* 32px - Large element spacing */
--forge-space-10: 2.5rem;         /* 40px - Section separation */
--forge-space-12: 3rem;           /* 48px - Major layout spacing */

/* Generous spacing for visual hierarchy */
--forge-space-16: 4rem;           /* 64px - Page section separation */  
--forge-space-20: 5rem;           /* 80px - Major page divisions */
--forge-space-24: 6rem;           /* 96px - Hero sections */

Layout Application

/* Idea Card Spacing */
.idea-grid { gap: var(--forge-space-4); }
.idea-card { padding: var(--forge-space-6); }
.idea-meta { gap: var(--forge-space-3); }

/* Form Spacing */
.form-field { margin-bottom: var(--forge-space-6); }
.form-actions { gap: var(--forge-space-4); }

/* Navigation Spacing */
.nav-items { gap: var(--forge-space-2); }
.nav-container { padding: 0 var(--forge-space-8); }

Microinteractions & Animation

Forge-Specific Interactions

Vote Animation - Satisfying Feedback

@keyframes vote-success {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.05); }
}

.vote-button.animate-vote {
  animation: vote-success 300ms ease-out;
}

Card Hover - Subtle Elevation

.idea-card {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}

Real-time Update Pulse

.new-content-indicator {
  animation: content-pulse 1s ease-in-out 3;
}

@keyframes content-pulse {
  0%, 100% { background-color: var(--surface-1); }
  50% { background-color: var(--forge-primary-light); }
}

Status Transition - Lifecycle Progress

.status-transition {
  position: relative;
  overflow: hidden;
}

.status-transition::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--forge-primary-light) 50%, 
    transparent 100%);
  animation: status-shine 1s ease-in-out;
}

@keyframes status-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

Responsive Design Patterns

Touch-First Mobile Approach

/* Minimum Touch Targets - 44px */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

/* Vote Button Mobile */
@media (max-width: 640px) {
  .vote-button {
    min-width: 50px;
    padding: 14px;
  }
  
  .vote-icon {
    width: 24px;
    height: 24px;
  }
}

/* Card Layout Mobile */
@media (max-width: 640px) {
  .idea-card {
    padding: 16px;
    margin: 0 -4px; /* Slight bleed for better touch */
  }
  
  .idea-meta {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
}

/* Form Elements Mobile */
@media (max-width: 640px) {
  .form-input, .form-textarea {
    padding: 14px;
    font-size: 1rem; /* Prevent zoom on iOS */
  }
  
  .btn-primary {
    width: 100%;
    padding: 14px 24px;
  }
}

Navigation Responsive Patterns

/* Desktop Navigation */
.nav-desktop {
  display: flex;
  gap: var(--forge-space-2);
}

/* Mobile Navigation */  
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  
  .nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-1);
    border-top: 1px solid var(--border);
    padding: 12px;
    display: flex;
    justify-content: space-around;
  }
  
  .nav-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    min-width: 44px;
  }
}

Accessibility & Inclusive Design

Community-First Accessibility

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --border-strong: #000000;
    --forge-primary: #4a0e8a;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus Visible Enhancement */  
.focus-visible {
  outline: 2px solid var(--forge-primary);
  outline-offset: 2px;
}

/* Screen Reader Support */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard Navigation Enhancement */
.keyboard-nav {
  --focus-ring: 0 0 0 2px var(--forge-primary);
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  box-shadow: var(--focus-ring);
}

Implementation Guidelines

CSS Class Naming Convention

/* Component-based naming */
.idea-card { /* Component */ }
.idea-card__title { /* Element */ }  
.idea-card--featured { /* Modifier */ }

/* Utility classes */
.bg-surface-1 { background-color: var(--surface-1); }
.text-forge-primary { color: var(--forge-primary); }
.rounded-forge { border-radius: 12px; }

Svelte Component Integration

<!-- IdeaCard.svelte -->
<div class="idea-card" class:idea-card--featured={featured}>
  <VoteButton {ideaId} {voteCount} />
  <div class="idea-card__content">
    <h3 class="idea-card__title">{title}</h3>
    <p class="idea-card__pitch">{pitch}</p>
  </div>
</div>

Dark Mode Implementation

/* Automatic dark mode via media query */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #12121a;
    --surface-1: #1a1a26;
    /* ... other dark mode values ... */
  }
}

/* Manual dark mode toggle (future enhancement) */
[data-theme="dark"] {
  --surface-0: #12121a;
  --surface-1: #1a1a26;  
  /* ... manual dark theme values ... */
}

This design system ensures that Frontier Forge maintains visual consistency while expressing its unique identity as a collaborative innovation platform. Every element serves the goal of turning ideas into reality through community engagement and democratic decision-making.