Skip to content

Update UI/UX Design Rules Formatting #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
beginwebdev2002 merged 1 commit into from
Mar 26, 2026
Merged

Update UI/UX Design Rules Formatting #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions .jules/rules/ui-ux-design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ tags:
- jules
---

# 🎨 UI/UX Design & Styling Rules for Jules
# 🎨 UI/UX Design Production-Ready Best Practices

This document outlines the production-ready best practices for UI/UX Design and styling, specifically tailored for the Jules AI agent. It ensures consistent, accessible, and responsive user interfaces.

## 1. Context & Scope
- **Primary Goal:** Maintain a consistent, **accessible (a11y)**, and visually appealing user interface across all applications through strict **responsive design** practices.
Expand All @@ -28,6 +30,14 @@ tags:
> [!CAUTION]
> **Hardcoded Values:** Never use hardcoded colors, spacing, or typography values (`#FF0000`, `14px`). Always use established **Design Tokens** (e.g., CSS Variables or Tailwind classes like `text-primary`, `p-4`).

### Hardcoded vs Design Tokens Comparison

| Aspect | Hardcoded Value (Avoid) | Design Token (Prefer) | Benefits |
| :--- | :--- | :--- | :--- |
| **Colors** | `#FF0000`, `rgb(255, 0, 0)` | `var(--color-primary)`, `text-primary` | Theming, consistency, single source of truth |
| **Spacing** | `14px`, `20px` | `var(--spacing-md)`, `p-4` | Rhythm, responsiveness |
| **Typography** | `16px`, `bold` | `var(--font-size-base)`, `text-base font-bold` | Scalability, accessibility |

### Responsive & Adaptive Principles
1. **Mobile-First Approach:** Always write base CSS for mobile screens first, then progressively enhance the design for larger screens using `min-width` media queries.
2. **Fluid Layouts:** Prefer relative units (`rem`, `em`, `vh`, `vw`, `%`) over absolute units (`px`) for layout structures and typography to allow proper scaling.
Expand All @@ -45,16 +55,15 @@ graph TD
Elements --> Components[Complex Components: Cards, Modals]
Components --> Layouts[Page Layouts: Grids, Sections]

style Tokens fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000
style Elements fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000
style Components fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000
%% Added Design Token Styles for Mermaid Diagrams
classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;

class Tokens layout;
class Elements default;
class Components component;
class Layouts component;

```

---
Expand Down
Loading