Meta

# Meta Design System

## Visual Theme & Atmosphere
Bold, social, immersive. Binary light/dark surfaces create dramatic contrast. Photography-first layouts make content the hero. Meta Blue (#0081FB) drives action. The design feels energetic and forward-looking, reflecting the company's metaverse ambitions.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #0081FB | CTAs, links, active states |
| Background | #000000 | Main canvas (dark mode) |
| Surface | #1C1C1E | Cards, panels |
| Text | #FFFFFF | Primary text |
| Muted | #A8A8A8 | Secondary text |
| Border | #333333 | Subtle dividers |

## Typography Rules
- **Heading Font**: Optimistic Display, system-ui
- **Body Font**: Optimistic Text, system-ui
- **Base Size**: 16px
- **H1**: 2.5rem / weight 700
- **Body**: 1rem / weight 400 / line-height 1.5

## Component Stylings
- **Buttons**: Rounded 8px, blue primary, 44px touch target
- **Cards**: Dark surface, 12px radius, no visible border
- **Photos**: Full-bleed or grid, rounded corners
- **Navigation**: Top bar, logo center or left

## Layout Principles
- Photography-first compositions
- Full-bleed hero images
- 8px grid system
- Bold typography over imagery