Nodi

Overview

Nodi is a procedural geometry design platform that bridges the gap between node-based visual programming and production-grade CAD/CAM workflows. The brand embodies "Technical Minimalism"—a design philosophy that prioritizes clarity and precision over ornamentation, using a dark, high-contrast interface to reduce cognitive load and allow complex 3D geometry to command visual attention. The UI employs a sophisticated dark palette (charcoal #2c2c2c, near-black #0f0f0f) anchored by a vibrant cobalt blue accent (#3781e2) that signals interactivity and guides users through node-graph workflows. The emotional response is one of professional confidence: the interface feels engineered, trustworthy, and capable of handling industrial-scale modeling tasks.

Nodi's voice is precise, technical, and unadorned. The brand avoids marketing hyperbole in favor of direct, specification-driven language. Tone examples: "Node-based geometry design tool" (not "revolutionary visual modeling"), "Production-Ready standalone CAD Engine" (not "powerful and flexible"). The vocabulary emphasizes capability and compatibility: B-Rep, Implicit surfaces, CAD/CAM, manufacturing-driven design. Typography reinforces this: Clash Display (a geometric, high-contrast display font) is reserved for hero headlines, while Inter (a neutral, highly legible sans-serif) handles all body and UI text. Example sentence in brand voice: "Nodi unifies B-Rep and Implicit modeling in a single node graph, enabling parametric workflows from concept to manufacturing."

Colors

Nodi's color system is built on a dark-first foundation designed for extended screen time and to showcase 3D geometry without visual competition. The primary surface is a deep charcoal (#2c2c2c), with a container stack that ranges from near-black (#0f0f0f) for the lowest layers to mid-gray (#424242) for elevated surfaces. This creates visual hierarchy through luminance rather than hue, a technique borrowed from professional CAD software. The on-surface text is a soft off-white (#f5f5f5) at 89% opacity, reducing eye strain on dark backgrounds. Primary accent color is cobalt blue (#3781e2), used exclusively on call-to-action buttons ("Try on Web"), interactive hover states, and focus indicators. This blue is never used for body text or backgrounds—it is reserved as a signal of actionability.

Typography

Nodi's type system pairs Clash Display (a geometric, high-contrast display typeface) with Inter (a humanist sans-serif optimized for screen legibility). Clash Display is used exclusively for hero headlines (display: 60px, fontWeight 500, lineHeight 68px, letterSpacing -0.02em) and major section headings (headline-lg: 48px, fontWeight 500), creating a distinctive, engineered aesthetic that reinforces the brand's technical positioning. All body and UI text uses Inter at weights 400 (regular) and 500–600 (medium/semibold). Body text is set at 16px with 24px line height and 0.01em letter-spacing, ensuring readability on dark backgrounds. Labels and button text use 14px with 0.02em letter-spacing, adding subtle emphasis through increased tracking. On dark backgrounds, apply a subtle text-shadow

Layout

Nodi uses a fluid, 12-column grid system with a maximum container width of 1440px, allowing the interface to scale gracefully from mobile (single column, full-width padding of 24px) to ultra-wide displays (multi-column layouts with symmetric gutters). The page rhythm is governed by a semantic spacing scale: 24px (md) for section separation, 40px (lg) for major content blocks, and 12px (sm) for component-level spacing. The header is fixed at the top with 24px rounded corners (border-radius: 24px) and sits 12px inset from the viewport edges, creating a floating effect that separates navigation from content. Hero section uses 64px (xl) vertical spacing above and below, establishing a clear visual break. Cards and containers use 24px internal padding (md) with 12px gaps between nested elements

Elevation & Depth

Depth in Nodi is conveyed through a restrained shadow system and luminance-based surface stacking, avoiding the heavy shadows common in Material Design. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and borders, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.25)) for modals and elevated overlays. Buttons use md shadows by default, transitioning to lg on hover to signal interactivity. The surface-container stack provides the primary visual hierarchy: each level is 8–12% lighter than the prev

Shapes

Nodi employs a "Precision Geometry" shape philosophy, using rounded corners strategically to soften technical interfaces while maintaining a sense of engineered precision. Buttons use full-radius rounding (border-radius: 9999px), creating pill-shaped affordances that are unmistakably clickable and modern. Cards and containers use 12px rounding (rounded.lg: 1rem), providing enough softness to feel contemporary without appearing playful or casual. Input fields use 4px rounding (rounded.DEFAULT: 0.5rem), maintaining a technical appearance while avoiding sharp corners that might feel harsh on dark

Components

Action Elements Buttons are the primary interactive element and use a strict two-state system: primary (blue #3781e2 background, white text, 40px height, 8px 24px padding, full-radius rounding) and secondary (transparent background, outline border 1px #505050, 40px height, 8px 24px padding, full-radius rounding). Primary buttons use md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and transition to a darker blue (#2563d9) on hover with lg shadow (0 4px 12px rgba(55, 129, 226, 0.25)), signaling increased interactivity. Active/pressed state uses #1e4fa3 with no shadow change. All button transitions use 200ms ease-in-out timing. Secondary buttons invert on hover: background becomes surface-container-high (#35383b) and text becomes primary blue (#3781e2), maintaining visual feedback without color

Do's and Don'ts

**Do**

• Do use primary blue (#3781e2) exclusively for interactive elements: buttons, links, focus states, and hover indicators. Never use it for backgrounds or body text.
• Do maintain the dark surface stack (surface-container-lowest through surface-container-highest) to create visual hierarchy through luminance, not color.
• Do pair Clash Display with Inter: Clash for hero headlines only (display and headline-lg), Inter for all body and UI text.
• Do apply md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and standard containers; reserve lg shadow for modals and elevated overlays.
• Do use full-radius rounding (9999px) for buttons to signal affordance; use 12px for cards and 4px for inputs to maintain the precision-geometry aesthetic.
• Do respect the spacing scale: 24px (md) for section separation, 12px (sm) for component gaps, 40px (lg) for major blocks.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) for smooth, professional feedback.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs; primary blue is reserved for the most important interactive elements.
• Don't apply shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.25)) to any element; Nodi's aesthetic relies on restraint and luminance-based hierarchy.
• Don't mix Clash Display with body text or UI labels; it is a display-only typeface and becomes unreadable below 32px.
• Don't use rounded corners smaller than 4px (rounded.DEFAULT) or larger than 24px (rounded.xl) for standard components; this breaks the precision-geometry system.
• Don't set text color to pure white (#ffffff) on dark backgrounds; use on-surface (#f5f5f5) at 89% opacity to reduce eye strain.
• Don't apply color transitions longer than 200ms; Nodi's interface should feel responsive and snappy, not sluggish.
• Don't introduce new accent colors outside the defined palette (primary blue, secondary periwinkle, error coral); this dilutes brand distinctiveness and creates visual chaos.