# Aavya — Brand Overview

## Brand Name

Aavya

---

## Brand Summary

Aavya is an enterprise technology company that transforms fragmented business data into connected, intelligent experiences that drive productivity.

Through ontology-first design, autonomous workflows, and enterprise-ready AI agents, Aavya closes the "Coherence Gap" — the disconnect between scattered systems and confident decision-making.

We partner with organizations to operationalize strategy, unify data across teams, and turn complexity into clarity.

Aavya operates globally with locations in the USA, Japan, India, and Singapore.

---

## Audience

Aavya serves enterprise leaders and decision-makers — CTOs, CDOs, CIOs, and operations executives — in organizations where critical data lives across disconnected silos, slowing decisions and stalling momentum.

These are teams looking to:

- Operationalize their data strategy
- Deploy autonomous workflows at scale
- Adopt AI with governance and compliance built in from day one

---

## Personality

Aavya's personality is built on five core voice traits.

### Clarity

Removes the noise so people can see what matters most. Explains complex ideas in simple, accessible terms.

### Connection

Acts as a true partner, not just another service provider. The best work happens when everyone moves forward as one team.

### Momentum

Always moving toward a goal. Turns ideas into real action that helps businesses grow.

### Honesty

Tells the truth because it's the right thing to do — especially when building work that needs to last.

### Excitement

Genuinely energized about the future and helping partners feel that same forward-looking optimism.

---

# Aavya Tone of Voice

## How We Sound

Aavya's voice is clear, direct, and human. We build tools for builders — so we write for builders. That means no corporate speak, no unnecessary complexity, and no pretending we're anything other than what we are.

---

## Voice Traits

Five qualities that define how Aavya communicates across every touchpoint.

### 1. Clarity

We say what we mean. Every sentence earns its place — no filler, no fluff.

- **Do:** Connect your tools in three steps.
- **Don't:** Leverage our platform's extensible integration architecture to facilitate seamless third-party connectivity.

### 2. Connection

We talk with people, not at them. We're on the same side.

- **Do:** We built this so you can focus on what matters.
- **Don't:** The system has been designed to optimise user workflows.

### 3. Momentum

We move things forward. Active voice, action verbs, no passive hesitation.

- **Do:** Start automating today.
- **Don't:** Automation capabilities are available for utilisation at your convenience.

### 4. Honesty

We're transparent about what we are — and what we're still building.

- **Do:** We're in early access. Some features are still being built.
- **Don't:** Our comprehensive suite of enterprise solutions covers all your automation needs.

### 5. Excitement

We're genuinely enthusiastic — without exclamation marks and hyperbole.

- **Do:** Your first workflow just ran. That's real progress.
- **Don't:** Congratulations!!! You've unlocked AMAZING automation power!!!

---

## Writing Principles

Five rules to apply every time you write for Aavya.

### 01. Be Clear and Short

Keep sentences under 25 words. One idea per sentence. If a sentence needs a second comma, split it into two.

> **Tip:** Read it aloud. If you pause for breath before finishing, it's too long.

### 02. Talk Like a Friend

Use "we", "you", and "us". Write as if explaining something to a smart colleague — not filing a report.

> **Tip:** Replace "the user" with "you". Replace "the system" with "we".

### 03. Use Easy Words

If a simpler word exists, use it. Technical concepts should be explained on first use. Our audience is smart — not jargon-fluent.

> **Tip:** Ask: would a new hire on day one understand this? If not, simplify.

### 04. Stay Positive

Lead with what's possible. Frame challenges as opportunities. Avoid "don't", "can't", "won't" where a positive alternative works.

> **Tip:** Instead of "don't forget to save", try "save your work to keep it".

### 05. Show the Way Ahead

Every piece of copy should leave the reader knowing what to do next. Use active verbs. End with action.

> **Tip:** End paragraphs and sections with a next step, not a summary.

---

## Word Substitutions

Replace these words on sight. They make copy longer without making it better.

| Avoid | Use Instead | Why |
|---|---|---|
| Approximately | About | Shorter, no formality needed |
| Transformation | Change or Growth | Concrete and direct |
| Innovation | New ideas | Overused and vague |
| Leverage | Use | "Use" says the same thing in one syllable |
| Utilise | Use | Always prefer the shorter word |
| Facilitate | Help | Warmer and clearer |
| Implement | Build or Set up | More specific and actionable |
| Solution | Tool or Answer | "Solution" is a filler word |
| Best-in-class | Leading or Top | Specific claims beat empty superlatives |
| Paradigm shift | Big change | Plain language lands harder |
| Scalable | Grows with you | Explains the benefit, not the feature |

