FoundationsComponents
Foundations

Seven decisions. Zero raw values.

Every Nexus interface is assembled from these seven foundations. Each one is encoded as design tokens — CSS variables consumed through utilities — so a decision made once holds everywhere.

Colors

A three-tier token palette — Base primitives feed Semantic intents, which feed Component roles. No hex codes, ever.

View colors
AaGrotesk · Mono

Typography

Space Grotesk for voice, Chivo Mono for captions — every style a composite utility, from display to caption.

View typography

Grid & Layout

Responsive column grids and admin-portal layouts across seven breakpoints, from mobile 360 to desktop 1920.

View grid

Spacing

A single numeric scale drives every padding, margin, and gap — so rhythm stays consistent on every screen.

View spacing

Corner Radius

From hairline 2px softening to full pills — one radius ramp shared by inputs, cards, badges, and buttons.

View radius

Effects

Elevation shadows and focus rings — depth used sparingly, so hairline borders stay the primary structure.

View effects

Icons

A generated, typed icon library — SVGR components in fill and outline styles, recolored purely through tokens.

View icons

A token-first design system — color, type, spacing, and accessible components that keep every screen consistent across web, tablet, and mobile.

Social Media Handles
Foundations
  • Colors
  • Typography
  • Grid & Layout
  • Spacing
  • Corner Radius
Components
  • Alert
  • Avatar
  • Badge
  • Button
  • Form Fields
© 2026 Nexus Design System. All rights reserved.Nexus Design System v1.0