unparty-app UI Standards

// Import all colors
import { colors, palette } from '@/app/constants/colors';

// Inline style (dynamic theming)
<div style={{ color: colors.brand }}>...</div>

// Dynamic theme color via hook
import { useTheme } from '@/app/contexts/ThemeContext';
const { colorValue } = useTheme();
<div style={{ color: colorValue }}>...</div>

/* Light mode */
--background:            #ededed;
--foreground:            #171717;
--background-highlight:  rgba(0, 0, 0, 0.1);
--text-muted:            rgba(23, 23, 23, 0.8);

/* Dark mode (auto-applied via @media prefers-color-scheme: dark) */
--background:            #0a0a0a;
--foreground:            #ededed;
--background-highlight:  rgba(255, 255, 255, 0.1);
--text-muted:            rgba(237, 237, 237, 0.8);

// These resolve to the CSS variables above
className="bg-background text-foreground bg-background-highlight"

--depth-raised:   0 2px 4px rgba(0, 0, 0, 0.1);    /* Slightly lifted element */
--depth-elevated: 0 4px 8px rgba(0, 0, 0, 0.12);   /* Hover state / card */
--depth-floating: 0 6px 12px rgba(0, 0, 0, 0.15);  /* Sticky elements */
--depth-modal:    0 8px 16px rgba(0, 0, 0, 0.15);  /* Modals / drawers */
--depth-overlay:  0 12px 24px rgba(0, 0, 0, 0.18); /* Dropdowns / overlays */

// Usage example
<div style={{ boxShadow: 'var(--depth-elevated)' }}>...</div>

--brand-shadow:        0 2px 4px rgba(249, 194, 46, 0.1);
--brand-shadow-strong: 0 4px 8px rgba(249, 194, 46, 0.15);
--brand-glow:          0 0 8px rgba(249, 194, 46, 0.2);
--brand-glow-strong:   0 0 12px rgba(249, 194, 46, 0.25);
--brand-accent:        rgba(249, 194, 46, 0.1);
--brand-accent-strong: rgba(249, 194, 46, 0.15);

--focus-ring:        0 0 0 3px rgba(249, 194, 46, 0.3);
--hover-lift:        translateY(-1px);
--hover-lift-strong: translateY(-2px);
--active-press:      translateY(0) scale(0.98);

// Most common: monospace for data, stats, labels
<span className="font-mono text-sm">30+</span>

// Rounded / friendly headings
<h1 className="font-rounded text-2xl font-bold">UNPARTY</h1>

// Retro / editorial accent
<span className="font-vt323 text-4xl">STATUS: LIVE</span>

// Modern editorial
<p className="font-space-grotesk text-base font-medium">Description text</p>

<div className="mx-auto w-full max-w-5xl">
  <div className="flex flex-col gap-6">
    {/* Page content here */}
  </div>
</div>

<div className="mx-auto w-full max-w-5xl px-4 sm:px-6">
  <div className="flex flex-col gap-6">
    {/* Page content here */}
  </div>
</div>

<main className="flex flex-col items-center gap-4 pt-2">
  <div className="w-full flex flex-col gap-4 px-2 md:gap-6">
    {/* Full-width content */}
  </div>
</main>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
  <div>Left</div>
  <div>Right</div>
</div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

<div className="rounded-xl bg-gray-50 p-6 dark:bg-black/10">
  {/* Card content */}
</div>

<div
  className="rounded-xl bg-gray-50 p-6 dark:bg-black/10"
  style={{ boxShadow: 'var(--brand-glow)' }}
>
  {/* Card content */}
</div>

// Section label / category tag
<span className="font-mono text-xs font-bold uppercase tracking-wider opacity-60">
  CATEGORY
</span>

// Stat / number
<div className="font-mono text-lg font-bold" style={{ color: colorValue }}>
  42+
</div>

// Body paragraph
<p className="text-sm leading-relaxed opacity-80">
  Description text goes here.
</p>

// Prominent heading
<h2 className="font-rounded text-2xl font-bold">
  Section Title
</h2>

// Brand-colored inline highlight
<span className="font-bold" style={{ color: colors.brand }}>
  highlighted term
</span>

// Keyword term (uses .keyword-term CSS class from globals.css)
<span className="keyword-term">clickable term</span>

import ScrollRow from '@/components/HorizontalRow';
import PageAsterisk from '@/app/components/PageAsterick';

<ScrollRow
  title="SECTION TITLE"
  items={[
    <PageAsterisk key="asterisk" />,
    // Add components here
  ]}
  moreLink="/more"
  maxItems={4}
/>

import Stats from '@/app/components/Stats';

// Default values
<Stats />

// Custom values
<Stats waitlistCount={275} vibeMood="HIGH." priorityCategory="HIGH" className="shadow-lg" />

import AboutComponent from '@/app/components/AboutComponent';

export default function MyPage() {
  return (
    <main className="flex flex-col items-center gap-4 pt-2">
      <div className="mx-auto w-full max-w-5xl">
        <div className="flex flex-col gap-6">
          <AboutComponent />
        </div>
      </div>
    </main>
  );
}

'use client';
import { useTheme } from '@/app/contexts/ThemeContext';

export default function MyComponent() {
  const { colorValue } = useTheme();
  return (
    <div style={{ borderColor: colorValue, color: colorValue }}>
      Dynamic themed content
    </div>
  );
}

<section className="flex flex-col gap-4 md:gap-6 lg:gap-8">
  {/* Content */}
</section>

--transition-fast:     0.15s ease;   /* Button hover, micro-interactions */
--transition-standard: 0.2s ease;    /* Most interactive states */
--transition-slow:     0.3s ease;    /* Page transitions, modals */

--easing-brand:  cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Smooth brand motion */
--easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Playful bounce */

// Scrolling banner / chyron
<div className="animate-scroll">
  Scrolling text content
</div>

// Page enter animation (auto-applied inside .page-transition-wrapper)
<div className="page-transition-wrapper">
  {children}
</div>

// Lift on hover, press on active
<button className="transition-transform duration-150 hover:-translate-y-0.5 active:scale-[0.98]">
  Click me
</button>

// Background: light gray / near-black
<div className="bg-background">...</div>

// Text: dark / light
<p className="text-foreground">...</p>

// Overlay / tinted background
<div className="bg-background-highlight">...</div>

// Manual dark variant via Tailwind
<div className="bg-gray-50 dark:bg-black/10">...</div>
<p className="text-gray-900 dark:text-gray-100">...</p>

'use client';
import { useTheme } from '@/app/contexts/ThemeContext';

export default function ThemedCard() {
  const { colorValue, colorPalette, selectedColor, setSelectedColor } = useTheme();

  return (
    <div style={{ borderLeft: `4px solid ${colorValue}` }}>
      <p style={{ color: colorValue }}>Themed accent text</p>
    </div>
  );
}

// src/app/constants/colors.ts
export const palette = {
  brand:         "#F9C22E",  // Signature yellow (default)
  brandblack:    "#000605",
  brandwhite:    "#FFF1D6",
  electricPurple:"#3500D3",
  neonYellow:    "#FFF700",
  astroblack:    "#3D2D59",
  pinkyblack:    "#6C6BB4",
  starblack:     "#753062",
  pushblack:     "#371B70",
  champion:      "#E7B12E",
  healpurple:    "#884455",
  electricGreen: "#00FF66",
  electricBlue:  "#00FFFF",
  anotherlove:   "#000108",
};

// Not this
{loading ? 'Loading…' : content}

// This
{loading ? 'Thinking…' : content}