kampuscadilari/dev/brief.md

# Kampüs Cadıları Website Design Brief
## Turkish Feminist Organization - Site Rebuild 2025

---

## Project Overview

### Organization
**Kampüs Cadıları** (Campus Witches) is a Turkish feminist organization focused on campus activism, gender equality, and creating safe spaces for women and LGBTQ+ individuals in academic settings. The organization publishes feminist content, translations, and daily feminist news while building community through their platform.

### Project Goals
- Rebuild the organization's web presence with a modern, accessible, and culturally resonant design
- Create a platform that empowers, informs, and mobilizes the feminist community
- Blend bold activism aesthetics with professional credibility and readability
- Support both Turkish and international audiences with multilingual content
- Facilitate content sharing, event coordination, and community building through compelling visual storytelling

### Target Audience
- **Primary**: Turkish university students (18-25) interested in feminism and social justice
- **Secondary**: Activists, academics, and allies engaged in feminist discourse
- **Tertiary**: International audiences seeking Turkish feminist perspectives and translated content

---

## Brand Identity

### Logo & Symbol
The Kampüs Cadıları logo features a stylized witch figure positioned on a female symbol (♀) with a star accent, representing empowerment, magic, and feminist identity. The witch imagery reclaims historical persecution narratives while celebrating women's power.

### Color Palette

#### Primary Brand Colors
**Purple (Pantone 526 C)**
- CMYK: C67 / M98 / Y6 / K0
- RGB: ~84, 25, 139
- Hex: #54198B (approximate)
- Usage: Primary brand color, navigation, CTAs, headers

**Red (Pantone 485 C)**
- CMYK: C5 / M100 / Y100 / K0
- RGB: ~237, 28, 36
- Hex: #ED1C24 (approximate)
- Usage: Accent color, alerts, important CTAs, emphasis elements

#### Extended Palette
Based on existing style system, augmented with brand colors:

**Neutrals**
- Background: `#0a0a0a` (near-black for hero sections)
- Surface: `#ffffff` (white for content areas)
- Text Primary: `#171717` (near-black)
- Text Secondary: `#737373` (gray)
- Border: `#e5e5e5` (light gray)

**Purple Spectrum** (derived from Pantone 526 C)
- Primary: `#54198B`
- Light: `#8B4FB8`
- Lighter: `#B88BD4`
- Lightest: `#E8D4F0`

**Red Spectrum** (derived from Pantone 485 C)
- Primary: `#ED1C24`
- Light: `#F25C61`
- Lighter: `#F89195`

**Functional Colors**
- Success: `#22c55e`
- Warning: `#f59e0b`
- Error: `#ef4444`
- Info: `#3b82f6`

### Typography

#### Font Stack
**Primary**: Inter (body text, UI elements)
- Clean, modern, highly readable
- Excellent multilingual support for Turkish characters (ç, ğ, ı, ö, ş, ü)
- Variable font for performance

**Display**: Oswald (headings, impact statements)
- Bold, condensed aesthetic for activist messaging
- Strong presence for hero sections and key statements
- Use sparingly for maximum impact

**Backup Stack**: system-ui, -apple-system, sans-serif

#### Type Scale
- Hero/H1: 56px / 3.5rem (Oswald, uppercase for impact)
- H2: 40px / 2.5rem (Oswald or Inter Bold)
- H3: 32px / 2rem (Inter Bold)
- H4: 24px / 1.5rem (Inter SemiBold)
- Body Large: 18px / 1.125rem (Inter Regular)
- Body: 16px / 1rem (Inter Regular)
- Body Small: 14px / 0.875rem (Inter Regular)
- Caption: 12px / 0.75rem (Inter Regular)

#### Line Heights
- Headings: 1.2
- Body text: 1.6 (for readability in article content)
- UI elements: 1.5

---

## Current Site Structure & Content DNA

### Navigation Architecture
Based on current site analysis:

**Primary Navigation**
1. **ANASAYFA** (Homepage) - Hero carousel + featured content
2. **CADI YAYINLARI** (Witch Publications) - Original content by the organization
3. **ÇEVİRİ** (Translations) - Translated feminist texts and articles
4. **FEMİNİST GÜNDEM** (Feminist Agenda) - Daily news and commentary
5. **TARIHÇEMIZ** (Our History) - About the organization and its journey

**Utility Navigation**
- Search functionality (icon in header)
- Social media links (Instagram, Facebook, TikTok, YouTube)
- Language toggle (TR/EN consideration for rebuild)

### Content Types

