nvg8.io — Design System

1. Visual Theme & Atmosphere

nvg8 is a navigation-themed product with an unapologetic brutalist-meets-pop energy. The design system is built around a rich named-color palette where every swatch has a specific role: orange for CTAs, lime for success/highlight, purple for tech, yellow for warmth. Built on Nuxt, the site uses custom typefaces (OldschoolGrotesk + Aeonik) to straddle editorial boldness and product clarity. The result feels like a confident startup that learned from 2000s web typography but recontextualised it for 2025.

2. Color Palette & Roles

The system is intentionally chromatic — not a “one accent” setup. Color communicates meaning across the UI.

3. Typography Rules

• Display: OldschoolGrotesk — heavyweight (900), massive tracking (-2.944px), used for hero statements. Sizes reach 73px+ at viewport scale.
• Body/UI: Aeonik — a geometric grotesque at 500 weight, small sizes (12–13px), tight line-height. Controlled and functional.
• Display and UI fonts create a deliberate contrast: loud headlines, quiet interface.
• No serifs. No system fonts in key positions.
• Side margin defined via --sideMargin: 8rem, pulling back to 2.4rem mobile.

4. Component Stylings

• Border-radius: Soft-pill at 9.6–22px. Rounded but not fully circular.
• Shadows: None defined — elevation is achieved through color contrast and stacking.
• Buttons: Likely filled with orange or lime, pill-shaped corners.
• Cards: Dark surface (#141414) with white or lime text.
• Animation: Custom easing curves defined (--n-out, --n-in-out) — motion is intentional, not default.

5. Layout Principles

• Wide side margins (8rem) on desktop create a contained editorial spine.
• Black-background sections interspersed with color-fill blocks.
• Grid-based structure, likely CSS Grid for feature sections.
• Horizontal rhythm achieved through color-coded content blocks.

6. Depth & Elevation

Flat design philosophy. No box shadows in the system. Depth is created entirely through color: black backgrounds recede, lime and orange surfaces advance. Z-axis conveyed through color temperature and saturation, not shadow.

7. Do’s and Don’ts

Do:

• Use color intentionally — each hue has a semantic role
• Lean into the editorial scale of OldschoolGrotesk for headlines
• Apply custom easing to transitions (use the defined cubic-beziers)

Don’t:

• Mix all accent colors in one view — pick one per section
• Use system fonts where Aeonik or OldschoolGrotesk should appear
• Add drop shadows; the design’s depth comes from color alone

8. Responsive Behavior

Side margins collapse from 8rem to 2.4rem on mobile. OldschoolGrotesk scales down proportionally — confirm it renders at minimum 32px on mobile. Nuxt-powered, so expect code-split per route.

9. Agent Prompt Guide

Reproduce nvg8.io style: near-black #141414 base, warm white #fdf9f0, OldschoolGrotesk 900 for display, Aeonik 500 for UI text. Orange #ff6d38 CTAs, lime #c7ff69 highlights, purple #7a78ff tech accent. Pill-radius (9–22px). Zero shadows — depth via color contrast. Custom cubic-bezier easing on all transitions.

Generated by Sparkbites — extracted from live CSS analysis