---

## Quick Reference

The whole guide in five lines.

1. Short sentences. One idea at a time. Under 25 words.
2. We / you / us — always. Never passive, never distant.
3. Plain words beat technical words. Explain on first use.
4. Lead with what's possible. Stay positive.
5. End every section with a clear next step.

---

# Aavya Logo Specifications

> **Base URL:** `https://brand.aavya.com`
> All asset paths below are relative to the base URL and publicly accessible.

---

## Logo Variants

### 1. Primary Logo — Light Background
Use this as the default logo on white or light-coloured backgrounds.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-logo-primary-light-rgb.svg` |
| PNG 512w | `/brand/logo/png/aavya-logo-primary-light-rgb-512w.png` |
| PNG 1024w | `/brand/logo/png/aavya-logo-primary-light-rgb-1024w.png` |
| PNG 2048w | `/brand/logo/png/aavya-logo-primary-light-rgb-2048w.png` |

**When to use:** Presentations, documents, website headers on light backgrounds, marketing materials with white/light fill.

---

### 2. Dark Background Logo
Use on dark, black, or deep-coloured backgrounds where the primary logo would not have sufficient contrast.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-logo-dark-rgb.svg` |
| PNG 512w | `/brand/logo/png/aavya-logo-dark-rgb-512w.png` |
| PNG 1024w | `/brand/logo/png/aavya-logo-dark-rgb-1024w.png` |
| PNG 2048w | `/brand/logo/png/aavya-logo-dark-rgb-2048w.png` |

**When to use:** Dark-mode UIs, dark presentation slides, dark hero sections, email headers on dark backgrounds.

---

### 3. Monochrome — Dark (for light backgrounds)
Single-colour version for contexts where colour reproduction is not possible or appropriate.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-logo-mono-dark.svg` |

**When to use:** Black-and-white print, embossing, engraving, single-colour merchandise.

---

### 4. Monochrome — Light (for dark backgrounds)
Single-colour reversed version.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-logo-mono-light.svg` |

**When to use:** White-on-dark print, reversed apparel, single-colour dark-background applications.

---

### 5. Wordmark — Light Background
Logotype (text only) without the logomark symbol.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-wordmark-primary-light-rgb.svg` |
| PNG 512w | `/brand/logo/png/aavya-wordmark-primary-light-rgb-512w.png` |
| PNG 1024w | `/brand/logo/png/aavya-wordmark-primary-light-rgb-1024w.png` |
| PNG 2048w | `/brand/logo/png/aavya-wordmark-primary-light-rgb-2048w.png` |

**When to use:** Contexts where the logomark has already appeared nearby, co-branding lockups, narrow horizontal spaces.

---

### 6. Wordmark — Dark Background

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-wordmark-dark-rgb.svg` |
| PNG 512w | `/brand/logo/png/aavya-wordmark-dark-rgb-512w.png` |
| PNG 1024w | `/brand/logo/png/aavya-wordmark-dark-rgb-1024w.png` |
| PNG 2048w | `/brand/logo/png/aavya-wordmark-dark-rgb-2048w.png` |

**When to use:** Same as Wordmark Light but on dark backgrounds.

---

### 7. Wordmark — Monochrome Dark / Light

| Variant | SVG URL |
|---------|---------|
| Mono Dark (light bg) | `/brand/logo/svg/aavya-wordmark-mono-dark.svg` |
| Mono Light (dark bg) | `/brand/logo/svg/aavya-wordmark-mono-light.svg` |

---

### 8. Logomark (Symbol Only)
The standalone Aavya symbol without the wordmark.

| Format | URL |
|--------|-----|
| SVG | `/brand/logo/svg/aavya-logomark-primary-rgb.svg` |
| PNG 64px | `/brand/logo/png/aavya-logomark-primary-rgb-64.png` |
| PNG 128px | `/brand/logo/png/aavya-logomark-primary-rgb-128.png` |
| PNG 256px | `/brand/logo/png/aavya-logomark-primary-rgb-256.png` |
| PNG 512px | `/brand/logo/png/aavya-logomark-primary-rgb-512.png` |