#### Hero Section
- Large, impactful visual storytelling
- Rotating slider with multiple featured stories
- Dark background with high contrast text
- "KISA Bİ HİKAYE" (Short Story) as content marker
- Writer attribution with photo
- Strong CTA ("Read more")

#### Article Cards
Current format to maintain:
- Article title
- Category tag (color-coded by content type)
- Author name ("By Kampüs Cadıları")
- Publication date
- Excerpt/preview text
- "Read More" CTA button (blue in current, to be adapted to purple)

#### Content Categories
- **Kadınlardan Gelenler** (From Women) - Personal stories and testimonials
- **Feminist Gündem** (Feminist Agenda) - News and commentary
- **Çeviri** (Translations) - Translated works
- Custom categories as needed

---

## Design System

### Layout System

#### Grid Structure
12-column grid system with Tailwind CSS spacing:
- Desktop: 1440px max-width container
- Tablet: 768px breakpoint
- Mobile: 375px base, full-width content

#### Spacing Scale
```
xs: 0.25rem / 4px
sm: 0.5rem / 8px
md: 1rem / 16px
lg: 1.5rem / 24px
xl: 2rem / 32px
2xl: 3rem / 48px
3xl: 4rem / 64px
4xl: 6rem / 96px
```

#### Section Spacing
- Section padding: `py-16 md:py-24` (64px mobile, 96px desktop)
- Component spacing: `space-y-8 md:space-y-12`
- Container padding: `px-4 md:px-6 lg:px-8`

### Components

#### Cards
```css
.article-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.article-card:hover {
  box-shadow: 0 10px 40px rgba(84, 25, 139, 0.15);
  transform: translateY(-4px);
}
```

#### Buttons

**Primary CTA** (Purple brand color)
```css
.btn-primary {
  background: #54198B;
  color: white;
  padding: 12px 32px;
  border-radius: 999px; /* pill shape */
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #3D1265;
  transform: scale(1.05);
}
```

**Secondary CTA** (Outlined)
```css
.btn-secondary {
  background: transparent;
  color: #54198B;
  border: 2px solid #54198B;
  padding: 12px 32px;
  border-radius: 999px;
  font-weight: 600;
}

.btn-secondary:hover {
  background: #54198B;
  color: white;
}
```

**Load More** (Purple pill button)
```css
.btn-load-more {
  background: #54198B;
  color: white;
  padding: 14px 40px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}
```

#### Navigation

**Header**
```css
.site-header {
  background: white;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #e5e5e5;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.95);
}

.nav-links {
  display: flex;
  gap: 32px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

.nav-link {
  color: #171717;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #54198B;
}
```

#### Hero Section

**Full-bleed dark hero**
```css
.hero-section {
  background: #0a0a0a;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  color: white;
  text-transform: lowercase; /* matching "kelime kelime feminist bi kelime" */
  line-height: 1.2;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
```

#### Category Tags
```css
.category-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-tag.feminist-gundem {
  background: #ED1C24;
  color: white;
}

.category-tag.ceviri {
  background: #54198B;
  color: white;
}

.category-tag.kadinlardan-gelenler {
  background: #B88BD4;
  color: #3D1265;
}
```

### Animations

#### Fade In
```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}
```

#### Slide In
```css
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.8s ease-out;
}
```

#### Stagger Children
```css
.stagger-children > * {
  opacity: 0;
  animation: slideIn 0.8s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
```

### Visual Effects

#### Shadows
```css
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
--shadow-purple: 0 10px 40px rgba(84, 25, 139, 0.15); /* brand shadow */
```

#### Backdrop Blur
```css
.backdrop-blur {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.95);
}

.backdrop-blur-dark {
  backdrop-filter: blur(12px);
  background: rgba(10,10,10,0.9);
}
```

---

## Page Templates

### Homepage
1. **Sticky Header** - Logo, navigation, search
2. **Hero Carousel** - Full-width rotating featured stories with dark background
3. **Welcome Section** - "KIZKARDEŞİM, SİTEMİZDE SENİ BEKLEYENLER..." (Sister, waiting for you on our site)
4. **Featured Articles Grid** - 3-column card layout
5. **Load More Button** - Purple pill CTA
6. **Footer** - Social links, copyright, contact info

### Article/Blog Template
1. **Header** - Category tag, title, author, date
2. **Featured Image** - Full-width hero
3. **Article Content** - Rich text with proper typography
4. **Share Tools** - Social sharing buttons
5. **Related Articles** - Card grid of similar content
6. **Comments/Discussion** (if applicable)

