minicrm/webappUI/aftersales_crm_core/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
AfterSales CRM Core	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f9f9ff #d8d9e3 #f9f9ff #ffffff #f2f3fd #ecedf7 #e6e7f2 #e1e2ec #191b23 #424754 #2e3038 #eff0fa #727785 #c2c6d6 #005ac2 #0058be #ffffff #2170e4 #fefcff #adc6ff #585f6c #ffffff #dce2f3 #5e6572 #924700 #ffffff #b75b00 #fffbff #ba1a1a #ffffff #ffdad6 #93000a #d8e2ff #adc6ff #001a42 #004395 #dce2f3 #c0c7d6 #151c27 #404754 #ffdcc6 #ffb786 #311400 #723600 #f9f9ff #191b23 #e1e2ec	h1 h2 h3 body-base body-sm label-semibold button fontFamily fontSize fontWeight lineHeight Manrope 24px 600 32px fontFamily fontSize fontWeight lineHeight Manrope 20px 600 28px fontFamily fontSize fontWeight lineHeight Manrope 18px 600 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 20px fontFamily fontSize fontWeight lineHeight Inter 12px 400 16px fontFamily fontSize fontWeight lineHeight Inter 14px 600 20px fontFamily fontSize fontWeight lineHeight Inter 14px 500 20px	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	container-max nav-height gutter margin-x stack-gap grid-columns-desktop form-gap 1280px 56px 1rem 1.5rem 1.5rem 12 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).