**When to use:** App icons, favicons, social media profile pictures, square-format placements, contexts where the full logo has already been established.

---

## App Icons & Favicons

| File | URL |
|------|-----|
| Favicon ICO | `/brand/logo/icons/favicon.ico` |
| Favicon 16px | `/brand/logo/icons/favicon-16x16.png` |
| Favicon 32px | `/brand/logo/icons/favicon-32x32.png` |
| Favicon 48px | `/brand/logo/icons/favicon-48x48.png` |
| Apple Touch Icon 180px | `/brand/logo/icons/apple-touch-icon-180x180.png` |
| PWA Icon 192px | `/brand/logo/icons/icon-192x192.png` |
| PWA Icon 512px | `/brand/logo/icons/icon-512x512.png` |

---

## Download Packs

| Pack | URL |
|------|-----|
| Full asset pack (SVG + PNG) | `/brand/logo/aavya-logo-assets.zip` |
| SVG pack only | `/brand/logo/svg/aavya-logo-svg-pack.zip` |
| PNG pack only | `/brand/logo/png/aavya-logo-png-pack.zip` |

---

## Usage Rules

### Clear Space
Maintain a minimum clear space equal to **1× the height of the logomark** on all sides. No other elements, text, or graphics should enter this zone.

### Minimum Sizes
- **Digital:** 24px height for the full logo; 16px for the logomark only
- **Print:** 8mm height for the full logo

### Colour on Backgrounds
| Background | Correct logo |
|------------|-------------|
| White / light grey | Primary Logo — Light Background |
| Dark / black / deep colour | Dark Background Logo |
| Single colour (black print) | Monochrome Dark |
| Single colour (white reversed) | Monochrome Light |
| Photography / complex image | Use the variant with the highest contrast; add a 50% dark or light overlay if needed |

### Prohibited Usage
- Do not stretch, skew, or rotate the logo
- Do not apply drop shadows or outer glows
- Do not recolour — use only approved variants
- Do not place the logo on a clashing or low-contrast background without an approved overlay
- Do not use the wordmark at sizes smaller than 24px height

---

## Choosing the Right Logo — Quick Reference

```
Need a logo for a light background?
  → Use Primary Logo — Light Background (SVG preferred; PNG for raster contexts)

Need a logo for a dark background?
  → Use Dark Background Logo

Building a web/app UI?
  → SVG for scalable display; use logomark-only for icons ≤ 32px

Need print files?
  → SVG (vector, no PDF required); monochrome variants for single-colour print

Need an app icon or favicon?
  → Use App Icons & Favicons section above

Only have room for the symbol (square, circular crop)?
  → Use the Logomark (Symbol Only)
```

---

# Aavya Design Tokens — Colors

Our color system is built around four brand colors and a token-based theme structure that supports both light and dark modes. Use tokens by name — never hardcode hex values in components.

---

## Brand Colors

The four core colors that define the Aavya identity.

| Token | Hex | Role |
|---|---|---|
| `--primary` | `#4F46E5` | Indigo. Primary actions, buttons, CTAs, and links. |
| `--aavya` | `#3AADDD` | Aavya Cyan. Accent color — focus rings, links, eyebrow text. |
| `--navy` | `#1E2338` | Deep Navy. Logo mark, image backgrounds, dark anchors. |
| `--mint` | `#2CB67D` | Mint Green. Semantic success states only — not a brand accent. |

> **Note:** `--violet` remains as a back-compat alias pointing to `#4F46E5`. Do not use in new code. Electric Violet (`#7F5AF0`) is retired.

---

## Light Mode

The default theme. Clean, bright, and readable.

