# Nfinite Design System

> High-fidelity monochrome precision anchored by deep obsidian surfaces and structured BDO Grotesk typography.

**Source:** [https://nfinite.app](https://nfinite.app) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Nfinite utilizes a high-contrast monochrome palette dominated by a deep navy-black obsidian (`#101223`) and pure white (`#ffffff`). The system relies on a rigorous 4px spacing grid and a versatile range of border radii (from 8px controls to 32px feature cards) to create a structured, technical atmosphere. Typography is exclusively **BDO Grotesk**, used in weights from 300 to 600, with tight negative letter-spacing on large display headings to maintain a compact, engineered feel. Vibrant accents like Royal Blue (`#436aff`) and Orange (`#ffab40`) are reserved for decorative moments and specific product identifiers, never competing with the primary monochrome UI.

## Signature DNA
1. **Obsidian Anchoring:** The use of `#101223` (Grey 900) as both the primary text color and the background for high-impact "Dark Mode" sections and primary CTAs.
2. **Technical Grotesque Scale:** BDO Grotesk headings use aggressive negative letter-spacing (up to -1.44px at 48px) to create a dense, modern typographic texture.
3. **Variable Radius Logic:** A clear hierarchy of rounding where functional UI (inputs/small cards) sits at 8px-12px, while large content containers use 20px-32px radii.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--_v2-colors---grey--900` | `#101223` | Primary text, primary button BG, dark section surfaces | 51 | 1.0 | Computed Style |
| `--white` | `#ffffff` | Page background, text on dark surfaces | 65 | 1.0 | Brand Page |
| `--_v2-colors---grey--500` | `#777986` | Secondary body text, button text | 147 | 1.0 | Computed Style |
| `--_v2-colors---grey--600` | `#5b5d6b` | Muted descriptive text | 62 | 1.0 | Computed Style |
| `--_v2-colors---grey--200` | `#d2d4da` | Borders, secondary surfaces | 49 | 1.0 | Computed Style |
| `--_v2-colors---grey--100` | `#f1f3f8` | Soft section backgrounds, hover states | 24 | 1.0 | Computed Style |
| `--black-primmary` | `#000000` | Absolute black for footer and specific surfaces | 9 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--_v2-colors---grey--700` | `#404252` | Surface backgrounds, secondary text | 10 | 1.0 | Computed Style |
| `--orange` | `#ffab40` | Decorative only (About page accents) | 5 | 1.0 | Computed Style |
| `--blue` | `#0b41ff` | Text accents, specific button text | 3 | 1.0 | Computed Style |
| `--royal-blue` | `#436aff` | Decorative only | 1 | 1.0 | Decorative Only |
| `--slate-blue` | `#7956dc` | Decorative only | 1 | 1.0 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| BDO Grotesk | 300, 400, 500, 600 | All headings, body, and UI | Inter | Proprietary |
| Geist Mono | 400 | Technical labels, taglines | JetBrains Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 52.8px | -1.44px | 400 | Hero H1 | `h1.heading-style-h1-v2` |
| `{type.h2}` | 32px | 35.2px | -0.96px | 400 | Section Headings | `h2.heading-style-h2-v2` |
| `{type.h3}` | 32px | 35.2px | -0.64px | 400 | Sub-section Headings | `h3.heading-style-h3-v2` |
| `{type.h4}` | 28px | 30.8px | -0.56px | 400 | Feature Titles | `h3.heading-style-h4-v2` |
| `{type.body-xl}` | 24px | 33.6px | normal | 300 | Intro Paragraphs | `p.text-size-xlarge` |
| `{type.body-lg}` | 20px | 28px | normal | 600 | Emphasized Body | `div.text-size-large` |
| `{type.body-md}` | 16px | 22.4px | normal | 400 | Default Body | `div.navbarv2_component` |
| `{type.caption}` | 12px | 12px | normal | 500 | Tags and Badges | `div.tag-text` |

### Principles
1. **Tight Display Tracking:** Large headings (32px+) must use negative letter-spacing to maintain visual density.
2. **Weight Contrast:** Use Light (300) for large-scale introductory text to contrast against SemiBold (600) UI labels.
3. **Monospace Utility:** Use Geist Mono at 12px-14px for taglines and technical metadata to signal precision.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.1}` | 4px | 27 |
| `{space.2}` | 8px | 44 |
| `{space.3}` | 12px | 46 |
| `{space.4}` | 16px | 35 |
| `{space.6}` | 24px | 9 |
| `{space.8}` | 32px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 8px | Form controls, small cards | 26 occurrences |
| `{radius.md}` | 16px | Standard feature cards | 17 occurrences |
| `{radius.lg}` | 20px | Large buttons, primary cards | 16 occurrences |
| `{radius.xl}` | 24px | Major section containers | 16 occurrences |
| `{radius.xxl}` | 32px | Large feature blocks | 9 occurrences |
| `{radius.pill}` | 1440px | Badges and pill buttons | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | None | Default page state | Standard sections |
| Floating | `rgba(0, 0, 0, 0.08) 0px 0px 50px -4px` | Hovered cards, About page cards | `Card` component |
| Deep | `rgba(0, 0, 0, 0.3) -33px 33px 47px 0px` | High-depth product showcases | Video/Image overlays |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a demo")
**Pages observed:** [https://nfinite.app](https://nfinite.app), [https://nfinite.app/about](https://nfinite.app/about)
**Spec:** Background: `#101223` | Text: `#ffffff` | Radius: `20px` | Padding: `0px 16px` | Typography: `BDO Grotesk 16px/500`
**States observed:** Default | Hover: Captured | Focus: Not captured | Active: Captured | Disabled: Not captured

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** [https://nfinite.app](https://nfinite.app)
**Spec:** Background: `transparent` | Text: `#101223` | Border: `1px solid #d2d4da` | Radius: `20px` | Padding: `0px 16px`
**States observed:** Default | Hover: Captured | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for services or use cases
**Pages observed:** [https://nfinite.app](https://nfinite.app), [https://nfinite.app/about](https://nfinite.app/about)
**Spec:** Background: `#ffffff` | Text: `#777986` | Radius: `16px` | Border: `none` | Shadow: `none`
**States observed:** Default | Hover: Captured (adds shadow)

#### Use Case Card
**Role:** Specific vertical descriptions
**Pages observed:** [https://nfinite.app](https://nfinite.app)
**Spec:** Background: `#f1f3f8` | Radius: `32px` | Padding: `32px` | Typography: `BDO Grotesk 16px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-contrast hero or transition bands
**Pages observed:** [https://nfinite.app](https://nfinite.app)
**Spec:** Background: `#101223` | Text: `#ffffff` | Radius: `0px` | Padding: `96px 0px`
**States observed:** Default

#### Meta Tag / Badge
**Role:** Categorization labels
**Pages observed:** [https://nfinite.app](https://nfinite.app)
**Spec:** Background: `transparent` | Text: `#777986` | Border: `1px solid #f1f3f8` | Radius: `1440px` | Typography: `BDO Grotesk 12px/500`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Gaps | 80px - 120px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Full 12-column layout, 48px display type |
| Mobile | 390px | Single column stack, display type scales to ~32px |

## Imagery & decoration
Nfinite uses hyper-realistic 3D product renders (retail items, furniture) against clean, neutral backgrounds. Decorative elements include soft-edged geometric shapes in accent colors (`#ffab40`, `#436aff`) used as background "blooms" behind technical content.

## Do's
- Use `#101223` for all primary headings to ensure 18.5:1 contrast.
- Apply `-1.44px` letter-spacing to BDO Grotesk when size is 48px.
- Use `16px` radius for standard content cards and `32px` for large section-level cards.
- Reserve Geist Mono for 12px technical metadata and tags.
- Ensure all primary buttons use the `20px` radius token.

## Don'ts
- **Wrong:** Using `#0b41ff` (Blue) as a primary background color. **Right:** Use `#101223`. **Reason:** Blue is a decorative accent, not a structural surface.
- **Wrong:** Applying bold weights (700+) to display headings. **Right:** Use weight 400. **Reason:** The brand relies on size and tracking for impact, not heavy weights.
- Do not use sharp corners (0px) for interactive UI elements; minimum radius is 8px.

## Similar brands
- Stripe (Technical precision, monochrome foundation)
- Linear (High-contrast dark mode, engineered aesthetic)
- Vercel (Geist typography, stark monochrome UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-obsidian: #101223;
  --color-white: #ffffff;
  --color-grey-500: #777986;
  --color-grey-200: #d2d4da;
  --color-accent-blue: #0b41ff;
  --font-main: "BDO Grotesk", sans-serif;
  --radius-card: 16px;
  --radius-button: 20px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "primary": { "value": "#101223" },
    "surface": { "value": "#ffffff" },
    "border": { "value": "#d2d4da" }
  },
  "font": {
    "family": { "value": "BDO Grotesk" }
  }
}
```

## Agent prompt examples
- "Generate a feature card using a white background, 16px border radius, and BDO Grotesk 16px text in #777986."
- "Create a primary CTA button with an obsidian #101223 background, white text, and a 20px border radius."
- "Design a dark section hero using #101223 background with a 48px BDO Grotesk heading at -1.44px letter-spacing."

## Known gaps
- Hover states for secondary buttons were only partially captured.
- Form input validation states (Success/Error) were not present in the analyzed pages.
- Mobile-specific navigation transitions were not captured in the static evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | [https://nfinite.app](https://nfinite.app) | 1440px | 2026-06-06 |
| About | [https://nfinite.app/about](https://nfinite.app/about) | 1440px | 2026-06-06 |
| Mobile Home | [https://nfinite.app](https://nfinite.app) | 390px | 2026-06-06 |