# INVEETAIRE Design System

Version 1.0

This document defines the visual language of the INVEETAIRE platform.

---

# Brand Personality

INVEETAIRE is not a generic SaaS dashboard.

It is a premium wedding experience platform.

Every interface should feel:

- Elegant
- Calm
- Minimal
- Premium
- Editorial
- Timeless

Avoid interfaces that resemble:

- accounting software
- project management tools
- developer dashboards

---

# Design Principles

## Elegant Before Decorative

Keep the interface clean.

Avoid excessive decoration.

---

## White Space

Generous spacing improves perceived quality.

Do not compress layouts.

---

## Typography

Headings

Strong

Elegant

Readable

Body

Comfortable

Neutral

Muted

---

## Color Hierarchy

Brand

↓

Primary Action

↓

Content

↓

Secondary Content

↓

Muted Text

↓

Border

↓

Background

Every page should follow the same hierarchy.

---

# Components

## Navigation

Should use Charcoal as the primary identity.

Active states should be subtle.

Avoid bright blue navigation.

---

## Cards

Cards should feel lightweight.

Use:

- subtle borders
- soft shadows
- generous spacing

Avoid heavy shadows.

---

## Buttons

Primary

Charcoal

Secondary

White with charcoal border

Ghost

Minimal

Danger

Red

Premium

Rose Gold accent when appropriate

---

## Icons

Icons should support content.

Avoid using multiple accent colors on one screen.

---

## Tables

Readable.

Comfortable spacing.

Minimal borders.

Avoid dense enterprise-style tables.

---

## Forms

Focus on clarity.

Labels should remain highly readable.

Inputs should have clear focus states.

---

## Empty States

Friendly.

Elegant.

Encouraging.

Never leave blank pages.

---

## Badges

Use badges sparingly.

Success

Warning

Danger

Info

Premium

Each badge should communicate one clear meaning.

---

# Accessibility

Maintain sufficient contrast.

Avoid:

- light gray on white
- white on ivory
- invisible borders

Readability always comes before aesthetics.

---

# Responsiveness

Design mobile-first.

Layouts should gracefully scale to:

- Desktop
- Tablet
- Mobile

---

# Consistency

Every new module should follow this document.

Modules include:

- Couple Portal
- Super Admin Portal
- Crew Portal
- Public Invitation Experience

The visual language should remain consistent across the entire platform.

---

# Source of Truth

All branding decisions must reference:

/assets/branding/

Specifically:

- logo/
- favicon/
- brand-colors.md
- design-system.md

Do not introduce new brand colors without updating this documentation.

This directory is the official source of truth for INVEETAIRE branding.