92 lines
3.5 KiB
Markdown
92 lines
3.5 KiB
Markdown
# AI Design System Guidelines - PraFrota
|
|
|
|
This document outlines the design implementation rules for the PraFrota application. All AI agents must adhere to these guidelines when generating or modifying UI components.
|
|
|
|
## 1. Typography
|
|
**Primary Font:** `Roboto` (Google Fonts)
|
|
- **Weights:** 300 (Light), 400 (Regular), 500 (Medium/Bold)
|
|
- **Base Size:** 14px (0.875rem)
|
|
- **Line Height:** 1.4
|
|
|
|
### Usage
|
|
- **Headings (H1-H3):** Roboto 500. Dark gray (`#1A1A1A` or `rgba(0,0,0,0.87)`).
|
|
- **Body Text:** Roboto 400. Gray (`#333333` or `rgba(0,0,0,0.87)`).
|
|
- **Secondary Text/Captions:** Roboto 400. Light Gray (`#666666` or `rgba(0,0,0,0.6)`).
|
|
|
|
## 2. Color Palette
|
|
|
|
### Primary System
|
|
- **Primary:** `#f1b40d` (Amber/Gold)
|
|
- **Primary Variant (Hover):** `#e0a80b` (Darker Amber) or `#f1b40d9a` (Transparent)
|
|
- **Primary Text (On Light):** `#000000` (often used with amber background for high contrast)
|
|
- **Primary Light/Background:** `#FFF8E1` (Very light amber for active states)
|
|
|
|
### Neutral System
|
|
- **Background (App):** `#f8f9fa` (Light Gray/White smoke)
|
|
- **Surface (Cards/Sidebars):** `#ffffff` (White)
|
|
- **Dividers/Borders:** `rgba(0, 0, 0, 0.12)` or `#e0e0e0`
|
|
|
|
### Semantic Colors
|
|
- **Success:** `#4CAF50` (Green) - used in badges/toasts
|
|
- **Warning:** `#FF9800` (Orange) - used in alerts
|
|
- **Error:** `#F44336` (Red) - used in form errors
|
|
- **Info:** `#2196F3` (Blue) - used in status badges
|
|
|
|
## 3. UI Components & Tokens
|
|
|
|
### Buttons
|
|
- **Primary Button:**
|
|
- Background: `#f1b40d` (or custom dark `#353433c6` in some contexts)
|
|
- Text: White or Dark (depending on contrast)
|
|
- Radius: `4px`
|
|
- Padding: `0.375rem 0.75rem`
|
|
- **Secondary/Outline Button:**
|
|
- Background: Transparent
|
|
- Border: `1px solid rgba(0,0,0,0.12)`
|
|
- Text: Dark Gray
|
|
|
|
### Cards (`.card`)
|
|
- Background: `#ffffff`
|
|
- Border: `1px solid rgba(0,0,0,0.12)`
|
|
- Radius: `8px`
|
|
- Shadow: `0 2px 8px rgba(0, 0, 0, 0.1)`
|
|
- Padding: `1.5rem`
|
|
|
|
### Complex Cards (Vehicle/Info Pattern)
|
|
Based on `.vehicle-popup` styles, use this structure for rich content cards:
|
|
- **Header:** `#f8f9fa` background, contains Title and Status Badge.
|
|
- **Body:** White background, padding `15px`.
|
|
- **Metrics Strip:** Gray container `#f8f9fa` with rounded corners inside the body.
|
|
- **Footer:** Driver/User info with avatar.
|
|
|
|
### Tables (`.data-table`)
|
|
- **Container:** Rounded corners `8px`, `overflow: hidden`.
|
|
- **Header (`th`):** Background `#f8f9fa` (Surface Variant). Font weight `500`.
|
|
- **Rows (`tr`):** White background. Border bottom `1px solid rgba(0,0,0,0.12)`.
|
|
- **Hover:** Rows highlight with `rgba(0, 0, 0, 0.02)` or specific hover color.
|
|
- **Cell Padding:** `0.75rem` (12px).
|
|
|
|
### Inputs
|
|
- Background: `#ffffff`
|
|
- Border: `1px solid rgba(0,0,0,0.12)`
|
|
- Radius: `4px`
|
|
- Padding: `0.75rem`
|
|
- Focus Ring: `2px solid rgba(241, 196, 15, 0.2)` components
|
|
|
|
## 4. Layout Dimensions
|
|
- **Sidebar (Expanded):** `240px`
|
|
- **Sidebar (Collapsed):** `80px`
|
|
- **Header Height:** `68px`
|
|
- **Content Padding:** `1rem` (16px) or `1.5rem` (24px) for cards
|
|
|
|
## 5. Angular Material (Version 19)
|
|
- Use standard Material components (`<mat-form-field>`, `<mat-card>`, `<mat-table>`) but perform style overrides in `styles.scss` or component CSS to match the **Amber/Gold** theme, as standard Material themes ("Indigo/Pink") do not match our identity.
|
|
- **Icon Set:** use `mat-icon` with Google Material Icons font.
|
|
|
|
## 6. Dark Mode Strategy
|
|
- Class: `.dark-theme` on body.
|
|
- **Background:** `#121212` or `#212020`
|
|
- **Surface:** `#1e1e1e`
|
|
- **Text:** White (`rgba(255,255,255,0.87)`)
|
|
- **Primary:** Adjusted to `#FFD700` (lighter Gold for better dark contrast)
|