| Token | Hex | Purpose |
|---|---|---|
| `--background` | `#FAFBFC` | Page background — near-white cool surface |
| `--foreground` | `#1E2338` | Primary text — deep navy for maximum contrast |
| `--card` | `#FFFFFF` | Card and floating panel backgrounds |
| `--card-foreground` | `#1E2338` | Text on cards |
| `--popover` | `#FFFFFF` | Popover and dropdown backgrounds |
| `--popover-foreground` | `#1E2338` | Text on popovers |
| `--primary` | `#4F46E5` | Primary actions, buttons, CTAs |
| `--primary-foreground` | `#FFFFFF` | Text on primary backgrounds |
| `--secondary` | `#EEF0F4` | Subtle neutral surface |
| `--secondary-foreground` | `#1E2338` | Text on secondary surfaces |
| `--muted` | `#F1F3F6` | Muted backgrounds for low-emphasis areas |
| `--muted-foreground` | `#5B6275` | Secondary text and labels |
| `--accent` | `#E8EBF0` | Subtle accent surface |
| `--accent-foreground` | `#1E2338` | Text on accent surfaces |
| `--border` | `#E2E5EB` | Borders and dividers — light cool grey |
| `--input` | `#E2E5EB` | Input border color |
| `--ring` | `#3AADDD` | Focus rings — Aavya Cyan |
| `--sidebar` | `#F8FBFD` | Sidebar background |
| `--sidebar-primary` | `#4F46E5` | Active nav item color |
| `--sidebar-accent` | `#ECEAFB` | Hover/active state surface in sidebar |
| `--sidebar-accent-foreground` | `#4F46E5` | Text on sidebar accent |

---

## Dark Mode

The navy-anchored theme. Deep, calm, and high-contrast.

| Token | Hex | Purpose |
|---|---|---|
| `--background` | `#14172A` | Navy-anchored dark foundation |
| `--foreground` | `#F4F5F8` | Near-white — slightly cool for comfort on dark |
| `--card` | `#1E2338` | Navy surface for floating panels |
| `--card-foreground` | `#F4F5F8` | Near-white text on dark cards |
| `--popover` | `#1E2338` | Popover and dropdown backgrounds |
| `--popover-foreground` | `#F4F5F8` | Text on popovers |
| `--primary` | `#6366F1` | Indigo-500 — brighter for legibility on dark |
| `--primary-foreground` | `#FFFFFF` | Text on primary backgrounds |
| `--secondary` | `#252A42` | Elevated surface — one step above background |
| `--secondary-foreground` | `#F4F5F8` | Near-white text on secondary surfaces |
| `--muted` | `#1A1F33` | Recessed surface — one step below background |
| `--muted-foreground` | `#9BA1B5` | Mid-tone for secondary text |
| `--accent` | `#2A2F4A` | Subtle accent surface |
| `--accent-foreground` | `#F4F5F8` | Text on accent surfaces |
| `--border` | `#2A2F4A` | Matches accent surface for subtle borders |
| `--input` | `#2A2F4A` | Input border color |
| `--ring` | `#3AADDD` | Focus rings — Aavya Cyan (consistent across modes) |
| `--sidebar` | `#242736` | Slightly lighter than background for separation |
| `--sidebar-primary` | `#6366F1` | Active nav item color |
| `--sidebar-accent` | `#322F66` | Hover/active state surface in sidebar |
| `--sidebar-accent-foreground` | `#C7C5FA` | Indigo-200 text on sidebar accent |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Color Tokens — Brand Colors */
--primary: #4F46E5;
--aavya: #3AADDD;
--navy: #1E2338;
--mint: #2CB67D;
--violet: #4F46E5; /* back-compat alias — do not use in new code */

/* Light Mode */
--background: #FAFBFC;
--foreground: #1E2338;
--card: #FFFFFF;
--card-foreground: #1E2338;
--popover: #FFFFFF;
--popover-foreground: #1E2338;
--primary: #4F46E5;
--primary-foreground: #FFFFFF;
--secondary: #EEF0F4;
--secondary-foreground: #1E2338;
--muted: #F1F3F6;
--muted-foreground: #5B6275;
--accent: #E8EBF0;
--accent-foreground: #1E2338;
--border: #E2E5EB;
--input: #E2E5EB;
--ring: #3AADDD;
--sidebar: #F8FBFD;
--sidebar-primary: #4F46E5;
--sidebar-accent: #ECEAFB;
--sidebar-accent-foreground: #4F46E5;

