Nova Design Systemv1.2.1

Foundations

Design tokens — type, color, spacing, radius, elevation.

Type scale — Intel One Mono (display) · Geist (UI)
text-5xlNova 52px
text-4xlNova 40px
text-3xlNova 30px
text-2xlNova 22px
text-xlNova 18px
text-lgNova 16px
text-baseNova 14px
text-labelNova 13px 600
text-smNova 12px
Color tokens (adapt to theme)
text
neutral
background
surface
surface-2
border
primary
secondary
accent
primary-soft
success-medium
warning-medium
error-medium
info-medium
Spacing scale
spacing-3xs · 2px
spacing-2xs · 4px
spacing-xs · 8px
spacing-sm · 12px
spacing-md · 16px
spacing-lg · 24px
spacing-xl · 32px
spacing-2xl · 48px
spacing-3xl · 64px
Radius scale
xs
sm
md
lg
xl
2xl
full
Elevation
shadow-sm
shadow-md
shadow-lg

Button

Variants, sizes, icon and disabled states.

Variants × md
Sizes (primary)
With icon · icon-only
Disabled

Badge

Tones × soft / solid.

Soft
primaryneutralsuccesswarningerrorinfo
Solid
primaryneutralsuccesswarningerrorinfo

Toggle · Checkbox · Radio

Selection controls in every state.

Toggle — off / on
Checkbox — unchecked / checked / disabled
Radio group

TextField

Text, email, password, textarea.

Fields
0 / 120

Select

Default and disabled.

Select
  • Option 1
  • Option 2
  • Option 3
  • Option 4
  • Option 5
  • Disabled

Numeric stepper

Increment / decrement control.

Stepper

5

Avatar

Photo and initials.

Types
John Doe
AS
JS
Bob Johnson

Loading bar

Determinate and indeterminate.

Known 75% · indeterminate

List item

Title and subtitle rows.

List

api-gateway

Edge routing · eu-west-1

postgres-main

Database · eu-west-1

redis-cache

Cache · eu-west-1

Tabs

Underline tabs with panels (interactive).

Tabs + content

Pagination

Page numbers with disabled edges.

Pagination

Notification

Info, success, warning and error.

All types

Tooltip

Four positions — hover the buttons.

Positions
Tooltip top Tooltip bottom Tooltip left Tooltip right

Card

With cover, plain and with footer actions.

Cover · plain · with footer

api-gateway

Edge routing · 99.98% uptime

Live

Quick note

A plain card without a cover image.

Deploy

Ship build 4821 to production.

Navbar · Sidebar

App chrome.

Navbar
Nova
AS
Sidebar

Icons

Library — 25 icons at 24px