GPUS Theme

Portable design system from the Portal Grupo US project featuring a Navy/Gold color palette with complete light and dark theme support.

Identity: Navy backgrounds + Gold accents. Professional, premium, educational.

Quick Start

Option 1: Copy CSS Variables

Copy assets/theme-tokens.css to your project's main CSS file.

@import "tailwindcss";
@import "./theme-tokens.css"; /* Copy from assets/ */

Option 2: Use shadcn Configuration

Copy assets/components.json to your project root:

cp .agent/skills/gpus-theme/assets/components.json ./components.json

Option 3: Tailwind v3 Config

Import theme tokens into tailwind.config.ts:

import { gpusTheme } from './.agent/skills/gpus-theme/assets/tailwind-theme';

export default {
  theme: {
    extend: {
      colors: gpusTheme.colors,
    },
  },
};

Theme Overview

Color Palette

| Token | Light Mode | Dark Mode | Purpose | |-------|------------|-----------|---------| | background | White 0 0% 100% | Navy 211 49% 10% | Page background | | foreground | Dark blue 222 47% 11% | Gold 39 44% 65% | Text color | | primary | Gold 38 60% 45% | Gold 39 44% 65% | Main actions | | accent | Light gold 38 60% 95% | Muted 26 5% 27% | Highlights | | destructive | Red 0 84% 60% | Red 0 84% 60% | Errors |

Border Radius

Base: 0.625rem (10px)
Derived: --radius-lg, --radius-md, --radius-sm

Custom Utilities

| Class | Effect | |-------|--------| | .bg-mesh | Radial gradient mesh background | | .glass-card | Glassmorphism with blur | | .bg-noise | Subtle noise texture overlay | | .animate-ripple | Button ripple animation |

Component Configuration

shadcn/ui Settings

Style: new-york
Base color: zinc
CSS Variables: Enabled
Icon Library: lucide

Extended Registries

| Registry | URL | Components | |----------|-----|------------| | @kokonutui | kokonutui.com | Premium components | | @aceternity | ui.aceternity.com | Animated components | | @magicui | magicui.design | Magic effects | | @tweakcn | tweakcn.com | Theme generator | | @shadcnui-blocks | shadcnui-blocks.com | Page blocks | | @cult-ui | cult-ui.com | Cult components | | @originui | originui.com | Origin components | | @tailark | tailark.com | Tailark components |

Files Reference

| File | Purpose | |------|---------| | references/css-variables.md | Complete CSS variable reference | | references/shadcn-config.md | shadcn/ui configuration details | | assets/theme-tokens.css | Portable CSS file | | assets/tailwind-theme.ts | Tailwind v3 config export | | assets/components.json | shadcn configuration |

Usage Tips

Dark Mode Toggle

The theme uses .dark class on <html> element:

document.documentElement.classList.toggle('dark');

Smooth Transitions

Theme includes CSS for smooth color transitions:

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

View Transition API

For animated theme toggle, use the View Transition API selectors in theme-tokens.css.