/* Dark Mode */
--background: #14172A;
--foreground: #F4F5F8;
--card: #1E2338;
--card-foreground: #F4F5F8;
--popover: #1E2338;
--popover-foreground: #F4F5F8;
--primary: #6366F1;
--primary-foreground: #FFFFFF;
--secondary: #252A42;
--secondary-foreground: #F4F5F8;
--muted: #1A1F33;
--muted-foreground: #9BA1B5;
--accent: #2A2F4A;
--accent-foreground: #F4F5F8;
--border: #2A2F4A;
--input: #2A2F4A;
--ring: #3AADDD;
--sidebar: #242736;
--sidebar-primary: #6366F1;
--sidebar-accent: #322F66;
--sidebar-accent-foreground: #C7C5FA;
```

---

## Usage Rules

1. **Use tokens, not hex values.** Reference `var(--primary)` instead of `#4F46E5` in components.
2. **Foreground pairs with background.** Always pair `--card` with `--card-foreground`, `--primary` with `--primary-foreground`, and so on.
3. **`--aavya` is the brand accent.** Use it for focus rings, links, and eyebrow text. `--primary` is for actions.
4. **Mint signals success only.** Do not use `bg-mint` or `text-mint` in non-success UI.
5. **Test in both modes.** Every component should look right in light and dark mode before it ships.

---

# Aavya Design Tokens — Typography

Our type system uses two fonts: Inter for everything human-facing, JetBrains Mono for everything machine-facing. Headings run tight (-2% letter-spacing) for a sharper, more confident feel.

---

## Font Families

| Font | Token | Used For |
|---|---|---|
| **Inter** | `var(--font-sans)` | Headings, UI, navigation, body copy |
| **JetBrains Mono** | `var(--font-mono)` | Code, data, technical labels |

---

## Heading Scale

Inter Bold and Extra Bold with tight tracking (`-0.02em`). Use these for hierarchy — Display for hero moments, H1–H5 for structured content.

| Level | Size | Weight | Tracking |
|---|---|---|---|
| Display | `3.75rem` | 800 | `-0.02em` |
| H1 | `2.25rem` | 700 | `-0.02em` |
| H2 | `1.875rem` | 700 | `-0.02em` |
| H3 | `1.5rem` | 600 | `-0.02em` |
| H4 | `1.25rem` | 600 | `-0.02em` |
| H5 | `1.125rem` | 600 | `-0.02em` |

---

## Body Scale

Inter Regular with comfortable line heights for readability. Use Body as the default — step up or down based on density.

| Level | Size | Weight | Leading |
|---|---|---|---|
| Body Large | `1.125rem` | 400 | 1.75 |
| Body | `1rem` | 400 | 1.625 |
| Body Small | `0.875rem` | 400 | 1.5 |
| Caption | `0.75rem` | 500 | 1.5 |

---

## Monospace Scale

JetBrains Mono for code blocks and data labels. Keep it small — mono should feel technical, not loud.

| Level | Size | Weight | Leading |
|---|---|---|---|
| Code Block | `0.875rem` | 400 | 1.7 |
| Data Label | `0.75rem` | 500 | 1.5 |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Typography Tokens */

/* Font Families */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Headings */
--font-size-display: 3.75rem;
--font-size-h1: 2.25rem;
--font-size-h2: 1.875rem;
--font-size-h3: 1.5rem;
--font-size-h4: 1.25rem;
--font-size-h5: 1.125rem;

/* Body */
--font-size-body-lg: 1.125rem;
--font-size-body: 1rem;
--font-size-body-sm: 0.875rem;
--font-size-caption: 0.75rem;

