Guidelines Tab - VibeFlow

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