Skip to main content

Documentation Index

Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Nebux Design System

A production-ready Flutter design system that provides consistent theming, typography, spacing, and UI components for modern applications. Built with Material 3 and powered by Google Fonts.

​
What is Nebux Design System?

Nebux Design System is a comprehensive Flutter package that gives you everything you need to build beautiful, consistent user interfaces:
  • Complete theme system with light/dark mode support
  • Semantic color tokens that adapt to your brand
  • Typography system powered by Google Fonts (Montserrat)
  • Pre-built components ready to use out of the box
  • Flexible and customizable to match your design needs

​
Key features

Theme system

Complete Material 3 theming with light/dark modes, semantic color tokens, and custom theme support via JSON/TOML

Typography

Role-based text styles (heading, section, content, paragraph, caption, label) with Google Fonts integration

UI components

Production-ready widgets including buttons, text fields, scaffolds, network images, and skeleton loaders

Developer experience

BuildContext extensions, spacing constants, padding/margin helpers, and utility functions

​
Theme preview

Here’s a quick look at how the theme system works: 
import 'package:flutter/material.dart';
import 'package:nebux_design_system/nebux_design_system.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: NebuxTheme.createThemeData(
        isDark: false,
        colors: NebuxColors.standardLight(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      darkTheme: NebuxTheme.createThemeData(
        isDark: true,
        colors: NebuxColors.standardDark(),
        fontSize: NebuxFontSize.standard(),
        typography: NebuxTypography.standard(),
      ),
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}

​
Semantic color system

Access theme colors via intuitive context extensions: 
final colors = context.nebuxColors;

// Brand colors
colors.primary           // Main brand color
colors.secondary         // Secondary actions
colors.accent            // Highlights

// State colors
colors.success           // Positive states
colors.warning           // Caution states
colors.error             // Error states
colors.info              // Informational

// Surface colors
colors.background        // App background
colors.surface           // Card/surface backgrounds
colors.textPrimary       // Primary text
colors.textSecondary     // Secondary text

// Visual enhancements
colors.primaryGradient   // Brand gradient
colors.secondaryGradient // Secondary gradient

​
Get started

Installation

Add Nebux Design System to your Flutter project

Quick start

Build your first screen with the design system

Components

Explore all available UI components

Theming

Learn how to customize colors and typography

​
Why Nebux Design System?

All components follow the same design principles, ensuring visual consistency across your entire application.
Pre-built components and utilities let you focus on building features instead of reinventing UI patterns.
Used in production applications with comprehensive testing and continuous integration.
Every aspect can be customized - from colors and typography to component behavior.
Built with full Dart null safety and uses Freezed for immutable data models.

​
Community and support