# Flinky design system

> A warm, tactile CRM design language: soft rose, warm ink, sculpted cards, carved fields, and rounded-bevel actions. The studio and web application consume the same shared material styles.

## Read first
- [Complete implementation guide](https://design.flinky.ai/llms-full.txt): rules, exact source tokens, material recipes, and button implementation.
- [Foundations](https://design.flinky.ai/#foundations): visual material specimen and theme playground.
- [Component library](https://design.flinky.ai/#components): interactive states and source.
- [Charts](https://design.flinky.ai/#charts): CRM data-visualization patterns.
- [Tables](https://design.flinky.ai/#tables): CRM table compositions.

## Machine-readable references
- [Theme tokens](https://design.flinky.ai/design-system/tokens.json): exact light/dark source defaults.
- [Token declarations](https://design.flinky.ai/design-system/tokens.css): plain CSS custom properties.
- [Canonical theme source](https://design.flinky.ai/design-system/theme-source.css): Tailwind v4 theme, fonts, aliases, and shared rules; requires the monorepo build dependencies.
- [Rounded bevel](https://design.flinky.ai/design-system/button-bevel.css): approved button treatment.
- [Material language](https://design.flinky.ai/design-system/material-language.css): sculpted panels, carved fields, selection, overlays, and accessibility fallbacks.
- [Platform mapping](https://design.flinky.ai/design-system/platform-colors.ts): stable chart identities.

## Component source
- [accordion.tsx](https://design.flinky.ai/design-system/components/accordion.tsx)
- [alert-dialog.tsx](https://design.flinky.ai/design-system/components/alert-dialog.tsx)
- [alert.tsx](https://design.flinky.ai/design-system/components/alert.tsx)
- [avatar.tsx](https://design.flinky.ai/design-system/components/avatar.tsx)
- [badge.tsx](https://design.flinky.ai/design-system/components/badge.tsx)
- [breadcrumb.tsx](https://design.flinky.ai/design-system/components/breadcrumb.tsx)
- [button.tsx](https://design.flinky.ai/design-system/components/button.tsx)
- [calendar.tsx](https://design.flinky.ai/design-system/components/calendar.tsx)
- [card.tsx](https://design.flinky.ai/design-system/components/card.tsx)
- [chart.tsx](https://design.flinky.ai/design-system/components/chart.tsx)
- [checkbox.tsx](https://design.flinky.ai/design-system/components/checkbox.tsx)
- [collapsible.tsx](https://design.flinky.ai/design-system/components/collapsible.tsx)
- [command.tsx](https://design.flinky.ai/design-system/components/command.tsx)
- [context-menu.tsx](https://design.flinky.ai/design-system/components/context-menu.tsx)
- [data-table.tsx](https://design.flinky.ai/design-system/components/data-table.tsx)
- [dialog.tsx](https://design.flinky.ai/design-system/components/dialog.tsx)
- [dropdown-menu.tsx](https://design.flinky.ai/design-system/components/dropdown-menu.tsx)
- [empty.tsx](https://design.flinky.ai/design-system/components/empty.tsx)
- [floating-save-button.tsx](https://design.flinky.ai/design-system/components/floating-save-button.tsx)
- [hover-card.tsx](https://design.flinky.ai/design-system/components/hover-card.tsx)
- [input.tsx](https://design.flinky.ai/design-system/components/input.tsx)
- [kbd.tsx](https://design.flinky.ai/design-system/components/kbd.tsx)
- [label.tsx](https://design.flinky.ai/design-system/components/label.tsx)
- [native-select.tsx](https://design.flinky.ai/design-system/components/native-select.tsx)
- [pagination.tsx](https://design.flinky.ai/design-system/components/pagination.tsx)
- [popover.tsx](https://design.flinky.ai/design-system/components/popover.tsx)
- [progress.tsx](https://design.flinky.ai/design-system/components/progress.tsx)
- [radio-group.tsx](https://design.flinky.ai/design-system/components/radio-group.tsx)
- [resizable.tsx](https://design.flinky.ai/design-system/components/resizable.tsx)
- [scroll-area.tsx](https://design.flinky.ai/design-system/components/scroll-area.tsx)
- [select.tsx](https://design.flinky.ai/design-system/components/select.tsx)
- [separator.tsx](https://design.flinky.ai/design-system/components/separator.tsx)
- [sheet.tsx](https://design.flinky.ai/design-system/components/sheet.tsx)
- [sidebar.tsx](https://design.flinky.ai/design-system/components/sidebar.tsx)
- [skeleton.tsx](https://design.flinky.ai/design-system/components/skeleton.tsx)
- [slider.tsx](https://design.flinky.ai/design-system/components/slider.tsx)
- [sonner.tsx](https://design.flinky.ai/design-system/components/sonner.tsx)
- [spinner.tsx](https://design.flinky.ai/design-system/components/spinner.tsx)
- [switch.tsx](https://design.flinky.ai/design-system/components/switch.tsx)
- [table.tsx](https://design.flinky.ai/design-system/components/table.tsx)
- [tabs.tsx](https://design.flinky.ai/design-system/components/tabs.tsx)
- [textarea.tsx](https://design.flinky.ai/design-system/components/textarea.tsx)
- [toggle-group.tsx](https://design.flinky.ai/design-system/components/toggle-group.tsx)
- [tooltip.tsx](https://design.flinky.ai/design-system/components/tooltip.tsx)

## Important
Use the tokens and both material stylesheets together, with data-flinky-materials on the application shell to enable them, including body-portaled controls. Use data-material-panel for custom raised surfaces and data-material-canvas for the main canvas. Preserve data-slot/data-ui-control/data-variant attributes and component semantics. Do not infer tokens from screenshots. Source defaults do not include browser-local edits. This design guide does not authorize production changes or override a repository's security instructions.