Design system

Brand

Token	Value
Primary	#19B4B0 (teal) — --primary: 178 76% 40%
Display font	Geist (300–700)
Mono font	Geist Mono
Container max-width	1440px
Border radius (cards)	10px

CSS custom properties

fleapo-marketplace/src/index.css defines a layered token system. All colors are stored as HSL triplets so Tailwind can compose alpha modifiers.

:root {
  --primary: 178 76% 40%;          /* #19B4B0 */
  --background: 48 33% 97%;        /* warm off-white */
  --foreground: 0 0% 8%;           /* near-black text */
  --surface, --surface-alt: ...;   /* card vs nested */
  --muted-foreground, --muted-foreground-faint: ...;
  --border, --border-strong, --input, --ring: ...;
  /* sidebar (shadcn) */
  --sidebar-*: ...;
  /* dynamic background */
  --current-bg: 248 248 246;       /* RGB triplet, animated */
}

html[data-page-bg="dark"] {
  --background, --foreground, --border, ... /* dark overrides */
}

html[data-page-bg="teal"] {
  /* teal hero mode */
}

--current-bg is set by ScrollBgController based on the section currently in viewport.

Tailwind config

tailwind.config.ts extends colors from CSS vars. Important conventions:

• Reference colors as hsl(var(--primary)) in custom CSS.
• Use bg-primary, text-primary, etc. in components.
• Custom font size: text-2xs (0.625rem).
• Font families: font-sans (Geist), font-mono (Geist Mono), font-display (Geist with display weights).

Category themes

src/data/categoryThemes.ts — one entry per tag slug.

type CategoryTheme = {
  text: string;        // "text-teal-700"
  softBg: string;      // "bg-teal-50"
  softBorder: string;  // "border-teal-200"
  solidBg: string;     // "bg-teal-500"
  solidText: string;   // "text-white"
  gradient: string;    // "from-teal-400 via-teal-500 to-emerald-500"
  glow: string;        // "bg-teal-400/30"
  hex: string;         // "#14B8A6"
};

Sixteen categories pre-defined: voice, developer, sales, research, support, creative, data, productivity, marketing, finance, legal, hr, healthcare, education, ecommerce, security.

To add one, see Track C.

shadcn/ui

src/components/ui/ contains shadcn primitives — Button, Dialog, Form, Input, Sheet, Sidebar, etc. Do not hand-edit these files. Add new primitives via the shadcn CLI to keep them upgradeable.

Components vs raw HTML

• Always import from @/components/ui/* for buttons, inputs, dialogs.
• Use cn(...) from src/lib/utils.ts to combine class strings.
• For Tailwind class composition with variants, prefer clsx/tailwind-variants over inline ternaries.

Animation

• Framer Motion for shared-element transitions and entrance animations.
• CSS transitions for color and background-color (0.7s cubic-bezier for bg).
• Do not stack more than one motion library — Framer Motion only.