230 lines
6.4 KiB
Markdown
230 lines
6.4 KiB
Markdown
# 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.
|