Atlas Design System
Relevant source files
The following files were used as context for generating this wiki page:
The Atlas Design System is a shared Flutter package that provides the visual foundation for the AtlasCleanAI Enterprise ecosystem. It ensures brand consistency across multiple mobile and web interfaces by centralizing UI tokens, styles, and reusable components.
This system serves three primary internal applications: the Customer App, the Cleaner App, and the Management App. By providing a unified theme and pre-styled UI elements, it accelerates development and maintains a coherent user experience across the entire cleaning service platform.
Sources: README.md:33-37, README.md:144-150
Package Architecture
The design system is implemented as a standalone Flutter package located in packages/atlas_design_system. It targets Flutter version 3.13.0 or newer and utilizes Material Design components as its base.
Sources: packages/atlas_design_system/pubspec.yaml:7-19
Dependency Structure
The design system acts as a core dependency for the platform's frontend applications. The following diagram illustrates the relationship between the shared design system and the consuming apps.
The diagram shows the atlas_design_system providing assets and themes to the three main platform applications.
Sources: README.md:144-150, apps/customer_app/pubspec.yaml:1-5
Core Visual Tokens
The system defines specific design tokens to enforce brand identity. These tokens are consumed by higher-level components to ensure uniformity.
| Token Type | Description |
|---|---|
| Brand Colors | Custom color palettes specific to the Atlas brand. |
| Typography | Standardized font weights, sizes, and styles for consistent text rendering. |
| Theme Definitions | Global theme configurations for both light and dark modes. |
| UI Components | Pre-styled interactive elements like buttons and text fields. |
Sources: README.md:145-150
Component Library
The design system contains specific UI primitives that standardize common interactions.
- Buttons: Standardized shapes, sizes, and states for primary and secondary actions.
- Cards: Surface containers with consistent elevation and corner radii.
- Text Fields: Input elements with integrated validation styling.
- Theme Logic: Definitions that toggle styles between the customer and cleaner-facing applications.
Sources: README.md:148-150
Web Implementation (Atlas AI Interface)
While the Flutter package handles mobile apps, the platform also maintains a web-based design language for the Atlas AI chat interface. This implementation utilizes a professional, enterprise-oriented color scheme and responsive layout.
The diagram outlines the structural components and color usage for the web chat interface.
Sources: src/public/index.html:10-100
Web Component Styles
The web interface uses a specific set of CSS styles to mirror the professional aesthetic of the Flutter design system:
| Element | CSS Properties | Purpose |
|---|---|---|
| Header | background: #1e3a5f; color: #fff; | Primary brand identification. |
| User Message | background: #1e3a5f; color: #fff; | Highlights user-generated content. |
| Assistant Message | background: #fff; border: 1px solid #e2e8f0; | Differentiates AI responses. |
| Typing Indicator | animation: bounce 1.2s infinite; | Provides visual feedback during processing. |
Sources: src/public/index.html:17-90
Implementation Example
The design system is integrated into applications by including the package in the pubspec.yaml file. Consuming applications then apply the provided theme globally.
# apps/customer_app/pubspec.yaml
dependencies:
flutter:
sdk: flutter
atlas_design_system:
path: ../../packages/atlas_design_system
Sources: apps/customer_app/pubspec.yaml:10-15, README.md:37-40
Conclusion
The Atlas Design System centralizes the visual identity of the AtlasCleanAI Enterprise platform. By providing a shared library of Flutter widgets, tokens, and themes, it ensures that all users—whether customers, cleaners, or managers—experience a consistent and professional interface. This modular approach reduces code duplication and simplifies brand-wide updates.