clavitor/design-system/MISSING.md

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:

/* 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; }