### Category/Archive Template
1. **Category Hero** - Brief description of category purpose
2. **Filter/Sort Options** - Date, relevance, author
3. **Article Grid** - Masonry or standard grid layout
4. **Pagination** - Load more or numbered pagination

### About/History Page
1. **Hero Section** - Mission statement
2. **Timeline** - Visual history of the organization
3. **Team/Contributors** (if applicable)
4. **Values & Principles** - What Kampüs Cadıları stands for
5. **Get Involved** - CTA for participation

---

## Content Strategy

### Voice & Tone
- **Empowering** - Lift up voices, celebrate strength
- **Direct** - Clear, accessible language avoiding academic jargon where possible
- **Activist** - Unapologetically feminist, calling for action and change
- **Inclusive** - Welcoming to all who support gender equality
- **Authentic** - Genuine stories and perspectives from the community

### Content Pillars
1. **Original Commentary** (Cadı Yayınları) - Organization's voice on current issues
2. **Translation** (Çeviri) - Making global feminist discourse accessible in Turkish
3. **Daily News** (Feminist Gündem) - Curated news with feminist analysis
4. **Community Stories** (Kadınlardan Gelenler) - Personal narratives from the community
5. **Educational Resources** - Guides, explainers, and learning materials

### Multilingual Considerations
- **Primary Language**: Turkish
- **Secondary Language**: English (for select articles and UI)
- Language toggle in header
- Ensure proper Turkish character support (ç, ğ, ı, ö, ş, ü, Ç, Ğ, İ, Ö, Ş, Ü)
- RTL text support not needed (Turkish is LTR)

---

## Accessibility Requirements

### WCAG 2.1 AA Compliance
- Color contrast ratios minimum 4.5:1 for normal text
- All interactive elements keyboard accessible
- Proper heading hierarchy (h1 → h2 → h3, etc.)
- Alt text for all images
- ARIA labels for icon-only buttons
- Focus indicators visible and clear

### Performance
- Core Web Vitals optimization
  - LCP (Largest Contentful Paint) < 2.5s
  - FID (First Input Delay) < 100ms
  - CLS (Cumulative Layout Shift) < 0.1
- Image optimization (WebP, lazy loading)
- Minimal JavaScript for fast page loads
- Progressive enhancement approach

### Responsive Design
- Mobile-first approach
- Breakpoints: 375px (mobile), 768px (tablet), 1024px (desktop), 1440px (wide)
- Touch-friendly targets (minimum 44x44px)
- Readable text at all sizes (minimum 16px body text on mobile)

---

### SEO & Analytics
- Semantic HTML structure
- Open Graph tags for social sharing
- JSON-LD structured data
- Google Analytics or privacy-focused alternative (Plausible)
- Search Console integration
- Sitemap generation

---

## Design Principles

### 1. Bold but Readable
Strike a balance between activist impact and content accessibility. Use dark hero sections for visual drama, but ensure article content is highly readable with excellent typography.

### 2. Color as Meaning
Use the purple/red brand colors strategically:
- Purple for navigation, primary CTAs, and organizational identity
- Red for urgent actions, alerts, and emphasis
- Neutrals for reading comfort and professionalism

### 3. Progressive Enhancement
Build a fast, accessible baseline that works everywhere, then enhance with animations and interactions for capable browsers.

### 4. Content-First
The design should elevate and showcase the powerful stories and analysis the organization produces. Never let design obscure or compete with content.

### 5. Community-Centered
Create spaces for community voices, user-generated content, and participation. The site should feel like a collective project, not a one-way broadcast.

---

## Success Metrics

### Engagement
- Time on page (target: 3+ minutes for articles)
- Pages per session (target: 3+)
- Bounce rate (target: <60%)
- Returning visitor rate (target: 30%+)

### Growth
- Monthly unique visitors
- Social shares per article
- Newsletter signups
- Community contributions (if applicable)

### Performance
- Mobile page load time (target: <3s)
- Desktop page load time (target: <2s)
- Core Web Vitals passing scores
- 95%+ accessibility audit score

---

## Brand Essence

Kampüs Cadıları reclaims the witch as a symbol of feminine power, wisdom, and resistance. The design should embody this spirit: bold, unapologetic, magical, and transformative. The purple witch on the female symbol isn't just a logo—it's a statement of identity, a rallying symbol for feminist activism on Turkish campuses and beyond.

The website should feel like a gathering place, a library of resistance, and a megaphone for change—all while being beautiful, accessible, and technically excellent.

---

**Design Brief Version**: 1.0  
**Last Updated**: December 27, 2025