🌀 FractalMind Design System & Component Registry

Welcome to the central nervous system of the FractalMind user interface. This repository contains the official Design System, component library, and distributable registry for the entire FractalMind Ecosystem.

This is a living design system, built with a code-first philosophy, embodying clarity, wisdom, and the transcendence of ego.

📜 Core Philosophy: The Glassmorphism Vibe

Our goal is to create a beautiful, consistent, and meaningful user experience that truly reflects the FractalMind vibe. We achieve this by building our design system directly in code, ensuring a single source of truth for all UI/UX across our products.

This system is built upon the principles of Glassmorphism to represent our core concepts of clarity, wisdom, and seeing through complexity. The translucent, blurred elements symbolize looking beyond the surface, while subtle shadows and vibrant backgrounds evoke enlightenment and profound insights.

For a deeper dive into the "why" behind our design choices, please see the Design Philosophy Document.

🚀 Purpose of This Repository

This repository serves multiple critical functions:

1. Source of Truth: It contains the source code for all official UI components (e.g., Button, Card, Input).
2. Design Tokens: It defines the core design tokens (colors, typography, spacing, shadows) that govern our visual language, ensuring consistency across all FractalMind products.
3. Component Registry: It is designed to be a distributable registry, allowing any FractalMind project to easily install and use these components via a CLI tool (e.g., shadcn/ui).
4. Documentation Hub: Provides comprehensive documentation and interactive examples for all components via Storybook.

✨ Key Features & Components

Our design system is built with a focus on reusability, accessibility, and a consistent aesthetic. Key features include:

• Glassmorphism Aesthetic: All components are styled to align with the translucent, layered, and depth-rich Glassmorphism principles.
• Semantic Versioning: Managed with Changesets for clear and consistent releases.
• Comprehensive API Documentation: Each component includes JSDoc comments for easy understanding and usage.
• Component States: Components are designed to handle various states (hover, focus, disabled, error) for robust user interaction.

Currently Implemented Base Components:

• Button: Interactive elements with various styles (default, destructive, outline, secondary, ghost, link) and sizes.
• Card: Flexible containers for grouping content, featuring prominent Glassmorphism effects.
• Input: Styled input fields for forms, including error state handling.
• Label: Accessible labels for form elements.
• Navbar: Fixed navigation bar with Glassmorphism styling.

🛠️ Getting Started

To set up the project locally and explore the components:

1. Clone the repository:

   git clone [repository-url]
   cd fractalmind-design-system

2. Install dependencies (using pnpm):

   pnpm install

3. Run the Next.js Development Server:

   pnpm dev

   (Access at http://localhost:3000)
4. Run Storybook Documentation:

   pnpm storybook

   (Access at http://localhost:6006 or the port indicated in the console)

📦 Build & Publishing

This design system is built using tsup for efficient compilation and changesets for version management and release automation.

• Build Library:

  pnpm run build:lib

  (Outputs compiled JavaScript and TypeScript declaration files to the dist folder.)
• Version Management: Use pnpm changeset to create new change files, and pnpm version to bump versions and generate changelogs.
• Publish to npm:

  pnpm release

  (Requires npm authentication and proper configuration. Note: This command will publish the package to the npm registry.)

📚 Documentation

A comprehensive documentation website is available via Storybook, providing interactive examples, detailed API documentation (generated from JSDoc comments), and usage guidelines for every component.

📈 Project Status

Status: 🟢 Ready for Publishing

This project has completed its initial development phases and is ready for integration and distribution.

🤝 Contribution

We welcome contributions to the FractalMind Design System. Please refer to our Contribution Guidelines (coming soon) for more details.

📧 Contact

For any inquiries, please contact [email protected].