testes/Modulos Angular/projects/idt_app/DESIGN_SYSTEM_AI.md

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)