registry:theme

Aavya Theme

v1.0.0ga

Aavya light/dark design tokens and global styling.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/theme.json

npx shadcn@latest add https://registry.aavya.com/r/theme.json

Live Preview

Theme preview surface

Card

Muted

Accent

Preview Route

Open /brand-guidelines/colors

Usage Snippet

import Globals from '@/app/globals.css'

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.0
 *
 * Brand DNA: Premium, minimal, calm, technical — "SaaS Infrastructure" aesthetic.
 *
 * Color Hierarchy:
 *   Primary:   Aavya Blue #3AADDD — main actions, focus states, ring
 *   Accent:    Electric Violet #7F5AF0 — secondary accent, highlights
 *   Mint:      Mint Green #2CB67D — success, data flow, safe status
 *
 * "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: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-de