Writrospect Design System

A soft, neomorphic design language built for calm and focus

Color Palette

Background

--background

Foreground

--foreground

Shadow Light

--shadow-light

Shadow Dark

--shadow-dark

Accent

--accent

Accent Soft

--accent-soft

Accent Primary

--accent-primary

Accent Border

--accent-border

Typography

Heading Font: Comfortaa

Heading 1

Heading 2

Heading 3

Heading 4

Body Font: Nunito

Large body text for emphasis and introductions.

Regular body text for general content and paragraphs.

Small text for secondary information and captions.

Extra small text for metadata and timestamps.

Neomorphic Shadow System

Subtle

--neu-shadow-subtle

Default

--neu-shadow

Large

--neu-shadow-lg

Inset Small

--neu-shadow-inset-sm

Inset

--neu-shadow-inset

Small

--neu-shadow-sm

Buttons

Variants

Sizes

With Icons

States

Cards

Raised Card

Default neomorphic card with soft shadows

Cards float above the background with dual-tone shadows creating depth.

Pressed Card

Inset shadow for a recessed appearance

Pressed cards sink into the background using inset shadows.

Accent Card

With accent border highlight

Accent cards feature a subtle left border that draws attention.

Form Elements

We'll never share your email

This field is required

Please select an option

Supports markdown formatting

Badges

DefaultSecondarySuccessWarningDangerInfo

Loading States

Small

Medium

Large

Tooltips

Modal

Page Header

Example Page

List Items

Used for tasks, commitments, goals, and other list-based content

Complete project review

Due tomorrow

Pending

Weekly team meeting

Completed yesterday

Done

Review documentation

No deadline

Skeleton Loading

Basic Skeletons

Building blocks for loading states

Text lines

Single element

Skeleton Card

Pre-composed card placeholder

Toast Notifications

Toasts provide feedback for user actions with auto-dismiss and optional actions

Animations

Interactive Feedback

Framer Motion spring physics combined with neomorphic shadow transitions

Button Component

Combines scale animation with shadow transitions

<Button />

Card Component

Subtle 1.01x scale on hover

Hover me

<Card hover />

How it works:

  • Hover: Element scales up slightly (1.02x) with spring physics, shadow intensifies
  • Press: Element scales down (0.98x), shadow inverts from raised to inset
  • Release: Springs back to hover state with natural bounce

Stagger Animation

List items animate in sequence

First item
Second item
Third item
Fourth item

Enter/Exit Animation

Smooth mount and unmount transitions

Animated element

Theme Picker

Writrospect Design System