Kortix Design System

The single reference for building Kortix UI. If you are touching a visual surface in apps/web, follow this. The goal is one standardized, simple, recognizable brand identity — achieved by always composing the design system instead of hand-rolling.

Philosophy

• Simplicity is the brand. Black & white + one accent color. Calm, dense, legible. No decoration that doesn't carry information.
• The design system is the source of truth. Everything imports from @/components/ui/* and the tokens in globals.css. A screen should read like a sentence built from shared words.
• AI-native & self-documenting. The living styleguide at /design-system (apps/web/src/app/(home)/design-system/page.tsx) renders every component. When you add a component, you add it there too — so the system can never drift from its documentation.

The one rule that matters

Reuse > Compose > Create. In that order. Never hand-roll something the system already provides.

Decision flow when you need a UI piece: