From de8b62ef028aac3a57111ff56c1bfb831b3a4fb1 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 25 Feb 2026 05:35:27 +0000 Subject: [PATCH] Run ui-ux-agent: Improve landing page a11y and add style guide - Created `docs/style-guide.md` documenting design system. - Refined `landing/index.html` with ARIA attributes and keyboard navigation for agent selection. - Verified changes with Playwright script. Co-authored-by: PR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> --- docs/style-guide.md | 95 ++++++++++++++++++ landing/index.html | 34 +++++-- ...02-25T05-34-21Z__ui-ux-agent__completed.md | 22 ++++ verification.png | Bin 0 -> 117564 bytes verification_debug.png | Bin 0 -> 117166 bytes verify_landing.py | 43 ++++++++ verify_landing_final.py | 49 +++++++++ 7 files changed, 233 insertions(+), 10 deletions(-) create mode 100644 docs/style-guide.md create mode 100644 task-logs/weekly/2026-02-25T05-34-21Z__ui-ux-agent__completed.md create mode 100644 verification.png create mode 100644 verification_debug.png create mode 100644 verify_landing.py create mode 100644 verify_landing_final.py diff --git a/docs/style-guide.md b/docs/style-guide.md new file mode 100644 index 0000000..c2f7863 --- /dev/null +++ b/docs/style-guide.md @@ -0,0 +1,95 @@ +# TORCH Style Guide + +This document outlines the design system, color palette, and typography used in the TORCH project (`dashboard/` and `landing/`). + +## Color Palette + +The project uses a dark theme with high-contrast text and vibrant accents. + +### Core Colors + +| Name | CSS Variable | Hex | Usage | +|:---------------|:-------------------|:----------|:-------------------------------------------| +| **Surface** | `--surface` | `#0b1020` | Main background color. | +| **Surface Alt**| `--surface-alt` | `#151b2f` | Card backgrounds, headers, secondary areas.| +| **Text** | `--text` | `#dbe4ff` | Primary body text (slightly blue-tinted). | +| **Text Strong**| `--text-strong` | `#ffffff` | Headings, emphasized text. | +| **Muted** | `--muted` | `#9aa6c6` | Secondary text, metadata, descriptions. | +| **Border** | `--border` | `#2a3456` | Borders for cards, inputs, dividers. | + +### Brand & Functional Colors + +| Name | CSS Variable | Hex | Usage | +|:---------------|:-------------------|:----------|:-------------------------------------------| +| **Accent** | `--accent` | `#4f8cff` | Primary buttons, active states, links. | +| **Accent Strong**| `--accent-strong`| `#2f6be5` | Hover states for accent elements. | +| **Info** | `--info` | `#46b7ff` | Informational messages, icons. | +| **Info Strong**| `--info-strong` | `#8ad4ff` | Stronger info emphasis. | +| **Success** | `--success` | `#35c47c` | Success messages, "Active" statuses. | +| **Warning** | `--warning` | `#f5b84b` | Warning alerts. | +| **Danger** | `--danger` | `#ff6b6b` | Error messages, destructive actions. | + +### Auxiliary Colors + +| Name | CSS Variable | Hex | +|:---------------|:-------------------|:----------| +| **Purple** | `--purple` | `#a855f7` | +| **Pink** | `--pink` | `#ec4899` | +| **Teal** | `--teal` | `#2dd4bf` | + +## Typography + +### Font Families + +* **Primary**: `Inter`, `system-ui`, `-apple-system`, `Segoe UI`, `Roboto`, `sans-serif` +* **Monospace**: `ui-monospace`, `SFMono-Regular`, `Menlo`, `Monaco`, `Consolas`, `monospace` + +### Hierarchy + +* **Headings**: Bold (`700`), `Text Strong`. +* **Body**: Regular (`400`), `Text`. +* **Small/Meta**: Small size, `Muted`. + +## Components + +### Buttons + +* **Primary CTA**: + * Background: `var(--accent)` + * Text: `white` + * Border Radius: `9999px` (Pill shape) + * Hover: `var(--accent-strong)`, slight transform up. +* **Secondary CTA**: + * Background: Transparent or low opacity white. + * Border: `var(--border)` + * Text: `var(--text)` + * Hover: Lighter background, `Text Strong`. + +### Cards + +* Background: `var(--surface-alt)` +* Border: `1px solid var(--border)` +* Radius: `12px` or `1rem` +* Hover: Border color changes to `var(--accent)`, slight lift (`transform: translateY(-5px)`). + +### Status Badges + +* Small, pill-shaped (`border-radius: 99px`). +* Uppercase, bold, small font size. +* Active: Background `var(--accent)`, Text `var(--surface)`. +* Disabled/Inactive: Background `rgba(255,255,255,0.1)`, Text `var(--muted)`. + +## Layout + +* **Container**: Max-width `1200px` centered. +* **Grid**: Responsive grids using `grid-template-columns: repeat(auto-fit, minmax(..., 1fr))`. +* **Spacing**: Uses `rem` units (e.g., `1rem`, `2rem`, `4rem`). + +## Accessibility Guidelines + +* **Contrast**: Ensure text passes WCAG AA standards against the dark background. +* **Interactive Elements**: + * Must have `role="button"` or be `