/* Monospace */
--font-size-code: 0.875rem;
--font-size-data: 0.75rem;
```

---

## Usage Rules

1. **One Display per page.** Display is for hero moments — landing pages, section openers, marketing surfaces. Don't stack them.
2. **Headings stay tight.** Every heading uses `-0.02em` tracking. No exceptions.
3. **Body is the default.** Start with Body. Only step up or down when the content density demands it.
4. **Mono is for machines.** Code, terminal output, API responses, data labels. Never use mono for body copy or headings.
5. **Use tokens, not raw values.** Reference `var(--font-size-h2)` instead of `1.875rem` so updates flow through everywhere at once.

---

# Aavya Design Tokens — Spacing

Our spacing system is built on a 4px base unit. Use generous negative space — elements should float, not crowd. When in doubt, go bigger.

---

## Spacing Scale

Based on a 4px grid. Prefer larger values for padding and gaps to maintain the premium, airy feel.

| Token | rem | px |
|---|---|---|
| `spacing-0.5` | `0.125rem` | 2px |
| `spacing-1` | `0.25rem` | 4px |
| `spacing-1.5` | `0.375rem` | 6px |
| `spacing-2` | `0.5rem` | 8px |
| `spacing-3` | `0.75rem` | 12px |
| `spacing-4` | `1rem` | 16px |
| `spacing-5` | `1.25rem` | 20px |
| `spacing-6` | `1.5rem` | 24px |
| `spacing-8` | `2rem` | 32px |
| `spacing-10` | `2.5rem` | 40px |
| `spacing-12` | `3rem` | 48px |
| `spacing-16` | `4rem` | 64px |
| `spacing-20` | `5rem` | 80px |
| `spacing-24` | `6rem` | 96px |

---

## Usage Guidelines

Recommended spacing values for common use cases.

| Use Case | Recommended Range |
|---|---|
| Component internal padding (cards, buttons, inputs) | `spacing-3` to `spacing-4` |
| Between sibling components | `spacing-4` to `spacing-6` |
| Between major sections | `spacing-8` to `spacing-12` |
| Page margins and content containers | `spacing-6` to `spacing-16` |

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Spacing Tokens */
--spacing-0-5: 0.125rem;  /* 2px */
--spacing-1: 0.25rem;     /* 4px */
--spacing-1-5: 0.375rem;  /* 6px */
--spacing-2: 0.5rem;      /* 8px */
--spacing-3: 0.75rem;     /* 12px */
--spacing-4: 1rem;        /* 16px */
--spacing-5: 1.25rem;     /* 20px */
--spacing-6: 1.5rem;      /* 24px */
--spacing-8: 2rem;        /* 32px */
--spacing-10: 2.5rem;     /* 40px */
--spacing-12: 3rem;       /* 48px */
--spacing-16: 4rem;       /* 64px */
--spacing-20: 5rem;       /* 80px */
--spacing-24: 6rem;       /* 96px */
```

---

## Usage Rules

1. **Stay on the scale.** Only use values from the token set. No one-off `13px` margins.
2. **When in doubt, go bigger.** Aavya breathes. Tight layouts feel cheap — generous space feels premium.
3. **Match the use case to the range.** Internal padding stays small. Section spacing stays large. Don't blur the layers.
4. **Be consistent within a component.** If a card uses `spacing-4` for padding, every card uses `spacing-4`.
5. **Use tokens, not raw values.** Reference `var(--spacing-6)` instead of `1.5rem` so the system stays unified.

---

# Aavya Design Tokens — Shadows

Our elevation system uses soft, diffused shadows in light mode and glowing accents in dark mode. The goal is the same in both: make elements feel like they're floating, not stamped onto the page.

---

## Light Mode Shadows

Drop shadows using deep navy (`#1E2338`) at 5–10% opacity. Creates the premium "floating" effect.

| Token | Use Case | Value |
|---|---|---|
| `shadow-sm` | Subtle elevation for small interactive elements | `0 1px 2px rgba(11, 6, 32, 0.05)` |
| `shadow-md` | Default floating panel shadow | `0 4px 6px -1px rgba(11, 6, 32, 0.07), 0 2px 4px -2px rgba(11, 6, 32, 0.05)` |
| `shadow-lg` | Elevated elements like dropdowns and popovers | `0 10px 15px -3px rgba(11, 6, 32, 0.08), 0 4px 6px -4px rgba(11, 6, 32, 0.05)` |
| `shadow-xl` | Modals, dialogs, and top-level floating surfaces | `0 20px 25px -5px rgba(11, 6, 32, 0.10), 0 8px 10px -6px rgba(11, 6, 32, 0.05)` |

---

## Dark Mode Glows

Instead of shadows, use subtle outer glows to separate dark objects from the dark background.

| Token | Use Case | Value |
|---|---|---|
| `glow-indigo` | Default elevation in dark mode — separates surfaces from the background | `0 0 20px rgba(99, 102, 241, 0.3)` |
| `glow-mint` | Success states and data flow indicators | `0 0 20px rgba(44, 182, 125, 0.2)` |

---

## Glassmorphism (Dark Mode)

Semi-transparent layers with background blur for depth. Use sparingly — for hero panels, floating navigation, or modal overlays.

**Glass Panel**

