# AGX Website - Visual Style Guide

## Color Palette

### Primary Colors

#### Background
```
Color: Off-White
Hex: #fafaf9
RGB: 250, 250, 249
Use: Main page background
Warmth: Inviting, not sterile
```

#### Accent / Footer
```
Color: Warm Stone
Hex: #44403c
RGB: 68, 64, 60
Use: Accents, headings, footer background
Warmth: Sophisticated, professional
```

#### Text Primary
```
Color: Charcoal
Hex: #292524
RGB: 41, 37, 36
Use: Body text, main content
Contrast: 21:1 on white (WCAG AAA)
```

#### Text Secondary
```
Color: Stone Gray
Hex: #78716b
RGB: 120, 113, 107
Use: Secondary text, captions, metadata
Contrast: 11:1 on white
```

### Secondary Colors

#### Surface
```
Color: Pure White
Hex: #ffffff
RGB: 255, 255, 255
Use: Cards, panels, content containers
```

#### Border
```
Color: Light Sand
Hex: #e7e5e4
RGB: 231, 229, 228
Use: Dividers, borders, subtle lines
```

#### Background Secondary
```
Color: Light Off-White
Hex: #f5f5f4
RGB: 245, 245, 244
Use: Alternate backgrounds, image placeholders
```

#### Light Text
```
Color: Taupe
Hex: #a8a29e
RGB: 168, 162, 158
Use: Tertiary text, helper text
```

---

## Color Applications

