DESIGN.md

name	Chateando
colors	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 brand-green 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 #f9f9f9 #dadada #f9f9f9 #ffffff #f3f3f3 #eeeeee #e8e8e8 #e2e2e2 #1a1c1c #424752 #2f3131 #f0f1f1 #727783 #c2c6d4 #3b36a8 #3b36a8 #ffffff #e6e5f4 #2f2b82 #c5c2e8 #12a065 #5d5f5f #ffffff #dcdddd #5f6161 #425059 #ffffff #5a6871 #d8e7f2 #ba1a1a #ffffff #ffdad6 #93000a #d6e3ff #a9c7ff #001b3d #00468c #e2e2e2 #c6c6c7 #1a1c1c #454747 #d6e5ef #bac9d3 #0f1d25 #3b4951 #f9f9f9 #1a1c1c #e2e2e2
typography	headline-lg headline-md headline-sm body-lg body-md label-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Inter 24px 600 32px -0.01em fontFamily fontSize fontWeight lineHeight Inter 20px 600 28px fontFamily fontSize fontWeight lineHeight Inter 16px 600 24px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 500 16px 0.02em fontFamily fontSize fontWeight lineHeight Inter 11px 600 14px
rounded	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px
spacing	base xs sm md lg xl gutter margin 4px 4px 8px 16px 24px 32px 16px 24px

Brand & Style

The design system is engineered for high-efficiency enterprise communication, prioritizing clarity, speed, and cognitive ease. The brand personality is professional, reliable, and strictly functional, mirroring the structural integrity of corporate internal tools.

The aesthetic follows a Corporate / Modern style, characterized by a light, airy interface with significant whitespace and a systematic use of blue accents. It draws inspiration from DevExtreme's clean utility, utilizing a structured information hierarchy that reduces visual noise to keep the focus on message content and data accuracy.

Colors

The palette is rooted in corporate reliability.

• Primary Blue (#1565c0): Used for high-emphasis actions, active states, and user-authored chat bubbles.
• Secondary Gray (#f5f5f5): Applied to headers, sidebars, and incoming message bubbles to provide a subtle contrast against the main workspace.
• Surface Background (#fafafa): The primary canvas color, ensuring a clean, "paper-like" feel.
• Selection Tint (#e3f2fd): A soft light blue used for hover states and selected items in lists or navigation.
• Functional Colors: Success, Error, and Warning colors follow standard utility conventions to ensure immediate recognition of system status.
• Dividers (#e0e0e0): Subtle, hairline borders used to define the structural grid without adding visual weight.

Typography

The system utilizes Inter (as a high-quality system-ui equivalent) to ensure maximum legibility across different resolutions. The type scale is conservative, reflecting a professional tool rather than a consumer app.

Headlines are used sparingly for navigation headers and modal titles. Body-md is the primary size for chat messages and interface text to maximize data density without sacrificing readability. Labels are utilized for timestamps, status indicators, and metadata.

Layout & Spacing

This design system employs a Fixed Grid for desktop and a Fluid Grid for mobile. The layout is structured around a 3-pane architecture: navigation/workspaces (narrow), conversation list (medium), and the active chat window (flexible).

Spacing follows a strict 4px/8px baseline grid. Large internal margins (24px) are used around the main chat container to create a "focused" feel, while smaller gutters (16px) are used within the message list to maintain conversational flow.

Elevation & Depth

Elevation is minimal to maintain a flat, professional appearance. Depth is primarily conveyed through Tonal Layers and Low-Contrast Outlines.

• Level 0: Background surface (#fafafa).
• Level 1: Sidebars and headers (#f5f5f5) separated by a 1px solid border (#e0e0e0).
• Level 2: Floating menus or modals, using a soft, low-opacity shadow (0px 4px 12px rgba(0,0,0,0.05)) to distinguish from the background.
• No Shadows on Messages: Chat bubbles do not use shadows; they rely on fill color and placement to indicate hierarchy.

Shapes

The shape language is "Soft" yet disciplined. A standard radius of 6px to 8px is applied to all interactive elements including buttons, input fields, and chat bubbles. This provides a approachable feel while maintaining the geometric rigor expected of a corporate tool. Large components like modals use the 8px radius, while smaller elements like checkboxes use 4px.

Components

• Buttons:
  • Contained: Solid #1565c0 background with white text for primary actions (e.g., "Send", "New Chat").
  • Outlined: 1px #e0e0e0 border with #1565c0 text for secondary actions.
• Inputs: Use a 1px #e0e0e0 border. On focus, the border shifts to #1565c0 with a subtle 2px glow of the selection tint (#e3f2fd).
• Chat Bubbles:
  • Outgoing: Background #1565c0, text white, aligned right.
  • Incoming: Background #f5f5f5, text #333333, aligned left.
  • Internal Note: Background #e3f2fd, 1px dashed #1565c0 border.
• Lists: Conversation items use #fafafa background. On hover or active state, the entire row transitions to #e3f2fd.
• Dividers: 1px solid #e0e0e0 used horizontally between messages and vertically between layout panes.
• Avatars: Circular or 8px rounded squares, depending on the workspace context, with clear online/offline status indicators in the bottom-right corner.