Components¶

3. Components¶

3.1 Buttons¶

Buttons in NS-OG 2.0 are highly expressive yet consistent. Hero buttons feature fully rounded corners (50px) to convey emphasis, while standard buttons use rounded-lg (8px) for a familiar, touch-friendly feel. Padding varies by size (px-4 py-2 up to px-8 py-4), and colors may be solid, gradient, or transparent with borders. Hover interactions scale buttons slightly (hover:scale-105), add subtle elevation, and transition backgrounds smoothly to communicate interactivity clearly.

Our navigation system favors simplicity and hierarchy. Most items are hidden under submenus, reducing clutter and allowing users to focus on the current task. App bars and sidebars are consistent across apps, ensuring users always know where to look for navigation or key actions.

3.3 Inputs and Fields¶

Input elements maintain a clean and approachable aesthetic. Borders are subtle (border-surface), backgrounds may be transparent or surface-colored, and padding ranges from px-4 py-3 to px-6 py-3 for larger fields. Focus states are highly visible (outline: 2px solid var(--nova-primary)), and transitions remain smooth and consistent. Corner radii follow the established scale: rounded-lg (8px) for standard fields and (12px) for emphasized inputs.

3.4 Modals and Dialogs¶

Modals utilize semi-transparent backdrops to focus attention on the content. Containers are typically constrained (max-w-2xl mx-auto), with padding between p-6 and p-8. Backgrounds use bg-surface with backdrop blur, and borders (border-surface/50) add subtle definition. Rounded corners (rounded-xl) and entrance animations (fade-in-up) reinforce hierarchy and interactivity.

3.5 Interactive States¶

Across all components, interactive states follow the same principles:

Buttons scale and adjust shadows on hover or press.
Cards elevate slightly and adjust borders when active.
Links change background color or underline dynamically.

These interactions are subtle, consistent, and reinforce the tactile feel of Nova Suite.