### Header
- **Background**: White (#ffffff)
- **Text**: Charcoal (#292524)
- **Brand**: Warm Stone (#44403c)
- **Links**: Charcoal with Stone Gray hover
- **Border**: Light Sand (#e7e5e4)

### Hero Section
- **Background**: White (#ffffff)
- **Headline**: Warm Stone (#44403c)
- **Body Text**: Stone Gray (#78716b)
- **Badges**: Sage-tinted background with Stone text
- **Border**: Light Sand (#e7e5e4)

### Content Cards
- **Background**: White (#ffffff)
- **Headings**: Warm Stone (#44403c)
- **Body**: Stone Gray (#78716b)
- **Borders**: Light Sand (#e7e5e4)
- **Shadow**: 1px 3px rgba(0,0,0,0.08)
- **Hover**: 4px 12px rgba(0,0,0,0.1)

### Footer
- **Background**: Warm Stone (#44403c)
- **Text**: White (#ffffff)
- **Secondary**: rgba(255,255,255,0.8)
- **Inputs**: rgba(255,255,255,0.12)
- **Links**: White with hover brightening

---

## Typography System

### Font Stack
```
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif
```

**Reasoning**:
- System fonts = fast loading, familiar feel
- Fallback chain ensures compatibility
- Works on all platforms
- Native rendering on each OS

### Type Scale

#### Headings

**H1 - Page Title**
- Size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem)
- Weight: 700
- Line Height: 1.25
- Letter Spacing: -0.03em
- Use: Hero section title, page heading
- Color: Warm Stone (#44403c)

**H2 - Section Heading**
- Size: 1.2rem
- Weight: 700
- Line Height: 1.35
- Letter Spacing: -0.01em
- Use: Main section titles
- Color: Warm Stone (#44403c)

**H3 - Subsection**
- Size: 1rem
- Weight: 700
- Line Height: 1.3
- Letter Spacing: -0.01em
- Use: Content subsections
- Color: Warm Stone Light (#57534e)

**H4 - Footer Section**
- Size: 0.9rem
- Weight: 700
- Letter Spacing: -0.01em
- Use: Footer columns, sidebars
- Color: White (in footer), Warm Stone (elsewhere)

#### Body Text

**Paragraph - Main Content**
- Size: 0.95rem - 1rem
- Weight: 400
- Line Height: 1.6
- Color: Stone Gray (#78716b)
- Letter Spacing: 0 (normal)
- Use: Primary content text
- Max Width: 70ch (for readability)

**Secondary Text - Metadata**
- Size: 0.9rem
- Weight: 400
- Line Height: 1.55
- Color: Stone Gray (#78716b)
- Use: Descriptions, captions

**Small Text - Help/Copyright**
- Size: 0.75rem - 0.8rem
- Weight: 400 - 500
- Line Height: 1.4
- Color: Taupe (#a8a29e)
- Use: Copyright, disclaimer, helper text

#### Links

**Regular Link**
- Size: Inherit
- Weight: 500
- Color: Warm Stone (#44403c)
- Decoration: None
- Hover: Same color, but darker

**Footer Link**
- Size: 0.85rem
- Weight: 400
- Color: White rgba(255,255,255,0.8)
- Hover: Pure white (#ffffff)
- Transition: 0.2s ease

#### Forms

**Label**
- Size: 0.85rem - 0.9rem
- Weight: 600
- Color: Inherit
- Letter Spacing: 0.01em

**Input/Textarea**
- Font: Inherit (system-ui)
- Size: 0.9rem
- Weight: 400
- Padding: 0.7rem 0.8rem
- Line Height: 1.5

**Button**
- Size: 0.9rem
- Weight: 700
- Padding: 0.7rem 0.8rem
- Cursor: pointer
- Transition: 0.2s ease

---

## Spacing System

### Horizontal Padding
```
Small:   0.75rem (12px)
Default: 1.25rem (20px)
Large:   1.5rem (24px)
XL:      2rem - 2.5rem (32-40px)
```

### Vertical Spacing
```
XS:  0.5rem (8px)
SM:  0.75rem (12px)
MD:  1rem (16px)
LG:  1.5rem (24px)
XL:  2rem (32px)
XXL: 2.5rem (40px)
```

### Border Radius
```
Small:  6px (--radius-sm)
Medium: 10px (--radius-md)
Large:  16px (--radius-lg)
```

### Component Spacing

**Header**
- Padding: 0.75rem 0

**Hero Section**
- Top Margin: 2rem
- Padding: 2.5rem
- Gap: 2.5rem

**Main Content**
- Top Margin: 2.5rem
- Padding: 0 1.25rem 4rem
- Gap: 2rem

**Cards**
- Padding: 2rem
- Margin Bottom: 2rem
- Border Radius: 16px

**Footer**
- Top Margin: 4rem
- Padding: 3.5rem 1.25rem 2rem
- Section Gap: 2.5rem

---

## Shadows & Depth

### Subtle Shadow (Default)
```css
0 1px 3px rgba(0,0,0,0.08),
0 2px 8px rgba(0,0,0,0.04)
```
Use: Cards, default state, subtle elevation

### Enhanced Shadow (Hover)
```css
0 4px 12px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.06)
```
Use: Card hover, interactive elements

### No Shadow
Use: Most elements, minimal approach

---

## Component Styles

### Buttons

**Primary Button**
- Background: Accent background with opacity
- Border: 1px solid accent border
- Color: Warm Stone
- Hover: More opaque background
- Transition: 0.2s ease

**Secondary Button**
- Background: Frosted glass (footer)
- Border: 1px solid rgba(255,255,255,0.4)
- Color: White
- Hover: More opaque, brighter border
- Transition: 0.2s ease

### Navigation Links

**Default**
- Background: Transparent
- Border: 1px solid Light Sand
- Color: Charcoal
- Padding: 0.5rem 0.7rem
- Border Radius: 10px

**Hover**
- Background: Accent background (0.08 opacity)
- Border: Accent border
- Color: Warm Stone
- Transition: 0.2s ease

**Active** (with CSS :active or .active class)
- Background: Darker accent
- Border: Darker accent
- Color: Accent light

### Forms

**Input Fields**
- Background: White
- Border: 1px Light Sand
- Color: Charcoal
- Padding: 0.7rem 0.8rem
- Border Radius: 10px
- Focus: Outline none, border accent color

**Labels**
- Font: 0.85rem, 600 weight
- Color: Charcoal or White (context dependent)
- Margin Bottom: 0.6rem

### Badges

**Default Badge**
- Background: rgba(120,113,107,0.08)
- Border: 1px solid rgba(120,113,107,0.3)
- Color: Stone Gray
- Font: 0.8rem, 600 weight
- Padding: 0.5rem 0.8rem
- Border Radius: 10px
- Letter Spacing: 0.01em

---

## Responsive Breakpoints

### Mobile First Approach

**Mobile (< 600px)**
- Single column layouts
- Full width components
- Increased touch targets (44px)
- Vertical stacking

**Tablet (600px - 1000px)**
- 2-column layouts
- Adjusted spacing
- Optimized for medium screens

**Desktop (1000px+)**
- 3-column layouts
- Full featured design
- Normal spacing

### Common Breakpoints
```css
Max width of main content: 1280px
Column gap: 2rem

@media(max-width: 1000px) {
  /* Tablet/Mobile adjustments */
}

@media(max-width: 900px) {
  /* Major layout shifts */
}
```

---

## Accessibility Standards

### Color Contrast
- **WCAG AAA**: 7:1 or higher
- Main text on white: 21:1 (exceeds AAA)
- Secondary text on white: 11:1 (exceeds AA)
- Links: Meet or exceed 4.5:1

### Typography
- Minimum font size: 12px (captions)
- Body text: 16px ideal, 14px minimum
- Line height: 1.5 minimum for readability
- Letter spacing: Not compressed

### Interactive Elements
- Touch targets: 44x44px minimum
- Focus indicators: Visible on all elements
- Color not sole means of communication
- Sufficient contrast in hover/focus states

### Motion
- No auto-playing animations
- Respects `prefers-reduced-motion`
- Smooth transitions (0.2s - 0.3s)

---

## CSS Custom Properties Summary

```css
:root {
  /* Colors */
  --bg-page: #fafaf9;
  --accent: #44403c;
  --text-main: #292524;
  --text-dim: #78716b;
  --border-color: #e7e5e4;
  
  /* Spacing */
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --col-gap: 2rem;
  
  /* Typography */
  --font-stack: system-ui, -apple-system, ...;
  
  /* Layout */
  --max-width: 1280px;
}
```

All properties are centralized for easy global updates!

---

## Brand Characteristics

- **Modern**: Current design trends
- **Neutral**: Sophisticated color palette
- **Professional**: Academic/research appropriate
- **Warm**: Inviting and approachable
- **Accessible**: High contrast, clear hierarchy
- **Performant**: Optimized, simple CSS
- **Responsive**: Works on all devices
- **Maintainable**: Well-organized, documented