About Notespace
Notespace is a wiki and documentation platform layout showcasing a warm, editorial aesthetic. Think Notion meets a design magazine — built with Instrument Serif headings, cream backgrounds, and paper-like texture to create a book-like reading experience.
Layout Pattern
Sidebar + Tabbed Content (Wiki/Docs)
Collapsible sidebar navigation with spring-animated expand/collapse, content area with editorial page layouts, and warm cream color system.
Implemented Features
Warm Cream Editorial Theme
Custom CSS variables (--ns-*) create a warm, paper-like atmosphere. Off-white cream (#faf9f6) background with warm gray text (#2c2825) and violet-600 (#7c3aed) accent. Subtle atmospheric radial gradients add depth without harshness.
Instrument Serif + DM Sans Typography
Instrument Serif (--font-instrument) used for all headings, creating an editorial book-like feel. DM Sans (--font-dm-sans) for body text and UI elements. Font pairing evokes a design magazine aesthetic.
Motion Animations
Built with motion/react (successor to framer-motion). Sidebar expand/collapse uses spring physics (stiffness: 400, damping: 35). Active route indicator bar animates between items via layoutId. Staggered card entrances, fade-up sections, and page turn feel on hover interactions.
Signature Animation: Page Turn Feel
Cards have subtle hover lift animations (whileHover y: -2) with shadow depth changes, creating a paper-lifting page turn effect. AnimatePresence handles mount/unmount transitions for search, labels, and user info during sidebar collapse.
Recharts Activity Chart
Area chart showing editing activity over time using recharts with notespace-prefixed gradient IDs (notespace-area-fill). Custom tooltip styling matches the warm cream theme. Violet stroke with subtle gradient fill.
Interactive Sidebar
Collapsible sidebar with spring animation (motion.aside). Tooltip navigation in collapsed state. Active route highlighting with animated indicator bar. Paper-like texture via repeating linear gradient on sidebar background. Search, section labels, and user info animate in/out.
Wiki/Docs Domain Content
Dashboard: 4 stat cards (documents, team, edits, shared), recent documents list with word counts, team activity feed, and editing activity area chart. Sub-pages: Documents (list/grid toggle, search, tags), Templates (category filter, usage counts), Shared (permission badges, visibility), Archive (sortable table, restore), Settings (workspace config, notifications, export).
Theme Tokens
--ns-bg#faf9f6Background--ns-bg-warm#f5f3eeWarm background--ns-bg-sidebar#f0ede6Sidebar--ns-text#2c2825Primary text--ns-text-secondary#6b645aSecondary text--ns-text-muted#9b9488Muted text--ns-accent#7c3aedAccent (violet)--ns-surface#ffffffSurface--ns-border#e2ded5Border