Design

Fluid precision, editorial restraint. The brand and the tokens every Nexvyn component is built from, all CSS variables that follow light and dark theme.

Logo
Nexvyn mark

Nexvyn/Ui (...)

wordmark
Fonts

Aa

Geist

regular only
Accent--color-accent
Foreground--color-fg
Background--color-bg
Colors
Tone of voice

Calm and precise. We sound like a craftsperson showing their work, not a brochure selling it.

  • Plain words
  • No em dashes
  • Short sentences
  • Show, then tell
In use
Principles

  1. 01One signature moment

    Every component gets one motion people remember. Everything around it stays calm.

  2. 02Accent with intent

    The accent appears on focus, selection, and that signature moment. Everything else is neutral.

  3. 03Regular weight

    No bold anywhere. Hierarchy comes from size, color, and space.

  4. 04Quiet geometry

    Medium corners, a 4px grid, and a token behind every value.

Palette
Background
--color-bg
Surface
--color-surface
Surface 2
--color-surface-2
Border
--color-border
Border strong
--color-border-strong
Subtle
--color-subtle
Muted
--color-muted
Foreground
--color-fg
Error
--color-error
Success
--color-success
New
--color-new
Type scale
  • 30 · 3xlFluid
  • 24 · 2xlFluid
  • 20 · xlFluid
  • 18 · lgFluid
  • 16 · baseFluid
  • 14 · smFluid
  • 12 · xsFluid
Shape
  • sm
  • md
  • lg
  • xl
  • round
  • squircle
  • pill
Spacing
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
Motion
timevalue

Ease out

Entering or leaving the screen

--motion-ease-out

(0.22, 1, 0.36, 1)

  • instantState flips50ms
  • fastHovers, presses120ms
  • baseMost UI motion200ms
  • slowPanels, overlays320ms
  • showcaseSignature moments700ms
  • ambientAmbient loops1000ms
Animates onlytransformopacityclip-pathfilter