# 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
| Name | Value | Role |
|------|-------|------|
| Black | `#141414` | Primary surface, headings |
| White | `#fdf9f0` | Warm white, text on dark |
| Orange | `#ff6d38` | Primary CTA, energy |
| Lime | `#c7ff69` | Highlight, success, feature callout |
| Purple | `#7a78ff` | Tech accent, secondary feature |
| Yellow | `#ffc412` | Warmth, tertiary accent |
| Green | `#00a652` | Status, confirmation |
| Blue | `#478bff` | Link, informational |

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*