style(frontend): modernize entire UI with warm clay/ivory design system - #13
Merged
Conversation
…esign Replace legacy color classes with new design tokens across all admin and secondary pages: - Colors: gray → foreground/secondary/muted, blue → primary, red → error, green → success, yellow → warning, orange → warning - Backgrounds: bg-white → bg-surface, bg-gray-100/50 → bg-background - Borders: gray-200/300 → border/border-strong - Rounded: md → lg - Focus states: blue-500 → primary/20 with border-primary Updated pages: - Admin: users, settings, audit-logs, sod-policies, compliance-reports, vendor-risk, pam, maker-checker, data-security, access-recertification - Secondary: problems, catalog, assets, reports https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
- globals.css: new semantic token system (primary clay, warm ivory bg, light sidebar, warm stone neutrals), fix Geist font (was overridden by Arial), add content fade-in animation and refined scrollbars - sidebar: dark→light conversion, active left accent rail, logo mark, smaller icons, refined user footer - header: backdrop-blur, search refined, primary Create button with chevron, notifications dropdown with warm borders - button: clay primary, active:scale tactile press, soft focus-visible ring, rounded-lg (was rounded-md) - input: warm border, soft focus ring (primary/20), secondary labels - loading: primary clay spinner color, warm skeleton backgrounds - empty-state: primary-subtle icon bg, clay action button - breadcrumbs: muted/secondary text hierarchy, smaller icons - dropdown-menu: warm surface, rounded-xl, border-border - layout: bg-background frame, primary spinner
…ay design Modernize all key dashboard pages to match the new Anthropic/Claude-inspired design system with warm clay/ivory tones. Updated pages include: - Dashboard page: stat cards with primary colors, redesigned chart styling, modern card patterns with new border and background tokens - Issues list: updated table styling with badge patterns using semantic status colors, modernized form inputs and filter UI - Issue creation form: new form sections with updated styling tokens - Changes list: redesigned table with semantic status/type/risk badges with rings - Change creation form: modernized form sections and input styling All design token updates maintain existing logic, data fetching, state management, and navigation patterns. Replaced all blue/gray colors with warm primary, secondary, and semantic (success/warning/error/info) colors as defined in globals.css. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
…kens Replace hardcoded red/green hex values in charts with warm clay (#c96442) and forest green (#3f7d52) semantic colors. Update error boundary to use error-subtle/error tokens consistently across both ErrorBoundary and ErrorDisplay components. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
… clay design Replace hardcoded Tailwind color classes with design tokens across dashboard pages: - bg-white, bg-gray-* → bg-surface, bg-background, bg-surface-hover - text-gray-* → text-foreground, text-secondary, text-muted - border-gray-* → border-border, border-border-strong - Status colors: blue → primary, red → error, green → success, yellow → warning, purple → info - Shadows: shadow-md → shadow-sm - Fix button hover state duplication Updated files: - assets/page.tsx - catalog/page.tsx - catalog/[id]/page.tsx - cloud/page.tsx - cloud/resources/[id]/page.tsx https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
Replace remaining hardcoded surface colors with design tokens: - bg-white → bg-surface - bg-gray-50/bg-gray-100 → bg-background - bg-*-100 (primary, success, error, warning, info) → bg-*-subtle - text-*-800 → text-* (primary, success, error, warning, info) This completes the warm clay design system migration across all five dashboard pages. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
asklokesh
force-pushed
the
claude/banking-top-10-todos-tsmq9x
branch
from
June 14, 2026 17:00
88cfecd to
ae69df5
Compare
Fix remaining hardcoded color classes in configuration objects and icon colors across all reports and requests pages.
…esign Replace hardcoded color classes with design tokens across all oncall and problems pages: - Tailwind color classes (bg-white, text-gray-900, etc.) → design token classes (bg-surface, text-foreground, etc.) - Shadow utilities (shadow, shadow-md) → shadow-sm - Border radius (rounded-lg) → rounded-xl on card wrappers - Maintain all logic, state management, and API interactions unchanged https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
…okens Complete color token migration for remaining admin pages: - email: replaced gray/blue colors with design tokens - integrations: replaced gray/blue colors with design tokens - groups: already modernized on remote branch CSS-only changes: no logic, state, hooks, or API modifications. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
Replace hardcoded color classes with design tokens for the warm clay/ivory design system. Updated all applications list, detail, creation, and edit pages to use semantic color tokens (bg-surface, text-foreground, bg-primary-subtle, text-error, etc.) instead of Tailwind gray/blue/red/green classes. Also updated shadow and border radius tokens for consistency. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
…th warm clay design tokens Replace hardcoded color classes with design tokens across three pages: - changes/[id]/page.tsx: Update status, type, and risk color mappings and apply tokens throughout - changes/cab/page.tsx: Apply design tokens to CAB meeting UI components - changes/calendar/page.tsx: Update calendar grid styling with new tokens and special calendar formatting All changes are CSS-only with no logic modifications. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
…tion and data-security Replace final instances of gray-300, gray-200, and blue-500 with design tokens: - access-recertification: progress bar colors - data-security: toggle switch inactive state CSS-only changes: no logic, state, hooks, or API modifications. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
…min and feature pages
…oncall, problems, reports, requests Replace all remaining hardcoded Tailwind color classes (bg-gray-*, text-gray-*, bg-blue-*, bg-red-*, bg-green-*, etc.) with semantic design tokens across catalog/[id], cloud, oncall, problems, reports, and requests pages. This completes the full warm clay/ivory design system migration across all 50+ dashboard pages with zero legacy color references remaining. https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
asklokesh
marked this pull request as ready for review
June 14, 2026 19:23
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete frontend UI modernization with a unified warm clay/ivory design language inspired by Anthropic/Claude's aesthetic. No logic, API calls, or state management was changed — CSS only.
bg-primary,bg-surface,text-foreground,text-muted, etc.) inglobals.csswith warm clay primary (#c96442), warm ivory background (#faf9f5), and Geist fontactive:scale-[0.98]micro-interactionsDesign tokens
Test plan
https://claude.ai/code/session_019gaq1wegnEekd5PNXoxk4D
Generated by Claude Code