sync: Auto-sync from ACG-M-L5090 at 2026-02-01 16:23:43
This commit is contained in:
229
azcomputerguru-design-vision.md
Normal file
229
azcomputerguru-design-vision.md
Normal file
@@ -0,0 +1,229 @@
|
||||
# Arizona Computer Guru - Bold Redesign Vision
|
||||
|
||||
## DESIGN PHILOSOPHY: DESERT BRUTALISM MEETS SOUTHWEST FUTURISM
|
||||
|
||||
The redesign breaks away from generic corporate aesthetics by fusing brutalist design principles with Arizona's dramatic desert landscape. This creates a distinctive, memorable identity that commands attention while maintaining professional credibility.
|
||||
|
||||
---
|
||||
|
||||
## CORE DESIGN ELEMENTS
|
||||
|
||||
### Typography System
|
||||
|
||||
**PRIMARY: Space Grotesk**
|
||||
- Geometric, brutalist character
|
||||
- Architectural precision
|
||||
- Strong uppercase presence
|
||||
- Negative letter-spacing for impact
|
||||
- Used for: All headings, navigation, CTAs
|
||||
|
||||
**SECONDARY: IBM Plex Sans**
|
||||
- Technical warmth (warmer than Inter/Roboto)
|
||||
- Excellent readability
|
||||
- Professional yet distinctive
|
||||
- Used for: Body text, descriptions
|
||||
|
||||
**ACCENT: JetBrains Mono**
|
||||
- Monospace personality
|
||||
- Tech credibility signal
|
||||
- Distinctive rhythm
|
||||
- Used for: Tech elements, small text, code snippets
|
||||
|
||||
### Color Palette
|
||||
|
||||
**Sunset Copper (#D4771C)**
|
||||
- Primary brand color
|
||||
- Warmer, deeper than generic orange
|
||||
- Evokes Arizona desert sunsets
|
||||
- Usage: Primary accents, highlights, hover states
|
||||
|
||||
**Midnight Desert (#0A0F14)**
|
||||
- Near-black with blue undertones
|
||||
- Deep, mysterious night sky
|
||||
- Usage: Dark backgrounds, text, headers
|
||||
|
||||
**Canyon Shadow (#2D1B14)**
|
||||
- Deep brown with earth tones
|
||||
- Geological depth
|
||||
- Usage: Secondary dark elements
|
||||
|
||||
**Sandstone (#E8D5C4)**
|
||||
- Warm neutral light tone
|
||||
- Desert sediment texture
|
||||
- Usage: Light text on dark backgrounds
|
||||
|
||||
**Neon Accent (#00FFA3)**
|
||||
- Unexpected cyberpunk touch
|
||||
- High-tech contrast signal
|
||||
- Usage: CTAs, active states, special highlights
|
||||
|
||||
---
|
||||
|
||||
## VISUAL LANGUAGE
|
||||
|
||||
### Geometric Brutalism
|
||||
- **Thick borders** (8-12px) on major elements
|
||||
- **Skewed transforms** (skewY/skewX) mimicking geological strata
|
||||
- **Chunky typography** with bold weights
|
||||
- **Asymmetric layouts** for visual interest
|
||||
- **High contrast** shadow and light
|
||||
|
||||
### Desert Aesthetics
|
||||
- **Textured backgrounds** - Subtle radial gradients and line patterns
|
||||
- **Sunset gradients** - Warm copper to deep brown
|
||||
- **Geological angles** - 2-5 degree skews
|
||||
- **Shadow depth** - Dramatic drop shadows (4-8px offsets)
|
||||
- **Layered atmosphere** - Overlapping semi-transparent effects
|
||||
|
||||
### Tech Elements
|
||||
- **Neon glow effects** - Cyan/green accents with glow shadows
|
||||
- **Grid patterns** - Repeating line textures
|
||||
- **Monospace touches** - Code-style elements
|
||||
- **Geometric shapes** - Angular borders and dividers
|
||||
- **Hover animations** - Transform + shadow combos
|
||||
|
||||
---
|
||||
|
||||
## KEY DESIGN FEATURES
|
||||
|
||||
### Navigation
|
||||
- Bold uppercase Space Grotesk
|
||||
- Skewed hover states with full background fill
|
||||
- Neon CTA button (last menu item)
|
||||
- Geometric dropdown with thick copper/neon borders
|
||||
- Mobile: Full-screen dark overlay with neon accents
|
||||
|
||||
### Hero/Feature Area
|
||||
- Desert gradient backgrounds
|
||||
- Massive 4.5rem headings with shadow
|
||||
- Textured overlays (subtle line patterns)
|
||||
- Dramatic positioning and scale
|
||||
|
||||
### Content Cards (Columns Upper)
|
||||
- Skewed -2deg transform
|
||||
- Thick neon left border (8-12px)
|
||||
- Gradient overlay effects
|
||||
- Transform + scale on hover
|
||||
- Neon glow shadow
|
||||
|
||||
### Button Boxes
|
||||
- 12px thick borders
|
||||
- Skewed containers
|
||||
- Gradient background slide-in on hover
|
||||
- Icon scale + rotate animation
|
||||
- Border color change (copper to neon)
|
||||
|
||||
### Typography Hierarchy
|
||||
- **H1:** 3.5-5rem, uppercase, geometric, heavy shadow
|
||||
- **H2:** 2.4-3.5rem, uppercase, neon underlines
|
||||
- **H3:** 1.6-2.2rem, left border accents
|
||||
- **Body:** 1.2rem, light weight, excellent line height
|
||||
|
||||
### Interactive Elements
|
||||
- **Links:** Underline slide animation (width 0 to 100%)
|
||||
- **Buttons:** Background slide + neon glow
|
||||
- **Cards:** Transform + shadow + border width change
|
||||
- **Hover timing:** 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
|
||||
---
|
||||
|
||||
## TECHNICAL IMPLEMENTATION
|
||||
|
||||
### Performance
|
||||
- Google Fonts with display=swap
|
||||
- CSS-only animations (no JS dependencies)
|
||||
- Efficient transforms (GPU-accelerated)
|
||||
- Minimal animation complexity
|
||||
|
||||
### Accessibility
|
||||
- High contrast ratios maintained
|
||||
- Readable font sizes (min 16px)
|
||||
- Clear focus states
|
||||
- Semantic HTML structure preserved
|
||||
|
||||
### Responsive Strategy
|
||||
- Mobile: Remove skews, simplify transforms
|
||||
- Mobile: Full-width cards, simplified borders
|
||||
- Mobile: Dark background prioritized
|
||||
- Tablet: Reduced border thickness, smaller cards
|
||||
|
||||
---
|
||||
|
||||
## WHAT MAKES THIS DISTINCTIVE
|
||||
|
||||
### AVOIDS:
|
||||
- Inter/Roboto fonts
|
||||
- Purple/blue gradients
|
||||
- Generic rounded corners
|
||||
- Subtle gray palettes
|
||||
- Minimal flat design
|
||||
- Cookie-cutter layouts
|
||||
|
||||
### EMBRACES:
|
||||
- Geometric brutalism
|
||||
- Southwest color palette
|
||||
- Unexpected neon accents
|
||||
- Angular/skewed elements
|
||||
- Dramatic shadows
|
||||
- Textured layers
|
||||
- Monospace personality
|
||||
|
||||
---
|
||||
|
||||
## DESIGN RATIONALE
|
||||
|
||||
**Why Space Grotesk?**
|
||||
Geometric, architectural, brutalist character creates instant visual distinction. The negative letter-spacing adds density and impact.
|
||||
|
||||
**Why Neon Accent?**
|
||||
The unexpected cyberpunk green (#00FFA3) creates memorable contrast against warm desert tones. It signals tech expertise without being generic.
|
||||
|
||||
**Why Skewed Elements?**
|
||||
2-5 degree skews reference geological formations (strata, canyon walls) while adding dynamic brutalist energy. Creates movement without rotation.
|
||||
|
||||
**Why Thick Borders?**
|
||||
8-12px borders are brutalist signatures. They create bold separation, architectural weight, and memorable chunky aesthetics.
|
||||
|
||||
**Why Desert Palette?**
|
||||
Grounds the brand in Arizona geography while differentiating from generic blue/purple tech palettes. Warm, distinctive, regionally authentic.
|
||||
|
||||
---
|
||||
|
||||
## USER EXPERIENCE IMPROVEMENTS
|
||||
|
||||
### Visual Hierarchy
|
||||
- Clearer section separation with borders
|
||||
- Stronger color contrast for CTAs
|
||||
- More dramatic scale differences
|
||||
- Better defined interactive states
|
||||
|
||||
### Engagement
|
||||
- Satisfying hover animations
|
||||
- Memorable visual language
|
||||
- Distinctive personality
|
||||
- Professional yet bold
|
||||
|
||||
### Brand Identity
|
||||
- Regionally grounded (Arizona desert)
|
||||
- Tech-forward (neon accents, geometric)
|
||||
- Confident (brutalist boldness)
|
||||
- Unforgettable (breaks conventions)
|
||||
|
||||
---
|
||||
|
||||
## LIVE SITE
|
||||
|
||||
**URL:** https://azcomputerguru.com/testsite
|
||||
**Deployed:** 2026-02-01
|
||||
**Backup:** style.css.backup-20260201-154357
|
||||
|
||||
---
|
||||
|
||||
## DESIGN CREDITS
|
||||
|
||||
**Design System:** Desert Brutalism
|
||||
**Typography:** Space Grotesk + IBM Plex Sans + JetBrains Mono
|
||||
**Color Philosophy:** Arizona Sunset meets Cyberpunk
|
||||
**Visual Language:** Geometric Brutalism with Southwest Soul
|
||||
|
||||
This design intentionally breaks from safe, generic patterns to create a memorable, distinctive identity that positions Arizona Computer Guru as bold, confident, and unforgettable.
|
||||
Reference in New Issue
Block a user