registry:theme

Aavya Theme

v1.0.0ga

Aavya light/dark design tokens and global styling.

Registry Endpoint

npx shadcn@latest add @aavya/theme

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/theme.json

Live Preview

Theme preview surface

Card

Muted

Accent

Preview Route

Open /brand-guidelines/colors

Changelog

v1.0.0April 2026

Indigo reconciliation (brand v4.1): --primary collapses #6862e4 and #7F5AF0 into a single #4F46E5.
Cyan retained as the accent (focus rings, logo, eyebrow text); mint demoted to semantic success only.

Usage Snippet

import Globals from '@/app/globals'

export default function Example() {
  return (
    <div className="p-6">
      <Globals />
    </div>
  )
}

Source Preview

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

/*
 * Aavya Brand Portal — Design Tokens
 * Based on Aavya Visual Design & Brand Guidelines v4.1 (April 2026 reconciliation)
 *
 * Brand DNA: Premium, minimal, calm, technical — "SaaS Infrastructure" aesthetic.
 *
 * Color Hierarchy:
 *   Primary:   Indigo #4F46E5 — main actions, buttons, CTAs
 *   Accent:    Aavya Cyan #3AADDD — links, eyebrow text, focus rings, logo accent
 *   Anchor:    Deep Navy #1E2338 — logo mark, image backgrounds
 *   Success:   Mint #2CB67D — mainly success; sparing supporting-accent use OK (e.g. gradients)
 *
 * "No warm colors" rule applies to branding & imagery only.
 * UI components (destructive buttons, error states, etc.) use standard colors.
 *
 * Light Mode (default): Documentation, diagrams, readable content.
 * Dark Mode: Cinematic, immersive, high-tech branding.
 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: v