Noetic Labs Design System

Introduction

Welcome to the gallery for the Noetic Labs Design System (NLDS) Svelte component library. This is a collection of reusable UI components developed by Noetic Labs, built with Svelte 5 for use within our SvelteKit applications.

Purpose

NLDS Svelte provides a foundational set of accessible, well-documented, and consistent components to accelerate UI development at Noetic Laboratories. By establishing a shared visual and interactive language, we aim to create cohesive and high-quality user experiences across our projects.

Important Note: This library currently utilizes SvelteKit-specific features and conventions. As such, it is intended for use within SvelteKit projects and may not function correctly in standalone Svelte applications at this time.

Inspiration

Our design system is heavily inspired by the excellent work done by the team behind IBM's Carbon Design System. While NLDS is tailored specifically to our needs and context at Noetic Laboratories and is not a direct clone, we strive to embody Carbon's core principles:

  • Consistency: Providing predictable and uniform UI elements.
  • Modularity: Building with independent, reusable blocks.
  • Clarity: Ensuring interfaces are intuitive and easy to understand.
  • Accessibility: Adhering to accessibility standards to support all users.

Key Features

  • Modern Foundation: Built entirely with Svelte 5.
  • Type Safety: Includes TypeScript definitions for enhanced developer experience and robustness.
  • Modular Design: Components are designed to be imported and used independently.
  • Core Styling Included: A base stylesheet (`core.css`) provides foundational styles and CSS custom properties for theming[4].

Using This Gallery

This interactive gallery serves as the central documentation hub for NLDS Svelte. Here you can:

  • Explore available components and see them in action.
  • Understand design guidelines for foundations like Colors and Typography.
  • View usage examples and API documentation for each component.
  • Copy code snippets to integrate components into your projects quickly.

Use the navigation menu to browse through the different sections. We encourage developers at Noetic Laboratories to familiarize themselves with the system and utilize these resources to build consistent and efficient UIs.