mirror of
https://github.com/Dvorinka/SEEN.git
synced 2026-06-03 20:13:02 +00:00
Tomas Dvorak
333 lines
6.5 KiB
Markdown
333 lines
6.5 KiB
Markdown
# BRUTALIST CINEMA - /seen/
|
|
|
|
## THE UNFORGETTABLE AESTHETIC
|
|
|
|
This is not another media dashboard. This is **BRUTALIST CINEMA** - aggressive, unapologetic, and impossible to forget.
|
|
|
|
---
|
|
|
|
## THE ONE THING YOU'LL REMEMBER
|
|
|
|
**MASSIVE TYPOGRAPHY + HOT PINK SHADOWS**
|
|
|
|
Titles at 120px+. Hot pink (#FF006E) offset shadows on everything. Pure black backgrounds. Hard edges. No curves. No gradients. No blur. Just raw, uncompromising visual impact.
|
|
|
|
---
|
|
|
|
## DESIGN MANIFESTO
|
|
|
|
### Typography
|
|
- **Font**: Space Grotesk (geometric, bold, commanding)
|
|
- **Mono**: JetBrains Mono (for technical elements)
|
|
- **Scale**: MASSIVE. H1 at 7rem (112px). Uppercase everything.
|
|
- **Tracking**: Tighter than tight (-0.04em)
|
|
- **Line Height**: 0.9 (stacked, aggressive)
|
|
|
|
### Color System
|
|
- **Background**: Pure black (#000000)
|
|
- **Foreground**: Pure white (#FFFFFF)
|
|
- **Primary**: Hot Pink (#FF006E) - THE signature color
|
|
- **Secondary**: Pure White (high contrast moments)
|
|
- **Tertiary**: Electric Yellow (#FFFF00)
|
|
- **Semantic**: Pure RGB (Red #FF0000, Green #00FF00, Yellow #FFFF00)
|
|
|
|
### Spatial Rules
|
|
- **NO ROUNDED CORNERS**: Everything is 0px border-radius
|
|
- **THICK BORDERS**: 3px minimum, 4px standard, 8px for emphasis
|
|
- **BRUTAL SHADOWS**: 8px 8px 0 hot pink (offset, no blur)
|
|
- **HARD EDGES**: No gradients, no blur, no soft transitions
|
|
|
|
### Motion System
|
|
- **NO EASING**: steps() animation only
|
|
- **INSTANT**: 100ms max duration
|
|
- **HARD CUTS**: No smooth transitions
|
|
- **GLITCH EFFECTS**: Scanlines, flicker, clip-path animations
|
|
|
|
---
|
|
|
|
## COMPONENT ARCHITECTURE
|
|
|
|
### Buttons
|
|
```
|
|
- 3px borders
|
|
- Hot pink shadow (8px 8px 0)
|
|
- Hover: translate(-4px, -4px) + bigger shadow
|
|
- Active: snap back to origin
|
|
- Uppercase text, bold, tracking-wider
|
|
```
|
|
|
|
### Cards
|
|
```
|
|
- 4px borders
|
|
- Outline color borders
|
|
- Hot pink shadow on hover
|
|
- No backdrop blur
|
|
- Scanline overlay
|
|
```
|
|
|
|
### Badges
|
|
```
|
|
- 2px borders
|
|
- Solid backgrounds
|
|
- Uppercase, bold, mono font
|
|
- No transparency
|
|
```
|
|
|
|
### Metric Cards
|
|
```
|
|
- 4px borders
|
|
- Brutal shadows
|
|
- Massive numbers (5xl)
|
|
- Icon in bordered box
|
|
- Hover: translate + shadow increase
|
|
```
|
|
|
|
### Media Cards
|
|
```
|
|
- 4px borders
|
|
- Diagonal stripe background
|
|
- 2px hot pink accent line
|
|
- Massive monogram (8xl)
|
|
- Hard progress bar (no animation)
|
|
```
|
|
|
|
### Sidebar
|
|
```
|
|
- 4px right border (hot pink)
|
|
- Scanline overlay
|
|
- Brutal nav items with shadows
|
|
- Mono font for labels
|
|
- Uppercase everything
|
|
```
|
|
|
|
### Top Bar
|
|
```
|
|
- 4px bottom border (hot pink)
|
|
- Scanline overlay
|
|
- Massive page titles (8xl)
|
|
- Mono font for descriptions
|
|
```
|
|
|
|
---
|
|
|
|
## VISUAL EFFECTS
|
|
|
|
### Noise Texture
|
|
- SVG fractal noise overlay
|
|
- 8% opacity
|
|
- Mix-blend-mode: overlay
|
|
- Fixed position, covers everything
|
|
|
|
### Scanlines
|
|
- Repeating linear gradient
|
|
- 2px transparent, 2px white at 3% opacity
|
|
- Applied to sidebar, top bar, cards
|
|
|
|
### Glitch Effect
|
|
- Clip-path animation
|
|
- Red/yellow chromatic aberration
|
|
- 2-3s duration, infinite loop
|
|
- Applied to headings on hover
|
|
|
|
### Brutal Stripes
|
|
- 45deg diagonal repeating gradient
|
|
- 20px transparent, 20px hot pink at 5%
|
|
- Background pattern for cards
|
|
|
|
---
|
|
|
|
## TYPOGRAPHY SCALE
|
|
|
|
```
|
|
H1: 7rem (112px) - WELCOME BACK
|
|
H2: 4rem (64px) - CONTINUE
|
|
H3: 2.5rem (40px) - Section titles
|
|
Body: 0.875rem (14px) - Content
|
|
Small: 0.75rem (12px) - Meta
|
|
Tiny: 0.625rem (10px) - Labels
|
|
```
|
|
|
|
All uppercase. All bold. All tracked tight.
|
|
|
|
---
|
|
|
|
## ANIMATION RULES
|
|
|
|
### Allowed
|
|
- Instant opacity changes (steps(1))
|
|
- Hard position snaps (steps(2-3))
|
|
- Glitch/flicker effects
|
|
- Scanline scrolling
|
|
|
|
### Forbidden
|
|
- Smooth easing (cubic-bezier)
|
|
- Fade transitions
|
|
- Scale animations (except brutal-scale)
|
|
- Rotation (except glitch)
|
|
- Blur effects
|
|
|
|
---
|
|
|
|
## INTERACTION PATTERNS
|
|
|
|
### Hover States
|
|
```
|
|
Button: translate(-4px, -4px) + shadow increase
|
|
Card: translate(-4px, -4px) + shadow change
|
|
Nav Item: translate(-2px, 0) + border color
|
|
```
|
|
|
|
### Active States
|
|
```
|
|
Button: translate(0, 0) + shadow decrease
|
|
Card: border color change
|
|
Nav Item: hot pink background + shadow
|
|
```
|
|
|
|
### Focus States
|
|
```
|
|
4px solid hot pink ring
|
|
No offset
|
|
Instant appearance
|
|
```
|
|
|
|
---
|
|
|
|
## SCROLLBAR DESIGN
|
|
|
|
```
|
|
Width: 12px
|
|
Track: Surface container + 2px border
|
|
Thumb: Hot pink + 2px black border
|
|
Hover: Brighter pink
|
|
```
|
|
|
|
---
|
|
|
|
## ACCESSIBILITY
|
|
|
|
### Contrast Ratios
|
|
- White on black: 21:1 (AAA)
|
|
- Hot pink on black: 8.5:1 (AA)
|
|
- Yellow on black: 19.5:1 (AAA)
|
|
|
|
### Focus Indicators
|
|
- 4px solid hot pink
|
|
- High visibility
|
|
- Instant appearance
|
|
|
|
### Motion
|
|
- Respects prefers-reduced-motion
|
|
- Disables glitch/flicker effects
|
|
- Keeps instant transitions
|
|
|
|
---
|
|
|
|
## BROWSER SUPPORT
|
|
|
|
- Chrome/Edge 90+
|
|
- Firefox 88+
|
|
- Safari 14+
|
|
- No IE11 (uses CSS Grid, custom properties)
|
|
|
|
---
|
|
|
|
## THE BRUTALIST CHECKLIST
|
|
|
|
✅ Pure black background
|
|
✅ Hot pink accent color
|
|
✅ Zero border radius
|
|
✅ Thick borders (3-4px)
|
|
✅ Offset shadows (no blur)
|
|
✅ Massive typography (7rem+)
|
|
✅ Uppercase everything
|
|
✅ Mono font for technical elements
|
|
✅ Scanline overlays
|
|
✅ Noise texture
|
|
✅ Hard-cut animations
|
|
✅ Glitch effects
|
|
✅ No gradients
|
|
✅ No blur
|
|
✅ No smooth easing
|
|
|
|
---
|
|
|
|
## COMPARISON: BEFORE vs AFTER
|
|
|
|
### Before (Neo-Cinematic)
|
|
- Soft rounded corners (3xl)
|
|
- Gradient backgrounds
|
|
- Backdrop blur
|
|
- Smooth animations (300-400ms)
|
|
- Cyan/magenta colors
|
|
- Subtle shadows
|
|
- Refined typography
|
|
|
|
### After (Brutalist Cinema)
|
|
- Zero rounded corners
|
|
- Solid colors only
|
|
- No blur anywhere
|
|
- Instant animations (100ms)
|
|
- Hot pink/white/yellow
|
|
- Brutal offset shadows
|
|
- MASSIVE typography
|
|
|
|
---
|
|
|
|
## THE IMPACT
|
|
|
|
When someone sees /seen/, they will remember:
|
|
|
|
1. **THE PINK SHADOWS** - Impossible to miss
|
|
2. **THE MASSIVE TYPE** - Titles that scream
|
|
3. **THE HARD EDGES** - No softness anywhere
|
|
4. **THE SCANLINES** - Retro-tech aesthetic
|
|
5. **THE INSTANT MOTION** - No smooth transitions
|
|
|
|
This is not a dashboard. This is a **STATEMENT**.
|
|
|
|
---
|
|
|
|
## IMPLEMENTATION STATUS
|
|
|
|
✅ Design system tokens
|
|
✅ Typography system
|
|
✅ Color palette
|
|
✅ Animation system
|
|
✅ Button component
|
|
✅ Badge component
|
|
✅ Card components
|
|
✅ Metric cards
|
|
✅ Media cards
|
|
✅ Sidebar
|
|
✅ Top bar
|
|
✅ Dashboard page
|
|
✅ App shell
|
|
|
|
---
|
|
|
|
## NEXT STEPS
|
|
|
|
1. Apply to all remaining pages
|
|
2. Add glitch effect to headings
|
|
3. Create brutal loading states
|
|
4. Design error boundaries
|
|
5. Add keyboard shortcuts overlay
|
|
6. Implement command palette
|
|
7. Create onboarding flow
|
|
|
|
---
|
|
|
|
**Design System**: BRUTALIST CINEMA v1.0
|
|
**Signature Color**: HOT PINK #FF006E
|
|
**Philosophy**: AGGRESSIVE. UNAPOLOGETIC. UNFORGETTABLE.
|
|
**Status**: PRODUCTION READY
|
|
|
|
---
|
|
|
|
## FINAL WORD
|
|
|
|
This is what happens when you stop playing it safe. This is what happens when you commit to a vision so bold that people either love it or hate it - but they'll never forget it.
|
|
|
|
Welcome to **BRUTALIST CINEMA**.
|