UI/UX Guidelines

Prahsys provides a React component library to help Channel Partners integrate our software modules consistently and efficiently. These guidelines exist to ensure that wherever Prahsys appears inside a Channel Partner platform, it feels cohesive, accessible, and true to the Prahsys brand without requiring Channel Partners to rebuild what we've already built.

Component Patterns

Prahsys UI is built using a library of reusable React components. These components cover the full range of interface needs such as buttons, inputs, form fields, cards, modals, tables, navigation elements, and status indicators. Each component is built to our token system, meaning colors, typography, spacing, and states are all handled consistently out of the box.

When integrating Prahsys modules into your platform, always use our provided components rather than rebuilding them in your own system. This ensures visual consistency, reduces integration time, and guarantees that updates to our components carry through without requiring rework on your end.

Component documentation including props, usage examples, and variant references is available in our developer documentation.

Spacing & Layout

Our spacing system is built on a base unit of 4px, meaning all spacing values are multiples of 4. This creates a consistent visual rhythm across every layout and ensures that components align predictably when combined. Common spacing values in our system are 4, 8, 12, 16, 24, 32, 48, and 64px.

When building layouts that incorporate Prahsys components, always respect the internal spacing of each component and avoid overriding padding or margin values. Components are designed to sit comfortably within standard layout containers and should not require spacing adjustments to feel at home in a well-structured layout.

Color in UI

All color usage in Prahsys UI is handled through our token system. Never hardcode hex values directly into components or layouts. Tokens are defined for both light and dark mode, and using them correctly is what ensures that interfaces switch between modes without requiring any manual intervention.

When integrating Prahsys modules, your platform should pass the correct mode context so that our components render with the appropriate token set. If your platform does not support dark mode, default to light mode tokens throughout.

Refer to the Colors section of these brand guidelines for the full token reference including token names, Tailwind color names, and hex values.

Typography in UI

Prahsys UI uses Inter exclusively, following the same type scale and weight system documented in the Typography section. In product interfaces, hierarchy is built primarily through body text sizes at varying weights rather than heading styles. This keeps dense interfaces clean and prevents large heading styles from competing with data and content.

When integrating Prahsys modules, ensure that Inter is loaded in your environment. If it cannot be loaded, apply the standard fallback stack documented in the Typography section. Do not substitute another typeface, and do not override the font size or weight values of any Prahsys component.

Accessibility Standards

Prahsys components are built to meet WCAG 2.1 AA standards. This means every component is designed with sufficient color contrast, keyboard navigability, screen reader support, and clear focus states. These standards are non-negotiable and should be preserved throughout any integration.

When placing Prahsys components within your own layouts, ensure that the surrounding context does not inadvertently reduce accessibility. This includes maintaining sufficient contrast between components and their backgrounds, preserving focus order in keyboard navigation flows, and never hiding or overriding focus indicators for aesthetic reasons.

If you have questions about accessibility compliance within your integration, refer to our developer documentation or reach out to our team directly.