Design Principles

Core principles that guide every design decision in NH-UI

Principles

1. Clarity Above All

Every interface element must have a clear purpose and meaning.

2. Relentless Consistency

Similar things should look and behave similarly across the system.

3. Accessibility is Universal

Great design works for everyone, regardless of their abilities.

4. Performance is a Feature

Fast interfaces feel more responsive and trustworthy.

API Design

Semantic Props

Props use clear, semantic names that describe intent rather than implementation.

isLoading vs showSpinner

isDisabled vs disabled

startContent vs leftIcon

Consistent APIs

Similar components share similar prop patterns.

Common Props

sizecolorvariantisDisabledclassName

Size Values

sm
md
lg

Implementation Guidelines

Design Process

1

Research

Understand user needs and business requirements

2

Design

Create solutions aligned with design principles

3

Validate

Test with users and iterate based on feedback

Quality Standards

Code Quality

✓ 100% TypeScript coverage

✓ Comprehensive unit tests

✓ Automated accessibility testing

✓ Performance benchmarks

Design Quality

✓ WCAG 2.1 AA compliance

✓ Cross-platform testing

✓ Performance optimization

✓ User testing validation

HeroUI • Build: 2025-08-04T19:49:45.450Z