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

.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)

.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)

.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)

.btn-load-more {
  background: #54198B;
  color: white;
  padding: 14px 40px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}

Navigation

Header

.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

.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

.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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

Slide In

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

Stagger Children

.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

--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

.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