```css
background: rgba(30, 35, 56, 0.5);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.1);
```

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Shadow Tokens */

/* Light Mode Shadows */
--shadow-sm: 0 1px 2px rgba(11, 6, 32, 0.05);
--shadow-md: 0 4px 6px -1px rgba(11, 6, 32, 0.07), 0 2px 4px -2px rgba(11, 6, 32, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(11, 6, 32, 0.08), 0 4px 6px -4px rgba(11, 6, 32, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(11, 6, 32, 0.10), 0 8px 10px -6px rgba(11, 6, 32, 0.05);

/* Dark Mode Glows */
--glow-indigo: 0 0 20px rgba(99, 102, 241, 0.3);
--glow-mint: 0 0 20px rgba(44, 182, 125, 0.2);

/* Glassmorphism (Dark Mode) */
--glass-bg: rgba(30, 35, 56, 0.5);
--glass-blur: blur(24px);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
```

---

## Usage Rules

1. **Match the shadow to the elevation level.** Small elements get `shadow-sm`. Modals get `shadow-xl`. Don't skip levels.
2. **Shadows in light, glows in dark.** Never use a dark drop shadow on a dark background — it disappears. Switch to `glow-indigo` instead.
3. **One shadow per element.** Stacking shadows muddies the float effect. Pick the right token and stop there.
4. **Glow indigo is the default.** Use `glow-mint` only for success or positive data signals — keep its meaning intentional.
5. **Glass is for hero moments.** Don't blur every surface. Reserve glassmorphism for floating navigation, hero panels, and overlay modals.

---

# Aavya Design Tokens — Border Radius

Soft-edged radii are a core part of the Aavya aesthetic. Sharp corners are strictly avoided — every element uses rounded forms. Think circles, hexagons, and rounded rectangles. Never squares.

---

## Radius Scale

All radii derive from the base `--radius` value (`0.825rem`). Use soft, rounded forms consistent with the brand identity.

| Token | Value | Tailwind | Use Case |
|---|---|---|---|
| `radius-sm` | `calc(var(--radius) - 4px)` | `rounded-sm` | Small elements: tags, badges, small buttons |
| `radius-md` | `calc(var(--radius) - 2px)` | `rounded-md` | Default radius: inputs, standard buttons, menu items |
| `radius-lg` | `var(--radius)` | `rounded-lg` | Cards, panels, containers — the primary brand radius |
| `radius-xl` | `calc(var(--radius) + 4px)` | `rounded-xl` | Large containers, modals, hero sections |
| `radius-full` | `9999px` | `rounded-full` | Pills, avatars, circular elements |

---

## Usage Examples

How radius tokens map to common UI elements.

| Element | Token |
|---|---|
| Button | `rounded-md` |
| Card | `rounded-lg` |
| Pill / Status tag | `rounded-full` |
| Input | `rounded-md` |
| Modal | `rounded-xl` |
| Avatar | `rounded-full` |

---

## Sharp Corners — Prohibited

Per brand guidelines, sharp corners (`border-radius: 0`) are strictly avoided. Every surface, button, input, and container should carry a radius. If you find yourself reaching for a square corner, step up to `radius-sm` instead.

---

## CSS Reference

Drop these into your root stylesheet.

```css
/* Aavya Border Radius Tokens */
--radius: 0.825rem;                      /* Base */
--radius-sm: calc(var(--radius) - 4px); /* ~0.575rem */
--radius-md: calc(var(--radius) - 2px); /* ~0.7rem   */
--radius-lg: var(--radius);              /* 0.825rem  */
--radius-xl: calc(var(--radius) + 4px); /* ~1.075rem */
--radius-full: 9999px;
```

---

## Usage Rules

1. **No sharp corners. Ever.** Every element gets a radius. The smallest valid choice is `radius-sm`.
2. **`radius-lg` is the brand default.** When in doubt, reach for it — cards, panels, and most containers should land here.
3. **Match radius to scale.** Small elements get small radii. Large containers get large radii. A pill on a card never looks bigger than the card itself.
4. **Pills for status, avatars for people.** `radius-full` has a meaning — use it for status tags, avatars, and circular indicators. Don't apply it to rectangular content.
5. **Use tokens, not raw values.** Reference `var(--radius-lg)` instead of `0.825rem` so the system stays unified.