Analyse de capture d'écran d'interface utilisateur et générateur de brief de conception

{ // Design Brief "overview": "AuditFlow is a modern government audit application dashboard. The UI is clean, professional, and data-dense, designed for clarity and efficiency. It features a left sidebar for navigation, a top header with search and user actions, and a main content area with key metrics, charts, and a recent activity table. The design emphasizes readability and a sense of trustworthiness, suitable for a government context.", "layout": { "structure": "The layout is a classic dashboard structure: a fixed left sidebar (collapsible on smaller screens), a sticky top header, and a scrollable main content area. The main content is divided into a grid of cards and panels.", "sidebar": "Contains the app logo, primary navigation links (Dashboard, Audits, Reports, Findings, Settings), and a user profile section at the bottom. Icons accompany each navigation item.", "header": "Contains a global search bar, a notification bell with a badge, a help icon, and the user's avatar and name.", "main_content": "Starts with a page title and a subtitle. Below that, a row of four key performance indicator (KPI) cards. Then, a large area for a primary chart (e.g., audit completion over time) and a secondary panel for 'Recent Findings'. Finally, a full-width table for 'Active Audits'." }, "components": { "kpi_cards": "Four cards in a row, each with a title, a large number, a trend indicator (up/down arrow with percentage), and a small icon. The first card is highlighted with a subtle background tint.", "charts": "The primary chart is a line/area chart showing audit progress. The secondary panel contains a list of recent findings with severity tags (e.g., 'High', 'Medium', 'Low').", "table": "A standard data table with columns for Audit Name, Department, Status (with a colored badge), Progress (with a progress bar), and Due Date. Rows are separated by subtle dividers.", "buttons": "Primary buttons are solid and use the primary color. Secondary buttons are outlined or ghost. Icon buttons are used for actions like filtering or exporting.", "tags_badges": "Status badges are rounded and colored: 'Completed' (green), 'In Progress' (blue), 'Pending' (yellow), 'Overdue' (red). Severity tags follow a similar color logic." }, "interactions": { "hover": "Navigation items and table rows have a subtle background change on hover. Buttons have a slight elevation or color shift.", "focus": "Focus states are clearly visible with a focus ring (using the primary color) for keyboard navigation.", "responsive": "The layout is responsive. On smaller screens, the sidebar collapses into a hamburger menu, the KPI cards stack vertically, and the table becomes horizontally scrollable or transforms into a card-based list." }, "light_mode": { "background": "A very light gray (e.g., #F9FAFB) for the main canvas, with white cards and panels.", "text": "Primary text is a dark gray (e.g., #111827), secondary text is a medium gray (e.g., #6B7280).", "borders": "Light gray borders (e.g., #E5E7EB) for cards and dividers." }, "dark_mode": { "background": "A very dark gray (e.g., #111827) for the main canvas, with slightly lighter dark cards (e.g., #1F2937).", "text": "Primary text is a light gray (e.g., #F9FAFB), secondary text is a medium gray (e.g., #9CA3AF).", "borders": "Dark gray borders (e.g., #374151) for cards and dividers." }, "responsive_breakpoints": { "sm": "640px - Stack KPI cards, hide sidebar, show hamburger menu.", "md": "768px - Show sidebar, KPI cards in 2x2 grid.", "lg": "1024px - KPI cards in 4 columns, charts side-by-side.", "xl": "1280px - Default layout, full width utilization.", "2xl": "1536px - Max content width, extra padding." } } ``` ```markdown # UI Implementation Brief ## Overview Implement a modern, professional dashboard UI for a government audit application. The design should convey trust, clarity, and efficiency. It must be fully responsive and support both light and dark color schemes. ## Core Layout - **Sidebar**: Fixed on the left, collapsible on smaller screens. Contains the logo, primary navigation, and a user profile section. - **Header**: Sticky at the top. Includes a global search bar, notification bell with a badge, help icon, and user avatar. - **Main Content**: A scrollable area with a page title, a row of KPI cards, a primary chart, a secondary panel, and a data table. ## Key Components - **KPI Cards**: Four cards displaying key metrics. Each has a title, a large value, a trend indicator, and an icon. The first card should have a subtle accent background. - **Charts**: A primary line/area chart for audit progress. A secondary panel listing recent findings with severity tags. - **Data Table**: Shows active audits with columns for name, department, status (colored badge), progress (bar), and due date. - **Buttons & Tags**: Use a consistent button style (primary, secondary, ghost). Status and severity tags should be rounded and color-coded. ## Design Tokens - **Primary Palette**: Use a single primary color for main actions, active states, and key highlights. Define its shades (e.g., 50-900) for hover, focus, and subtle backgrounds. - **Secondary Palette**: Use a single secondary color for supporting elements, charts, and secondary highlights. Define its shades similarly. - **Grays**: Define a full gray scale for backgrounds, borders, and text. Ensure sufficient contrast in both light and dark modes. - **Accent Colors**: Define a limited set of accent colors for specific states (e.g., success, warning, danger) and for chart series. These should be used sparingly. ## Responsive Behavior - **Mobile (base)**: Stack all content vertically. Sidebar is hidden behind a hamburger menu. KPI cards stack. Table becomes a card list. - **Tablet (sm/md)**: Show the sidebar. KPI cards in a 2x2 grid. Charts stack vertically. - **Desktop (lg)**: KPI cards in a 4-column row. Charts can be placed side-by-side. - **Wide (xl/2xl)**: Maximize content width, add comfortable padding. ## Light and Dark Mode - **Light Mode**: Use light gray backgrounds, white cards, and dark text. Borders should be subtle. - **Dark Mode**: Use dark gray backgrounds, slightly lighter cards, and light text. Borders should be subtle but visible. - Ensure all components adapt seamlessly. Use CSS variables for all colors to enable easy theme switching. ## Final Notes - Focus on clarity and data readability. Avoid unnecessary visual clutter. - Ensure all interactive elements have clear hover and focus states. - The UI should feel modern, accessible, and trustworthy.