Nova Logic Design System

Brand & Style

Nova Logic is a forward-thinking, technical, and high-energy brand. It bridges the gap between precision engineering and modern digital expression. The aesthetic is "Corporate Modern" with a "High-Contrast" edge, utilizing vibrant electric blues and high-visibility accents to convey a sense of speed, intelligence, and reliability.

The brand personality is authoritative yet approachable. By combining technical geometric typography with softer, pill-shaped UI elements, it moves away from rigid utilitarianism toward a more futuristic, high-performance identity. It is designed for users who value clarity, modern technical aesthetics, and efficient workflows.

Colors

The color palette is anchored by a high-octane Primary Electric Blue (#1507ff), which serves as the main driver for action and brand recognition. This is contrasted by a Secondary Pale Yellow (#fffbbd), used for highlighting interactive areas or providing high-visibility warmth against the cooler primary tones.

A Tertiary Deep Red (#9e0700) is used sparingly for critical alerts, high-impact highlights, or distinct semantic departures from the blue-heavy interface. The Neutral palette consists of balanced Silver-Greys (#bbbbbb), providing a clean, professional foundation that allows the vibrant primary and secondary colors to pop without visual clutter.

Typography

The system utilizes Space Grotesk across all layers—headlines, body, and labels. Space Grotesk is a geometric sans-serif that retains technical "quirks" which give the brand its distinct, futuristic feel.

• Headlines: Use bold weights and tighter line-heights to create a strong visual impact and clear hierarchy.
• Body text: Set with generous line-heights to ensure readability despite the font's expressive geometric nature.
• Labels: Leverage medium weights and slight letter spacing to maintain clarity at smaller sizes, echoing a "monospaced" aesthetic without sacrificing legibility.

Layout & Spacing

The design system employs a Fluid Grid model with a consistent 4px baseline. This ensures vertical rhythm and proportional scaling across various screen sizes.

Standard gutters are set to 24px, providing ample white space to prevent the technical typography from feeling cluttered. Margins are generous at 32px to frame the content effectively. Layouts should prioritize logical grouping and clear scanning paths, using the 16px (md) spacing unit as the primary gap between related elements.

Elevation & Depth

Nova Logic uses Tonal Layers and Ambient Shadows to create a sense of depth. Surfaces utilize light tints of the silver-grey neutral color to distinguish between background and containers.

Elevation is communicated through:

• Low-level depth: Subtle 1px borders using a semi-transparent version of the Neutral silver color.
• High-level depth: Soft, diffused shadows with a slight cool-blue tint to suggest the element is lifted and interactive.
• Interactive state: Elements may use a slight "glow" or increased shadow spread when hovered, reinforcing the high-energy digital theme.

Shapes

The UI utilizes a Pill-shaped / High-Rounded aesthetic. This creates a friendly and modern contrast against the sharp, technical nature of the typography.

Standard components use a 1rem (16px) corner radius. Larger containers, such as cards or modals, utilize even larger radii (32px to 48px) to create soft, defined boundaries that feel cohesive and contemporary.

Components

Buttons

Primary buttons are solid Electric Blue with white text and 1rem rounded corners. Secondary buttons use the Pale Yellow background with dark text to provide high-contrast visibility.

Cards

Cards use a 32px corner radius and a subtle Silver-Grey border. The background should be slightly off-white or silver-tinted to differentiate from the page background.

Input Fields

Fields feature a consistent 1rem rounded radius. They use the Silver-Grey neutral for borders, which shifts to Primary Blue upon focus to indicate active engagement.

Chips & Tags

Chips are fully rounded (pill-shaped) to distinguish them from buttons, using light tints of the Primary Blue or Tertiary Red for categorized information.