Nexor Partners

Overview

Nexor Partners is a B2B SaaS partner program platform designed for a global network of AI sales professionals and agencies. The design system embodies **Technical Minimalism**—a philosophy that strips away visual noise to expose pure functionality, allowing complex partnership mechanics and recurring revenue models to feel intuitive and achievable. The brand personality is direct, confident, and growth-oriented: the UI speaks to ambitious partners who understand that simplicity in design reflects simplicity in execution. The color palette—deep blacks (#0a0a0b), crisp whites (#f4f5f6), and a signature emerald green (#2bb673)—creates a visual language that feels both premium and approachable, evoking trust in a fintech-adjacent space. Every interaction is designed to reduce friction: from form inputs with 4px padding and 8px border-radius to cards with subtle 0.5px borders and backdrop-blur effects that create depth without clutter.

The tone is precise and action-oriented. Nexor Partners avoids marketing hyperbole; instead, it speaks in concrete terms about recurring shares, implementation timelines, and deal mechanics. Example sentence: "You bring us a customer. We handle the rest. You earn a recurring share on every account." The vocabulary is direct ("Apply," "Earn," "Grow"), the sentences are short, and the visual hierarchy ensures that CTAs and key metrics are never buried. This is a design system for partners who value their time and expect clarity in return.

Colors

The color system is built on a foundation of near-black surfaces (#0a0a0b, #0f0f11, #171719) that provide a calm, focused canvas. These surfaces are layered using the Material 3 container stack: surface-container-lowest (#050506) for the deepest backgrounds, surface-container (#171719) for standard cards, and surface-container-high (#262629) for elevated or interactive states. Text is rendered in on-surface (#f4f5f6), a warm off-white that reduces eye strain on dark backgrounds while maintaining 16:1 contrast ratio for accessibility.

The primary accent is emerald green (#2bb673), used exclusively for CTAs, active states, and brand-critical interactions. This color signals growth, trust, and actionable opportunity—critical for a partner program where every click represents potential revenu

Typography

The type system uses Inter as the primary typeface, chosen for its exceptional legibility at small sizes (12px label-sm) and its geometric neutrality that complements the minimalist aesthetic. Inter is paired with Instrument Serif for occasional display moments (24px serif-lg) and JetBrains Mono (14px mono-md) for code snippets, API documentation, and technical content. The hierarchy is built on a 4px baseline grid: display (60px, 600 weight, -0.04em tracking) for hero headlines, headline-lg (40px, 600 weight) for section titles, body-md (16px, 400 weight) for body copy, and label-md (14px, 600 weight, 0.01em tracking) for buttons and interactive labels. All text is rendered with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale to ensure crisp rendering on dark ba

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, centered with mx-auto. The gutter is set to 32px on desktop, reducing to 24px on tablet and 16px on mobile, maintaining visual breathing room without sacrificing content density. Sections are separated using lg spacing (40px) to create clear visual breaks; within sections, components use md spacing (24px) for vertical rhythm. The navbar is fixed at 72px height with a sticky position and z-index: 50, ensuring it remains accessible without obscuring content. Cards and containers use 24px padding (md spacing) internally, with 16px padding (sm spacing) for input fields and list items. The container-max-width of 1440px ensures that on ultra-wide displays, content remains readable and the eye doesn't travel excessi

Elevation & Depth

Depth in this system is achieved through layered surfaces and subtle shadows rather than dramatic drop-shadows. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and popovers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Glass-specific shadows (glass-sm: 0 3px 8px rgba(0, 0, 0, 0.15), glass-md: 0 8px 24px rgba(0, 0, 0, 0.2)) are applied to frosted-glass cards with backdrop-filter: blur(10px) to create a sense of layering and separation from the background. Hover

Shapes

The shape philosophy is **Functional Precision**: border-radius values are chosen to balance approachability with technical credibility. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly, inviting appearance that encourages clicks. Cards and containers use lg radius (1rem) for consistency with buttons, reinforcing that all surfaces are interactive and part of the same system. Input fields use md radius (0.75rem / 12px), slightly tighter than buttons to signal their passive role in the interface. Badges and small UI elements use full radius (9999px) to cr

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses a solid background ({colors.primary}, #2bb673) with on-primary text (#0a0a0b), 12px vertical padding, 24px horizontal padding, and lg radius (16px). On hover, the background transitions to primary-container (#1a7d54) with a 150ms ease-out timing and a subtle upward translation (transform: translateY(-2px)) combined with glass-md shadow (0 8px 24px rgba(0, 0, 0, 0.2)). The button-secondary variant uses a transparent background with a 1px border in primary green and primary text, creating a lower-emphasis alternative for secondary actions. Both variants use label-md typography (14px, 600 weight) and a 48px height to ensure touch-friendly targets on mobile (minimum 44px per WCAG guidelines)

Do's and Don'ts

**Do**

• Do use primary green (#2bb673) exclusively for CTAs and active states—this color carries the brand's promise of growth and must never be diluted.
• Do maintain at least 16px padding (md spacing) inside cards and containers to prevent content from feeling cramped; white-space is a design feature, not wasted space.
• Do apply backdrop-filter: blur(10px) to all card surfaces to create depth through refraction; this technique is more performant and visually cohesive than drop-shadows alone.
• Do use Inter 600 weight for all interactive labels (buttons, links, badges) and 400 weight for body copy to create clear hierarchy without introducing new typefaces.
• Do transition all interactive elements with 150ms cubic-bezier(0.4, 0, 0.2, 1) timing to ensure motion feels responsive and natural, never jarring.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no gradients, no transparency values other than those specified in the component definitions.
• Don't apply border-radius values smaller than 0.5rem (8px) to interactive elements; this breaks the functional precision philosophy and makes small buttons feel fragile.
• Don't use drop-shadows as the primary depth mechanism; instead, layer surfaces with borders and backdrop-filter blur to maintain visual cohesion and performance.
• Don't set font-sizes smaller than 12px for body text or smaller than 14px for interactive labels; this violates accessibility standards and reduces legibility on dark backgrounds.
• Don't introduce new typefaces beyond Inter, Instrument Serif, and JetBrains Mono; consistency in typography reinforces the minimalist aesthetic and reduces cognitive load.