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