# Clavitor Landing Page — MISSING COMPONENTS REPORT

## Status
Landing page created at `index.html` using ONLY `styleguide.css` classes.

## Missing from Design System (need inline styles or new components)

### 1. Navigation Components
- `.nav` — no navigation container
- `.nav-link` — for text links in nav
- `.nav-spacer` or `.ml-auto` — for pushing items right (currently using `style="margin-left: auto;"`)

### 2. Layout Utilities
- `.text-center` — text-align center
- `.mx-auto` — margin-left/right auto for centering
- `.mt-4`, `.mt-6`, `.mt-8` — margin-top utilities (4=16px, 6=24px, 8=32px)
- `.mb-4` — margin-bottom utilities

### 3. Feature Card Icon Size
- `.black-square-sm` — 48×48px variant for feature icons (currently inline styled)

### 4. Footer Components
- `.footer` — with border-top treatment
- `.footer-link` — specific footer text styling
- `.justify-between` — justify-content: space-between

### 5. Typography Variants
- `.lead` or `.text-lg` — 18px subheading for hero (currently inline styled)

### 6. Responsive Classes
- Mobile breakpoints for grid layouts
- Stack behavior for `.grid-2-equal` on small screens

## What's IN the CSS (working)

✓ Logo lockup (exact final spec)  
✓ Section patterns (vault1984 style)  
✓ Buttons (all variants + sizes)  
✓ Feature cards (light + dark)  
✓ Stats grid  
✓ Pills/pill rows  
✓ Typography scale  
✓ Color tokens  
✓ Container/max-width  

## Recommendation

Add these utility classes to `styleguide.css`:

```css
/* Utilities */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.justify-between { justify-content: space-between; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.text-lg { font-size: 18px; }

/* Component variants */
.black-square-sm { width: 48px; height: 48px; }
.nav-link { font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.footer { border-top: 1px solid var(--border-default); padding: 48px 0; }
```