Navi design system
Navi is a regenerative travel platform for New York City. This is its component library.
The Navi component library, rebuilt as live React. The source system used bright orange (#F3722C) for emphasis, but it failed WCAG AA on every button, so this build documents the accessible derivation (#C4541A, 4.54:1) and applies it system-wide.
Live
Pick a variant. Watch it update.
<Button variant="primary" size="md" />
Foundations
The canvas. Tokens, type, and spacing.
Color
Brand primitives → semantic aliases. Components reference semantic tokens, never raw hex.
Brand primitives
Semantic aliases
Type
Jost for display, Lato for body. Two families on a contrast axis (geometric + humanist).
Neighborhood-led travel
Welcome to Manhattan
Curated for your mood today
Supporting copy at 0.85 rem
Spacing
A 4px base scale. Every component padding and gap is one of these tokens.
Actions
Trigger something. Both variants use the contrast-corrected --nv-action token.
Button
Interactive surfaces use --nv-action (contrast-corrected).
Icon button
Forms
Fields and search. Required and help affordances use semantic --nv-error and --nv-info.
Label
Form-field label. Required uses --nv-error, help uses --nv-info, replacing the source's off-palette red and purple.
Search input
Calendar
Month picker from the source Figma (node 553-6053). The selected day uses the contrast-corrected --nv-action, not the source's #F3722C; past days are disabled when a min date is set.
July 2026
Date + time picker
The Calendar plus a start-time selector in a modal (Figma node 553-6399). It's the booking flow's 'pick another date' control: focus-trapped, scroll-locked, returns focus to the trigger on close.
Content
What an experience card is made of.
Tag
Category chips. Green here is distinct from the rating badge to fix the source's green overload.
Rating
Replaced the source traffic-light scale with a single brand badge and numeral, colorblind-safe and AA-compliant.
Avatar
Impact signal
New component (not in the source Figma). Surfaces an experience's regenerative impact in the card scan.
Card (composed)
A real experience card, assembled from Tag, Rating, Avatar, and ImpactSignal. The system showing up in the product.
Category chip rail
Horizontal scrolling rail with edge fades and chevron buttons that only appear when there's overflow to scroll to. Used at the top of the feed.
Navigation
Move between views and surface context.
PillRow
Shared visual primitive. Tabs and the sticky section nav both consume it.
Tabs
Tablist composition: one panel visible at a time. Use for settings, billing, anywhere you want N panels under one selector. For stacked, scroll-jump sections, use the Sticky section nav specimen below instead.
Sticky section nav
Anchor composition: all sections are visible and stacked. The nav jumps you to a section and tracks active state by scroll position. Used on the experience detail page.
Accordion
Tooltip
Map pin
One pin system. Orange place pins (darken when selected, white halo for legibility over imagery) plus a green current-location pin.
Carousel controls
See it in the product
The same components, assembled into a working booking flow.
Open the demo