BeaconShield Labs
Component Library & Design System
Brand Colors
Beacon Blue
#0A4BFF
Shield Navy
#0A1A2F
Compliance Gold
#FFD700
Silver
#C0C0C0
Typography
Heading 1 - Montserrat Bold
font-size: 3rem (48px) • font-weight: 700
Heading 2 - Montserrat Bold
font-size: 2.25rem (36px) • font-weight: 700
Heading 3 - Montserrat Bold
font-size: 1.875rem (30px) • font-weight: 700
Body Large - Montserrat Regular
font-size: 1.125rem (18px) • font-weight: 400
Body Regular - Montserrat Regular
font-size: 1rem (16px) • font-weight: 400
font-size: 1rem (16px) • font-weight: 600
Card Components
Service Cards
AI Red Teaming
Adversarial prompt injection, jailbreak attempts, manipulation detection.
Learn More →Industry Cards
Federal & Defense
Critical Infrastructure
Financial Services
Pricing Cards
Enterprise
- Full AI safety audit
- Compliance certification
- Priority support
Section Components
Section Header
Section Title
This is a subtitle that provides context for the section below.
CTA Block
Ready to Secure Your AI?
Let's strengthen your LLMs, RAG systems, and AI infrastructure.
Schedule a Consultation →Form Components
Component Usage
All components are available as reusable React components in src/components/:
- Buttons:
src/components/Button.tsx - Cards:
src/components/Cards.tsx - Sections:
src/components/Section.tsx - Forms:
src/components/Form.tsx
Refer to COMPONENT-LIBRARY-COMPLETE.md for complete documentation and usage examples.