# How nvg8.io is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/nvg8.io-design)

Last updated: 2026-08-10

## Captured pages

[![Hero section with split layout: vibrant fashion illustration on green background paired with purple panel containing oversized display typography and pill-shaped CTA button, plus](https://pin.fontofweb.com/8491?format=jpg)](https://design.withfudge.com/share/pin-8491)

[Hero section with split layout: vibrant fashion illustration on green background paired with purple panel containing oversized display typography and pill-shaped CTA button, plus](https://design.withfudge.com/share/pin-8491)

[![Dark hero section with massive cream-colored display headline 'Playing Data Quest to Build' overlaid with colorful floating badges and icons, followed by centered body copy on](https://pin.fontofweb.com/8490?format=jpg)](https://design.withfudge.com/share/pin-8490)

[Dark hero section with massive cream-colored display headline 'Playing Data Quest to Build' overlaid with colorful floating badges and icons, followed by centered body copy on](https://design.withfudge.com/share/pin-8490)

[![Orange background FAQ section with extremely large black display heading 'Most Common Questions', featuring pill-shaped question toggles and rounded answer cards with cream](https://pin.fontofweb.com/8488?format=jpg)](https://design.withfudge.com/share/pin-8488)

[Orange background FAQ section with extremely large black display heading 'Most Common Questions', featuring pill-shaped question toggles and rounded answer cards with cream](https://design.withfudge.com/share/pin-8488)

[![Isolated navigation bar with dark charcoal pill-shaped container, orange square logo mark, white text links, and bright lime-green pill CTA button on orange background.](https://pin.fontofweb.com/8487?format=jpg)](https://design.withfudge.com/share/pin-8487)

[Isolated navigation bar with dark charcoal pill-shaped container, orange square logo mark, white text links, and bright lime-green pill CTA button on orange background.](https://design.withfudge.com/share/pin-8487)

## Overview

NVG8 presents itself as a Web3-native data platform with a visual identity that prioritizes immediate impact and cultural relevance. The design language is unapologetically bold: oversized grotesque display type dominates every section, set against stark black backgrounds or saturated accent colors that shift between electric purple, vibrant orange, and lime green. The system avoids conventional corporate restraint in favor of a gaming-influenced aesthetic that speaks to a community of "Navigators" participating in data collection.

The interface structure is built around a few recurring patterns: pill-shaped containers for navigation and calls-to-action, rounded rectangular panels for content grouping, and floating badge-like elements that overlay headlines with additional context. Typography operates at two scales—massive display headings that demand attention, and compact medium-weight body copy that delivers information efficiently. The overall impression is of a platform that treats data infrastructure as something playful and participatory rather than technical and opaque.

## Colors

The color system is built on extreme contrast between near-black foundations and vivid accent hues. The palette is intentionally small, with each color serving a distinct and memorable role.

| token | value | use |
|---|---|---|
| canvas | #000000 | Primary page background, deepest layer |
| surface | #141414 | Navigation bar, elevated dark panels, FAQ toggle backgrounds |
| ink | #141414 | Primary text on light backgrounds, borders, wordmark fill |
| ink-inverse | #FDF9F0 | Primary text on dark backgrounds, navigation links |
| accent-lime | #C7FF69 | Primary CTA buttons, highlight badges, active states |
| accent-orange | #FF6D38 | Section backgrounds, footer panels, energetic moments |
| accent-purple | #7A78FF | Hero panel backgrounds, secondary section fills |
| accent-cream | #FDFAF2 | FAQ answer cards, social link backgrounds, subtle contrast surfaces |

The dark mode is effectively the default: black and near-black backgrounds dominate, with warm cream text providing softer contrast than pure white. Accent colors are deployed in large flat areas rather than as subtle highlights—the orange and purple sections are full-bleed color fields that completely transform the page's character. The lime green functions as the primary action color, reserved for the most important conversion moments. Cream appears as a deliberate inversion point, offering a brief respite from the saturated palette in functional areas like FAQ answers.

## Typography

Two font families create a clear hierarchy: Oldschool Grotesk for display and Aeonik for everything else. The contrast between the two is extreme—Oldschool Grotesk's extra-bold weight and tight negative tracking produces headlines that feel almost architectural, while Aeonik's medium weight maintains readability at smaller sizes with a contemporary geometric neutrality.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | Oldschool Grotesk | 11.25rem | 900 | 0.9 | -0.04em | Primary headlines, hero statements |
| section-display | Oldschool Grotesk | 9rem | 900 | 0.9 | -0.04em | Section headings, FAQ titles |
| body-large | Aeonik | 1.35rem | 500 | 1.2 | 0.01em | Hero descriptions, prominent body copy |
| body | Aeonik | 1.2rem | 500 | 1.2 | 0.01em | Standard paragraphs, FAQ answers |
| label | Aeonik | 0.9rem | 700 | 0.85 | 0.015em | Buttons, badges, navigation CTAs |
| navigation | Aeonik | 0.9rem | 500 | 1 | 0.01em | Nav links, secondary labels |

Oldschool Grotesk is credited to designer William Montrose and vendor Kilotype GmbH. Aeonik is credited to designers Mark Bloom and Joe Leadbeater and vendor Co Type Foundry. Verify licensing for these families before production use.

The display scale is intentionally disruptive: headlines run to 180px and beyond, with line heights compressed to 0.9 so text blocks feel like solid forms rather than readable sentences. Letter spacing is aggressively negative at display sizes, creating tight word shapes that reinforce the system's graphic quality. Body copy compensates with generous line height and slight positive tracking for comfortable reading.

## Layout

The page structure alternates between full-bleed dark sections and color-blocked content areas. The hero establishes the pattern: a split composition with illustrative content on one side and typographic content on another, separated by a hard edge rather than a gradient or shadow.

Section spacing follows a generous rhythm. Major sections are separated by substantial vertical padding—approximately 6.75rem—while internal content maintains tighter 2.4rem gaps. The grid appears to be fluid rather than strictly column-based, with elements sized proportionally to their content rather than snapping to rigid columns.

Navigation sits as a floating pill-shaped bar, not anchored to the top edge but positioned with comfortable clearance. This treatment reinforces the playful, non-corporate attitude of the system. Footer content is organized into rounded panels that echo the navigation's shape language, creating visual continuity across the page's vertical axis.

Content panels use asymmetric rounding: some corners are fully rounded while others remain sharp, creating a directional, arrow-like quality that suggests movement and progression. This is particularly visible in the footer wordmark container and certain CTA elements.

## Visual language

The system's visual character is defined by three qualities: scale, saturation, and shape. Display typography operates at a scale that competes with imagery for attention. Colors are fully saturated, never muted or pastel, creating an almost screen-printed intensity. Shapes are universally rounded, with pills and rounded rectangles replacing sharp corners throughout.

Illustrations and photography appear in vibrant, high-contrast styles that match the interface's energy. The fashion illustration in the hero uses flat color blocking and bold outlines, while floating badges and icons employ simple geometric forms in accent colors. These elements are not decorative afterthoughts but integral parts of the visual system, treated with the same graphic boldness as the typography.

Borders are used sparingly but precisely: 1px or 1.5px hairlines in dark ink on light surfaces, creating definition without weight. The FAQ answer cards demonstrate this clearly—a thin border provides just enough separation from the orange background without introducing visual heaviness.

Negative space is treated as an active element. Large headline text frequently breaks across lines in unexpected places, and the space between letters becomes part of the composition. The floating badges that overlay headlines exploit this, positioning themselves in the gaps between words.

## Components

### Navigation bar

The navigation bar is a dark charcoal pill floating above content. It contains the orange square logo mark with white "N" symbol, followed by text links in medium-weight Aeonik. A dropdown indicator appears on "Products." The right side features a lime-green pill CTA with bold label typography. The bar's background is slightly lighter than pure black, creating subtle elevation without shadow.

- Anatomy: Logo mark, text links, divider line, dropdown, CTA button
- Surface: Background `{colors.surface}`, links `{colors.ink-inverse}`
- Typography: Navigation token for links, label token for CTA
- Shape: Pill container with approximately 4.8rem radius, internal elements with smaller rounding
- Spacing: Compact horizontal padding, comfortable vertical proportions

### Hero section

The hero presents a split-panel composition. One side contains vibrant illustration; the other contains oversized display typography on a solid purple background. A description paragraph sits below the headline in body-large typography. The CTA area combines a small icon badge with a large pill button containing bold label text.

- Anatomy: Illustration panel, content panel, headline, description, icon badge, primary CTA
- Surface: Purple panel `{colors.accent-purple}`, cream text `{colors.ink-inverse}`
- Typography: Hero-display for headline, body-large for description
- Shape: Large rounded corners on panels, pill CTA
- Composition: Asymmetric split, approximately 50/50 with hard edge between

### FAQ section

The FAQ uses a full-bleed orange background with massive section-display typography in dark ink. Question toggles are dark pill-shaped buttons with cream text. Answer cards appear below with cream backgrounds, thin dark borders, and body typography. A small circular icon marks the active state.

- Anatomy: Section heading, question toggle, answer card, state indicator
- Surface: Orange background `{colors.accent-orange}`, toggles `{colors.ink}`, answers `{colors.accent-cream}`
- Typography: Section-display for heading, body for questions and answers
- Shape: Pill toggles, rounded rectangular answer cards with approximately 1.5rem radius
- Spacing: Generous vertical rhythm between question-answer pairs

### Footer

The footer organizes content into rounded panels. A large orange panel contains the "NVG8" wordmark in display typography. Adjacent panels hold link columns and social connections. Social links appear as cream pills with dark borders and bold labels.

- Anatomy: Wordmark panel, link columns, social links, legal copy
- Surface: Orange panel `{colors.accent-orange}`, cream panels `{colors.accent-cream}`
- Typography: Section-display for wordmark, label for social links, navigation for column headers
- Shape: Rounded panels, pill social links
- Composition: Asymmetric grid with dominant wordmark element

### Floating badges

Small rounded-rectangular badges overlay headlines at various positions. They contain bold label text and appear in accent colors—lime, purple, orange—with dark text. These elements break the grid and add dimensional interest to flat compositions.

- Anatomy: Badge container, label text, optional icon
- Surface: Various accent colors, dark text
- Typography: Label token
- Shape: Small rounded rectangle with approximately 1.725rem radius
- Composition: Positioned to intersect with display typography

## Responsive behavior

The design's bold scale and split compositions will require careful adaptation at narrower viewports. The hero's side-by-side layout should stack vertically, with the illustration preceding the content panel. Display typography will need proportional scaling—headlines that read as graphic elements at desktop may require reduced size or line-break adjustments to maintain impact without overflow.

The navigation pill may need to collapse to a simplified menu or hamburger pattern on small screens, as the full link set plus CTA will exceed narrow viewport widths. FAQ toggles should remain full-width, with answer cards expanding to use available horizontal space.

Color and shape language should remain consistent across breakpoints. The rounded, friendly character of the system is integral to its identity and should not be compromised for space efficiency.

## Practical implementation guidance

### Preserve
- The extreme scale contrast between display and body typography
- Full-bleed accent color sections with hard edges
- Pill-shaped navigation and CTA elements
- Asymmetric corner rounding on panels
- The two-family type hierarchy (Oldschool Grotesk + Aeonik)
- High-saturation accent palette against near-black foundations

### Avoid
- Introducing gradients or shadows for elevation—the system uses flat color and shape
- Reducing display type to conventional headline sizes
- Adding decorative elements that compete with the bold graphic language
- Using pure white instead of the specified warm cream for light text
- Sharp corners on interactive elements

### Recommended build order
1. Establish the dark foundation with canvas and surface colors
2. Implement the type hierarchy with both font families at specified scales
3. Build the pill-shaped navigation as the primary reusable component
4. Create the hero split-panel layout with hard color transitions
5. Develop FAQ toggle and answer card pattern
6. Add floating badge elements for headline overlays
7. Implement footer with asymmetric panel composition

### Accessibility
- Ensure cream text on dark backgrounds meets WCAG AA contrast ratios; the warm tone is slightly less contrasted than pure white and should be verified
- Large display type benefits from sufficient line height to prevent overlap when zoomed
- Pill-shaped interactive elements need visible focus states that respect the rounded form
- Color should not be the sole indicator of interactive state; consider underline or icon changes for links
- The lime green CTA color against dark backgrounds should be tested for contrast compliance

## Scope note

This guide covers the NVG8 landing page surface including hero, FAQ, and footer sections. Motion behavior, additional interior pages, form validation states, and mobile-specific layouts are not represented in the available material. The rounded corner values and spacing measurements reflect the desktop viewport proportions visible in the source.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).