Aavya Theme
Aavya light/dark design tokens and global styling.
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
Theme preview surface
Status
- 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.
--background
#FAFBFC / #14172A
--foreground
#1E2338 / #F4F5F8
--card
#FFFFFF / #1E2338
--card-foreground
#1E2338 / #F4F5F8
--popover
#FFFFFF / #1E2338
--popover-foreground
#1E2338 / #F4F5F8
--primary
#4F46E5 / #6366F1
--primary-foreground
#FFFFFF
--secondary
#EEF0F4 / #252A42
--secondary-foreground
#1E2338 / #F4F5F8
--muted
#F1F3F6 / #1A1F33
--muted-foreground
#5B6275 / #9BA1B5
--accent
#E8EBF0 / #2A2F4A
--accent-foreground
#1E2338 / #F4F5F8
--destructive
#EF4444
--destructive-foreground
#FFFFFF
--success
#2CB67D
--success-foreground
#FFFFFF / #14172A
--border
#E2E5EB / #2A2F4A
--input
#E2E5EB / #2A2F4A
--ring
#3AADDD
--chart-1
#4F46E5 / #6366F1
--chart-2
#2CB67D
--chart-3
#3AADDD
--chart-4
#1E2338 / #C7CAD6
--chart-5
#818CF8 / #A5B4FC
--sidebar
#F8FBFD / #242736
--sidebar-foreground
#1E2338 / #F4F5F8
--sidebar-primary
#4F46E5 / #6366F1
--sidebar-primary-foreground
#FFFFFF
--sidebar-accent
#ECEAFB / #322F66
--sidebar-accent-foreground
#4F46E5 / #C7C5FA
--sidebar-border
#E2E5EB / #2F3245
--sidebar-ring
#3AADDD
--aavya
#3AADDD
--violet
#4F46E5
--mint
#2CB67D
--navy
#1E2338
--code-surface
#14172A
--code-surface-foreground
#F4F5F8
Installing via the CLI merges these into the CSS file your components.json declares. Copy them directly if you are not using shadcn.
:root {
--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;
--destructive: #EF4444;
--destructive-foreground: #FFFFFF;
--success: #2CB67D;
--success-foreground: #FFFFFF;
--border: #E2E5EB;
--input: #E2E5EB;
--ring: #3AADDD;
--chart-1: #4F46E5;
--chart-2: #2CB67D;
--chart-3: #3AADDD;
--chart-4: #1E2338;
--chart-5: #818CF8;
--sidebar: #F8FBFD;
--sidebar-foreground: #1E2338;
--sidebar-primary: #4F46E5;
--sidebar-primary-foreground: #FFFFFF;
--sidebar-accent: #ECEAFB;
--sidebar-accent-foreground: #4F46E5;
--sidebar-border: #E2E5EB;
--sidebar-ring: #3AADDD;
--aavya: #3AADDD;
--violet: #4F46E5;
--mint: #2CB67D;
--navy: #1E2338;
--radius: 0.825rem;
--code-surface: #14172A;
--code-surface-foreground: #F4F5F8;
}
.dark {
--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;
--destructive: #EF4444;
--destructive-foreground: #FFFFFF;
--success: #2CB67D;
--success-foreground: #14172A;
--border: #2A2F4A;
--input: #2A2F4A;
--ring: #3AADDD;
--chart-1: #6366F1;
--chart-2: #2CB67D;
--chart-3: #3AADDD;
--chart-4: #C7CAD6;
--chart-5: #A5B4FC;
--sidebar: #242736;
--sidebar-foreground: #F4F5F8;
--sidebar-primary: #6366F1;
--sidebar-primary-foreground: #FFFFFF;
--sidebar-accent: #322F66;
--sidebar-accent-foreground: #C7C5FA;
--sidebar-border: #2F3245;
--sidebar-ring: #3AADDD;
--aavya: #3AADDD;
--violet: #4F46E5;
--mint: #2CB67D;
--navy: #1E2338;
--radius: 0.825rem;
}
@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-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-violet: var(--violet);
--color-mint: var(--mint);
--color-aavya: var(--aavya);
--color-navy: var(--navy);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--font-sans: var(--font-inter);
--font-mono: var(--font-jetbrains-mono);
}