# KHMYS brand kit

Use the Architype Stedelijk khmy$ wordmark and Geist Sans for interface text.
The five letters are outlined as SVG with natural spacing and no added tracking.
The wordmark is teal in both modes: a deeper teal on light surfaces and a lighter teal (hsl 168 42% 62%) in dark mode. No font file is bundled.
Reference: https://khmys.com/branding
Markdown reference: https://khmys.com/branding/guide.md
Complete JSON kit: https://khmys.com/branding/kit.json
Individual files: https://khmys.com/branding/files/ (append the file's name/path).

## Files
- tokens.css: all current app and landing theme token blocks.
- tokens.json: the same values for programmatic use.
- index.css: complete stylesheet, including V2 overrides and reduced-motion behavior.
- tailwind.config.ts: the product's actual Tailwind 3 configuration.
- Logo.tsx: shared React wordmark and compact k (uses @/lib/utils).
- SVG wordmarks: standalone vectors with fixed colors; choose the correct surface.
- Complete JSON bundle: includes every production file under src/components,
  including product widgets, account/investment/transaction dialogs and helpers.

## Source coverage and previews
The inventory scans every component subfolder, excludes tests, and offers source
inspection and individual downloads. Live examples use fictional data and local
callbacks. Product components that require authenticated providers are included as
source references, not mounted with real accounts. Those files require their app
contexts/hooks/API types; this kit does not export credentials or runtime user data.

## Adopting the kit
Apply presentation changes one screen at a time. Preserve behavior, authentication,
authorization and existing data flows. Verify light/dark, keyboard focus and mobile.
Install the imports your screen uses: React 18, Tailwind 3, tailwindcss-animate,
@fontsource/geist-sans, lucide-react, Radix UI, class-variance-authority, clsx and
tailwind-merge. Charts use visx. The source files are references, not a standalone
application or an installable component package. Preserve the project's licenses.

## Money and language
Use shared currency/date formatters and tabular figures. State currency and period.
Never add unlike currencies without an explicit conversion. Mask amounts in privacy
mode. Use clear action labels and calm errors. Never display credentials or provider
payloads. All brand-page examples are fictional.

## Accessibility
Name icon-only controls, keep visible labels, connect errors to fields and check
contrast in the selected theme. The page's token contrast report can show failures;
do not interpret a preview as a claim that every product screen is WCAG compliant.