> ## 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.

# Guidelines Tab

> Document your design principles, patterns, and standards using Markdown

The Guidelines tab is where you document your design principles, patterns, and standards using Markdown.

## What to Include

### Design Principles

```markdown theme={null}
## Principles
- **Clarity**: Components should be self-explanatory
- **Consistency**: Use the same patterns across the app
- **Efficiency**: Optimize for performance and reuse
```

### Color Palette

```markdown theme={null}
## Colors
- Primary: #0066FF
- Secondary: #6B7280
- Success: #10B981
- Error: #EF4444
- Background: #FFFFFF / #0B0D0E
- Text: #1F2937 / #F9FAFB
```

### Typography

```markdown theme={null}
## 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

```markdown theme={null}
## Spacing
- Base Unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Card Padding: 16px
- Button Padding: 12px 24px
```

### Component Usage

```markdown theme={null}
## 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