Theme

Customize the current shadcn/Base UI components, semantic tokens, and Geist/Fraunces typography.

Current design system

The updated application uses warm neutral surfaces, an orange accent, and semantic shadcn tokens. Body text uses Geist Sans, code/numerals use Geist Mono, and display headings use Fraunces. These replace the earlier DM Sans / DM Mono styling.

File	Responsibility
`apps/web/src/styles.css`	Fonts, semantic colors, themes, and typography
`apps/web/src/components/ui`	Button, Card, Dialog, Sidebar, Sheet, Table, and other primitives
`apps/web/components.json`	base-luma, neutral, Lucide, aliases, Studio registry
`apps/web/src/components/brand.tsx`	Shared public/auth/workbench mark
`apps/web/public/logo.png`	Product artwork
`apps/web/src/components/theme.tsx`	Appearance menu and pre-hydration script
`packages/ui/src/index.ts` / `table.ts`	cn and table helpers, no old visual-component barrel

Rebrand deliberately

Set the product name and support email in packages/config, replace logo.png, then check public navigation, auth cards, and the collapsed sidebar. Icon-only branding needs an accessible name without duplicate announcements.

Review SEO, Open Graph, mail subjects, and both product languages together. Branding changes do not require new API paths, plan IDs, or replacement production resources.

Use application-local components

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

export function ActionCard() {
  return (
    <Card>
      <CardContent>
        <Button type="button">Continue</Button>
      </CardContent>
    </Card>
  );
}

Replace business literals with localized messages. The current primitives use Base UI composition; follow existing render patterns for custom triggers instead of copying another version's asChild API blindly.

components.json registers the shadcn Studio registry. Adapt generated files to the existing aliases, dependencies, tokens, interactions, and licensing before connecting real data. Mock dashboard figures are not real order or credit results.

Persisted appearance

ThemeMenu offers System, Light, and Dark. It stores flare-theme in localStorage. Before hydration, the initial script toggles the html dark class and color-scheme. System mode listens for operating-system changes.

Do not maintain another theme implementation based on the removed data-theme convention. Keep React state and the initial script consistent. Define new semantic tokens in both palettes so controls retain legibility and boundaries.

Responsive states

The workspace uses Sidebar and mobile Sheet. Preserve loading, error, success, and disabled form feedback. Destructive confirmations should identify the affected object. Table filtering/pagination describes the loaded dataset rather than pretending to search the entire database.

Verify

Inspect 390px and desktop widths, keyboard focus, menu focus restoration, collapsed navigation, dialogs, empty states, and errors. Reload after selecting each appearance mode and check the first paint. Run type-check/check:error and inspect actual browser rendering; a successful build alone does not validate appearance.

See product configuration and testing.