Skip to content
Nova

Style guide

The design tokens and components behind Nova. Change colors in globals.css or switch palettes in site.ts.

Colors

Theme tokens. They switch with light and dark mode.

  • brand

  • brand-foreground

  • brand-hover

  • brand-subtle

  • brand-text

  • background

  • foreground

  • card

  • muted

  • muted-foreground

  • border

  • border-strong

  • input

  • success

  • warning

  • danger

Palettes

Set theme.palette in site.ts, e.g. "emerald".

  • "blue"
    Badge
  • "violet"
    Badge
  • "emerald"
    Badge
  • "orange"
    Badge
  • "rose"
    Badge

Typography

Inter + Instrument Serif accent + Geist Mono.

text-display

Display heading

text-headline

Section headline

text-lg font-medium

Card title

text-base text-muted-foreground

Body text is Inter at 16px with relaxed line height for comfortable reading on every screen.

Eyebrow · font-mono

Eyebrow label

Buttons

Badges

NeutralBrandSuccessWarningDanger

Cards

Card

shadow-card, rounded-xl, hairline border.

Spotlight card

Hover me: the light follows the cursor.

Elevated + beam

shadow-elevated with the BorderBeam component.

Form fields

Helper text sits under the field.

Radius & shadows

  • rounded-sm
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
shadow-card
shadow-elevated