generated from Nicholai/astro-template
established design brief
This commit is contained in:
parent
3c0f1d6a66
commit
de410bbe04
BIN
dev/brand-identity.png
Normal file
BIN
dev/brand-identity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
559
dev/brief.md
Normal file
559
dev/brief.md
Normal file
@ -0,0 +1,559 @@
|
|||||||
|
# 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
|
||||||
237
dev/visual-design-analysis.md
Normal file
237
dev/visual-design-analysis.md
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
### Font Families
|
||||||
|
|
||||||
|
#### Primary Fonts
|
||||||
|
- **Inter** - Body text, primary sans-serif (weights: 300, 400, 500, 600)
|
||||||
|
- **Oswald** - Headlines, brand font, uppercase display text (weights: 400, 500, 600)
|
||||||
|
|
||||||
|
#### Extended Font Library (Available but not actively used)
|
||||||
|
The page loads 20+ Google Fonts for maximum flexibility:
|
||||||
|
- Sans-serif: Geist, Roboto, Montserrat, Poppins, Bricolage Grotesque, Plus Jakarta Sans, Manrope, Space Grotesk, Work Sans, DM Sans, Quicksand, Nunito, Google Sans Flex
|
||||||
|
- Serif: Playfair Display, Instrument Serif, Merriweather, PT Serif, Newsreader
|
||||||
|
- Monospace: Geist Mono, Space Mono
|
||||||
|
|
||||||
|
### Type Scale
|
||||||
|
- **7xl-8xl** (`4.5rem` - `6rem`) - Hero headlines ("PLAY WONDER")
|
||||||
|
- **4xl-5xl** (`2.25rem` - `3rem`) - Section headings
|
||||||
|
- **3xl-4xl** (`1.875rem` - `2.25rem`) - Card titles, subsection headings
|
||||||
|
- **2xl** (`1.5rem`) - Secondary headings
|
||||||
|
- **xl** (`1.25rem`) - Large body text
|
||||||
|
- **lg** (`1.125rem`) - Emphasized body text
|
||||||
|
- **base** (`1rem`) - Standard body text
|
||||||
|
- **sm** (`0.875rem`) - Small text, labels
|
||||||
|
- **xs** (`0.75rem`) - Micro copy, metadata
|
||||||
|
|
||||||
|
### Font Weights
|
||||||
|
- **Light (300)** - Subtle descriptive text
|
||||||
|
- **Regular (400)** - Body text
|
||||||
|
- **Medium (500)** - Emphasized text
|
||||||
|
- **Semibold (600)** - Strong emphasis
|
||||||
|
- **Bold (700)** - Headlines, CTAs
|
||||||
|
|
||||||
|
### Typography Utilities
|
||||||
|
- **Tracking**: `tracking-tighter` (-0.05em), `tracking-tight` (-0.025em), `tracking-wide` (0.025em), `tracking-wider` (0.05em), `tracking-widest` (0.1em)
|
||||||
|
- **Leading**: `leading-tight` (1.25), `leading-[1.1]`, `leading-[0.85]`, `leading-none` (1), `leading-relaxed` (1.625)
|
||||||
|
- **Transform**: `uppercase` for labels and category tags
|
||||||
|
|
||||||
|
## Layout System
|
||||||
|
|
||||||
|
### Grid Structure
|
||||||
|
The page uses a 12-column responsive grid:
|
||||||
|
- **Hero Section**: `lg:grid-cols-12` split into 4-8 columns (sidebar + main visual)
|
||||||
|
- **Content Sections**: `md:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4`
|
||||||
|
- **Bento Grid**: Asymmetric layout with `col-span-1`, `col-span-2`, `row-span-2` variations
|
||||||
|
|
||||||
|
### Spacing Scale (Tailwind)
|
||||||
|
- **Small**: `gap-1` (0.25rem), `gap-2` (0.5rem), `gap-3` (0.75rem)
|
||||||
|
- **Medium**: `gap-4` (1rem), `gap-6` (1.5rem), `gap-8` (2rem)
|
||||||
|
- **Large**: `gap-12` (3rem), `gap-16` (4rem)
|
||||||
|
- **Padding**: Consistent use of `p-8`, `p-12`, `px-6`, `py-24` for sections
|
||||||
|
|
||||||
|
### Container
|
||||||
|
- **Max Width**: `max-w-7xl` (80rem) centered with `mx-auto`
|
||||||
|
- **Horizontal Padding**: `px-6` mobile, `lg:px-12` desktop
|
||||||
|
|
||||||
|
## Design Patterns
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
- **Hamburger Menu**: Minimalist top-left icon with dropdown
|
||||||
|
- **Dropdown Menu**: Rounded corners (`rounded-2xl`), shadow (`shadow-[0_8px_30px_rgb(0,0,0,0.12)]`), clean white card
|
||||||
|
- **Menu Items**: Hover states with `hover:bg-blue-50/50`, icon + text layout
|
||||||
|
|
||||||
|
### Cards & Components
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
|
||||||
|
#### Primary CTA
|
||||||
|
- Background: `bg-blue-700/50`, `hover:bg-blue-700`
|
||||||
|
- Shape: `rounded-full`, `px-6 py-3`
|
||||||
|
- Text: Uppercase, `tracking-wide`, white with arrow icon
|
||||||
|
|
||||||
|
#### Icon Buttons
|
||||||
|
- Shape: `rounded-full`, `w-10 h-10`
|
||||||
|
- Border: `border border-blue-400`
|
||||||
|
- Hover: `hover:bg-blue-500`
|
||||||
|
|
||||||
|
#### Secondary Links
|
||||||
|
- Style: Underlined text with `border-b`
|
||||||
|
- Hover: `hover:border-white`, `hover:opacity-75`
|
||||||
|
|
||||||
|
### Decorative Elements
|
||||||
|
|
||||||
|
#### Abstract Shapes
|
||||||
|
- **Blurred Blobs**: `blur-3xl`, `opacity-20`, `mix-blend-multiply`, animated
|
||||||
|
- **Background Patterns**: Radial gradient dots (`bg-[radial-gradient(circle,transparent_20%,#eff6ff_20%)]`)
|
||||||
|
- **Typography Overlay**: Giant "GAME" text with `mix-blend-multiply`, `opacity-10`
|
||||||
|
|
||||||
|
#### Borders & Dividers
|
||||||
|
- **Subtle Lines**: `h-0.5 w-12`, `h-px`, `w-px` for accent lines
|
||||||
|
- **Border Colors**: `border-gray-100`, `border-blue-500/20`, `border-white/30` (with transparency)
|
||||||
|
|
||||||
|
## Animations
|
||||||
|
|
||||||
|
### Keyframe Animations
|
||||||
|
```css
|
||||||
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||||
|
@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
|
@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
|
||||||
|
```
|
||||||
|
|
||||||
|
### Animation Classes
|
||||||
|
- **Fade In**: `animate-fade-in` - 0.8s ease-out
|
||||||
|
- **Slide In**: `animate-slide-in` - 0.8s cubic-bezier(0.16, 1, 0.3, 1)
|
||||||
|
- **Blur In**: `animate-blur-in` - 1s ease-out
|
||||||
|
|
||||||
|
### Delay Classes
|
||||||
|
- `delay-75` (75ms), `delay-100` (100ms), `delay-150` (150ms)
|
||||||
|
- `delay-200` (200ms), `delay-300` (300ms), `delay-500` (500ms), `delay-700` (700ms)
|
||||||
|
|
||||||
|
### Transition Effects
|
||||||
|
- **All Properties**: `transition-all duration-500 ease-out`
|
||||||
|
- **Colors**: `transition-colors`
|
||||||
|
- **Transform**: `transition-transform`
|
||||||
|
- **Opacity**: `transition-opacity`
|
||||||
|
|
||||||
|
### Hover Animations
|
||||||
|
- **Scale**: `hover:scale-110`, `group-hover:scale-105`
|
||||||
|
- **Translate**: `group-hover:translate-x-1`
|
||||||
|
- **Color Shift**: Text and background color changes on hover
|
||||||
|
|
||||||
|
## Visual Effects
|
||||||
|
|
||||||
|
### Shadows
|
||||||
|
- **Card Shadows**: `shadow-xl`, `shadow-2xl`
|
||||||
|
- **Custom Shadow**: `shadow-[0_8px_30px_rgb(0,0,0,0.12)]`
|
||||||
|
- **Inner Shadow**: `shadow-inner` for recessed elements
|
||||||
|
|
||||||
|
### Backdrop Effects
|
||||||
|
- **Blur**: `backdrop-blur-sm`, `backdrop-blur-md` for glass morphism
|
||||||
|
- **Background Opacity**: `bg-white/40`, `bg-white/50`, `bg-gray-200/30`
|
||||||
|
|
||||||
|
### Blend Modes
|
||||||
|
- **Multiply**: `mix-blend-multiply` for layered effects
|
||||||
|
- **Opacity Variations**: `opacity-10`, `opacity-20`, `opacity-50`, `opacity-80`
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
- **Small**: `rounded-md` (0.375rem), `rounded-lg` (0.5rem), `rounded-xl` (0.75rem)
|
||||||
|
- **Large**: `rounded-2xl` (1rem), `rounded-3xl` (1.5rem)
|
||||||
|
- **Custom**: `rounded-[2.5rem]`, `rounded-[3rem]`
|
||||||
|
- **Full**: `rounded-full` for circles and pills
|
||||||
|
|
||||||
|
## Iconography
|
||||||
|
|
||||||
|
### Icon Library
|
||||||
|
**Lucide Icons** - Consistent stroke-based icon system
|
||||||
|
- Stroke width: `1.5`
|
||||||
|
- Common sizes: `w-4 h-4` (small), `w-5 h-5` (medium), `w-6 h-6` (large), `w-8 h-8` (XL)
|
||||||
|
|
||||||
|
### Icon Categories
|
||||||
|
- **Navigation**: menu, arrow-left, arrow-right, home
|
||||||
|
- **Gaming**: gamepad-2, zap, shapes, rocket, sword, shield
|
||||||
|
- **Shopping**: shopping-bag
|
||||||
|
- **UI**: settings, trophy, crown, layers
|
||||||
|
|
||||||
|
## Section Breakdowns
|
||||||
|
|
||||||
|
### 1. Hero Section
|
||||||
|
- **Layout**: Split-screen (4-8 column grid)
|
||||||
|
- **Left**: White sidebar with navigation, headline, category selector
|
||||||
|
- **Right**: Slate-50 background with abstract shapes and background image
|
||||||
|
- **Typography Overlay**: Massive "GAME" text at `text-[40rem]`
|
||||||
|
- **Animation**: Staggered fade-in and slide-in effects
|
||||||
|
|
||||||
|
### 2. Section 2
|
||||||
|
- **Background**: `bg-blue-600`
|
||||||
|
- **Container**: `bg-blue-700`, rounded top corners
|
||||||
|
- **Layout**: Asymmetric grid - 1 large (2x2), 4 medium (1x1)
|
||||||
|
- **Featured Card**: gradient background, icon, title, CTA
|
||||||
|
- **Image Cards**: Full-bleed background images with text overlay
|
||||||
|
|
||||||
|
### 3. Featured Categories
|
||||||
|
- **Background**: `bg-gray-700` with animated gradient blobs
|
||||||
|
- **Cards**: Icon + text, hover scale effect
|
||||||
|
- **Decorative**: Purple and blue blurred circles with `mix-blend-multiply`
|
||||||
|
|
||||||
|
### 4. Section 4
|
||||||
|
- **Layout**: 1-3 column split (text + logo grid)
|
||||||
|
- **Logo Grid**: 4x2 grid with borders, hover states
|
||||||
|
- **Style**: Icons as placeholder logos, consistent spacing with gaps
|
||||||
|
|
||||||
|
### 5. Section 5
|
||||||
|
- **Layout**: 2-column (image + text)
|
||||||
|
- **Left**: Postage stamp effect with radial gradient pattern
|
||||||
|
- **Right**: `bg-blue-700` with metadata, title, navigation dots
|
||||||
|
|
||||||
|
## Responsive Behavior
|
||||||
|
|
||||||
|
### Breakpoints
|
||||||
|
- **Mobile**: Default styles (< 768px)
|
||||||
|
- **Tablet**: `md:` prefix (≥ 768px)
|
||||||
|
- **Desktop**: `lg:` prefix (≥ 1024px)
|
||||||
|
|
||||||
|
### Mobile Adaptations
|
||||||
|
- Single column layouts (`grid-cols-1`)
|
||||||
|
- Smaller padding (`p-8` → `lg:p-12`)
|
||||||
|
- Reduced text sizes (`text-7xl` → `lg:text-8xl`)
|
||||||
|
- Stacked flex layouts (`flex-col` → `md:flex-row`)
|
||||||
|
|
||||||
|
## Accessibility Features
|
||||||
|
|
||||||
|
### Text Contrast
|
||||||
|
- White text on blue 600+ backgrounds
|
||||||
|
- Dark slate text on white/light backgrounds
|
||||||
|
- Semi-transparent overlays on images ensure readability
|
||||||
|
|
||||||
|
### Interactive Elements
|
||||||
|
- Focus states: `focus:outline-none focus:ring-2 focus:ring-blue-100`
|
||||||
|
- Cursor indicators: `cursor-pointer` on interactive elements
|
||||||
|
- Clear hover states with color/opacity changes
|
||||||
|
|
||||||
|
### Selection Styling
|
||||||
|
```css
|
||||||
|
selection:bg-pink-500 selection:text-white
|
||||||
|
```
|
||||||
|
|
||||||
|
## Design Philosophy
|
||||||
|
|
||||||
|
The design follows modern web trends:
|
||||||
|
1. **Bold Typography**: Large, tight headlines with uppercase treatments
|
||||||
|
2. **Vibrant Colors**: Saturated blues and oranges with high contrast
|
||||||
|
3. **Smooth Animations**: Subtle entrance effects and hover states
|
||||||
|
4. **Card-Based Layout**: Bento grid asymmetry creates visual interest
|
||||||
|
5. **Glass Morphism**: Backdrop blur and transparency effects
|
||||||
|
6. **3D Touches**: Phone mockup rotation, layered shadows
|
||||||
|
7. **Minimalist UI**: Clean icons, simple buttons, generous whitespace
|
||||||
|
|
||||||
|
## Technical Implementation
|
||||||
|
|
||||||
|
- **Framework**: Astro with Tailwind CSS
|
||||||
|
- **CDN Resources**: Tailwind CDN, Google Fonts CDN, Lucide icons CDN
|
||||||
|
- **Image Hosting**: Supabase storage for background images
|
||||||
|
- **Optimization**: AVIF/WebP images, lazy loading implied
|
||||||
|
- **Responsive Images**: Multiple resolutions (800w, 1600w)
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user