nang cap san sang import

webappUI/aftersales_crm_core/DESIGN.md

@@ -0,0 +1,178 @@
+---
+name: AfterSales CRM Core
+colors:
+  surface: '#f9f9ff'
+  surface-dim: '#d8d9e3'
+  surface-bright: '#f9f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f2f3fd'
+  surface-container: '#ecedf7'
+  surface-container-high: '#e6e7f2'
+  surface-container-highest: '#e1e2ec'
+  on-surface: '#191b23'
+  on-surface-variant: '#424754'
+  inverse-surface: '#2e3038'
+  inverse-on-surface: '#eff0fa'
+  outline: '#727785'
+  outline-variant: '#c2c6d6'
+  surface-tint: '#005ac2'
+  primary: '#0058be'
+  on-primary: '#ffffff'
+  primary-container: '#2170e4'
+  on-primary-container: '#fefcff'
+  inverse-primary: '#adc6ff'
+  secondary: '#585f6c'
+  on-secondary: '#ffffff'
+  secondary-container: '#dce2f3'
+  on-secondary-container: '#5e6572'
+  tertiary: '#924700'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#b75b00'
+  on-tertiary-container: '#fffbff'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#d8e2ff'
+  primary-fixed-dim: '#adc6ff'
+  on-primary-fixed: '#001a42'
+  on-primary-fixed-variant: '#004395'
+  secondary-fixed: '#dce2f3'
+  secondary-fixed-dim: '#c0c7d6'
+  on-secondary-fixed: '#151c27'
+  on-secondary-fixed-variant: '#404754'
+  tertiary-fixed: '#ffdcc6'
+  tertiary-fixed-dim: '#ffb786'
+  on-tertiary-fixed: '#311400'
+  on-tertiary-fixed-variant: '#723600'
+  background: '#f9f9ff'
+  on-background: '#191b23'
+  surface-variant: '#e1e2ec'
+typography:
+  h1:
+    fontFamily: Manrope
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+  h2:
+    fontFamily: Manrope
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+  h3:
+    fontFamily: Manrope
+    fontSize: 18px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-base:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '400'
+    lineHeight: 16px
+  label-semibold:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '600'
+    lineHeight: 20px
+  button:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '500'
+    lineHeight: 20px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  container-max: 1280px
+  nav-height: 56px
+  gutter: 1rem
+  margin-x: 1.5rem
+  stack-gap: 1.5rem
+  grid-columns-desktop: '12'
+  form-gap: 1.25rem
+---
+
+## Brand & Style
+
+This design system is built on a **Corporate / Modern** aesthetic, prioritizing utility, clarity, and reliability. It is designed for high-density information environments where user trust is paramount. The visual language utilizes a refined "Filament-inspired" approach, characterized by clean lines, subtle depth, and a structured hierarchy that minimizes cognitive load during complex CRM tasks.
+
+The emotional response should be one of "effortless control"—where the interface recedes to let the data lead, but remains aesthetically polished and professional. It balances the rigidity of enterprise software with the fluidity of modern web applications.
+
+## Colors
+
+The palette is rooted in a functional spectrum. The **Primary Blue** acts as the main driver for interaction and focus, while the **Neutral Gray** scale provides the structural scaffolding. 
+
+In **Light Mode**, we use a soft gray background (`#f9fafb`) to reduce glare, paired with pure white surfaces for cards. 
+In **Dark Mode**, the depth is established using a deep navy-black (`#020617`) for the foundation and a slightly lighter charcoal (`#111827`) for elevated components. 
+
+Semantic colors (Success, Warning, Danger) are used sparingly to highlight status changes, ensuring they command attention without overwhelming the user.
+
+## Typography
+
+The typography system uses **Manrope** for headings to inject a modern, refined character into the CRM’s data-heavy views. For body text and functional UI elements, **Inter** is utilized for its exceptional legibility at small sizes.
+
+- **Headings:** Always semibold to provide clear entry points for the eye.
+- **Body:** Standardized at 14px (text-sm) to optimize information density without sacrificing readability.
+- **Labels:** Use semibold Inter for form labels and table headers to distinguish them from data values.
+
+## Layout & Spacing
+
+The system follows a **Fluid Grid** philosophy with fixed breakpoints.
+- **Top Navigation:** A sticky 56px bar provides constant access to global controls.
+- **Page Layout:** Content is centered in a max-width container (1280px) with 24px (1.5rem) side margins.
+- **Forms:** Employ a responsive 2-column layout on desktop, collapsing to a single column on mobile devices.
+- **Tables:** Designed for horizontal scrolling on smaller viewports to preserve data integrity.
+- **Rhythm:** A 4px/8px baseline grid maintains consistent vertical rhythm across all component stacks.
+
+## Elevation & Depth
+
+Visual hierarchy is established through **Tonal Layers** and **Ambient Shadows**. 
+
+- **Level 0 (Background):** Flat, using the base background token.
+- **Level 1 (Cards/Tables):** Pure white (light mode) or #111827 (dark mode) with a subtle `shadow-sm` and a 1px border.
+- **Level 2 (Dropdowns/Modals):** Increased shadow depth (`shadow-lg`) and a distinct border to separate floating elements from the surface.
+
+In dark mode, shadows are deepened and opacity is reduced, relying more on subtle border highlights (1px white/10%) to define edges.
+
+## Shapes
+
+The shape language is **Soft** and approachable.
+- **Components:** Standard buttons, input fields, and cards use a 0.25rem (4px) corner radius.
+- **Large Elements:** Modals and large cards use 0.5rem (8px) for a slightly more modern feel.
+- **Avatars/Badges:** Notification badges and user avatars use a full pill/circular shape to contrast against the predominantly rectangular UI.
+
+## Components
+
+### Buttons
+- **Primary:** Solid #3b82f6 background, white text, subtle hover state brightness increase.
+- **Secondary:** White background with a 1px gray-300 border and gray-700 text.
+- **Tertiary:** Ghost style, no background/border until hover.
+
+### Inputs & Forms
+- Inputs use a consistent 14px text size with a 1px border.
+- Focus state: 2px ring of primary color with 20% opacity.
+- Form groups: Label on top, followed by input, followed by optional hint text.
+
+### Cards
+- Clean white surfaces with `shadow-sm`.
+- Header section separated by a thin light-gray divider.
+- Padding should be a consistent 1.5rem (24px) for desktop.
+
+### Navigation (Top Bar)
+- Sticky positioning with a subtle bottom border.
+- Nav items use a 14px medium weight; active states are indicated by a primary color shift or subtle bottom indicator.
+- Notifications: A 20px circular badge in Danger Red sits at the top right of the bell icon.
+
+### Tables
+- Headers are sticky where possible.
+- Row hover states use a very faint gray (gray-50) to assist with line tracking.
+- Status indicators (Chips) should use a "Soft" style: light background tint with high-contrast text of the same hue (e.g., Success green text on a light green background).