Add Blueprint Design System landing page

[whd4]

Summary

This PR introduces a complete, self-contained Blueprint Design System landing page showcasing a modern design system with a technical aesthetic. The page demonstrates design tokens, component patterns, and system architecture through an interactive, fully-styled HTML document.

Key Changes

• New file: blueprint-design-system.html - A comprehensive landing page featuring:
  • Fixed navigation with logo, links, and CTA buttons
  • Hero section with animated orbital graphic
  • Bento-style feature grid (4 components) showcasing typography, colors, validation, and grid systems
  • Network topology visualization with animated nodes
  • Testimonials section with 3 client cards
  • Contact form with corner markers and validation styling
  • Responsive footer with links

Notable Implementation Details

• Design Tokens: Comprehensive CSS variables for colors (Forest, Coral, Mint, Gold), typography (Space Grotesk, JetBrains Mono), and borders
• Animations: Smooth orbital animations for hero and topology sections using CSS keyframes
• Responsive Design: Mobile-first approach with breakpoints at 1024px and 768px
• Visual Elements:
  • Mosaic SVG background pattern
  • Hairline borders (1px) throughout for technical aesthetic
  • Corner markers on form using pseudo-elements
  • Status badges with pulsing indicators
  • Code mockups with syntax highlighting
• Accessibility: Semantic HTML structure with proper heading hierarchy and form labels
• No Dependencies: Fully self-contained with no external libraries or frameworks required

The design emphasizes precision, modularity, and a blueprint-inspired technical aesthetic suitable for a design system documentation site.

https://claude.ai/code/session_015RzBg69vyKSHFEJxxBuKV2

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}