Skip to content

Foundations

2. Foundations

2.1 Color System

Color is one of the most immediate ways users perceive a brand. In NS-OG 2.0, our palette has been carefully chosen to support a balance between energy, readability, and hierarchy. The primary color #002eff anchors major actions and interactive elements, signaling attention and importance. Secondary accents in #febf00 provide warmth and contrast for highlights or complementary actions.

For the astro-themed components, #9e00ff is used to signify specialized functionality and create a visual signature unique to Astro within the suite. Backgrounds are grounded in #151520, a deep neutral that ensures content stands out without feeling harsh, while #1f1f39 is used sparingly as a highlight to create subtle layering and depth. Pure white #ffffff provides contrast where needed, particularly for text or interactive elements on darker surfaces.

The use of color is always purposeful: primary and secondary colors should be reserved for key actions, astro branding is reserved for thematic elements, and all applications must maintain sufficient contrast to comply with WCAG AA/AAA standards. This ensures clarity, accessibility, and a coherent visual language throughout the Nova ecosystem.

2.2 Typography

Typography in NS-OG 2.0 centers around the Garet font, which now serves as the permanent typographic voice for all Nova Suite platforms. Garet offers clean, geometric letterforms that read clearly across devices, giving the suite a modern yet approachable tone.

The hierarchy of text sizes is designed to guide the user’s eye through content intuitively:

  • text-sm (14px) is used for small badges, labels, or secondary text.

  • text-base (16px) serves as the standard body copy.

  • text-lg (18px) is ideal for feature card titles or secondary headings.

  • text-xl (20px) works well for section headings and card titles.

  • text-2xl (24px) is reserved for major section titles or pricing displays.

  • text-3xl (30px) signals feature section titles.

  • text-4xl (36px) is used for main section headings.

Using these sizes consistently ensures that content is both scannable and visually appealing, creating clear hierarchies without overwhelming the user. Line height, letter spacing, and weight should always be maintained consistently to preserve legibility and balance.

2.3 Container System and Layout

One of the key principles of NS-OG 2.0 is structure. Our container system establishes visual hierarchy and ensures that content aligns predictably across screen sizes. Applications use a set of maximum widths for different content types, creating a rhythm and balance that feels deliberate and cohesive:

  • max-w-6xl (72rem / 1152px) is ideal for main content areas or feature grids.

  • max-w-5xl (64rem / 1024px) works well for banner sections or wide content blocks.

  • max-w-4xl (56rem / 896px) suits comparison tables and medium content blocks.

  • max-w-3xl (48rem / 768px) is used for call-to-action sections.

  • max-w-2xl (42rem / 672px) is perfect for centered text content or descriptive sections.

All containers are horizontally centered using mx-auto, with px-6 providing a base responsive padding. Nested containers are encouraged when complex layouts require modular grouping or visual separation.

Spacing throughout NS-OG 2.0 is systematic, inspired by Tailwind conventions: generous section padding, consistent card padding, and well-defined margins and gaps create breathing room and visual rhythm. Section padding ranges from py-20 (major sections) to py-8 (internal component spacing), while content padding ranges from p-8 for large cards to px-6 for horizontal alignment. Margins and gaps follow a logical scale, ensuring all elements feel visually related.

This system supports a mobile-first approach, with breakpoints at md (768px) and lg (1024px) ensuring responsive layouts scale elegantly from phone to desktop.

2.4 Glassmorphism

NS-OG 2.0 introduces glassmorphic surfaces as a core design language for depth and visual sophistication. Glass surfaces use semi-transparent backgrounds with subtle backdrop blurs and shadowing to create layers without adding clutter. This effect is often paired with gradients or highlights from the Nova palette to reinforce hierarchy and branding. Glassmorphism is used strategically, not decoratively, to support clarity and focus in the interface.

2.5 Motion and Interaction

Motion in NS-OG 2.0 is purposeful and meaningful. It guides the user’s attention, communicates system status, and enhances the feel of interactions without distraction.

Entrance animations such as fade-in-up are used with staggered timing to lead the user through content naturally. Hover states often employ subtle glow-pulse or gradient-shift effects, while interactive feedback relies on scale transforms, shadow changes, and color transitions. All transitions follow a smooth 0.3s duration (transition-all duration-300) for consistency.