Guidelines

Best practices and standards for design and development.

Install
pnpm add @gateflow/components

Package Hierarchy

Use the right tool for the right abstraction level to ensure maintainability.

UI
Atomics / PrimitivesButtons, inputs, cards. No business logic. Use for the basic building blocks of any view.
COMP
Product PatternsPageHeader, FilterBar. Reusable product UI structures. Use for consistent layout flows.
AI
Agentic PatternsMessages, streaming. LLM-specific interactions. Use for the AI Sentinel experience.
Read Full Component Library Guide

RTL & Localization

Native Arabic support is a hard contract for the MENA COMPOUND sector.

Logical Properties

Use `ps-*` instead of `pl-*`, and `border-e` instead of `border-r`. This ensures the layout flips automatically when `dir="rtl"` is detected.

Icon Reversal

Arrows and direction-based UI icons should mirror in RTL. Static brand icons (logos) should remain unchanged.

LTR
RTL

The No-Raw-Hex Law

Hardcoding hex colors as `text-[#ff0000]` or `bg-white` is strictly prohibited. It breaks theme inheritance (Dark Mode) and OKLCH perceptual uniform scaling.

text-[#0052cc]
Rejected
text-[var(--ds-text-brand)]
Approved

Accessibility First

Building for compound residents, security guards, and administrators means focusing on **predictability**, **keyboard operability**, and **high-contrast** semantic states.

Universal Standards

  • WCAG 2.1 AA Compliance
  • Native Keyboard Navigation
  • Prefers-Reduced-Motion Logic

Development Checklist

Verify your component against these criteria before publishing to @gateflow/*

v1.2.0-alpha
Inherits Light/Dark Tokens
Exports Types Correctly
Supports RTL Logic
Keyboard Operable
Responsive Layout (Mobile)
Zero Dependency Core
Semantic Event Handling
Storybook/Gallery Logic