# Nurix Design System

> High-contrast enterprise interface pairing deep midnight foundations with vibrant blue actions and electric lime accents.

**Source:** https://nurix.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Nurix utilizes a high-density "Midnight" palette (#13100f) as its primary canvas for data-heavy sections, contrasted against a clean white (#ffffff) foundation for editorial content. The system's primary interactive voltage is driven by "Vibrant Blue" (#245ae2), used for primary CTAs and key text highlights. A secondary "Electric Lime" (#d6f549) is used sparingly as a high-visibility accent for specific headings and markers. Typography is dominated by Manrope, utilizing medium weights (500) for display and regular (400) for body, creating a technical yet accessible enterprise aesthetic.

## Signature DNA
1. **The Midnight Shift** (The interface alternates between pure white canvases and deep neutral-800 (#13100f) sections to denote transition from marketing to technical metrics.)
2. **Vibrant Blue Interactivity** (Primary actions and "Rounded Buttons" consistently use #245ae2, often paired with 12px or 160px radii to soften the enterprise density.)
3. **Electric Accents** (Use of Electric Lime (#d6f549) for specific display text to break the monochrome/blue dominance, particularly in "Voice AI" callouts.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--white` | `#ffffff` | Primary page background and button text | 82 | 1.0 | `computed_style` |
| `--neutral-800` | `#13100f` | Primary dark surface and heading text | 13 | 1.0 | `--_new-style-palettes---neutrals--neutral-800` |
| `--neutral-600` | `#494949` | Secondary body text | 37 | 1.0 | `--_new-style-palettes---neutrals--neutral-600` |
| `--neutral-200` | `#c8c8c8` | Muted text and borders | 13 | 1.0 | `--_new-style-palettes---neutrals--neutral-200` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--vibrant-blue` | `#245ae2` | Primary CTA background and link text | 22 | 1.0 | `--_new-style-palettes---primary-colours--vibrant-blue` |
| `--electric-lime` | `#d6f549` | Decorative display text and accents | 5 | 1.0 | `--_new-style-palettes---primary-colours--electric-lime` |
| `--link-blue` | `#0000ee` | Standard hyperlink text | 41 | 0.8 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Manrope | 300, 400, 500, 600, 700 | Heading & UI | Manrope (Google Fonts) | SIL Open Font |
| Inter | 400 | Body & Footer | Inter (Google Fonts) | SIL Open Font |
| Geist | 500 | Technical Headings | Geist Sans | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-h1` | 62px | 74.4px | -1.86px | 500 | Hero Heading | `h1.heading-style-h1` |
| `display-neon` | 48px | 52.8px | -1.44px | 500 | Accent Heading | `div.custom-heading-neon` |
| `display-h2` | 40px | 49.6px | -1.2px | 500 | Section Heading | `h2.heading-style-h3` |
| `heading-md` | 32px | 35.2px | -0.96px | 500 | Sub-section | `h4.heading-style-h4` |
| `heading-sm` | 20px | 26px | -0.6px | 500 | Card Title | `div.custom-sub-heading-white` |
| `body-lg` | 18px | 25.2px | normal | 500 | Lead Paragraph | `h2.text-size-medium` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `div.new-nav_component` |
| `body-sm` | 14px | 21px | normal | 400 | Footer/Caption | `a.footer-menu-body-text-new` |

### Principles
1. **Negative Tracking on Display:** All headings 28px and above use negative letter-spacing (ranging from -0.84px to -1.86px) to maintain tension.
2. **Medium Weight Dominance:** Display roles prioritize weight 500 (Medium) over Bold to maintain a "tech-forward" clean aesthetic.
3. **Font Pairing:** Manrope is used for all brand-heavy moments; Inter is reserved for high-density footer links and specific paragraph blocks.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `--space-8` | 8px | 16 |
| `--space-16` | 16px | 13 |
| `--space-20` | 20px | 8 |
| `--space-32` | 32px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Sharp containers / Default buttons | 171 occurrences |
| `radius-control` | 12px | Standard rounded buttons | `Rounded Button` component |
| `radius-card` | 16px | Feature cards | `Surface` component |
| `radius-pill` | 160px | Soft pill buttons | `Rounded Button` (variant) |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `inset-glow` | `rgba(255, 255, 255, 0.59) 0px 0.79px 3.15px 0px inset` | Card depth | `Card` component |
| `brand-shadow` | `rgba(36, 90, 226, 0.04) 0px 32px 54.5px 0px` | Floating elements | Shadow evidence |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Action
**Pages observed:** https://nurix.ai
**Spec:** Background: `#245ae2` / Text: `#ffffff` / Radius: `12px` / Padding: `16px 32px` / Typography: `Manrope 12px`
**States observed:** Default | Hover: captured | Active: captured

#### Sharp Button
**Role:** Secondary/Navigation Action
**Pages observed:** https://nurix.ai
**Spec:** Background: `#ffffff` / Text: `#0000ee` / Border: `1px #0000ee` / Radius: `0px` / Typography: `Manrope 12px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Service/Benefit display
**Pages observed:** https://nurix.ai
**Spec:** Background: `transparent` / Border: `1px #e2e8f0` / Radius: `12px` / Padding: `20px` / Typography: `Manrope 16px`
**States observed:** Default | Hover: not captured

#### Metric Card
**Role:** Data visualization container
**Pages observed:** https://nurix.ai
**Spec:** Background: `transparent` / Shadow: `inset #ffffff96` / Radius: `10px` / Typography: `Manrope 16px`
**States observed:** Default

### Tier 3: Surface-specific
#### Midnight Section
**Role:** High-contrast content transition
**Pages observed:** https://nurix.ai
**Spec:** Background: `#13100f` / Text: `#ffffff` / Padding: `80px 0px`
**States observed:** Default

#### Pill CTA
**Role:** Soft-style secondary action
**Pages observed:** https://nurix.ai
**Spec:** Background: `transparent` / Border: `1px #245ae2` / Radius: `160px` / Typography: `Manrope 12px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gap | 80px - 120px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked grids, reduced heading sizes, 16px horizontal padding |
| Desktop | 1440px | 12-column grid, max-width containers |

## Do's
- Use `#13100f` for primary dark backgrounds to maintain brand depth.
- Apply negative letter-spacing to all Manrope headings above 24px.
- Use `#245ae2` for all primary "Schedule" or "Talk to" actions.
- Pair Electric Lime `#d6f549` only with dark backgrounds for maximum contrast.
- Maintain a 12px border radius for standard interactive cards.

## Don'ts
- **Wrong:** Using `#000000` for dark sections. **Right:** Use `#13100f`. **Reason:** Pure black breaks the "Midnight" brand depth.
- **Wrong:** Using Vibrant Blue `#245ae2` for body text. **Right:** Use `#494949`. **Reason:** Blue is reserved for interactivity and emphasis.
- **Wrong:** Applying 0px radius to feature cards. **Right:** Use 12px. **Reason:** Sharp edges are reserved for navigation and utility buttons.

## Similar brands
- Vercel (High contrast, monochrome foundations)
- Linear (Technical density, neutral-heavy palette)
- Scale AI (Enterprise AI aesthetic, blue/lime accents)

## Quick start

```css
:root {
  --nurix-midnight: #13100f;
  --nurix-blue: #245ae2;
  --nurix-lime: #d6f549;
  --nurix-white: #ffffff;
  --nurix-gray: #494949;
  
  --font-main: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-md: 12px;
  --radius-lg: 16px;
}
```

## Agent prompt examples
- "Create a hero section with a `#13100f` background, a `Manrope` weight 500 heading at 62px with -1.86px letter spacing, and a primary button using `#245ae2` with a 12px radius."
- "Design a 3-column grid of cards with 1px `#e2e8f0` borders, 12px border radius, and 20px internal padding."
- "Generate a call-to-action block using Electric Lime `#d6f549` for the headline text against a midnight background."

## Known gaps
- Hover state transitions for the "Pill CTA" (160px radius) were not fully captured in CSS variables.
- Mobile-specific typography scale for intermediate sizes (24px-32px) was limited in the sample.