Skip to content

feat: FIT-1393: Create DESIGN.md#9389

Merged
robot-ci-heartex merged 8 commits intodevelopfrom
fb-fit-1393
Feb 13, 2026
Merged

feat: FIT-1393: Create DESIGN.md#9389
robot-ci-heartex merged 8 commits intodevelopfrom
fb-fit-1393

Conversation

@ricardoantoniocm
Copy link
Contributor

This pull request introduces a comprehensive design system guideline for Label Studio, detailing UI consistency, accessibility, component usage, styling, and anti-patterns. The new rule file provides clear instructions for developers to ensure interfaces align with the HumanSignal brand and design language.

Design system and UI consistency guidelines:

  • Added .cursor/rules/design.mdc with detailed guidance on brand principles, content voice, accessibility requirements (WCAG 2.1 AA), and semantic design tokens for colors, spacing, and typography.
  • Provided rules for component reuse, naming conventions, and explicit instructions to use the @humansignal/ui library and Storybook for component development and discovery.

Styling and component development:

  • Included best practices for using Tailwind utilities and SCSS modules, emphasizing semantic tokens and discouraging hard-coded values or numeric tokens.
  • Outlined file structure and React patterns for component development, including Storybook requirements and responsive design utilities.

Anti-patterns and quick reference:

  • Listed common anti-patterns to avoid (e.g., custom components, hard-coded styles, accessibility issues) and provided quick reference links to related rules and documentation.

@netlify
Copy link

netlify bot commented Feb 13, 2026

Deploy Preview for label-studio-storybook canceled.

Name Link
🔨 Latest commit 8f47c80
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-storybook/deploys/698f31a78b3ae70008a82697

@netlify
Copy link

netlify bot commented Feb 13, 2026

Deploy Preview for label-studio-docs-new-theme canceled.

Name Link
🔨 Latest commit 8f47c80
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/698f31a735a4e5000857a290

@github-actions github-actions bot added the feat label Feb 13, 2026
@netlify
Copy link

netlify bot commented Feb 13, 2026

Deploy Preview for heartex-docs canceled.

Name Link
🔨 Latest commit 8f47c80
🔍 Latest deploy log https://app.netlify.com/projects/heartex-docs/deploys/698f31a730dc2300083c95cb

@netlify
Copy link

netlify bot commented Feb 13, 2026

Deploy Preview for label-studio-playground canceled.

Name Link
🔨 Latest commit 8f47c80
🔍 Latest deploy log https://app.netlify.com/projects/label-studio-playground/deploys/698f31a7d3ca7a000806078c

Create DESIGN.md and design.mdc cursor rule to provide LLM agents with comprehensive guidance for creating consistent, accessible UIs following the HumanSignal design language.

Key additions:
- Brand principles, personality, and mission
- Content guidelines (voice, tone, writing style, vocabulary)
- WCAG 2.1 AA accessibility standards with keyboard navigation requirements
- Design tokens (semantic vs numeric, color system, spacing, typography)
- Component library reference with Storybook integration
- Styling guidelines (Tailwind, SCSS modules, component tokens)
- Component development patterns and best practices
- UI patterns: saving settings, empty states, button hierarchy
- Canvas element color handling with getTokenColor utility
- Anti-patterns and quick reference

The documentation ensures consistent visual design, accessibility compliance, dark mode compatibility, and efficient component reuse across Label Studio.

Co-authored-by: Cursor <cursoragent@cursor.com>
@ricardoantoniocm ricardoantoniocm requested a review from a team February 13, 2026 00:14
@ricardoantoniocm ricardoantoniocm self-assigned this Feb 13, 2026
@ricardoantoniocm ricardoantoniocm marked this pull request as ready for review February 13, 2026 13:37
ricardoantoniocm and others added 2 commits February 13, 2026 08:56
Add comprehensive modal guidelines covering:
- Footer action placement (default right-aligned, Previous buttons left-aligned)
- Button visual hierarchy based on alignment direction
- Destructive action confirmation requirements
- High-impact destructive actions requiring typing validation
- Modal stacking guidance (avoid modal-over-modal)

Includes code examples showing correct patterns for standard modals, navigation modals, and destructive action modals with validation.

Co-authored-by: Cursor <cursoragent@cursor.com>
Move button visual hierarchy guidelines from Modal Patterns to the general Button Hierarchy section, as these rules apply to all button groups (modals, forms, toolbars, page-level actions), not just modals.

Changes:
- Button Hierarchy section now includes visual hierarchy by alignment rules
- Right-aligned buttons: hierarchy flows right to left (primary rightmost)
- Left-aligned buttons: hierarchy flows left to right (primary leftmost)
- Modal Patterns section now references the general Button Hierarchy guidelines

Co-authored-by: Cursor <cursoragent@cursor.com>
@ricardoantoniocm ricardoantoniocm marked this pull request as draft February 13, 2026 14:08
ricardoantoniocm and others added 2 commits February 13, 2026 09:10
Streamlined DESIGN.md and design.mdc to be more actionable and agent-focused:
- Removed philosophical explanations and non-actionable content
- Condensed examples to essential patterns only
- Simplified verbose descriptions to concise directives
- Removed maintenance/process documentation
- Fixed capitalization rule inconsistency in design.mdc
- Pointed to terminology.mdc for domain terms
- Focused on implementation guidance over conceptual explanations

The documentation now provides clear, actionable rules for building UIs
while maintaining all critical design system requirements.

Co-authored-by: Cursor <cursoragent@cursor.com>
Point to @humansignal/ui library and Storybook instead of listing
specific components to avoid documentation becoming outdated.

Co-authored-by: Cursor <cursoragent@cursor.com>
@ricardoantoniocm ricardoantoniocm marked this pull request as ready for review February 13, 2026 15:04
@robot-ci-heartex robot-ci-heartex merged commit 11d8a19 into develop Feb 13, 2026
72 checks passed
@robot-ci-heartex robot-ci-heartex deleted the fb-fit-1393 branch February 13, 2026 19:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants