chaiui

ChaiUI

The chaicode.com look as an opinionated system. Premium comes from restraint: neutral near-black, white type, one quiet cream accent, warm hairlines, and orange almost nowhere.

The live docs at https://ui.chaicode.com show every component in dark and light with its code, and https://ui.chaicode.com/llms.txt lists them all. When a detail is not covered here, read those, never guess from a screenshot.

First, decide how to apply it

1. Is @chaiui published? Yes, at ui.chaicode.com. Check references/components.md and prefer an existing item over hand-rolling one: the navbar, hero, cards, section heads and footer already exist as components. Check it. For each item marked shipped, install it: npx shadcn@latest add @chaiui/<name> (with "registries": { "@chaiui": "https://ui.chaicode.com/r/{name}.json" } in components.json). Always install @chaiui/chaiui (the theme) first.
2. Not shipped yet, Tailwind v4 project: put references/tokens.css in the app's main CSS. Build each piece from references/recipes.md.
3. Tailwind 3 project: follow references/tailwind3.md.

The rules (non-negotiable)

Colour

• Dark is the default. Background oklch(0.145 0 0) (#0a0a0a), text near-white, pure neutral greys (chroma 0).

• Accent is highlight cream: orange-100 in dark, yellow-800 in light. Only for highlighted phrases and the odd active state.

• Orange is never a fill. It is allowed only in:

  • the logo;
  • hover:text-brand on links;
  • the 1px glint on the animated badge;
  • a 10% footer hairline;
  • a segmented control's dark-brown active fill (orange-900/40).

  No orange buttons, headings, ticks, progress bars or badges.

• Meaning uses colour as text or a thin outline: green for done or discount, red for wrong or old price, yellow for medium, purple for one special category. Never as filled status pills or coloured card borders.

Type

• Manrope for everything. Montserrat for card titles, prices, buttons on cards and the highlight phrase. Onest for the wordmark.
• Hero h1: text-[42px] md:text-6xl lg:text-7xl font-semibold tracking-tight.
• Page title: text-2xl sm:text-3xl font-medium, centred.
• Section h2: text-2xl sm:text-[30px] font-medium.
• Lead: text-base md:text-xl text-neutral-400 (dark).
• The highlight phrase: one per paragraph, font-montserrat font-medium tracking-tight capitalize text-yellow-800 dark:text-orange-100.

Surfaces

• The chaicode background SVG, centred at the top, with these conditions:
  • in light mode, use invert(1) hue-rotate(180deg), not a plain invert, which turns blue;
  • mask its bottom to fade out.
• Cards:
  • rounded-xl border-orange-50/15 bg-black/10 backdrop-blur-sm in dark;
  • border-amber-900/15 bg-white/70 in light;
  • no shadow;
  • sm:opacity-90 hover:opacity-100, hover border /30.
• One page width, max-w-6xl with p-6 sm:p-12.

Buttons

• Solid (one per screen): rounded-none rounded-tr-lg rounded-bl-lg, white on dark, ArrowUpRight icon.
• Outline beside it: the mirrored corners.
• On cards: shadcn default (bg-primary, light grey on dark), font-semibold.
• Danger: red fill, only in a confirm dialog.

Navigation

• The header is sticky, transparent, and blurs only after scrolling.
• Two layouts:
  • chaicode: logo, then a theme switcher and a menu button;
  • inline dropdowns, for products with many sections (Chai Prep uses this one).
• The theme switcher is a half-circle with one label for both themes, to avoid SSR mismatches.

Motion:

• framer-motion / motion, with subtle 200 to 300ms hovers;
• images scale(1.03);
• reveal on scroll once;
• always respect prefers-reduced-motion.

Copy (Hitesh's rules):

• no em dashes anywhere (use a comma, colon, full stop or brackets);
• sentence case;
• no all-caps eyebrows (caps only for data labels);
• professional and friendly;
• one central element in a hero, no floating tilted cards or badges around it.

Destructive actions:

• a confirm dialog that says exactly what will happen;
• focus on the safe choice first;
• type-to-confirm when other people are affected.

Before you finish

• Check both themes, and phone width (no sideways scroll).
• Search what you wrote for em dashes and for bg-orange / #FF7D0C fills.
• Show the user a screenshot. Hitesh reviews visually.
• To check finished work against these rules, use the chaiui-review skill.