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.

Last updated