Styling standards

nova.css is a NovaOS feature that lets you apply NovaOS CSS on your application. This lets your application stay in the user's design choices. But for the default user, NovaOS, after a long time of research, has created a magic styling that's applied throughout NovaOS.

How we chose Nova.CSS

Typography and Responsive Scaling

• Font Selection and Scaling:

  • Integrate a clean, modern font for legibility and consistency across devices.

  • Use scalable font sizes to adjust to different screen dimensions, maintaining readability from small to large displays.

Color Palette

• Backgrounds:

  • Establish a dark theme with distinct layers to create depth between primary, secondary, and highlighted areas.

• Text and Accents:

  • Use high-contrast text for readability against dark backgrounds.

  • Incorporate special colors to signify positive and negative states for quick visual feedback.

Sizing and Spacing

• Border Radius and Element Shapes:

  • Apply rounded corners at various intensities to balance between smoothness and defined structure.

• Element Size Scaling:

  • Ensure scalable sizing units for adaptable layout spacing that feels natural across screen sizes.

Animations and Interaction Timing

• Action Timing:

  • Set quick interactions on larger screens for responsiveness and extend timing for smaller screens to account for different user touch inputs.

Scrollbar Customization

• Scrollbar Design:

  • Blend the scrollbar with the dark theme, adding a subtle hover effect to maintain visual coherence and provide a clear interactive cue.

Component Inheritance and Consistency

• Unified Element Styling:

  • Remove default browser styles and inherit fonts and sizes for buttons, inputs, and textareas to create a seamless, integrated look across all components.