Documentation Index
Fetch the complete documentation index at: https://docs.vibeflow.ai/llms.txt
Use this file to discover all available pages before exploring further.
The Guidelines tab is where you document your design principles, patterns, and standards using Markdown.
What to Include
Design Principles
## Principles
- **Clarity**: Components should be self-explanatory
- **Consistency**: Use the same patterns across the app
- **Efficiency**: Optimize for performance and reuse
Color Palette
## Colors
- Primary: #0066FF
- Secondary: #6B7280
- Success: #10B981
- Error: #EF4444
- Background: #FFFFFF / #0B0D0E
- Text: #1F2937 / #F9FAFB
Typography
## Typography
- Font Family: Inter, system-ui
- Font Scales: 12px, 14px, 16px, 18px, 24px, 32px, 48px
- Line Heights: 1.2 (headings), 1.5 (body)
- Font Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
Spacing & Layout
## Spacing
- Base Unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Card Padding: 16px
- Button Padding: 12px 24px
Component Usage
## Component Guidelines
### Buttons
- Always provide hover and active states
- Use loading spinners for async actions
- Disabled state should have 50% opacity
### Cards
- Default elevation: shadow-lg
- Border radius: 12px
- Padding: 16px
How Vibe Agent Uses Guidelines
When you reference a design system in your project, Vibe Agent reads these guidelines to:
- Generate UI components that match your design language
- Apply consistent colors, typography, and spacing
- Follow your established patterns and principles
- Maintain visual coherence across screens
